Question

我想在创建控制器之后测试我的组件$onChanges $componentController服务。但是我不知道如何触发/测试$onChanges。我试图更改传递给$componentController的绑定对象，但更改不是纠察。

然而，我能够使用好的$compile＆amp; $rootScope：

describe("test component", function() {

    angular.module('test', []).component('component', {
        template: '<span>{{$ctrl.text}}</span>',
        bindings: {
            'text': '@'
        },
        controller: function() {

            this.$onChanges = function(changesObj) {
                console.log("onChanges called", changesObj);
            }
        }
    })

    var $compile, $rootScope;

    beforeEach(module('test'));
    beforeEach(inject(function (_$rootScope_, _$compile_) {
        $rootScope = _$rootScope_;
        $compile = _$compile_;
    }));

    it('should call onChanges', function() {

        var scope = $rootScope.$new()
        scope.text = 'original text';
        var el = $compile('<component text="{{text}}" />')(scope);
        $rootScope.$apply();
        console.log(el.find('span').text())

        scope.text = 'text has changed';
        $rootScope.$apply();
        console.log(el.find('span').text())
    })
})

我的问题是：在使用$onChanges对$componentController进行测试时，是否必须手动调用$onChanges并手动构建changesObj？

Answer 1

是的，我想是的。它有助于关注您的测试意图。

如果你尝试一些最终会触发onChanges钩子的高级操作，你实际上是在同时执行Angular和你的代码的内部行为。这可能不是你的意图。

承认你正在使用Angular并期望从这个钩子中特定的东西，明确地调用它是有道理的。

测试Angular 1.5组件：如何测试$ onChanges

1 个答案: