Jasmine & Karma: «mat-chip-list» не является известным элементом при тестировании Angular - PullRequest
Новая
       11

Jasmine & Karma: «mat-chip-list» не является известным элементом при тестировании Angular

0 голосов
/ 08 апреля 2019

У меня появляется эта ошибка, когда я пытаюсь запустить тесты с Жасмином и Кармой: 

'mat-chip-list' is not a known element:
1. If 'mat-chip-list' is an Angular component, then verify that it is part of this module.
2. If 'mat-chip-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("iv class="tag">IAM</div>
    <mat-form-field class="chips" (focusout)="saveFormValue('iam')">
      [ERROR ->]<mat-chip-list #chipListIAM class="field">
        <mat-chip *ngFor="let iam of iams"
               "): ng:///DynamicTestModule/Component.html@33:6

Проблема в том, что когда я запускаю свой код Angular, у меня нет такой проблемы, все работает правильно, так как я объявил свой элемент в AppModule, поэтому я не знаю, почему во время тестирования у меня появляется эта ошибка.

Вот мой HTML-код: 

  <div class="left-side">
    <mat-form-field class="chips" (focusout)="saveFormValue('groups')">
      <mat-chip-list #chipListGroup class="field">
        <mat-chip *ngFor="let group of groups"
                  [selectable]="selectable"
                  [removable]="removable"
                  [color]="primary"
                  selected
                  (removed)="onRemoveGroup(group)">
          {{group.name}}
          <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
        </mat-chip>
      </mat-chip-list>
    </mat-form-field>
  </div>

А вот мой AppModule: 

@NgModule({
  declarations: [Component, DetailsComponent],
  exports: [
    Component
  ],
  imports: [
    CommonModule,
    MatChipsModule,
    MatFormFieldModule,
    MatInputModule,
    BrowserAnimationsModule,
    MatIconModule,
    MatSelectModule,
    FormsModule
  ]
})

А вот мой тестовый файл: 

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

import { FormRoutesDetailsComponent } from './details.component';
import { FormsModule } from '@angular/forms';

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

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

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

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

1 Ответ

0 голосов
/ 08 апреля 2019

Вы должны импортировать MatChipsModule (и каждый другой модуль, используемый компонентом, который будет тестироваться) в вашем TestingModule, а также. 

TestBed.configureTestingModule({
  declarations: [ DetailsComponent ],
  imports: [
    FormsModule,
    MatChipsModule
  ]
})
...