Question

我目前面临着测试代码的问题。一个例子比10万字更好，所以在这里。

describe('Initilazing', () => {

    let $componentController, scope;
    beforeEach(inject((_$componentController_, _$rootScope_) => {
        $componentController = _$componentController_;
        scope = _$rootScope_.$new();
        scope.name = 'Testing...';
    }));

    it('Should have the parent scope double binded', () => {
        let $ctrl = $componentController('sasInput', scope, { api: scope.sasInput });
        $ctrl.onInit();

        scope.$apply();
        expect(scope.sasInput).not.toBeUndefined();
    });
});


class SasInputController() {
    constructor() {
      'ngInject';
    }


    $onInit() {
        this.api = { clear: this.clear.bind(this) };
    }

    clear() {
        this.input = null;
    }
}

export default {
    ...
    bindings: {
        api: '='
    }
}

这里的交易，在我的组件中，scope.sasInput应该使用$ onInit上的当前组件api进行更新。但事实并非如此。我在这做错了什么？

你能帮忙吗？谢谢。

Answer 1

$componentController所做的就是从组件定义中获取控制器并实例化它。如果需要测试$onInit，则应直接调用它：

$ctrl.$onInit();

$onInit是生命周期钩子，是编译过程的一部分。为了对组件进行整体测试，应该使用$compile编译，与任何其他指令一样。

Answer 2

如@estus所述（感谢他），您无法使用$componentController测试双向数据绑定。您必须创建一个包含组件的新angular.Element，并使用$compile调用scope.$digest()来执行此操作。这是最终的解决方案

... // previously created a scope with $rootScope.$new() ($rootScope injected with inject())
it("should double bind", () => {
    const element = angular.element("<your-component two-way='api'></your component>");
    inject(($compile) => {
        const compiledElement = $compile(element)(scope);
        scope.$digest();
        expect(scope.api).not.toBeUndefined();
    });
})

使用$ componentController使用AngularJS 1.5+进行单元测试 - 双数据绑定

2 个答案: