Угловой модульный тест для материала стружки с вводом - PullRequest
Новая
       7

Угловой модульный тест для материала стружки с вводом

0 голосов
/ 01 ноября 2019

Я пытаюсь заставить модульный тест работать для элемента mat-chips, в настоящее время я получаю сообщение об ошибке: Невозможно привязать к 'matChipInputFor', так как это не известное свойство 'input'. В настоящее время страница Angular Material не содержит модульных тестов для их примера. Пример, который я использовал, описан в https://material.angular.io/components/chips/overview

Как добавить это свойство, например matChipInputFor, в модульный тест для данного ввода?

Шаблон 

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
             [removable]="removable" (removed)="remove(fruit)">
      {{fruit.name}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input placeholder="New fruit..."
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
</mat-form-field>

Контроллер 

import {Component} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
import {MatChipInputEvent} from '@angular/material/chips';
import {COMMA, ENTER} from '@angular/cdk/keycodes';

export interface Fruit {
  name: string;
}

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  //required for the kitchen sink form
  options: FormGroup;
  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;

  constructor(fb: FormBuilder) {
    this.options = fb.group({
      hideRequired: false,
      floatLabel: 'auto',
    });
  }

  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
  fruits: Fruit[] = [
    {name: 'Lemon'},
    {name: 'Lime'},
    {name: 'Apple'},
  ];

  add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;

    // Add our fruit
    if ((value || '').trim()) {
      this.fruits.push({name: value.trim()});
    }

    // Reset the input value
    if (input) {
      input.value = '';
    }
  }

  remove(fruit: Fruit): void {
    const index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }
}

Юнит-тест (в шаблоне больше элементов) 

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GivenComponent } from './given.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ObserversModule } from '@angular/cdk/observers'; 
import { OverlayModule } from '@angular/cdk/overlay';

//Material imports
import { 
  MatCard,
  MatRadioButton,
  MatRadioGroup,
  MatIcon,
  MatChip,
  MatChipList,
  MatCheckbox,
  MatSlideToggle,
  MatRippleModule,
  MatTabsModule,
  MatDialogModule,
  MatSelectModule,
  MatInputModule
} from '@angular/material';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        FormsModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        ObserversModule, 
        MatRippleModule,
        OverlayModule,
        MatTabsModule,
        MatDialogModule,
        MatSelectModule,
        MatInputModule
      ],
      declarations: [
        GivenComponent,
        MatCard,
        MatRadioButton,
        MatRadioGroup,
        MatIcon,
        MatChip,
        MatChipList,
        MatCheckbox,
        MatSlideToggle
      ]
    });
    fixture = TestBed.createComponent(GivenComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

1 Ответ

0 голосов
/ 01 ноября 2019

Вам необходимо импортировать MatChipsModule, который предоставляет эту директиву.

https://material.angular.io/components/chips/api

...