Angular：如何测试阻止输入框粘贴事件的指令？

你的测试存在几个核心问题，导致无法验证指令的有效性：

1. 输入框初始值为空，粘贴后依然为空，无法区分指令是否生效
2. 错误使用了InputEvent模拟粘贴事件，实际粘贴事件是ClipboardEvent
3. 未验证指令核心逻辑——是否调用了事件的preventDefault()方法

下面是修正后的测试方案：

步骤1：调整测试组件与基础配置 #

保留原有测试组件，新增无指令的对比组件，完善初始化逻辑：

@Component({
  template: '<input type="text" kycBlockPaste>'
})
class TestBlockPasteDirectiveComponent {}

// 新增无指令的测试组件，用于对比验证
@Component({
  template: '<input type="text">'
})
class TestNoBlockPasteDirectiveComponent {}

fdescribe('BlockPasteDirective', () => {
  let fixture: ComponentFixture<TestBlockPasteDirectiveComponent>;
  let nativeEl: HTMLInputElement;
  let noDirectiveFixture: ComponentFixture<TestNoBlockPasteDirectiveComponent>;
  let noDirectiveNativeEl: HTMLInputElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestBlockPasteDirectiveComponent,
        TestNoBlockPasteDirectiveComponent,
        BlockPasteDirective
      ]
    });
    // 初始化有指令的组件
    fixture = TestBed.createComponent(TestBlockPasteDirectiveComponent);
    nativeEl = fixture.debugElement.query(By.css('input')).nativeElement;
    // 初始化无指令的组件
    noDirectiveFixture = TestBed.createComponent(TestNoBlockPasteDirectiveComponent);
    noDirectiveNativeEl = noDirectiveFixture.debugElement.query(By.css('input')).nativeElement;
  });

步骤2：验证指令阻止粘贴行为 #

it('should prevent paste action and keep input value unchanged', () => {
    // 1. 设置输入框初始值
    nativeEl.value = 'initial value';
    fixture.detectChanges();

    // 2. 创建正确的剪贴板粘贴事件，并设置剪贴板数据
    const pasteEvent = new ClipboardEvent('paste', {
      clipboardData: new DataTransfer()
    });
    pasteEvent.clipboardData.setData('text/plain', 'pasted content');

    // 3. 监听preventDefault方法，确认指令调用了它
    spyOn(pasteEvent, 'preventDefault');

    // 4. 触发粘贴事件
    nativeEl.dispatchEvent(pasteEvent);
    fixture.detectChanges();

    // 5. 验证两个核心点：值未改变，preventDefault被调用
    expect(nativeEl.value).toBe('initial value');
    expect(pasteEvent.preventDefault).toHaveBeenCalled();
  });

步骤3：对比验证无指令时粘贴正常（可选但严谨） #

it('should allow paste action when directive is not applied', () => {
    noDirectiveNativeEl.value = 'initial value';
    noDirectiveFixture.detectChanges();

    const pasteEvent = new ClipboardEvent('paste', {
      clipboardData: new DataTransfer()
    });
    pasteEvent.clipboardData.setData('text/plain', 'pasted content');

    noDirectiveNativeEl.dispatchEvent(pasteEvent);
    noDirectiveFixture.detectChanges();

    expect(noDirectiveNativeEl.value).toBe('pasted content');
  });
});

额外说明 #

• 粘贴事件属于ClipboardEvent而非InputEvent，必须使用正确的事件类型才能触发指令的@HostListener
• 通过设置初始值，可以清晰对比粘贴前后的变化，验证指令是否生效
• 监听preventDefault()的调用是最直接验证指令核心逻辑的方式，因为指令的本质就是阻止事件默认行为

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