Как импортировать общий модуль (с Angular Material) для тестирования приложений Angular? - PullRequest
Новая
       42

Как импортировать общий модуль (с Angular Material) для тестирования приложений Angular?

0 голосов
/ 14 апреля 2019

Я пытаюсь начать создание тестов для примера приложения Angular, в котором также используются макеты Angular Material и Angular Flex.

В моем приложении я уже использую общий модуль для импорта всех компонентов Angular Material. Это выглядит так: 

import { NgModule } from '@angular/core';

import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatNativeDateModule } from '@angular/material/core';
import { MatTabsModule } from '@angular/material/tabs';

@NgModule({
  imports: [
    MatButtonModule, MatToolbarModule, MatIconModule, MatCardModule,
    MatDatepickerModule, MatFormFieldModule, MatInputModule,
    MatTabsModule, MatNativeDateModule
  ],
  exports: [
    MatButtonModule, MatToolbarModule, MatIconModule, MatCardModule,
    MatDatepickerModule, MatFormFieldModule, MatInputModule,
    MatTabsModule
  ]
})
export class MaterialModule {}

Когда я впервые запустил ng test, каждый компонент не прошел бы базовый тест создания. Скорее всего, в сообщениях упоминаются теги Angular Material. Итак, я попробовал это: 

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AccountComponent } from './account.component';
import { MaterialModule } from '../material.module';

describe('AccountComponent', () => {
  let component: AccountComponent;
  let fixture: ComponentFixture<AccountComponent>;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(AccountComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

Этот тест, однако, не прошел. Однако я попытался импортировать модули вручную, один за другим, как указано в сообщениях об ошибках: 

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AccountComponent } from './account.component';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatTabsModule } from '@angular/material/tabs';
import { MatCardModule } from '@angular/material/card';

describe('AccountComponent', () => {
  let component: AccountComponent;
  let fixture: ComponentFixture<AccountComponent>;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(AccountComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

К моему удивлению, тест сейчас проходит. И я действительно не могу понять, почему.

Можно ли в любом случае импортировать общий модуль при тестировании так же, как в обычном приложении?

1 Ответ

0 голосов
/ 14 апреля 2019

Я должен поблагодарить @yurzui за это. Он запросил сообщение об ошибке, которое я получаю на своем тесте.

Как выяснилось, я не особо обращал внимание на сообщение и заметил, что при копировании в пост здесь. В сообщении об ошибке упоминается неизвестный тег, который я знаю из Angular Material. Однако чуть ниже упоминалось о проблеме в другом компоненте.

Подвох в том, что AccountComponent - это страница с вкладками, на которой отображаются еще два компонента, которые в модуле тестирования не импортировали модуль материала. Я чувствую себя смущенным.

...