如何模拟ActivatedRouteSnapshot？答案

【问题标题】：how to mock ActivatedRouteSnapshot?如何模拟ActivatedRouteSnapshot？
【发布时间】：2020-03-31 16:55:09
【问题描述】：

我正在尝试对以下代码进行单元测试：

  ngOnInit() {

    this.router.events.subscribe((val) => {

      if (val instanceof ActivationEnd && val.snapshot) {

        this.selectedLanguageCode = val.snapshot.queryParams.lang ? val.snapshot.queryParams.lang : 'en';
        this.languageService.setLanguage(this.selectedLanguageCode);

        this.langCodeFromUrl = val.snapshot.queryParams.lang;
      }
    });

    this.setupAvailableTranslations();

  }

我看过这样的帖子：

Mocking router.events.subscribe() Angular2

和

Angular 6 - how to mock router.events url response in unit test

说，“这很容易，只要做这个或那个......”（即

但本质上，我真正需要做的是让测试路由器返回一个带有快照的虚假 ActivationEnd 事件。花了相当多的时间在谷歌上搜索并尝试了不同的技术，并想知道为什么这似乎是一项不平凡的任务。

【问题讨论】：

不要使用测试路由器，提供自己的useValue；只需{ events: of(event) }。

标签： angular unit-testing

【解决方案1】：

原来答案如下——把组件改成：

selectedLanguageCode: string;
  langCodeFromUrl: string;
  routeQueryParamMapSub: any;

  constructor(
    private languageService: LanguageService, 
    private route: ActivatedRoute, 
    private router: Router) {

  }

  ngOnInit() {

    this.routeQueryParamMapSub = this.route.queryParamMap.subscribe(queryParams => {

      this.selectedLanguageCode = queryParams.get('lang') ? queryParams.get('lang') : 'en';
      this.languageService.setLanguage(this.selectedLanguageCode);

      this.langCodeFromUrl = queryParams.get('lang');

    });

    this.setupAvailableTranslations();

  }

  ngOnDestroy() {
    this.routeQueryParamMapSub.unsubscribe();
  }

...和测试...

  let lang = 'en';

let testBedConfigBase = {
    imports: [
      FormsModule,
      RouterTestingModule.withRoutes([])
    ],
    declarations: [ HeaderComponent, MockBreadcrumbsComponent ],
    providers: [
      { provide: LanguageService, useFactory: () => { return languageService; } },
      { provide: ActivatedRoute, useValue: { 
          queryParamMap: of(convertToParamMap({lang})) }
      }

    ]
  }

【讨论】：