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

罗德里戈·里拉

我正在尝试为同样使用 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular 应用程序中的集成测试

我应该为Angular 6应用程序使用Angular Material还是Bootstrap Material?

在Angular应用程序之间共享代码

在Angular应用程序中嵌套模块

如何将angular.js模块导入Angular应用程序?

如何对 Angular 应用程序子模块的所有组件执行 ng 测试

Angular 2模块导入中断应用程序

使用Angular Material核心主题的Angular应用程序中的字体在哪里加载?

您如何部署Angular应用程序?

如何运行angular 2应用程序?

Angular应用程序如何启动?

使用Angular 2的Cordova应用程序

使用 angular 4 的 Github 应用程序

使用Material Design的Angular2应用程序的常规错误处理程序

如何在Angular Material应用程序中的非抠像元素上使用原色?

如何仅使用Angular Material使我的应用程序具有响应能力?

测试angular 2应用程序时如何在Router上正确使用SharedModules?

在Angular / Ionic应用程序中使用'normal'npm模块

Angular 11 库模块已导入但未在消费应用程序中使用

如何在Angular 1应用程序中嵌入独立的Angular 2应用程序

我如何根据用户是否在 angular 应用程序中登录来选择菜单

我可以在 angularJS 应用程序中使用 angular material 2 吗?

Angular Material-在FormArray上为扩展面板使用* ngFor后,应用程序崩溃

将带有 rxjs 的 angular 5 模块导入到 angular 8 应用程序中

如何在 Angular 6 中测试应用程序/根组件

如何检测angular2 Web应用程序处于测试模式

如何在不运行整个应用程序的情况下设计/测试Angular组件?

Angular 应用程序来确认用户来自哪里

Angular / NativeScript应用程序中的单元测试