Ошибка теста при имитации события щелчка с помощью библиотеки тестирования

Я реализую тест директивы Angular с помощью библиотеки тестирования (@testing-library/angular), и у меня есть некоторые проблемы, одна из которых, я не могу имитировать событие щелчка:

mask.spec.ts

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'jst-input-mask',
  template: `
    <input placeholder="tax" [formControl]="control" jstPercentMask />
  `,
})
class TestMaskDirectiveComponent {
  control = new FormControl(null);
}

describe('JST Percent Mask Directive', () => {
  let component: RenderResult<TestMaskDirectiveComponent>;
  let componentInstance: TestMaskDirectiveComponent;

  beforeEach(async () => {
    component = await render(TestMaskDirectiveComponent, {
      imports: [ReactiveFormsModule, JstPercentMaskModule],
      declarations: [TestMaskDirectiveComponent],
    });

    componentInstance = component.fixture
      .componentInstance as TestMaskDirectiveComponent;
  });

  it('should be render an input with directive', async () => {
    // initial expects
    expect(componentInstance.control.pristine).toBeTruthy();
    expect(componentInstance.control.dirty).toBeFalsy();
    expect(componentInstance.control.touched).toBeFalsy();

    const { getByPlaceholderText } = component;
    const taxInput = getByPlaceholderText(/tax/i);
    fireEvent.click(taxInput, { button: 2 });

    component.detectChanges();
    expect(componentInstance.control.touched).toBeTruthy();

    component.debug();
  });
});

Я знаю, когда мы запускаем click fn thedetectChange вызывается, но тест всегда терпит неудачу.

Что не так с этой логикой тестирования?

0 ответов

Другие вопросы по тегам