Angular 4中无法监视注入服务的方法问题求助

看起来你是想在单元测试里控制SearchModuleService的行为，避免实际调用后端接口，同时验证组件是否正确调用了服务方法对吧？我给你一步步拆解怎么实现：

1. 准备测试环境 #

首先在测试文件里，我们需要用TestBed配置测试模块，并且提供服务的模拟间谍对象，替代真实的服务实例，这样就能完全掌控服务的行为了。

示例代码：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SearchModuleCheckCardListComponent } from './search-module-check-card-list.component';
import { SearchModuleService } from './search-module.service';
import { of } from 'rxjs';

describe('SearchModuleCheckCardListComponent', () => {
  let component: SearchModuleCheckCardListComponent;
  let fixture: ComponentFixture<SearchModuleCheckCardListComponent>;
  // 声明间谍服务变量，用来监视和拦截方法
  let mockSearchModuleService: jasmine.SpyObj<SearchModuleService>;

  beforeEach(async () => {
    // 创建服务的间谍对象，传入你要监视的方法名（比如假设服务里有getSearchModules方法）
    mockSearchModuleService = jasmine.createSpyObj('SearchModuleService', ['getSearchModules']);

    await TestBed.configureTestingModule({
      declarations: [ SearchModuleCheckCardListComponent ],
      // 用间谍对象替换真实服务
      providers: [
        { provide: SearchModuleService, useValue: mockSearchModuleService }
      ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(SearchModuleCheckCardListComponent);
    component = fixture.componentInstance;
    // 提前设置间谍方法的返回值，拦截后续调用
    mockSearchModuleService.getSearchModules.and.returnValue(of([/* 这里放你模拟的后端返回数据 */]));
    fixture.detectChanges(); // 触发组件的ngOnInit生命周期
  });

2. 验证服务方法是否被正确调用 #

你可以测试组件的fetchSearchModule方法是否确实触发了服务的对应调用：

it('should call getSearchModules when fetchSearchModule is invoked', () => {
  // 重置间谍的调用计数，避免之前的测试干扰
  mockSearchModuleService.getSearchModules.calls.reset();
  
  component.fetchSearchModule();
  
  // 验证服务方法被调用了一次
  expect(mockSearchModuleService.getSearchModules).toHaveBeenCalledTimes(1);
});

3. 模拟不同场景的返回结果 #

模拟成功返回数据的场景 #

测试组件在获取数据成功后的状态变化：

it('should update component state when fetch succeeds', () => {
  const mockData = [{ id: 1, name: 'Mock Search Module' }];
  mockSearchModuleService.getSearchModules.and.returnValue(of(mockData));
  
  component.fetchSearchModule();
  
  // 这里假设组件有modules属性存储数据，根据你的实际代码调整断言
  expect(component.modules).toEqual(mockData);
  expect(component.httpError).toBe(false);
});

模拟HTTP错误的场景 #

测试组件在请求失败时是否正确设置了httpError状态：

import { throwError } from 'rxjs';

it('should set httpError to true when fetch fails', () => {
  mockSearchModuleService.getSearchModules.and.returnValue(throwError(() => new Error('Backend Error')));
  
  component.fetchSearchModule();
  
  expect(component.httpError).toBe(true);
});

注意事项 #

• 记得把代码里的服务方法名（比如getSearchModules）替换成你实际使用的方法名
• 确保导入了必要的RxJS操作符（比如of、throwError），否则测试会报错
• 如果组件模板依赖服务返回的数据，调用fixture.detectChanges()来更新视图状态

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