Angular如何对聚焦元素与箭头行为进行单元测试？

针对你实现的列表切换逻辑（仅当焦点不在输入类元素时触发箭头切换），可以通过以下步骤编写单元测试，覆盖所有核心场景：

测试前准备 #

假设这是Angular组件的代码，首先配置测试环境，同时间谍nextItem方法用于后续断言：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your.component';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    // 间谍nextItem，验证是否被调用
    spyOn(component, 'nextItem');
    fixture.detectChanges();
  });

核心测试场景 #

1. 焦点在输入类元素时，右箭头不触发切换 #

覆盖input、select、button、textarea四种情况，以input为例：

it('右箭头按下时，若焦点在input则不执行nextItem', () => {
  const mockInput = document.createElement('input');
  // 模拟getActiveElement返回input元素
  spyOn(component as any, 'getActiveElement').and.returnValue(mockInput);
  
  component.arrowRight();
  
  expect(component.nextItem).not.toHaveBeenCalled();
});

同理可复制该用例，替换createElement的参数为select、button、textarea，覆盖所有输入类元素场景。

2. 焦点在非输入类元素时，右箭头触发切换 #

模拟焦点在div这类非输入元素上：

it('右箭头按下时，若焦点在非输入元素则执行nextItem', () => {
  const mockDiv = document.createElement('div');
  spyOn(component as any, 'getActiveElement').and.returnValue(mockDiv);
  
  component.arrowRight();
  
  expect(component.nextItem).toHaveBeenCalledTimes(1);
});

3. 无活跃元素时，右箭头触发切换 #

当页面没有任何元素获得焦点时，逻辑应允许切换：

it('右箭头按下时，若无活跃元素则执行nextItem', () => {
  spyOn(component as any, 'getActiveElement').and.returnValue(null);
  
  component.arrowRight();
  
  expect(component.nextItem).toHaveBeenCalledTimes(1);
});

可选：单独测试私有方法isActiveElementAnInput #

如果需要直接验证私有方法的逻辑，可通过类型断言调用：

it('活跃元素为button时，isActiveElementAnInput返回true', () => {
  const mockButton = document.createElement('button');
  spyOn(component as any, 'getActiveElement').and.returnValue(mockButton);
  
  const result = (component as any).isActiveElementAnInput();
  
  expect(result).toBeTrue();
});

it('活跃元素为span时，isActiveElementAnInput返回false', () => {
  const mockSpan = document.createElement('span');
  spyOn(component as any, 'getActiveElement').and.returnValue(mockSpan);
  
  const result = (component as any).isActiveElementAnInput();
  
  expect(result).toBeFalse();
});

测试逻辑说明 #

• 通过spyOn模拟getActiveElement方法，避免依赖真实的DOM焦点状态，让测试完全可控
• 间谍nextItem方法，直接验证切换逻辑是否触发
• 覆盖所有边界场景：输入类元素、非输入元素、无活跃元素，确保逻辑的完整性

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