Angular单元测试如何修改Mock ActivatedRoute的queryParams参数值

单场景直接修改方式 #

如果你只需要单独编写admin-mismatch场景的测试用例，直接把Mock ActivatedRoute配置中queryParams的type字段值从'mismatch'改为'admin-mismatch'即可，修改后的完整配置如下：

await TestBed.configureTestingModule({
    declarations: [ErrorPageComponent],
    imports: [GraphQLModule, RouterTestingModule],
    providers: [
        Apollo,
        {
            provide: ActivatedRoute,
            useValue: {
                queryParams: of({
                    name: 'John Doe',
                    cacheKey: 'cacheKey',
                    type: 'admin-mismatch'
                })
            }
        },
    ]
}).compileComponents();

beforeEach(() => {
    fixture = TestBed.createComponent(ErrorPageComponent);
    component = fixture.componentInstance;
    route = TestBed.inject(ActivatedRoute);
    fixture.detectChanges();
});

多场景复用优化方案（推荐） #

如果你需要同时覆盖mismatch、admin-mismatch等多种type场景的测试，无需重复编写TestBed配置，可以用RxJS的Subject实现动态传参：

// 顶层引入并定义Subject用于动态控制queryParams
import { Subject } from 'rxjs';
const queryParamsSubject = new Subject();

await TestBed.configureTestingModule({
    declarations: [ErrorPageComponent],
    imports: [GraphQLModule, RouterTestingModule],
    providers: [
        Apollo,
        {
            provide: ActivatedRoute,
            useValue: {
                queryParams: queryParamsSubject.asObservable()
            }
        },
    ]
}).compileComponents();

beforeEach(() => {
    fixture = TestBed.createComponent(ErrorPageComponent);
    component = fixture.componentInstance;
    route = TestBed.inject(ActivatedRoute);
    fixture.detectChanges();
});

// 不同测试用例传入对应参数即可
it('should handle mismatch scenario', () => {
  queryParamsSubject.next({
    name: 'John Doe',
    cacheKey: 'cacheKey',
    type: 'mismatch'
  });
  fixture.detectChanges();
  // 此处编写对应测试逻辑
});

it('should handle admin-mismatch scenario', () => {
  queryParamsSubject.next({
    name: 'John Doe',
    cacheKey: 'cacheKey',
    type: 'admin-mismatch'
  });
  fixture.detectChanges();
  // 此处编写对应测试逻辑
});

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