How to use async/await syntax with this repo
- 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
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