How to use async/await syntax with this repo #65
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:
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(`<div>
<div class="component-tester-spec">
<my-component first-name.bind="firstName"></my-component>
</div>
<div class="component-tester-spec">
Number two
</div>
</div>`)
.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:
import {StageComponent} from '../src/component-tester';
import {bootstrap} from 'aurelia-bootstrapper';
describe('ComponentTester', () => {
let component;
beforeEach(() => {
component = StageComponent
.withResources('test/resources/my-component')
.inView(`<div>
<div class="component-tester-spec">
<my-component first-name.bind="firstName"></my-component>
</div>
<div class="component-tester-spec">
Number two
</div>
</div>`)
.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.