Question

我的单元测试工作有问题。在broswer中我的指令很有效，但是当我测试它时，我有一个失败测试。代码如下：

angular.module('helloWorldApp')
  .directive('helloworld', function () {

    var helloworld = {};

    class Hello {
        constructor(name) {
            this.name = name ;
        }

        SayHello() {
            //console.log('Hello ' + this.name);
            return 'Hello ' + this.name;
        }
    };

    helloworld.template = '<label for="name">Your Name </label> <input type="text" name="name" ng-model="name"/><br/><div id="result"></div>';

    helloworld.restrict = 'E';
    helloworld.link = (scope,element,attrs) => { 
        scope.$watch('name', () => {
            if (scope.name) {
                let HelloMe = new Hello(scope.name);
                let helloStr  = HelloMe.SayHello();
                element.find('#result').text(helloStr);
                console.log(element.find('#result').text());
            };
        });
    };

    return helloworld;
  });

这里测试：

'use strict';

    describe('Directive: helloworld', function () {

      // load the directive's module
      beforeEach(module('helloWorldApp'));

      var element,
        scope;

      beforeEach(inject(function ($compile, $rootScope) {
        scope = $rootScope.$new();
        element = angular.element('<helloworld></helloworld>');
        element = $compile(element)(scope);
      }));

      describe('Test', function() {
        it('Hello Lola', inject(function ($compile) {
          var inputElt = element.find('input');
          console.log(scope.name);
          inputElt.val('Lola');
          inputElt.triggerHandler('input');
          element = $compile(element)(scope);
          scope.$digest();
          console.log(scope.name);
          expect(scope.name).toBeDefined();
          expect(element.find('input').val()).toBe('Lola');
          expect(element.find('#result').text()).toBe('Hello Lola');
        }));
      });
    });

据我所知，在单元测试中，存在一些差异，而不是broswer。但$watch确实在我的测试中触发，但它不会改变结果div。

感谢您的解释。

编辑：未通过测试答案

LOG: undefined
LOG: ''
LOG: ''
LOG: 'Lola'
Chrome 38.0.2125 (Windows 7) Jasmine__TopLevel_
 Hello Lola FAILED
        Expected '' to be 'Hello Lola'.
        Error: Expected '' to be 'Hello Lola'.

Answer 1

我知道有点晚了。

您确定要粘贴正确的代码吗？

刚刚更改了angular.module('helloWorldApp', [])，但我想您已经在其他地方初始化了此模块。

它工作正常： http://plnkr.co/edit/yC8NFCVwBrn9wcM9xhAC?p=preview

Angular指令的单元测试，不考虑元素的变化

1 个答案: