angular - 使用 Jasmine 进行测试时如何模拟 MatChipInput

Question

我设置了stackblitz基本显示问题所在。

基本上，当我尝试在包含 MatChipList 的 MatFormField 上触发事件时，我收到一个错误

 Cannot read property 'stateChanges' of undefined at MatChipInput._onInput

我尝试用 MatInput 的替代模拟来覆盖 MatChip 模块。我也尝试过覆盖指令。

HTML

 <h1>Welcome to app!!</h1>

 <div>
  <mat-form-field>
   <mat-chip-list #chipList>
    <mat-chip *ngFor="let contrib of contributors; let idx=index;" [removable]="removable" (removed)="removeContributor(idx)">
     {{contrib.fullName}}
    </mat-chip>
    <input  id="contributor-input"
        placeholder="contributor-input"
        #contributorInput
        [formControl]="contributorCtrl"
        [matAutocomplete]="auto"
        [matChipInputFor]="chipList"
        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
        [matChipInputAddOnBlur]="addOnBlur">
  </mat-chip-list>
 </mat-form-field>
</div>

TS

import { Component, Input } from '@angular/core';
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

contributors = [{fullName: 'foo bar'}];
removable = true;
addOnBlur = false;
separatorKeysCodes: number[] = [
    ENTER,
    COMMA,
];

contributorCtrl = new FormControl();

filteredPeople: Observable<Array<any>>;

@Input() peopleArr = [];

constructor() {
   this.filteredPeople = this.contributorCtrl.valueChanges.pipe(startWith(''), map((value: any) => 
this.searchPeople(value)));
 }

 searchPeople(searchString: string) {
    const filterValue = String(searchString).toLowerCase();
    const result = this.peopleArr.filter((option) => option.fullName.toLowerCase().includes(filterValue));
    return result;
  }
}

规范

import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { 
  BrowserDynamicTestingModule, 
  platformBrowserDynamicTesting 
} from '@angular/platform-browser-dynamic/testing';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {  MatFormFieldModule, 
      MatAutocompleteModule, 
      MatInputModule,
      MatChipsModule } from '@angular/material';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';

describe('AppComponent', () => {

  const mockPeopleArray = [
    { personId: 1,
      email: 'foo1@bar.com',
      department: 'fake1',
      username: 'foo1',
      fullName: 'Foo Johnson'
     },
     { personId: 2,
      email: 'foo2@bar.com',
      department: 'fake1',
      username: 'foo2',
      fullName: 'John Fooson'
     },
     { personId: 3,
      email: 'foo1@bar.com',
      department: 'fake2',
      username: 'foo3',
      fullName: 'Mary Smith'
     }
 ];


 let app: AppComponent;
 let fixture: ComponentFixture<AppComponent>;
 let nativeElement: HTMLElement;

 beforeAll( ()=> {
  TestBed.initTestEnvironment(BrowserDynamicTestingModule, 
  platformBrowserDynamicTesting());
  });
  beforeEach(
   async(() => {
     TestBed.configureTestingModule({
       imports: [
       RouterTestingModule,
       MatFormFieldModule,
       FormsModule,
       ReactiveFormsModule,
       MatAutocompleteModule,
       MatChipsModule,
       MatInputModule,
       NoopAnimationsModule
       ],
       declarations: [AppComponent]
     }).compileComponents();

   fixture = TestBed.createComponent(AppComponent);
   app = fixture.debugElement.componentInstance;
   nativeElement = fixture.nativeElement;
  })
 );
 it(
 'should render title \'Welcome to app!!\' in a h1 tag', async(() => {
  fixture.detectChanges();
  expect(nativeElement.querySelector('h1').textContent).toContain('Welcome to app!!');
})
);

it('searchPeople should trigger and filter', (done) => {
  app.peopleArr = mockPeopleArray;

  const expected = [
    { personId: 3,
      email: 'foo1@bar.com',
      department: 'fake2',
      username: 'foo3',
      fullName: 'Mary Smith'
     }
  ];

  const myInput = <HTMLInputElement> 
  nativeElement.querySelector('#contributor-input');
  expect(myInput).not.toBeNull();
  myInput.value = 'Mar';
  spyOn(app, 'searchPeople').and.callThrough();
  myInput.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    fixture.whenStable().then(() => {
        const myDiv = nativeElement.querySelector('#contrib-div');
        expect(app.searchPeople).toHaveBeenCalledWith('mar');
        app.filteredPeople.subscribe(result => 
        expect(result).toEqual(<any>expected));
        done();
    });
  });
 });

Answer 1

你得到:

Cannot read property 'stateChanges' of undefined at MatChipInput._onInput

因为在触发 myInput.dispatchEvent(new Event('input')) 时 Angular 尚未完成绑定(bind)

要解决这个问题，您应该调用 fixture.detectChanges首先，Angular 将执行数据绑定(bind)。

然后你不需要使这个测试异步，因为所有操作都是同步执行的。

现在关于您的 searchPeople方法。自从您使用 startWith('') 以初始值开始订阅后，它将被调用两次:

this.contributorCtrl.valueChanges.pipe(startWith('')

所以你需要跳过第一次调用并在触发 input 后检查调用结果事件。

app.filteredPeople.pipe(skip(1)).subscribe(result => {
  ...
});

spyOn(app, "searchPeople").and.callThrough();

myInput.dispatchEvent(new Event("input"));
expect(app.searchPeople).toHaveBeenCalledWith("Mar");

整个测试代码:

it("searchPeople should trigger and filter", () => {
  app.peopleArr = mockPeopleArray;

  const expected = [
    {
      personId: 3,
      email: "foo1@bar.com",
      department: "fake2",
      username: "foo3",
      fullName: "Mary Smith"
    }
  ];

  fixture.detectChanges();
  const myInput = nativeElement.querySelector<HTMLInputElement>(
    "#contributor-input"
  );
  expect(myInput).not.toBeNull();
  myInput.value = "Mar";

  app.filteredPeople.pipe(skip(1)).subscribe(result => 
    expect(result).toEqual(expected);
  );

  spyOn(app, "searchPeople").and.callThrough();

  myInput.dispatchEvent(new Event("input"));
  expect(app.searchPeople).toHaveBeenCalledWith("Mar");
}); 

Forked Stackblitz