如何使材料組件與Karma一起在單元測試中使用Angular

Question

我有一個角度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);
    });
});

此時，我只是嘗試運行基本單元測試，正確顯示標題。

但是，我遇到了很多特定於材料的錯誤。 喜歡

沒有MdDialog的提供者。

我點擊一個鏈接打開一個md Dialog。 代碼在（相當長的）.ts文件中，但這不是問題。

我在哪里可以在測試床上添加MdDialog？ 如果我將它添加到提供者，我會收到錯誤：“沒有覆蓋提供者”。 我不知道如何解決這個問題。

我有什么方法可以配置業力來包括所有材料組件的開始？

謝謝。

Answer 1

當前技術要求單獨導入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();
}));

Answer 2

通過在模塊上調用forRoot()來提供所有提供程序

imports: [ MaterialModule.forRoot() ]

對於版本2.0.0-beta.4及更高版本（因為已刪除forRoot方法）：

imports: [ MaterialModule ]

對於版本2.0.0-beta.11及更高版本，由於已刪除MaterialModule ，您必須2.0.0-beta.11導入測試用例所需的模塊：

imports: [ MatButtonModule, MatDialogModule ]

Answer 3

我今天也一直在努力解決這個問題，你需要通過使用jasmine中的提供程序來自己模擬必要的類。 這是一個麻煩，我希望有一個更好的方法，但至少沒有更多的錯誤......

如果有人有更好的想法，請啟發社區的其他人！

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AlertDialogComponent } from './alert-dialog.component';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

describe('AlertDialogComponent', () => {
  let component: AlertDialogComponent;
  let fixture: ComponentFixture<AlertDialogComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [MatDialogModule],
      declarations: [AlertDialogComponent],
      providers: [
        {
          provide: MatDialogRef, useValue: {}
        },
        {
          provide: MAT_DIALOG_DATA, useValue:{}
        }
     ],
    }).compileComponents();
  }));