Pertanyaan Cara membuat komponen material bekerja dengan Karma dalam pengujian unit Angular


Saya memiliki proyek CLI angular yang disiapkan. Saya telah membuat formulir yang menggunakan komponen material sudut, seperti <md-card>.

Saya baru memulai dengan menulis tes unit Karma / Jasmine saya yang pertama, mengikuti langkah-langkah dalam dokumen sudut.

Ini adalah templat komponen saya:

<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>

Ini adalah spesifikasi karma saya:

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);
    });
});

Pada titik ini, saya hanya mencoba menjalankan uji unit dasar bahwa judul sedang ditampilkan dengan benar.

Namun, saya mendapatkan banyak kesalahan spesifik material. Seperti

Tidak ada penyedia untuk MdDialog.

Saya membuka Dialog md tentang mengklik tautan. Kode ini ada di file .ts (cukup panjang), tetapi itu bukan masalahnya di sini.

Di mana saya akan menambahkan MdDialog di testbed? Jika saya menambahkannya ke penyedia, saya mendapatkan kesalahan: "tidak ada penyedia untuk overlay". Saya tidak tahu cara memperbaikinya.

Adakah cara saya mengkonfigurasikan karma untuk memasukkan semua komponen material saat mulai?

Terima kasih.


12
2018-01-05 11:33


asal


Jawaban:


Semua penyedia disediakan dengan menelepon forRoot() pada modul

imports: [ MaterialModule.forRoot() ]

Untuk versi 2.0.0-beta.4 dan kemudian (sejak itu forRoot metode telah dihapus):

imports: [ MaterialModule ]

Untuk versi 2.0.0-beta.11 dan kemudian, sejak itu MaterialModule telah dihapus, Anda harus mengimpor modul yang Anda perlukan untuk kasus uji coba Anda sendiri:

imports: [ MatButtonModule, MatDialogModule ]

1
2018-01-05 11:47



Teknik saat ini panggilan untuk impor individu modul Material Angular, sebagai MaterialModule sudah ditinggalkan dan dihapus di 2.0.0-beta.11:

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

Kemudian tambahkan daftar yang sama dengan impor dalam konfigurasi TestBed:

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

6
2017-09-26 15:51