[英]How to change tabs in the unit test of a component that uses Angular Material Tabs
I have a LoginView
component in which I have Angular Material Tabs.我有一个
LoginView
组件,其中有 Angular Material Tabs。 In one tab there's a LoginForm
component displayed and in a second tab there's a RegistrationForm
component.在一个选项卡中显示了一个
LoginForm
组件,在第二个选项卡中显示了一个RegistrationForm
组件。
What I try to test in LoginView
is that when I click on a second tab, a RegistrationForm
would be displayed.我尝试在
LoginView
测试的是,当我单击第二个选项卡时,会显示一个RegistrationForm
。 However, I have no idea how to click a tab.但是,我不知道如何单击选项卡。 I've tried adding
name
or id
to mat-tab but it isn't being generated in DOM, querySelectorAll()
also returns null
.我试过将
name
或id
添加到 mat-tab 但它不是在 DOM 中生成的, querySelectorAll()
也返回null
。
Source:来源:
<mat-tab-group dynamicHeight class="py-5">
<mat-tab label="{{'form.letsLogIn' | translate}}">
<app-login-form></app-login-form>
</mat-tab>
<mat-tab label="{{'form.letsRegister' | translate}}">
<app-registration-form></app-registration-form>
</mat-tab>
</mat-tab-group>
Spec file:规范文件:
import { Component } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginViewComponent } from './login-view.component';
import { TranslateModule } from '@ngx-translate/core';
import { MatTabsModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@Component({selector: 'app-login-form', template: ''})
class LoginFormStubComponent {}
@Component({selector: 'app-registration-form', template: ''})
class RegistrationFormStubComponent {}
describe('LoginViewComponent', () => {
let component: LoginViewComponent;
let fixture: ComponentFixture<LoginViewComponent>;
let compiled: any;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
LoginViewComponent,
LoginFormStubComponent,
RegistrationFormStubComponent ],
imports: [
TranslateModule.forRoot(),
MatTabsModule,
BrowserAnimationsModule
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LoginViewComponent);
component = fixture.componentInstance;
compiled = fixture.nativeElement;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should have a title', () => {
expect(compiled.querySelector('h1')).toBeTruthy();
});
it('should display login form at start', () => {
expect(compiled.querySelector('app-login-form')).toBeTruthy();
});
it('should display registration form after clicking second tab', () => {
compiled = fixture.nativeElement;
compiled.querySelectorAll('mat-tab')[1].click();
fixture.detectChanges();
expect(compiled.querySelector('app-registration-form')).toBeTruthy();
});
});
I just worked the same problem.我刚刚解决了同样的问题。 Your test is fine.
你的测试没问题。 Just add async() and use whenStable().
只需添加 async() 并使用 whenStable()。
it('should display registration form after clicking second tab', async(() => {
compiled = fixture.nativeElement;
compiled.querySelectorAll('mat-tab')[1].click();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(compiled.querySelector('app-registration-form')).toBeTruthy();
});
}));
The mat-tab
element is just the container. mat-tab
元素只是容器。 The element that handles the click uses the class mat-tab-label
.处理点击的元素使用类
mat-tab-label
。 Try:尝试:
fixture.debugElement.queryAll(By.css('.mat-tab-label'))[1].nativeElement.click();
EDIT:编辑:
Alternatively, include inside your component a reference to the MatTabGroup
component, and then set MatTabGroup.selectedIndex
directly or from a component function:或者,在您的组件中包含对
MatTabGroup
组件的引用,然后直接或从组件函数设置MatTabGroup.selectedIndex
:
Component HTML:组件 HTML:
<mat-tab-group dynamicHeight class="py-5" #tabGroup=="matTabGroup">
...
Component TS:组件 TS:
@ViewChild('tabGroup') tabGroup: MatTabGroup;
setTab(index: number) {
// maybe add some bounds and null checking
this.tabGroup.selectedIndex = index;
}
Unit test usage:单元测试用法:
component.setTab(1):
fixture.detectChanges();
try this:尝试这个:
it('tab change', () => {
component.onTabChanged(1);
fixture.detectChanges();
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.