使用可绑定和依赖项测试aurelia customElement

我使用Aurelia的1.0.0-beta.1并尝试编写一些单元测试.

我有这样的customElement:

...
@inject(BindingEngine, Class1, Class2)
export class MyElement{

@bindable data;

constructor (bindingEngine, class1, class2) {
    ...
}
...

我想创建一个可测试的MyElement实例,其中包含Class1和Class2的Mocks以及可绑定字段数据.

到目前为止,我发现的是,由于此处描述的 API更改,使用BehaviorInstance的示例不再有效.

在查看aurelia-templating的测试之后,我的方法现在看起来像这样:

import {TemplatingEngine} from 'aurelia-templating';
import {Container} from 'aurelia-dependency-injection';
import {BindingEngine} from 'aurelia-binding';

import { Class1Mock, Class2Mock } from './myMocks';

describe('The MyElement customElement', () => {
    let container;
    let bindingEngine;
    let templateEngine;

    let myElement;

    beforeEach(() => {
        container = new Container();

        //Add my mocks to DI container?
        container.registerInstance('Class1', new Class1Mock());
        container.registerInstance('Class2', new Class2Mock());

        templateEngine = container.get(TemplatingEngine);
        bindingEngine  = container.get(BindingEngine);

        myElement = templateEngine.createViewModelForUnitTest(MyElement);
    }

    it('should be initialized', (done) => {

        expect(myElement).not.toBe(null);
        expect(myElement).not.toBe(undefined);
        done();
    });
}

它已经无法从DI容器请求bindingEngine或者在创建MyElement-VieModel时被遗忘

Error: Error invoking TaskQueue. Check the inner error for details.
    ------------------------------------------------
    inner error: TypeError: _aureliaPal.DOM.createMutationObserver is not a function
        at makeRequestFlushFromMutationObserver (.../jspm_packages/npm/aurelia-task-queue@1.0.0-beta.1/aurelia-task-queue.js:13:36)
        at new TaskQueue (.../jspm_packages/npm/aurelia-task-queue@1.0.0-beta.1/aurelia-task-queue.js:59:41)
        at Object.invoke (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:334:14)
        at InvocationHandler.invoke (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:309:168)
        at Container.invoke (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:557:25)
        at StrategyResolver.get (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:145:37)
        at Container.get (../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:488:41)
        at Object.invoke (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:354:33)
        at InvocationHandler.invoke (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:309:168)
        at Container.invoke (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:557:25)
        at StrategyResolver.get (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:145:37)
        at Container.get (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:488:41)
        at Object.invoke (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:354:33)
        at InvocationHandler.invoke (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:309:168)
        at Container.invoke (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:557:25)
        at StrategyResolver.get (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:145:37)
        at Container.get (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:488:41)
        at new AggregateError (.../jspm_packages/npm/aurelia-pal@1.0.0-beta.1/aurelia-pal.js:20:13)
        at Container.invoke (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:559:15)
        at Object.invoke (.../jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1/aurelia-dependency-injection.js:344:33)

那么,我该怎么做呢？

------编辑:

Michael Malone的答案非常完美.对于任何提出这个问题的人来说,这就是我的例子:

import {TemplatingEngine} from 'aurelia-templating';
import {Container} from 'aurelia-dependency-injection';
import {BindingEngine} from 'aurelia-binding';
import {initialize} from 'aurelia-pal-browser';

import { Class1Mock, Class2Mock } from './myMocks';

describe('The MyElement customElement', () => {
    let container;
    let bindingEngine;
    let templateEngine;

    let myElement;

    initialize();

    beforeEach(() => {
        container = new Container();

        //Add my mocks to DI container?
        container.registerInstance('Class1', new Class1Mock());
        container.registerInstance('Class2', new Class2Mock());

        templateEngine = container.get(TemplatingEngine);
        bindingEngine  = container.get(BindingEngine);

        myElement = templateEngine.createViewModelForUnitTest(MyElement);
    }

    it('should be initialized', (done) => {

        expect(myElement).not.toBe(null);
        expect(myElement).not.toBe(undefined);
        done();
    });
}

Michael Malo.. 5

在测试的某个地方,您需要这样做:

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

initialize();

(因为它是内联执行的,它只需要在你的测试中的某个地方.我们将它放在一个单独的initialize.spec.js文件中)

在测试的某个地方,您需要这样做:

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

initialize();

(因为它是内联执行的,它只需要在你的测试中的某个地方.我们将它放在一个单独的initialize.spec.js文件中)