无法将我的假数组绑定到我的测试中的范围变量

Question

我无法将我的假数组绑定到指令测试中的范围变量。

我的测试：

describe('Directive: report - section', function () {

  // load the directive's module
  beforeEach(module('ReportApp'));
  beforeEach(module('Templates')); // The external template file referenced by templateUrl

  var element, scope;

  beforeEach(inject(function ($rootScope) {
    scope = $rootScope.$new();
  }));


  it('should have 1 section available', inject(function ($compile) {

    var testSections = [
        {
            id: 'Example01',
            visible: true,
            img: 'image1.jpg'
        },
        {
            id: 'Example02',
            visible: false,
            img: 'image2.jpg'
        }
    ];

    scope.sections = testSections;
    element = angular.element('<section></section>');
    element = $compile(element)(scope);
    scope.$digest();
    expect(element.find('li').length).toEqual(1);

  }));


});

我的指令：

angular.module('ReportApp')
  .directive('section', function (report, reportStatus) {
    return {
      templateUrl: 'src/report/views/parts/section.html',
      restrict: 'E',
      controller: function( $scope, $element, $attrs){

        var sections = report.getDatabase().sections;

        $scope.sections = sections;
        reportStatus.setActiveSection(sections[0]);

      },

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

      }

    };
  });

我的测试结果：

Chrome 36.0.1985 (Mac OS X 10.9.2) Directive: report - section should have 1 section available FAILED
  Expected 4 to equal 1.
  Error: Expected 4 to equal 1.
      at null.<anonymous> (/Users/user/MyAPPs/temp/report/app/src/report/directives/tests/spec/section.js:77:39)
      at Object.invoke (/Users/user/MyAPPs/temp/report/app/vendor/bower_components/angular/angular.js:3678:17)
      at workFn (/Users/user/MyAPPs/temp/report/app/vendor/bower_components/angular-mocks/angular-mocks.js:2102:20)

我的问题是假部分（testSections）没有被应用。所以，这个结果“预期 4 等于 1”是由于使用了原始部分而不是我的假部分。

为什么这个范围不起作用？

scope.sections = testSections;

Answer 1

原因是您的指令代码中的scope.sections = testSections; 被$scope.sections = sections; 替换。

在这种情况下，您必须监视您的 report.getDatabase() 才能返回您的 testSections

describe('Directive: report - section', function () {

  // load the directive's module
  beforeEach(module('ReportApp'));
  beforeEach(module('Templates')); // The external template file referenced by templateUrl

  var element, scope, report;

  beforeEach(inject(function ($rootScope,_report_) {
    scope = $rootScope.$new();
    report = _report_; //inject the report object and store in a variable
  }));


  it('should have 1 section available', inject(function ($compile) {

    var testSections = [
        {
            id: 'Example01',
            visible: true,
            img: 'image1.jpg'
        },
        {
            id: 'Example02',
            visible: false,
            img: 'image2.jpg'
        }
    ];

    spyOn(report,"getDatabase").and.returnValue({ sections : testSections });//spy the getDatabase function
    //we just need a stub, so we could also write this:

    //report.getDatabase = function (){
    //       return { sections : testSections };
    //}

    element = angular.element('<section></section>');
    element = $compile(element)(scope);
    scope.$digest();
    expect(element.find('li').length).toEqual(1);

  }));


});