Skip to content

Commit

Permalink
doc(testing/components): Clarify Testing a Custom Element
Browse files Browse the repository at this point in the history
Removed inform box specific to Karma as there is no documentation at all about
how to set Karma up.

Fixes aurelia#441
  • Loading branch information
baerrach committed Jul 15, 2019
1 parent 06e9420 commit 2d53a5d
Showing 1 changed file with 5 additions and 8 deletions.
13 changes: 5 additions & 8 deletions current/en-us/9. testing/1. components.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,13 @@ Once you've got the library installed, you can use it in a unit test. In the fol

Let's start with a simple custom element that we want to test:

```HTML A Custom Element's View
```HTML my-component.html A Custom Element's View
<template>
<div class="firstName">${firstName}</div>
</template>
```

```JavaScript A Custom Element's View-Model
```JavaScript my-component.js A Custom Element's View-Model
import {bindable} from 'aurelia-framework';

export class MyComponent {
Expand All @@ -43,7 +43,7 @@ export class MyComponent {

In order to test that the component renders expected HTML, based on what the view is bound to, we can write following test:

```JavaScript A Custom Element Test
```JavaScript my-component.spec.js A Custom Element Test
import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';

Expand Down Expand Up @@ -81,16 +81,13 @@ import {StageComponent} from 'aurelia-testing';

```JavaScript Staging The Element
component = StageComponent
.withResources('src/my-component')
.withResources('my-component')
.inView('<my-component first-name.bind="firstName"></my-component>')
.boundTo({ firstName: 'Bob' });
```

`StageComponent` comes with one property, `withResources`, that lets you start off the staging with a fluent API. `withResources` lets you specify which resource or resources for Aurelia to register. It takes either a string for registering one single resource or an Array of strings for registering multiple resources. `inView` lets you provide the html markup to be run. This is just a standard Aurelia view where you can do all the data binding you are used to in a full-blown Aurelia application. `boundTo` lets you provide a test `viewModel` with the data that the view will get bound to. In this example, the staging of the component is done in Jasmine's `beforeEach` method in order to reuse the same setup for multiple tests.

> Info
> If you are using `karma` and your configuration already has a path for `'*': 'src/*'` set you may not need to use `src/`, and just `my-component`.
Next, we come to the actual test where we call `create` on the `ComponentTester`. Create will kick everything off and bootstrap the mini Aurelia application, configure it with `standardConfiguration` (we will take a look later at how you can run with your own configuration), register provided resources as global resources, start the application and finally render your component so you can assert the expected behavior. In this case, we want to make sure our `firstName` property gets rendered correctly in the HTML by selecting the `div` tag via it's class name. We use `document.querySelector('.firstName');` to grab that and then check that its innerHTML is `Bob`. Next we call Jasmine's `done` function to tell Jasmine that the test is complete. Calling `done` is needed since the `create` method is asynchronous and returns a Promise.

Finally, we call `dispose` on our `ComponentTester` instance. This will clean up the DOM so our next test will start out with a clean document. That's pretty much all there is to it. Easy right? Imagine doing the same assert with stand alone unit tests that run outside of Aurelia. It would be pretty difficult, especially for a more complex component.
Expand Down Expand Up @@ -397,4 +394,4 @@ waitFor(() => $('.firstName')).then((nameElement) => {
```JavaScript Waiting for an absent element with timeout
component.waitForElement('.firstName', {present: false, timeout: 2000}).then(done);
```
```

0 comments on commit 2d53a5d

Please sign in to comment.