Angular тестирование MatDialog с Jest - PullRequest
1 голос
/ 04 февраля 2020

Вот довольно простой 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]);
  });
});

Есть ли у вас какие-либо советы, как это можно хорошо проверить?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...