$提供一个以上的值来测试一个描述

$provide more than 1 value to test in a describe

本文关键字：描述 一个 测试 一个以      更新时间：2023-09-26

我有一个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。我似乎无法在it语句中访问$provide，那么我该如何做到这一点?

您可以告诉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');
  }));
});

您可以简单地重新构建您的测试，为每个it提供一个beforeEach。这段代码可能可以稍微清理一下，但这里有一个想法。

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');
    }));
  });
});
相关文章：