如何导入共享模块(与Angular Material一起使用)以测试Angular应用程序?

时间:2019-04-14 02:54:25

标签: angular angular-material angular-testing

我正在尝试为同时使用Angular Material和Angular Flex布局的Angular示例应用程序创建测试。

在我的应用程序中,我已经在使用共享模块来导入所有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 :(得分:0)

我必须感谢@yurzui。他要求我接受测试的错误消息。

事实证明,我并不是很在意邮件,我在复制并张贴到此处时注意到了。错误消息确实提到了一个未知标签,我知道它来自Angular Material。但是,下面只是在另一个组件中提到了问题。

这里的要点是AccountComponent是一个选项卡式页面,其中显示了另外两个组件,这些组件在测试模块上没有导入物料模块。我感到很尴尬。