我已经设置了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;
}
}
SPEC
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',username: 'foo2',fullName: 'John Fooson'
},{ personId: 3,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,MatChipsModule,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,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();
});
});
});