0

我正在尝试在学习 MEAN 的同时开始运行单元测试grunt dev-test来检查以下内容，这应该会返回错误。但是，在终端grunt dev-test中检测到文件被更改并且没有报告错误。

'use strict';

describe('appMyDirective', function() {
    var elm, elmScope, $scope, $compile, $timeout;

beforeEach(module('myApp'));

/**
@param params
    @param {String} html
*/
var createElm =function(params) {
    var html ="<div app-my-directive>"+
    "</div>";
    if(params.html) {
        html =params.html;
    }
    // elm =angular.element(html);
    elm =$compile(html)($scope);
    // $scope.$digest();
    $scope.$apply();        //NOTE: required otherwise the alert directive won't be compiled!!!! ... wtf?
    elmScope =elm.isolateScope();
    var elements ={
        // 'somePart':elm.find('div').children().find('div')
    };
    return elements;
};

beforeEach(inject(function(_$rootScope_, _$compile_, _$timeout_) {
    $compile = _$compile_;
    $timeout = _$timeout_;
    $scope = _$rootScope_.$new();
}));

// afterEach(function() {
// });


it('should have a scopeOne property', function() {
    $scope.scopeOne ='test scope one';
    var html ="<div app-my-directive scope-one='scopeOne'></div>";
    createElm({html:html});
    expect(elmScope).toBe('test scope one1');
    });
});

因为$scope.scopeOne ='test scope one';和我expect 'test scope one1'这不应该通过，因为它是“不真实的”。还是我在这里做错了什么？

在此处输入图像描述

指令代码：

/**
@toc

@param {Object} scope (attrs that must be defined on the scope (i.e. in the controller) - they can't just be defined in the partial html). REMEMBER: use snake-case when setting these on the partial!
@param {String} scopeOne a scope property
@param {Function} funcOne custom function 

TODO

@param {Object} attrs REMEMBER: use snake-case when setting these on the partial! i.e. my-attr='1' NOT myAttr='1'
TODO
@param {String} customText Some special text
@dependencies
TODO

@usage
partial / html:
<div app-my-directive></div>
TODO

controller / js:
TODO

//end: usage
*/

'use strict';

angular.module('app').directive('appMyDirective', [ function () {

    return {
        restrict: 'A',
        scope: {
            scopeOne: '=',
            funcOne: '&?'
        },

        // replace: true,
        template: function(element, attrs) {
            var defaultsAttrs ={
            };
            for(var xx in defaultsAttrs) {
                if(attrs[xx] ===undefined) {
                    attrs[xx] =defaultsAttrs[xx];
                }
            }

            if(!attrs.customText) {
                attrs.customText = '';
            }

            var html ="<div class='app-my-directive-cont'>"+
                "custom text: "+attrs.customText+
            "<br/>scope one: {{scopeOne}}"+
            "<br/>scope two: {{scopeTwo}}"+
            "<div class='btn' ng-click='emitEvt()'>EmitEvt</div>"+
            "<div class='btn' ng-click='funcOne()'>funcOne</div>"+
            "</div>";

            return html;
        },

        link: function(scope, element, attrs) {
        },

        controller: function($scope, $element, $attrs) {
            $scope.scopeTwo = 'scope two';

            $scope.emitEvt =function() {
                $scope.$emit('appMyDirectiveEvt1', {});
                var log = 'suck it the js works.';
                console.log(log);
            };
        }
    };
}]);

整个项目：https ://github.com/tuffs/mean

4

1 回答 1

1

请提供指令代码，因为现在我们已经“预期未定义为'test scope one1'”。- 随意使用“运行代码片段”执行测试

angular.module('myApp', [])

describe('appMyDirective', function() {
  var elm, $scope, $compile;

  beforeEach(module('myApp'));

  var createElm = function(params) {
    var html = "<div app-my-directive>" +
      "</div>";
    if (params.html) {
      html = params.html;
    }
    elm = $compile(html)(params.scope);
    params.scope.$apply(); //NOTE: required otherwise the alert directive won't be compiled!!!! ... wtf?
    return elm.isolateScope();
  };

  beforeEach(inject(function(_$rootScope_, _$compile_) {
    $compile = _$compile_;
    $scope = _$rootScope_.$new();
  }));

  it('should have a scopeOne property', function() {
    $scope.scopeOne = 'test scope one';

    var elmScope = createElm({
      html: "<div app-my-directive scope-one='scopeOne'></div>",
      scope: $scope
    });

    expect(elmScope).toBe('test scope one1');
  });
});
<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-mocks.js"></script>

于 2015-07-07T15:08:18.587 回答