使用Jasmine / Karma进行角度单元测试

时间:2017-08-21 13:45:06

标签: javascript angularjs unit-testing jasmine karma-coverage

我试图用jasmine和karma编写自定义指令的单元测试脚本。

目前的应用是Angular 1.28;问题是代码无法正常运行。任何人都可以帮助/指导我犯错的地方;或者如何为自定义指令编写单元测试用例。任何建议或帮助将不胜感激,谢谢。

指令如下

angular.module('phone.filter', [])
    .directive('phoneField', ['$filter', function ($filter) {
      var phoneFilter = $filter('phoneFilter'),
        reversePhone = $filter('reversePhone');
      return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
          var formatter = value => phoneFilter(value),
            parser = function (value) {
              var formatted = reversePhone(value);
              element.val(phoneFilter(formatted));
              //prevents a phone number from being all zeros
              ngModel.$setValidity('phone', /^(?!0{10})(\d{10})?$/.test(value.replace(/\D/g, '')))
              return formatted;
            }
          ngModel.$formatters.push(formatter);
          return ngModel.$parsers.unshift(parser);
        }
      };
    }]).filter('phoneFilter', function () {
      return function (value) {
        var len, val;
        if (value) {
          val = value.toString().replace(/\D/g, '');
          len = val.length;
          if (len < 4) {
            return val;
          } else if ((3 < len && len < 7)) {
            return (val.substr(0, 3)) + '-' + (val.substr(3));
          } else if (len >= 7) {
            return (val.substr(0, 3)) + '-' + (val.substr(3, 3)) + '-' + (val.substr(6));
          }
        }
        return value;
      };
    }).filter('reversePhone', function () {
      return (value = '') => value.replace(/\D/g, '').substr(0)
    })

测试脚本如下:

import chai, { expect } from 'chai'
// import { createElement } from '../helpers/directive-testing-helper'
/* import { stub } from 'sinon'

chai.use(require('sinon-chai'))
*/
const module = angular.mock.module
describe('Phone Field validation directive (phoneField)', () => {
    let $rootScope,
        $compile;

    beforeEach(() => module('pru.com.components.phone.filter'))

    beforeEach(inject((_$rootScope_, _$compile_) => {
        $rootScope = _$rootScope_;
        $compile = _$compile_;
    }))

    it('should not have all zeros', () => {
        $rootScope.phone = "0002345678"
        let element = $compile('<input type="text" name="phoneNumber" phone-field="" value="0002345678" ng-model="">')($rootScope);
        $rootScope.$digest();
        chai.expect(new RegExp(/phone-field/)).match(element.html()).to.be.true;
    });
})

0 个答案:

没有答案