如何在 Angular 单元测试中使材料组件与 Karma 一起工作

新手上路,请多包涵

我设置了一个角度 CLI 项目。我制作了一个使用角材料组件的表格,例如 <md-card>

我刚开始按照 角度文档 中的步骤编写我的第一个 Karma/Jasmine 单元测试。

这是我的组件模板:

 <md-card [ngClass]="'dialog-card'">
<md-card-title [ngClass]="'dialog-title'">
    {{title}}
</md-card-title>
<md-card-content>

    <form (ngSubmit)="login()" #loginForm="ngForm">

        <md-input-container class="md-block">
            <input md-input [(ngModel)]="user.email"
                name="userEmail" type="email" placeholder="Email"
                ngControl="userEmail"
            required>
        </md-input-container>
        <br>

        <md-input-container class="md-block">
            <input md-input [(ngModel)]="user.password"
                name="userPassword" type="password" placeholder="Password"
                ngControl="userPassword"
            required>
        </md-input-container>
        <br>

        <tm-message msgText="Wrong username or password" *ngIf="showError"></tm-message>
        <br>

        <button md-button type="submit" [disabled]="!loginForm.form.valid">Login</button>

        <p (click)="openForgotPasswordModal()">Forgot Password?</p>

    </form>

</md-card-content>

这是我的业力规范:

 import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';
import { MaterialModule, MdDialogRef, MdDialog  } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';

import { TmLoginComponent } from './tm-login.component';
import { TmMessageComponent } from '../../shared/components/tm-message.component';
import { UserAuthenticationService } from '../login/user-authentication.service';

describe('TmLoginComponent (inline template)', () => {

let comp: TmLoginComponent;
let fixture: ComponentFixture < TmLoginComponent > ;
let de: DebugElement;
let el: HTMLElement;

beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [TmLoginComponent, TmMessageComponent], // declare the test component
        imports: [MaterialModule, FormsModule,
            RouterTestingModule.withRoutes(
                [{
                    path: 'login',
                    component: TmLoginComponent
                }, ])
        ],
        providers: [UserAuthenticationService],

    });

    fixture = TestBed.createComponent(TmLoginComponent);

    comp = fixture.componentInstance; // TmLoginComponent test instance

    // query for the title <h1> by CSS element selector
    de = fixture.debugElement.query(By.css('.title'));
    el = de.nativeElement;
});

    it('should display original title', () => {
        fixture.detectChanges();
        expect(el.textContent).toContain(comp.title);
    });
});

在这一点上,我只是想运行基本单元测试以确保标题正确显示。

但是,我遇到了很多具体的材料错误。喜欢

没有 MdDialog 的提供程序。

我在单击链接时打开了一个 md 对话框。代码在(相当长的).ts 文件中,但这不是这里的问题。

我应该在测试台的什么地方添加 MdDialog?如果我将它添加到提供商,我会收到错误消息:“没有覆盖提供商”。我不知道如何解决这个问题。

有什么方法可以配置 karma 以在开始时包含所有材料组件?

谢谢。

原文由 Snowman 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 315
2 个回答

所有提供者都是通过在模块上调用 forRoot() 提供的

imports: [ MaterialModule.forRoot() ]

对于版本 2.0.0-beta.4 及更高版本(因为 forRoot 方法已被删除):

 imports: [ MaterialModule ]

对于版本 2.0.0-beta.11 及更高版本,因为 MaterialModule 已被删除,您必须自己导入测试用例所需的模块:

 imports: [ MatButtonModule, MatDialogModule ]

原文由 Paul Samsotha 发布,翻译遵循 CC BY-SA 3.0 许可协议

当前技术要求单独导入 Angular Material 模块,因为 MaterialModule 已弃用并 在 2.0.0-beta.11 中删除

 import {
    MatButtonModule,
    MatIconModule
} from '@angular/material';

然后在 TestBed 配置中添加与导入相同的列表:

 beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [ ... ],
        imports: [
            MatButtonModule,
            MatIconModule,
            ...
        ],
        providers: [ ... ]
    })
        .compileComponents();
}));

原文由 isherwood 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题