我正在尝试为同样使用 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();
});
});
令我惊讶的是,测试现在通过了。我真的想不通为什么。
无论如何,我可以在测试时像在常规应用程序中一样导入共享模块吗?
我必须感谢@yurzui 在这一点上。他要求我在测试中收到错误消息。
事实证明,我并没有真正注意这条消息,而是在复制到这里发帖时注意到了。错误消息确实提到了一个未知标签,我知道它来自 Angular Material。然而,就在它下面提到了另一个组件中的问题。
这里的问题是这AccountComponent
是一个选项卡式页面,它显示了另外两个在测试模块上没有导入材料模块的组件。我觉得很尴尬。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句