Angular5 + Protractor + CucumberJS：如何模拟组件依赖服务？

我来帮你搞定在Angular 5里用Protractor+Cucumber模拟服务的问题～核心思路是借助Angular的TestBed把组件依赖的真实服务替换成我们自定义的模拟服务，这样组件调用服务方法时就会走预设的测试逻辑。下面一步步来：

1. 先写好模拟服务 #

首先创建一个和真实TestService匹配的模拟类，实现组件会用到的方法，返回测试用的假数据或逻辑：

// mock-test.service.ts
import { TestService } from './test.service';

// 实现真实服务的核心方法，保证组件能正常调用
export class MockTestService implements TestService {
  // 模拟真实服务的getTestData方法，返回测试用数据
  getTestData() {
    // 如果真实服务返回Promise就用Promise.resolve
    return Promise.resolve({ content: '这是模拟返回的测试数据' });
    // 如果是Observable，就导入rxjs的of，返回of({...})
  }

  // 组件用到的其他服务方法也在这里模拟
}

如果Angular 5不支持implements TestService的全量实现，也可以继承真实服务后重写需要的方法：

export class MockTestService extends TestService {
  override getTestData() {
    return Promise.resolve({ content: '模拟数据' });
  }
}

2. 在Cucumber步骤中配置TestBed替换服务 #

在Cucumber的步骤定义里，我们需要在进入组件页面之前，告诉Angular用模拟服务替换真实服务。通常把这个逻辑放在Given步骤中：

// test.steps.ts
import { browser, element, by } from 'protractor';
import { TestBed } from '@angular/core/testing';
import { TestComponent } from './test.component';
import { TestService } from './services/test.service';
import { MockTestService } from './mock-test.service';
import { AppModule } from './app.module';
import { defineSupportCode } from 'cucumber';

defineSupportCode(({ Given, When, Then }) => {
  Given('我进入测试页面并启用模拟服务', async () => {
    // 配置TestBed，基于AppModule替换服务
    await TestBed.configureTestingModule({
      imports: [AppModule],
      declarations: [TestComponent],
      providers: [
        // 关键：用MockTestService替换真实的TestService
        { provide: TestService, useClass: MockTestService }
      ]
    }).compileComponents(); // Angular 5必须手动编译组件（JIT模式下）

    // 导航到组件对应的路由页面
    await browser.get('/test');
  });

  When('我触发组件调用服务的操作', async () => {
    // 比如点击页面上的按钮触发服务调用
    await element(by.id('call-service-btn')).click();
  });

  Then('我应该看到模拟服务返回的数据', async () => {
    const displayText = await element(by.id('result-content')).getText();
    expect(displayText).toEqual('这是模拟返回的测试数据');
  });
});

3. 进阶：动态修改模拟服务行为 #

如果需要在测试过程中灵活调整模拟服务的返回值，可以先获取模拟服务的实例，再动态修改方法：

let mockTestService: MockTestService;

Given('我进入测试页面并启用模拟服务', async () => {
  await TestBed.configureTestingModule({
    // ... 同上配置
  }).compileComponents();

  // Angular 5用TestBed.get()获取服务实例（新版本用inject）
  mockTestService = TestBed.get(TestService) as MockTestService;
  await browser.get('/test');
});

When('我设置模拟服务返回错误', async () => {
  // 动态修改模拟服务的方法逻辑
  mockTestService.getTestData = () => Promise.reject(new Error('模拟请求失败'));
});

注意事项 #

• 确保模拟服务的方法返回值类型和真实服务完全一致：真实服务返回Promise就用Promise，返回Observable就用Observable。
• 如果组件是懒加载的，需要在TestBed配置中导入对应的懒加载模块，或者手动配置组件的依赖项。
• Angular 5中compileComponents()是必须的，Angular 6+之后多数场景可以省略，但5版本要保留。

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