Angular新手如何简单测试TypeScript中的void类型方法

对Angular新手来说，最容易快速上手的是基于Jasmine的行为验证单元测试，不需要掌握复杂的测试概念，也不用搭建额外的测试工具链，Angular项目初始化时默认自带的Jasmine+Karma环境就可以直接用。测试核心逻辑就是覆盖submitForm里的所有分支，验证不同输入下的实际执行行为是否符合预期即可。

前置准备 #

你需要先把方法里用到的所有外部依赖和动态值提前模拟好，不需要引入真实实现：

• 模拟依赖服务：AuthService、Router
• 模拟DOM元素引用：userName、inputMulti
• 给组件自身方法打监听桩：login、openMulti、closePop

测试用例覆盖逻辑 #

按照方法里的分支逻辑，一共只需要写4个测试用例就能覆盖全场景：

• 验证方法执行后，输入框的用户名会正确赋值给authService.playerName
• 验证login()返回false时，后续所有分支逻辑都不会触发
• 验证login()返回true且多人模式勾选时，会调用openMulti()方法
• 验证login()返回true且选择单人模式时，会调用closePop()并跳转到/game路由

可直接复用的测试代码示例 #

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your.component'; // 替换为你自己的组件路径
import { AuthService } from './auth.service'; // 替换为你自己的AuthService路径
import { Router } from '@angular/router';

// 模拟依赖服务
class MockAuthService {
  playerName = '';
}
class MockRouter {
  navigate = jasmine.createSpy('navigate');
}

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ YourComponent ],
      providers: [
        { provide: AuthService, useClass: MockAuthService },
        { provide: Router, useClass: MockRouter }
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    authService = TestBed.inject(AuthService);
    router = TestBed.inject(Router);

    // 模拟DOM元素引用
    component.userName = { nativeElement: { value: '测试用户' } };
    component.inputMulti = { nativeElement: { checked: false } };
    // 给组件自有方法打桩
    spyOn(component, 'login').and.returnValue(true);
    spyOn(component, 'openMulti');
    spyOn(component, 'closePop');
  });

  it('submitForm执行后会把输入框值赋值给authService.playerName', () => {
    component.submitForm();
    expect(authService.playerName).toBe('测试用户');
  });

  it('login返回false时不触发任何后续分支逻辑', () => {
    component.login.and.returnValue(false);
    component.submitForm();
    expect(component.openMulti).not.toHaveBeenCalled();
    expect(component.closePop).not.toHaveBeenCalled();
    expect(router.navigate).not.toHaveBeenCalled();
  });

  it('login成功且勾选多人模式时调用openMulti方法', () => {
    component.inputMulti.nativeElement.checked = true;
    component.submitForm();
    expect(component.openMulti).toHaveBeenCalled();
    expect(component.closePop).not.toHaveBeenCalled();
    expect(router.navigate).not.toHaveBeenCalled();
  });

  it('login成功且选择单人模式时关闭弹窗并跳转游戏页', () => {
    component.inputMulti.nativeElement.checked = false;
    component.inputSolo = true;
    component.submitForm();
    expect(component.closePop).toHaveBeenCalled();
    expect(router.navigate).toHaveBeenCalledWith(['/game']);
  });
});

你只需要把代码里的组件、服务路径替换为你项目里的实际路径，直接运行ng test就能看到测试结果。

内容的提问来源于stack exchange，提问作者Mohamed Sameh Sellami