testing
testing copied to clipboard
How to use async/await syntax with this repo
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.
Is there an error your hitting? Problem transpiling async/await with babel? I think there's might be a problem with your it(...)
implementations. They should be something like this:
it('should wait for a child element', async () => {
await component.create(bootstrap);
const element = component.waitForElement('my-component');
expect(element.nodeName.toLowerCase()).toEqual('my-component');
});
I get these errors:
FAILED TESTS:
× should wait for a child element
Chrome 58.0.3029 (Windows 10 0.0.0)
TypeError: Cannot read property 'querySelector' of undefined
at eval (jspm_packages/npm/[email protected]/component-tester.js:157:30)
at wait (jspm_packages/npm/[email protected]/wait.js:21:21)
at waitFor (jspm_packages/npm/[email protected]/wait.js:39:9)
at ComponentTester.waitForElement (jspm_packages/npm/[email protected]/component-tester.js:156:32)
at Object.it (src/custom-components/my-component.spec.js:61:19)
× should wait for multiple child elements
Chrome 58.0.3029 (Windows 10 0.0.0)
TypeError: Cannot read property 'querySelectorAll' of undefined
at eval (jspm_packages/npm/[email protected]/component-tester.js:165:30)
at wait (jspm_packages/npm/[email protected]/wait.js:21:21)
at waitFor (jspm_packages/npm/[email protected]/wait.js:39:9)
at ComponentTester.waitForElements (jspm_packages/npm/[email protected]/component-tester.js:164:32)
at Object.it (src/custom-components/my-component.spec.js:68:19)
I don't get any transpliation errors because of async/await syntax.
Also, I am using async/await
syntax in beforeEach()
as you can see in my first post and I am not using this syntax in it()
specs as I am trying to avoid manually constructing component component.create(bootstrap)
in every spec.
In fact, I used the same method used for creating component as in this welcome.spec.js test file which works without issues.
Looking at the webpack sekeleton, I think the way @niieani solved it is by using jasmine async in karma-bundle.js:
import {install as installJasmineAsync} from 'jest-jasmine2/jasmine-async';
installJasmineAsync(global); // enable running Promise-returning tests
I tried to add these lines in the test setup.js file.
To install jest-jasmine2
, I added following line in package.json
under jspm.devDependencies
section:
"jest-jasmine2": "19.0.2"
and ran jspm install
command (not sure if this the correct way of installing packages for jspm).
Now I get these errors:
Chrome 58.0.3029 (Windows 10 0.0.0) ERROR
Error: (SystemJS) XHR error (404 Not Found) loading jspm_packages/npm/[email protected]/jasmine-async.js
Error: XHR error (404 Not Found) loading jspm_packages/npm/[email protected]/jasmine-async.js
Error loading jspm_packages/npm/[email protected]/jasmine-async.js as "jest-jasmine2/jasmine-async" from test-unit/pretest-jspm.js
Chrome 58.0.3029 (Windows 10 0.0.0) ERROR
Error: (SystemJS) XHR error (404 Not Found) loading jspm_packages/npm/[email protected]/jasmine-async.js
Error: XHR error (404 Not Found) loading jspm_packages/npm/[email protected]/jasmine-async.js
Error loading jspm_packages/npm/[email protected]/jasmine-async.js as "jest-jasmine2/jasmine-async" from test-unit/pretest-jspm.js
Maybe my approach is wrong, but how to get async/await
for constructing component under jspm similar to welcome.spec.js?