Angular新手求教：如何测试指令中@Input的set和get方法？

嗨！别担心，测试Angular指令里@Input的set和get方法其实没那么复杂，我来一步步带你搞定它～

第一步：搭好测试环境 #

首先在你的指令测试文件（.spec.ts）里，用Angular的TestBed来准备测试环境。如果你的指令依赖了myService，记得用模拟服务替代真实服务（测试时尽量别用真实依赖，避免外部影响）。

示例代码：

import { TestBed } from '@angular/core/testing';
import { myDirective } from './my-directive.directive';
import { myService } from './../../../internal-service/myservice.service';

// 先写个模拟的myService，满足依赖就行
class MockMyService {}

describe('myDirective', () => {
  let directive: myDirective;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [myDirective],
      providers: [
        { provide: myService, useClass: MockMyService }
      ]
    });

    // 创建指令实例，两种方式都可以选
    // 方式一：用TestBed创建
    directive = TestBed.createComponent(myDirective).componentInstance;
    // 方式二：直接new，注入模拟服务
    // directive = new myDirective(TestBed.inject(myService));
  });
});

第二步：测试setter方法 #

你可以直接给指令的key属性赋值，然后检查内部的conf私有属性是否正确被设置，还要验证你的逻辑（比如代码里只有当key存在时才赋值）。

写几个测试用例试试：

it('当传入有效key时，应该正确设置conf', () => {
  const testKey = 'my-test-config';
  directive.key = testKey;
  // 测试里可以用[]访问私有属性，没问题的
  expect(directive['conf']).toEqual(testKey);
});

it('当传入null/undefined时，不应该修改conf', () => {
  // 初始状态conf是undefined
  directive.key = null;
  expect(directive['conf']).toBeUndefined();

  // 先设一个值，再传undefined，确保不会覆盖
  directive.key = 'initial-value';
  directive.key = undefined;
  expect(directive['conf']).toEqual('initial-value');
});

第三步：测试getter方法 #

要么直接给conf赋值，要么先通过setter设置值，然后调用getter来检查返回值是否和预期一致。

示例用例：

it('获取key时，应该返回当前的conf值', () => {
  const testValue = 'getter-test-value';
  // 直接给私有属性赋值，测试getter的返回
  directive['conf'] = testValue;
  expect(directive.key).toEqual(testValue);
});

it('通过setter设置值后，getter应该返回对应的值', () => {
  const testKey = 'set-then-get-test';
  directive.key = testKey;
  expect(directive.key).toEqual(testKey);
});

额外小提示 #

如果你的setter里还有其他逻辑（比如调用服务的方法），可以用Jasmine的spy来验证是否正确调用了服务方法。比如假设setter里调用了this.myService.processKey(key)，可以这么测：

it('设置key时，应该调用myService的processKey方法', () => {
  // 获取模拟服务并创建spy
  const mockService = TestBed.inject(myService) as jasmine.SpyObj<myService>;
  mockService.processKey = jasmine.createSpy('processKey');

  const testKey = 'test-key';
  directive.key = testKey;

  // 验证方法是否被正确调用
  expect(mockService.processKey).toHaveBeenCalledWith(testKey);
});

另外别忘了测试一些边界情况，比如空字符串、0这类特殊值，确保你的setter逻辑都能正确处理。

这样应该就能全面覆盖你指令里@Input的set和get方法的测试啦～

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