What is the correct way to initialise the validation plugin during unit tests?

[stevies]

Question.

I am using aurelia with webpack. Current versions of everything.

What is the correct way to initialise the validation plugin during unit tests?

I have tried something like this - setup.js:

import 'aurelia-polyfills';
import {initialize} from 'aurelia-pal-browser';
import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper-webpack';

initialize();

let component;

beforeEach(function () {
  component = StageComponent
    .withResources();
  component.bootstrap(aurelia => {
    aurelia.use
      .plugin('aurelia-validation');
  });
});

afterEach(function () {

});

But that does not seem to work (maybe I have missed something important).

When I start my tests, I get error:

START:
28 10 2016 09:25:26.895:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
28 10 2016 09:25:26.896:INFO [launcher]: Launching browser Chrome with unlimited concurrency
28 10 2016 09:25:26.931:INFO [launcher]: Starting browser Chrome
28 10 2016 09:25:28.441:INFO [Chromium 53.0.2785 (Ubuntu 0.0.0)]: Connected on socket /#KzQZITDoJTIuxFbZAAAA with id 93068450
Chromium 53.0.2785 (Ubuntu 0.0.0) ERROR
  Uncaught Error: Did you forget to add ".plugin('aurelia-validation)" to your main.js?
  at webpack:///~/aurelia-validation/dist/commonjs/implementation/validation-rules.js:350:0 <- spec-bundle.js:16402
Chromium 53.0.2785 (Ubuntu 0.0.0) ERROR
  Uncaught Error: Did you forget to add ".plugin('aurelia-validation)" to your main.js?
  at webpack:///~/aurelia-validation/dist/commonjs/implementation/validation-rules.js:350:0 <- spec-bundle.js:16402

This may be related to issues with aurelia-bootstrapper-webpack - there are defects raised there.

But I am wondering if there is any other way to make sure the plugin is initialised. This is preventing all unit testing taking place in my app.

[jdanyow]

try this:

import {StageComponent, ComponentTester} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';

describe('something', () => {
  let component;
  beforeAll(done => {
    component = StageComponent.withResources().inView('<div></div>').boundTo({});
    component.bootstrap(aurelia => aurelia.use.standardConfiguration().plugin('aurelia-validation'));
    component.create(bootstrap).then(done);
  });
  ...
  ...
  afterAll(() => {
    component.dispose();
  });
});

[stevies]

Thanks.

Tried that - only with:

import {bootstrap} from 'aurelia-bootstrapper-webpack';

If I add a simple test - eg:

import {StageComponent, ComponentTester} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper-webpack';

describe('something', () => {
  let component;
  beforeEach(done => {
    component = StageComponent.withResources().inView('<div></div>').boundTo({});
    component.bootstrap(aurelia => aurelia.use.standardConfiguration().plugin('aurelia-validation'));
    component.create(bootstrap).then(done);
  });

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

  //it('test', () => {
  //  expect(true).toBeTruthy();
  //});

  it('test', (done) => {
    component.create(bootstrap).then(() => {
      expect(true).toBeTruthy();
      done();
    });
  });

});

It blows up with error:

01 11 2016 08:09:59.147:INFO [Chromium 53.0.2785 (Ubuntu 0.0.0)]: Connected on socket /#AtMg4uhTj0Nno7coAAAA with id 89370522
WARN: '%cUnhandled rejection TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:57:37)
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29791:24
From previous event:
    at Promise.then._this2.modulesBeingLoaded.(anonymous function) (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29790:81)
From previous event:
    at WebpackLoader._import (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29776:18)
    at WebpackLoader.loadModule (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29834:17)
    at _loadPlugin (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29368:19)
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29361:14
From previous event:
    at loadPlugin (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29360:73)
    at next (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29621:18)
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29628:14
From previous event:
    at FrameworkConfiguration.apply (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29613:42)
    at Aurelia.start (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29230:21)
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:13825:24
From previous event:
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:13820:56
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29068:12
    at Array.<anonymous> (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:28998:19)
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29058:27
From previous event:
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29050:44
From previous event:
    at run (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29047:24)
    at Object.<anonymous> (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29072:1)
    at Object.aurelia-bootstrapper-webpack (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29073:30)
    at __webpack_require__ (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:57:38)
    at Object.174 (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:14003:1)
    at __webpack_require__ (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:57:38)
    at 0 (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:140:18)
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:143:10', 'color: red'
WARN: '%cUnhandled rejection TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:57:37)
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29791:24
From previous event:
    at Promise.then._this2.modulesBeingLoaded.(anonymous function) (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29790:81)
From previous event:
    at WebpackLoader._import (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29776:18)
    at WebpackLoader.loadModule (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29834:17)
    at _loadPlugin (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29368:19)
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29361:14
From previous event:
    at loadPlugin (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29360:73)
    at next (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29621:18)
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29628:14
From previous event:
    at FrameworkConfiguration.apply (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29613:42)
    at Aurelia.start (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29230:21)
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:13825:24
From previous event:
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:13820:56
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29068:12
    at Array.<anonymous> (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:28998:19)
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29058:27
From previous event:
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29050:44
From previous event:
    at run (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29047:24)
    at Object.<anonymous> (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29072:1)
    at Object.aurelia-bootstrapper-webpack (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:29073:30)
    at __webpack_require__ (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:57:38)
    at Object.174 (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:14003:1)
    at __webpack_require__ (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:57:38)
    at 0 (http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:140:18)
    at http://localhost:9876/base/spec-bundle.js?69177ed4398603d2c5a725b533430964f19b1a29:143:10', 'color: red'
  something
    ✖ test
Chromium 53.0.2785 (Ubuntu 0.0.0) the Accreditations module test FAILED
    Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
    Error: Cannot call ComponentTester.dispose() before ComponentTester.create()
        at ComponentTester.dispose (webpack:///~/aurelia-testing/dist/commonjs/component-tester.js:91:0 <- spec-bundle.js:13852:13)
        at Object.<anonymous> (webpack:///test/unit/model/accreditations.spec.js:14:14 <- spec-bundle.js:13050:15)

When I import a model class to test that uses ValidationRules into the Jasmine test - eg:

import {ValidationRules} from 'aurelia-validation';

export class Something {
  name = '';
}

ValidationRules
  .ensure('name').required()
  .on(Something);

Then simply adding the import to the Jasmine test

import {Something} from '../../../src/model/something';  

then I still get the error.

  Uncaught Error: Did you forget to add ".plugin('aurelia-validation)" to your main.js?
  at webpack:///~/aurelia-validation/dist/commonjs/implementation/validation-rules.js:350:0 <- spec-bundle.js:16402

No other tests run at all in that scenario.

I'm guessing this is a problem with aurelia-bootstrapper-webpack - there are open issues there.

But thank you for confirming the correct approach to loading the tester environment. If it's not working, at least that points to where the problem might be.

[EisenbergEffect]

@niieani Will this be fixed with the new universal bootstrapper?

[niieani]

Not by the new bootstrapper, but by the new webpack plugin/loader suite. The fixes for this (including an example test) are already in the experimental skeleton.

[EisenbergEffect]

Ok, closing as fixed. My hope is we get all this out by early next week.

[fracz]

Is it fixed? How the test setup is supposed to look like now? None of the proposed solutions here works for me.

I don't even use a webpack. It's in JSPM configuration.

Example:

my-model.ts:

import {ValidationRules} from "aurelia-validation";

export class MyModel {
  label: string;
}

ValidationRules
  .ensure('label').required()
  .on(MyModel);

my-model.spec.ts:

import {MyModel} from "./my-model";
import {StageComponent} from "aurelia-testing";
import {bootstrap} from "aurelia-bootstrapper";

describe('MyModel', () => {
  let component;
  beforeAll(done => {
    component = StageComponent.withResources().inView('<div></div>').boundTo({});
    component.bootstrap(aurelia => aurelia.use.standardConfiguration().plugin('aurelia-validation'));
    component.create(bootstrap as any).then(done);
  });
  afterAll(() => {
    component.dispose();
  });

  it("creates new instance", () => {
    let model = new MyModel();
  });
});

The output:

Error: (SystemJS) Did you forget to add ".plugin('aurelia-validation)" to your main.js?
	Error: Did you forget to add ".plugin('aurelia-validation)" to your main.js?
	    at FluentEnsure.assertInitialized (http://localhost:9876/base/jspm_packages/npm/aurelia-validation@0.13.1/implementation/validation-rules.js:349:19)
	    at FluentEnsure.ensure (http://localhost:9876/base/jspm_packages/npm/aurelia-validation@0.13.1/implementation/validation-rules.js:318:18)
	    at Function.ValidationRules.ensure (http://localhost:9876/base/jspm_packages/npm/aurelia-validation@0.13.1/implementation/validation-rules.js:368:61)

[fracz]

As a workaround, if the validation rules is not the thing that is going to be tested, one can opt-out them in the code like:

export class MyModel {
  label: string;
}

if ((ValidationRules as any).parser) {
  ValidationRules
    .ensure('label').required()
    on(MyModel);
}

This at least allows the tests that use the model run.

[jmzagorski]

we really need a complete JSPM example from @fracz first comment. Using JSPM and a view-model (not a custom element) leaves me stranded now that all my tests will not run when aurelia-validation is added to the view-model. i have an open question on stackoverflow. Thank you.

http://stackoverflow.com/questions/41245102/how-to-load-aurelia-validation-plugin-in-karma-test-not-on-a-custom-element

[bulldetektor]

For what it's worth; I've added a feature request for a stubbed ValidationController over in the aurelia-testing repo (aurelia/testing#63).