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)
,我认为这意味着没有选项卡被设置为活动状态。
答案 0 :(得分:0)
即使阅读本期杂志,我也面临着同样的问题。
但是我在应用了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');
}));
答案 1 :(得分:-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');
});