routerLinkActive 在单元测试中不起作用

Question

RouterLinkActive 在单元测试期间不工作，但在单元测试之外工作。

这里是HTML:

<header class="site-tab">
  <nav class="c-tab l-wrap">
    <div
      class="c-tab__item"
      routerLink="/companies"
      routerLinkActive="c-tab__item--active"
    >
      <p class="c-tab__text">Companies</p>
    </div>
    <div
      class="c-tab__item"
      routerLink="/products"
      routerLinkActive="c-tab__item--active"
    >
      <p class="c-tab__text">Products</p>
    </div>
    <div
      class="c-tab__item"
      routerLink="/invoices"
      routerLinkActive="c-tab__item--active"
    >
      <p class="c-tab__text">Invoices</p>
    </div>
  </nav>
</header>

这是我的规范文件：

import { ComponentFixture, TestBed, async } from '@angular/core/testing';

import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { RouterTestingModule } from '@angular/router/testing';
import { TabsComponent } from './tabs.component';

describe('TabsComponent', () => {
  let component: TabsComponent;
  let fixture: ComponentFixture<TabsComponent>;
  let de: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [TabsComponent],
      imports: [RouterTestingModule]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TabsComponent);
    component = fixture.componentInstance;
    de = fixture.debugElement;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should set clicked tab to active', () => {
    de.queryAll(By.css('.c-tab__item'))[1].nativeElement.click();
    expect(
      de.query(By.css('.c-tab__item--active .c-tab__text')).nativeElement
        .innerHTML
    ).toContain('Product');
  });

我希望该选项卡在我单击后会处于活动状态，但出现此错误 TypeError: de.query(...) is null in http://localhost:9876/_karma_webpack_/main.js (line 872) 我认为这意味着没有选项卡被设置为活动。

Answer 1

我不确定 clicking 是否会发挥 router 的魔力，但它可能会。但我相信您在点击后错过了 fixture.detectChanges()。

尝试：

  it('should set clicked tab to active', () => {
    de.queryAll(By.css('.c-tab__item'))[1].nativeElement.click();
    fixture.detectChanges(); // add this.
    expect(
      de.query(By.css('.c-tab__item--active .c-tab__text')).nativeElement
        .innerHTML
    ).toContain('Product');
  });

Answer 2

我也遇到了同样的问题，甚至在阅读这个问题时也是如此。但是我在应用 fakeAsync 函数和 tick().

后得到了解决方案

     it('should set clicked tab to active', fakeAsync(() => {
        de.queryAll(By.css('.c-tab__item'))[1].nativeElement.click();
        fixture.detectChanges(); // add this
        tick(); // add this too
        expect(
          de.query(By.css('.c-tab__item--active .c-tab__text')).nativeElement
            .innerHTML
        ).toContain('Product');
      }));

routerLinkActive 在单元测试中不起作用

routerLinkActive not working in unit testing

jasmine

karma-jasmine

angular