Aurelia-Testing with Jasmine/Karma Fails

Help Requests
1

We have attempted to get the example running as described by: https://aurelia.io/docs/testing/components#getting-started.

However, the code inside the component.create(bootstrap).then() block does not execute. As a consequence of the component creation failing, component.dispose(); also fails, since it cannot dispose of a component that has not been created.

Using Chrome, the console displays ‘Uncaught (in promise) Error: Unable to find module with ID: aurelia-pal-browser’.

We are unable to resolve this. The platform is Windows 10, and we are using aurelia-testing (1.0.0-beta.4.0.0) and aurelia-pal-browser (1.8.0).

Any help would be appreciated.

2

So the actual code snippet is this one:

import {StageComponent} from ‘aurelia-testing’;
import {bootstrap} from ‘aurelia-bootstrapper’;

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

  beforeEach(() => {
    component = StageComponent
      .withResources('my-component')
      .inView('<my-component first-name.bind="firstName"></my-component>')
      .boundTo({ firstName: 'Bob' });
  });

  it('should render first name', done => {
    component.create(bootstrap).then(() => {
      const nameElement = document.querySelector('.firstName');
      expect(nameElement.innerHTML).toBe('Bob');
      done();
    }).catch(e => { console.log(e.toString()) });
  });

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

Interestingly, there is a reference to the PAL browser inside the webpack. So why can’t the framework find it?

2 Likes
3

Try it with:

 component = StageComponent
      .withResources(PLATFORM.moduleName('my-component'))
4

There’s no functional difference with that change in. Still get the same error.

I don’t believe it is the test example code. I think the framework has an issue for some reason. Here’s the error and last part of the stack trace (i.e. framework code issuing the error).

Capture

Capture2
Capture2.JPG967×585 86 KB

5

And in our webpack, app.js, here is the only reference I can find to the PAL browser.

Any thoughts? Does that look correct?

Capture3
Capture3.JPG972×525 85.8 KB

6

Let’s try a different question.

Has anybody ever got the aurelia-testing to work with Jasmine/Karma, and is anyone actually actively using it to verify their software with a good degree of success?

7

Yes. I did have some pain to get it working - early versions of the aurelia-testing did not play nicely with Webpack, Validation plugin, etc. But it all appears to be solved now. The only thing that causes some issues today is that Aurelia Store plugin annotations mess around with the loading lifecycle - but you can work around that.

Saying that, I’ve recently dumped Jasmine/Karma for Jest. Seems a bit easier to work with.

8

I just create a new project with Aurelia CLI. Webpack. Jasmine/Karma.

Added these files: src\resources\elements\my-component.js

import {bindable, inlineView} from 'aurelia-framework';

@inlineView(`
<template>
  <span class="firstName" textcontent.bind="firstName"></span>
</template>
`)
export class MyComponent {
  @bindable
  firstName;
}

and the test: test\unit\resources\elements\my-component.spec.js

import 'aurelia-polyfills';
import 'babel-polyfill';
import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';
import {PLATFORM} from 'aurelia-pal';

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

  beforeEach(() => {
    component = StageComponent
      .withResources(PLATFORM.moduleName('resources/elements/my-component'))
      .inView('<my-component first-name.bind="firstName"></my-component>')
      .boundTo({firstName: 'Bob'});
  });

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

  it('should render first name', async () => {
    await component.create(bootstrap);
    const nameElement = document.querySelector('.firstName');
    expect(nameElement.innerHTML).toBe('Bob');
  });
});

No other changes.

Ran yarn run test from command line.

26 09 2018 21:23:46.010:INFO [karma]: Karma v2.0.5 server started at http://0.0.0.0:9876/
26 09 2018 21:23:46.018:INFO [launcher]: Launching browser Chrome with unlimited concurrency
26 09 2018 21:23:46.117:INFO [launcher]: Starting browser Chrome
26 09 2018 21:23:47.843:INFO [Chrome 69.0.3497 (Windows 10 0.0.0)]: Connected on socket z1KkxxHaa3WjlzDoAAAA with id 72166132
Chrome 69.0.3497 (Windows 10 0.0.0): Executed 0 of 2 SUCCESS (0 secs / 0 secs)
  MyComponent
Chrome 69.0.3497 (Windows 10 0.0.0): Executed 1 of 2 SUCCESS (0 secs / 0.057 secs)
  the app
Chrome 69.0.3497 (Windows 10 0.0.0): Executed 2 of 2 SUCCESS (0.122 secs / 0.059 secs)

Finished in 0.122 secs / 0.059 secs @ 21:23:48 GMT+0100 (British Summer Time)

SUMMARY:
√ 2 tests completed
TOTAL: 2 SUCCESS

=============================== Coverage summary ===============================
Statements   : 100% ( 2/2 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 1/1 )
Lines        : 100% ( 2/2 )
================================================================================
Done in 9.27s.

And test fail as expected if I mutate either the inline HTML or original JS code.

9

When you want to add the aurelia validation plugin (and perhaps others), you need to do some more crap to get that working.

I have a setup.js file for my tests rather than copy it all into each test module. This is the contents:

import 'aurelia-polyfills';
import {initialize} from 'aurelia-pal-browser';
import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';
import {CustomValidationRules} from 'resources/custom-validation-rules';

initialize();

beforeAll(function(done) {
  this.validationComponent = StageComponent.withResources().inView('<div></div>').boundTo({});
  this.validationComponent.bootstrap(aurelia => aurelia.use.standardConfiguration().plugin('aurelia-validation'));
  this.validationComponent.create(bootstrap).then(done);
  CustomValidationRules.init();
});

afterAll(function() {
  this.validationComponent && this.validationComponent.dispose();
});

Looking at this again, the:

import {initialize} from 'aurelia-pal-browser';
initialize();

are maybe not needed.

10

I just want to point out that you don’t necessarily need aurelia-cli to run your test. You just need to setup the karma, webpack, and jasmine correctly.

This repo is an example a working setup. Pay special attention to the karma.conf.js, tests/karma-bundle.js, and tests/webpack.config.js (based on the generated project by aurelia-cli). Note that this is just an example, and you can modify the dependencies as per your need.

1 Like
11

Thanks for the replies.

We didn’t have much in the way of success, so we’re having a look at http://devexpress.github.io/testcafe/

1 Like
12

I just cut-and-pasted the source from the link https://aurelia.io/docs/testing/components#testing-a-custom-element into src/my-component.html, src/my-component.js and src/my-component.spec.js and ran npm run test and everything worked.

The out-of-the-box setup uses Jest (and not Karma)

Perhaps things have fixed themselves since this was posted.

1 Like