unit-testing - 使用可绑定(bind)和依赖项测试 aurelia customElement

Question

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

我有一个像这样的自定义元素:

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

@bindable data;

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

我想用 Class1 和 Class2 的 Mocks 创建一个 MyElement 的可测试实例和工作可绑定(bind)字段数据。

到目前为止，我发现的是，由于 API 更改，带有 BehaviorInstance 的示例不再有效 described here .

在查看 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 容器请求 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 文件中)