Ошибка при angular модульном тестировании с Жасмином и Кармой - PullRequest
Новая
       3

Ошибка при angular модульном тестировании с Жасмином и Кармой

0 голосов
/ 14 февраля 2020

Я уже импортировал angular материал в моем файле c .ts, но я получаю следующую ошибку при попытке запустить тест, который является тестом этого конкретного компонента:

Ошибка: Ошибки синтаксического анализа шаблона:

'mat-form-field' не является известным элементом: 1. Если 'mat-form-field' является Angular компонентом, то убедитесь, что он является частью этого модуля. 2. Если 'mat-form-field' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение. ("

[ОШИБКА ->]] [dataSource] =" parts "matSort class =" mat-elevation-z8 ">"): ng: ///DynamicTestModule/PartViewComponent.html@6: 23 канал 'uuidAbbrev' не найден ("eader-cell * matHeaderCellDef mat-sort-header> Uuid {{[ERROR ->] row.uuid | uuidAbbrev}}"): ng: ///DynamicTestModule/PartViewComponent.html@10: 44 Невозможно привязать к 'matHeaderRowDef', так как это не известное свойство 'tr'. ("] matHeaderRowDef =" displayProps "> [ERROR ->]] * matRowDef =" let row; columns: displayProps; ">"): ng: ///DynamicTestModule/PartViewComponent.html@24: 35 Привязка свойства matRowDefColumns не используется никакими директивами во встроенном шаблоне. Убедитесь, что имя свойства написано правильно, и все директивы перечислены в «@ NgModule.declarations». ("[ОШИБКА ->] http://localhost: 9876 / _karma_webpack_ / vendor. js: 36418: 17) в TemplateParser.pu sh .. / node_modules/@angular/compiler/fesm5/compiler.js. TemplateParser.parse (http://localhost: 9876 / _karma_webpack_ / vendor. js: 54593: 19 ) в JitCompiler.pu sh .. / node_modules/@angular/compiler/fesm5/compiler.js .JitCompiler._parseTemplate (http://localhost: 9876 / _karma_webpack_ / vendor. js: 60159: 37 ) в JitCompiler.pu sh .. / node_modules / @ angular / compiler / fesm5 / компилятор. js .JitCompiler._compileTemplate (http://localhost: 9876 / _karma_webpack_ / vendor. js: 60146: 23 ) в http://localhost: 9876 / _karma_webpack_ / vendor. js: 60089: 62 в Set.forEach () в JitCompiler.pu sh .. / node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (http://localhost: 9876 / _karma_webpack_ / vendor. js: 60089: 19 ) в http://localhost: 9876 / _karma_webpack_ / vendor. js: 60007: 19 в Object.then (http://localhost: 9876 / _karma_webpack_ / vendor. js: 36409: 77 ) в JitCompiler.pu sh .. / node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndAllComponents (http://localhost: 9876 / _karma_webpack_ / vendor. js: 60005: 26 ) `` `

1 Ответ

0 голосов
/ 14 февраля 2020

Пара вещей:

Чтобы избежать импорта модулей из Angular Материал напрямую, вам нужно создать отдельный модуль Angular. Это хорошая практика, и вам следует придерживаться ее:)

Во-вторых, вам необходимо импортировать модуль Angular Material, который вы только что создали в своей TestBed: 

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

Пример Мой MaterialModule: 

import { NgModule } from '@angular/core';
import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatFormFieldModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule
} from '@angular/material';

@NgModule({
  imports: [
    MatSidenavModule,
    MatToolbarModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatDialogModule,
    MatSelectModule,
    MatInputModule,
    MatFormFieldModule,
    MatAutocompleteModule,
    MatInputModule,
    MatTableModule,
    MatSlideToggleModule,
    MatRadioModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatTabsModule,
    MatRippleModule,
    MatGridListModule,
    MatStepperModule,
    MatCheckboxModule,
    MatMenuModule,
    MatChipsModule,
    MatExpansionModule
  ],
  exports: [
    MatSidenavModule,
    MatToolbarModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatDialogModule,
    MatSelectModule,
    MatInputModule,
    MatFormFieldModule,
    MatAutocompleteModule,
    MatTableModule,
    MatSlideToggleModule,
    MatRadioModule,
    MatDatepickerModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatTabsModule,
    MatRippleModule,
    MatGridListModule,
    MatStepperModule,
    MatMenuModule,
    MatCheckboxModule,
    MatChipsModule,
    MatExpansionModule
  ],
  declarations: []
})
export class MaterialModule {}

Последнее, но не менее важное: возможно, вы получите еще одну ошибку, связанную с pipe uuidAbbrev, обязательно добавьте ее в массив объявлений в TestBed.configureTestingModule

...