ng test выдает ошибку для angular компонентов материала - PullRequest
Новая
       25

ng test выдает ошибку для angular компонентов материала

0 голосов
/ 02 августа 2020

Я получаю несколько сбоев, когда запускаю ng test в моем проекте Angualr 8 на angular материальных компонентах. Я не писал каких-либо конкретных тестов c для этого сценария ios. 

DeleteBotModalComponent > should create
Failed: Template parse errors:
'mat-label' is not a known element:
1. If 'mat-label' is an Angular component, then verify that it is part of this module.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("     <mat-form-field class="col-md-6 example-full-width" appearance="outline">
                    [ERROR ->]<mat-label>Bot ID</mat-label>
                    <input matInput placeholder="" formControlName="id"): ng:///DynamicTestModule/DeleteBotModalComponent.html@8:20
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("m class="example-form" [formGroup]="botDeleteForm">
            <div class="row">
                [ERROR ->]<mat-form-field class="col-md-6 example-full-width" appearance="outline">
                    <mat-l"): ng:///DynamicTestModule/DeleteBotModalComponent.html@7:16
'mat-label' is not a known element:
1. If 'mat-label' is an Angular component, then verify that it is part of this module.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("     <mat-form-field class="col-md-6 example-full-width" appearance="outline">
                    [ERROR ->]<mat-label>Name</mat-label>
                    <input matInput placeholder="" formControlName="name"): ng:///DynamicTestModule/DeleteBotModalComponent.html@12:20
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("id" placeholder="id" name="id" readonly="true">
                </mat-form-field>
                [ERROR ->]<mat-form-field class="col-md-6 example-full-width" appearance="outline">
                    <mat-l"): ng:///DynamicTestModule/

Ниже мой файл delete-bot-modal.component.spe c .ts: 

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';

import { DeleteBotModalComponent } from './delete-bot-modal.component';

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

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

  beforeEach(() => {
    fixture = TestBed.createComponent(DeleteBotModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Может кто-нибудь подскажет, в чем проблема?

1 Ответ

1 голос
/ 02 августа 2020

В тестах Angular компонентов, если ваш компонент имеет зависимости, вам нужно либо имитировать их, либо импортировать. В случае компонентов материала это означает импорт модулей для любых компонентов, используемых в тестируемом компоненте при настройке модуля тестирования. Например: 

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DeleteBotModalComponent ],
      imports: [
        ReactiveFormsModule,
        MatInputModule,
        MatButtonModule, // any necessary modules
      ]
    })
    .compileComponents();
  }));

Конечно, вы также можете создать общий модуль, который импортирует и экспортирует все это, чтобы ускорить и упростить написание тестов.

...