web-dev-qa-db-fra.com

Angular 5 utilisant du matériel, le test de karma au jasmin échoue avec mat-icon

J'essaie d'exécuter le jasmin karma avec

ng test

Surprenez avec tous les problèmes avec Angular Materials. Je vois un exemple de version PLUS ANCIENNE de matériel il y a plusieurs mois quand il s'appelait md-icon au lieu de mat-icon etc...

Ainsi, cela ne corrige pas les erreurs lancées

MaterialModule.forRoot()

Erreur

mat-icon n'est pas un élément connu angular

angularangular-materialkarma-jasmineangular-material2
11
Scott Leary

Je rencontrais les mêmes problèmes lors du test des composants matériels.

Merci à k.vincent d'avoir fourni la bonne réponse pour moi dans les commentaires.

Pour les composants utilisant Material, assurez-vous que votre fichier * .spec ressemble à ceci:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

...

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [ MyComponent ],
        schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
}));
25
mkubal

Mon test échouait également pour ne peut pas se lier à 'formGroup' car ce n'est pas une propriété connue de 'form'; si 'app-Forgot-Password' est un Angular, alors vérifiez qu'il fait partie de ce module; si 'mat-card' est un Angular, puis vérifiez qu'il fait partie de ce module. Dans le fichier de spécifications, j'ai ajouté des importations de ReactiveFormsModule et CUSTOM_ELEMENTS_SCHEMA et cela a fonctionné.

import { ReactiveFormsModule } from '@angular/forms';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

beforeEach(async(() => {
TestBed.configureTestingModule({
  declarations: [ ForgotPasswordComponent ],
  imports: [ReactiveFormsModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
.compileComponents();
}));

Ensuite, j'ai eu une autre erreur: Impossible de se lier à 'routerLink' car ce n'est pas une propriété connue de 'a'. Je pourrais le réparer en ajoutant RouterTestingModule dans le fichier spec:

import {RouterTestingModule} from '@angular/router/testing';

beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule,
    RouterTestingModule
  ],
  declarations: [ LoginFormComponent ]
})
.compileComponents();
}));
0
Petra