How to use async/await syntax with this repo

[nashwaan]

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.

[jdanyow]

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');
});

[nashwaan]

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/aurelia-testing@1.0.0-beta.3.0.1/component-tester.js:157:30)
        at wait (jspm_packages/npm/aurelia-testing@1.0.0-beta.3.0.1/wait.js:21:21)
        at waitFor (jspm_packages/npm/aurelia-testing@1.0.0-beta.3.0.1/wait.js:39:9)
        at ComponentTester.waitForElement (jspm_packages/npm/aurelia-testing@1.0.0-beta.3.0.1/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/aurelia-testing@1.0.0-beta.3.0.1/component-tester.js:165:30)
        at wait (jspm_packages/npm/aurelia-testing@1.0.0-beta.3.0.1/wait.js:21:21)
        at waitFor (jspm_packages/npm/aurelia-testing@1.0.0-beta.3.0.1/wait.js:39:9)
        at ComponentTester.waitForElements (jspm_packages/npm/aurelia-testing@1.0.0-beta.3.0.1/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.

[nashwaan]

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/jest-jasmine2@19.0.2/jasmine-async.js
        Error: XHR error (404 Not Found) loading jspm_packages/npm/jest-jasmine2@19.0.2/jasmine-async.js
        Error loading jspm_packages/npm/jest-jasmine2@19.0.2/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/jest-jasmine2@19.0.2/jasmine-async.js
        Error: XHR error (404 Not Found) loading jspm_packages/npm/jest-jasmine2@19.0.2/jasmine-async.js
        Error loading jspm_packages/npm/jest-jasmine2@19.0.2/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?