我有一个角度CLI项目设置 . 我制作了一个使用角度材质组件的表单,例如 <md-card>
.
我刚刚开始编写我的第一个Karma / Jasmine单元测试,遵循angular docs中的步骤 .
这是我的组件模板:
<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);
});
});
此时,我只是尝试运行基本单元测试,正确显示 Headers .
但是,我遇到了很多特定于材料的错误 . 喜欢
没有MdDialog的提供者 .
我点击一个链接打开一个md Dialog . 代码在(相当长的).ts文件中,但这不是问题 .
我在哪里可以在测试床上添加MdDialog?如果我将它添加到提供者,我会收到错误:“没有覆盖提供者” . 我不知道如何解决这个问题 .
我有什么方法可以配置业力来包括所有材料组件的开始?
谢谢 .
2 回答
通过在模块上调用
forRoot()
来提供所有提供程序对于
2.0.0-beta.4
及更高版本(因为已删除forRoot
方法):对于
2.0.0-beta.11
及更高版本,由于已删除MaterialModule
,您必须自行导入测试用例所需的模块:当前技术要求单独导入Angular Material模块,因为
MaterialModule
已弃用且was removed in 2.0.0-beta.11:然后在TestBed配置中添加与导入相同的列表: