如何使用订阅测试组件

Question

在 Jasmine/Karma 的组件中使用订阅进行单元测试我正在尝试测试 ngOninit 是否在我的页面中很好地生成了元标记：

ngOnInit(): void {
    this.pagesSub = this.pagesService.initPage().subscribe();
  }

这是我的 InitPage 函数：

initPage(): Observable<Page> {
    return this.pageDbService.data$.pipe(
      map((pages: Page[]) => {
        let currentPage: Page;
        if (pages.length > 0) {
          this.setPagesToStore(pages);
          if (this.router.url === '/') {
            currentPage = pages[0]
          } else {
            currentPage = pages.find(page => ('/' + page.pageId) === this.router.url)
          }
        } else {
          this.setPagesToStore(pagesSeed);
          if (this.router.url === '/') {
            currentPage = pagesSeed[0]
          } else {
            currentPage = pagesSeed.find(page => ('/' + page.pageId) === this.router.url)
          }
        }
        this.seoService.generatePageTags(currentPage);
        return currentPage;
      })
    )
  }

这是 generatePageTags 函数：

generatePageTags(page: Page) {
    const pageTitle = `${page.pageTitle} - IZIprint`;
    this.titleService.setTitle(pageTitle);
    this.meta.updateTag({ name: 'robots', content: 'index,follow' });
    this.meta.updateTag({ name: 'description', content: page.description });
    this.meta.updateTag({ property: 'og:type', content: 'website' });
    this.meta.updateTag({ property: 'og:title', content: page.socialTitle });
    this.meta.updateTag({ property: 'og:description', content: page.description });
    this.meta.updateTag({ property: 'og:url', content: page.ogUrl });
    this.meta.updateTag({ property: 'og:image', content: page.socialImage.thumbUrl });
    this.meta.updateTag({ property: 'og:determiner', content: 'auto' });
    this.meta.updateTag({ property: 'og:locale', content: 'fr_FR' });
    this.meta.updateTag({ property: 'og:site_name', content: 'IZIprint' });
    this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
    this.meta.updateTag({ name: 'twitter:title', content: page.socialTitle });
    this.meta.updateTag({ name: 'twitter:description', content: page.description });
    this.meta.updateTag({ name: 'twitter:image', content: page.socialImage.thumbUrl });
  }

如果我用这个测试测试：

  it(`should have a metatag property="og:site_name" with content='IZIprint'`, fakeAsync(() => {
    meta = TestBed.inject(Meta);
    component.ngOnInit();
    fixture.detectChanges();
    flush();
    expect(meta.getTag('property="og:site_name"').content).toBe('IZIprint');
  }));

Jasmine-Karma 在我的页面中找不到 'property="og:site_name"' 的内容。我是测试新手。请问我的错误在哪里？

Answer 1

如果 pageDbService.data$. 有合适的模拟，下面的代码应该足够了：

it(`should have a metatag property="og:site_name" with content='IZIprint'`, async () => {
  component.ngOnInit();
  await fixture.whenStable()

  meta = TestBed.inject(Meta);
  expect(meta.getTag('property="og:site_name"').content).toBe('IZIprint');
});

fixture.detectChanges(); 触发 ngOnInit 生命周期钩子。无需将它们都称为。 detectChanges 还会触发变化检测和渲染。该测试不依赖于其中任何一个。 ngOnInit 就够了。

问题是 pageDbService.data$ 模拟。我没有看到它的代码，所以我不能说这个模拟设置是否正确。

如何使用订阅测试组件

How to test a component with subscription

subscription

karma-jasmine

angular