如何对无link函数的AngularJS简单指令配置做单元测试？

嘿，针对你这个无link函数的AngularJS指令，要验证它的配置属性其实超简单！咱们直接针对指令的定义本身写单元测试就行，不用去编译DOM或者模拟复杂场景。下面是具体的操作方法和示例代码：

核心思路 #

因为你要测试的是指令的配置属性（比如restrict、templateUrl这些），不需要测试指令的运行逻辑，所以我们可以直接从AngularJS的注入器中获取指令的定义对象，然后逐个验证配置项是否符合预期，这样既高效又精准。

完整测试代码示例 #

假设你的指令注册在名为myApp的模块中，测试代码可以这么写：

describe('computeTotals Directive Configuration', function() {
  let directiveConfig;

  // 加载指令所在的模块
  beforeEach(module('myApp'));

  // 在测试前获取指令的配置对象
  beforeEach(inject(function($injector) {
    // AngularJS中指令会以「指令名 + Directive」的标识存注入器中，返回的是数组（支持多个同名指令）
    directiveConfig = $injector.get('computeTotalsDirective')[0];
  }));

  // 测试restrict属性
  it('should only be usable as an attribute', function() {
    expect(directiveConfig.restrict).toBe('A');
  });

  // 测试templateUrl是否正确
  it('should reference the correct template file', function() {
    expect(directiveConfig.templateUrl).toBe('compute-totals.html');
  });

  // 测试controller的配置（包括别名）
  it('should use the specified controller with alias', function() {
    expect(directiveConfig.controller).toBe('ct as ctrl');
  });

  // 测试是否使用隔离作用域
  it('should create an isolated scope', function() {
    expect(directiveConfig.scope).toEqual({});
  });

  // 测试bindToController的属性绑定配置
  it('should bind the correct properties to the controller', function() {
    expect(directiveConfig.bindToController).toEqual({
      property: '=',
      numbersArray: '='
    });
  });
});

关键说明 #

• 获取指令配置：通过$injector.get('computeTotalsDirective')拿到的是一个数组，这是因为AngularJS允许多个同名指令共存，所以我们取第一个元素就是咱们定义的那个指令的配置对象。
• 每个配置项单独测试：把每个配置属性拆成独立的测试用例，这样一旦某个配置出错，能立刻定位到问题点。
• 依赖模块加载：一定要记得在beforeEach(module('...'))中加载指令所在的模块，否则注入器找不到你的指令定义。

这样写出来的测试既简洁又能准确验证你指令的所有配置是否符合预期，完全不需要涉及DOM编译或者复杂的模拟操作～

内容的提问来源于stack exchange，提问作者Jack Johnson