Как изменить вкладки в модульном тесте компонента, использующего вкладки угловых материалов

Question

У меня есть компонент LoginView, в котором есть вкладки угловых материалов.На одной вкладке отображается компонент LoginForm, а на второй вкладке - компонент RegistrationForm.

Что я пытаюсь проверить в LoginView, так это то, что при нажатии на вторую вкладку RegistrationForm будет отображаться.Тем не менее, я понятия не имею, как нажать на вкладку.Я пытался добавить name или id в mat-tab, но он не генерируется в DOM, querySelectorAll() также возвращает null.

Источник:

<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>

Спецификационный файл:

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();
  });
});

Answer 1

Я просто работал над той же проблемой.Ваш тест в порядке.Просто добавьте 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();
  });
}));

Answer 2

Элемент mat-tab - это просто контейнер.Элемент, который обрабатывает щелчок, использует класс mat-tab-label.Попробуйте:

fixture.debugElement.queryAll(By.css('.mat-tab-label'))[1].nativeElement.click();

РЕДАКТИРОВАТЬ:

В качестве альтернативы, включить в свой компонент ссылку на компонент MatTabGroup, а затем установить MatTabGroup.selectedIndex непосредственно или из функции компонента:

Компонент HTML:

<mat-tab-group dynamicHeight class="py-5" #tabGroup=="matTabGroup">
...

Компонент TS:

@ViewChild('tabGroup') tabGroup: MatTabGroup;

setTab(index: number) {
    // maybe add some bounds and null checking
    this.tabGroup.selectedIndex = index;
}

Использование модульного теста:

component.setTab(1):
fixture.detectChanges();