如何模拟angular ActivatedRoute

Angular的ActivatedRoute是一个用于获取当前路由信息的服务。它提供了一种在组件中访问路由参数、查询参数、路由路径等的方式。

要模拟Angular的ActivatedRoute，可以使用Angular的测试工具来创建一个虚拟的ActivatedRoute对象，并设置所需的参数和属性。下面是一个示例：

import { ActivatedRoute } from '@angular/router';
import { BehaviorSubject } from 'rxjs';

// 模拟ActivatedRoute
class MockActivatedRoute extends ActivatedRoute {
  // 设置路由参数
  private paramsSubject = new BehaviorSubject(this.testParams);
  params = this.paramsSubject.asObservable();

  // 设置查询参数
  private queryParamsSubject = new BehaviorSubject(this.testQueryParams);
  queryParams = this.queryParamsSubject.asObservable();

  // 设置路由路径
  private snapshotSubject = new BehaviorSubject(this.testSnapshot);
  snapshot = this.snapshotSubject.asObservable();

  // 设置测试参数
  private testParams: any;
  private testQueryParams: any;
  private testSnapshot: any;

  // 设置路由参数
  setParams(params: any) {
    this.testParams = params;
    this.paramsSubject.next(params);
  }

  // 设置查询参数
  setQueryParams(queryParams: any) {
    this.testQueryParams = queryParams;
    this.queryParamsSubject.next(queryParams);
  }

  // 设置路由路径
  setSnapshot(snapshot: any) {
    this.testSnapshot = snapshot;
    this.snapshotSubject.next(snapshot);
  }
}

// 在测试中使用模拟的ActivatedRoute
describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  let activatedRoute: MockActivatedRoute;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent],
      providers: [
        { provide: ActivatedRoute, useClass: MockActivatedRoute }
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    activatedRoute = TestBed.inject(ActivatedRoute);
  });

  it('should get route params', () => {
    // 设置路由参数
    activatedRoute.setParams({ id: '123' });

    // 执行组件逻辑
    fixture.detectChanges();

    // 断言路由参数是否正确获取
    expect(component.routeParams.id).toBe('123');
  });

  it('should get query params', () => {
    // 设置查询参数
    activatedRoute.setQueryParams({ page: '1' });

    // 执行组件逻辑
    fixture.detectChanges();

    // 断言查询参数是否正确获取
    expect(component.queryParams.page).toBe('1');
  });

  it('should get route snapshot', () => {
    // 设置路由路径
    activatedRoute.setSnapshot({ url: [{ path: 'example' }] });

    // 执行组件逻辑
    fixture.detectChanges();

    // 断言路由路径是否正确获取
    expect(component.routeSnapshot.url[0].path).toBe('example');
  });
});

在上面的示例中，我们创建了一个名为MockActivatedRoute的类，它继承自Angular的ActivatedRoute，并通过BehaviorSubject来模拟参数和属性的变化。然后，在测试中使用这个模拟的ActivatedRoute来设置所需的参数和属性，并验证组件是否正确获取了这些参数和属性。

这样，我们就可以模拟Angular的ActivatedRoute，并在测试中使用它来测试组件的逻辑。