aurelia / aurelia/testing

How to use async/await syntax with this repo

Open
#65 3 comments 1 reaction 0 assignees View on GitHub
question
Dominant language
TypeScript
Stars
38
Forks
27
PR merge metrics
No merged PRs in 30d

Description

This `aurelia/testing` repo is based on JSPM. I am trying to get `async/await` syntax working with this JSPM setup so that we can re-write the `component-tester.spec.js` as the following:

```js
import {StageComponent} from '../src/component-tester';
import {bootstrap} from 'aurelia-bootstrapper';

describe('ComponentTester', () => {
let component;

beforeEach(async () => {
component = StageComponent
.withResources('test/resources/my-component')
.inView(`






Number two

`)
.boundTo({ firstName: 'Bob' });
await component.create(bootstrap);
});

it('should wait for a child element', () => {
component.waitForElement('my-component').then((element) => {
expect(element.nodeName.toLowerCase()).toEqual('my-component');
});
});

it('should wait for multiple child elements', () => {
component.waitForElements('.component-tester-spec').then((elements) => {
expect(elements.length).toBe(2);
});
});

afterEach(() => {
component.dispose();
});
});
```

As you can see, using `async/await` in the `beforeEach()` eliminates the necessity to repeat `component.create(bootstrap).then(() => {` in all the specs. Also, calling `done()` is not required in every spec.
Contrast the above code with the current code:

``` js
import {StageComponent} from '../src/component-tester';
import {bootstrap} from 'aurelia-bootstrapper';

describe('ComponentTester', () => {
let component;

beforeEach(() => {
component = StageComponent
.withResources('test/resources/my-component')
.inView(`






Number two

`)
.boundTo({ firstName: 'Bob' });
});

it('should wait for a child element', (done) => {
component.create(bootstrap).then(() => {
component.waitForElement('my-component').then((element) => {
expect(element.nodeName.toLowerCase()).toEqual('my-component');
done();
});
});
});

it('should wait for multiple child elements', (done) => {
component.create(bootstrap).then(() => {
component.waitForElements('.component-tester-spec').then((elements) => {
expect(elements.length).toBe(2);
done();
});
});
});

afterEach(() => {
component.dispose();
});
});
```

Note that I am aware that `async/await` setup is currently working in `aurelia/skeleton` repo but I am trying to get `async/await` syntax to work with this JSPM based repo.

Contributor guide

Open the contributing guide

Research direction

Start with the JSPM setup and test/component-tester.spec.js, then compare the async/await setup in the aurelia/skeleton repository. Verify how the example beforeEach and specs run in this repo; done means the shown async/await form works without repeated create(...).then(...) or done() calls.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
testing
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.