Question

我对Angular指令进行了Karma / Jasmine测试：

describe('placeholder directive', function() {

  // Bindable members
  var element;

  // Load module
  beforeEach(angular.mock.module('app'));

  // Mock service response
  beforeEach(module(function($provide) {
    $provide.value('PlaceholderSupportService', function() {
      return false;
    });
  }));

  // Bind references to global variables
  beforeEach(inject(function($compile, $rootScope) {
    element = $compile('<input name="test" placeholder="Test" />')($rootScope);
    $rootScope.$digest();
  }));

  // Check the correct HTML is rendered
  it('Renders placeholder as input value when placeholder is not supported', inject(function($timeout) {
    $timeout.flush();
    expect(element[0].value).toBe('Test');
  }));

});

它按我的意愿工作。但是，我强制PlaceholderSupportService()的值为false。我想运行第二个测试，我将此值设为true。我似乎无法在$provide声明中访问it，那么我该如何做？

Answer 1

您可以告诉PlaceholderSupportService返回变量。然后，在测试块上，更改变量的值。这应该可以解决问题。这是一个例子：

describe('placeholder directive', function() {

  // Bindable members
  var element;
  var providerResult = false; //Here is the variable that you will change.

  // Load module
  beforeEach(angular.mock.module('app'));

  // Mock service response
  beforeEach(module(function($provide) {
    $provide.value('PlaceholderSupportService', function() {
      return providerResult;
    });
  }));

  // Check the correct HTML is rendered
  it('Renders placeholder as input value when placeholder is not supported', inject(function($timeout) {
    element = $compile('<input name="test" placeholder="Test" />')($rootScope);
    $rootScope.$digest();
    $timeout.flush();
    expect(element[0].value).toBe('Test');
  }));

  // Check the correct HTML is rendered
  it('Renders placeholder as input value when placeholder is supported', inject(function($timeout) {
    providerResult = true; //Here I will change the result of my PlaceholderSupportService
    element = $compile('<input name="test" placeholder="Test" />')($rootScope);
    $rootScope.$digest();
    $timeout.flush();
    expect(element[0].value).toBe('Test');
  }));

});

Answer 2

您可以简单地重新构建测试，为每个beforeEach提供一个it。这段代码可能会被清理一下，但这就是想法。

describe('placeholder directive', function () {
  // Bindable members
  var element;

  describe('when placeholder is supported', function () {
    // Load module
    beforeEach(angular.mock.module('app'));

    // Mock service response
    beforeEach(module(function($provide) {
      $provide.value('PlaceholderSupportService', function() {
        return true;
      });
    }));

    // Bind references to global variables
    beforeEach(inject(function($compile, $rootScope) {
      element = $compile('<input name="test" placeholder="Test" />')($rootScope);
      $rootScope.$digest();
    }));

    // Check the correct HTML is rendered
    it('Renders placeholder as input value when placeholder is not supported', inject(function($timeout) {
      $timeout.flush();
      expect(element[0].value).toBe('Test');
    }));
  });

  describe('when placeholder is not supported', function () {
    // Load module
    beforeEach(angular.mock.module('app'));

    // Mock service response
    beforeEach(module(function($provide) {
      $provide.value('PlaceholderSupportService', function() {
        return false;
      });
    }));

    // Bind references to global variables
    beforeEach(inject(function($compile, $rootScope) {
      element = $compile('<input name="test" placeholder="Test" />')($rootScope);
      $rootScope.$digest();
    }));

    // Check the correct HTML is rendered
    it('Renders placeholder as input value when placeholder is not supported', inject(function($timeout) {
      $timeout.flush();
      expect(element[0].value).toBe('Test');
    }));
  });
});

$提供超过1个值以在描述中进行测试

2 个答案: