Question

我正在使用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更改described here，使用BehaviorInstance的示例不再有效。

查看Tests from 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 Container请求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();
    });
}

Answer 1

在测试的某个地方，您需要这样做：

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

initialize();

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

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

1 个答案: