angular - 带输入的材料芯片的角度单元测试

问题描述

我正在尝试对 mat-chips 元素进行单元测试，目前我收到一个错误：无法绑定到“matChipInputFor”，因为它不是“输入”的已知属性。目前，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();
  });
});

标签： angularunit-testingangular-material

angular - 带输入的材料芯片的角度单元测试

问题描述

解决方案

推荐阅读