Вот довольно простой Angular компонент, который я хотел бы протестировать с помощью Jest:
export class EmployeeComponent {
employees: Employee[] = [];
constructor(private dialog: MatDialog) {}
onOpenDialog(): void {
this.dialog.open(NewEmployeeDialogComponent)
.afterClosed()
.pipe(filter(employee => employee))
.subscribe(employee => this.employees.push(employee));
}
}
Независимо от того, сколько я стараюсь, я не могу найти элегантное решение для mock open () и afterClosed () звонки. Если только я не перезаписываю значение диалога прямо в классе выше, это ужасное хакерское решение. : (
describe('EmployeeComponent', () => {
let component: EmployeeComponent;
let fixture: ComponentFixture<EmployeeComponent>;
const mockMatDialog = { open: jest.fn() };
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [EmployeeComponent, NewEmployeeDialogComponent, EmployeeListComponent],
imports: [
BrowserAnimationsModule,
BrowserModule,
FormsModule,
HttpClientModule,
MatDialogModule,
MatListModule,
MatSelectModule
],
providers: [{ provide: MatDialog, useValue: mockMatDialog }],
}).overrideModule(BrowserDynamicTestingModule, {
set: {
entryComponents: [NewEmployeeDialogComponent]
}
});
});
beforeEach(() => {
fixture = TestBed.createComponent(EmployeeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should open the dialog and save a valid employee', () => {
component.dialog = TestBed.get(MatDialog);
spyOn(TestBed.get(MatDialog), 'open').and.returnValue({afterClosed: () => of(employee)});
component.openDialog();
expect(component.employees).toStrictEqual([employee]);
});
});
Есть ли у вас какие-либо советы, как это можно хорошо проверить?