chore: update user event usage in specs (#395)

Closes #394

Author: markgoho

.githooks/pre-commit

@@ -1,8 +1,10 @@
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
 
 import { SingleComponent } from './00-single-component';
 
 test('renders the current value and can increment and decrement', async () => {
+  const user = userEvent.setup();
   await render(SingleComponent);
 
   const incrementControl = screen.getByRole('button', { name: /increment/i });
@@ -11,10 +13,10 @@ test('renders the current value and can increment and decrement', async () => {
 
   expect(valueControl).toHaveTextContent('0');
 
-  fireEvent.click(incrementControl);
-  fireEvent.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
   expect(valueControl).toHaveTextContent('2');
 
-  fireEvent.click(decrementControl);
+  await user.click(decrementControl);
   expect(valueControl).toHaveTextContent('1');
 });

apps/example-app/src/app/examples/00-single-component.spec.ts

@@ -1,8 +1,10 @@
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
 
 import { NestedButtonComponent, NestedValueComponent, NestedContainerComponent } from './01-nested-component';
 
 test('renders the current value and can increment and decrement', async () => {
+  const user = userEvent.setup();
   await render(NestedContainerComponent, {
     declarations: [NestedButtonComponent, NestedValueComponent],
   });
@@ -13,10 +15,10 @@ test('renders the current value and can increment and decrement', async () => {
 
   expect(valueControl).toHaveTextContent('0');
 
-  fireEvent.click(incrementControl);
-  fireEvent.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
   expect(valueControl).toHaveTextContent('2');
 
-  fireEvent.click(decrementControl);
+  await user.click(decrementControl);
   expect(valueControl).toHaveTextContent('1');
 });

apps/example-app/src/app/examples/01-nested-component.spec.ts

@@ -1,8 +1,10 @@
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
 
 import { InputOutputComponent } from './02-input-output';
 
 test('is possible to set input and listen for output', async () => {
+  const user = userEvent.setup();
   const sendValue = jest.fn();
 
   await render(InputOutputComponent, {
@@ -22,17 +24,18 @@ test('is possible to set input and listen for output', async () => {
 
   expect(valueControl).toHaveTextContent('47');
 
-  fireEvent.click(incrementControl);
-  fireEvent.click(incrementControl);
-  fireEvent.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
   expect(valueControl).toHaveTextContent('50');
 
-  fireEvent.click(sendControl);
+  await user.click(sendControl);
   expect(sendValue).toHaveBeenCalledTimes(1);
   expect(sendValue).toHaveBeenCalledWith(50);
 });
 
 test('is possible to set input and listen for output with the template syntax', async () => {
+  const user = userEvent.setup();
   const sendSpy = jest.fn();
 
   await render('<app-fixture [value]="47" (sendValue)="sendValue($event)" (clicked)="clicked()"></app-fixture>', {
@@ -48,12 +51,12 @@ test('is possible to set input and listen for output with the template syntax',
 
   expect(valueControl).toHaveTextContent('47');
 
-  fireEvent.click(incrementControl);
-  fireEvent.click(incrementControl);
-  fireEvent.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
   expect(valueControl).toHaveTextContent('50');
 
-  fireEvent.click(sendControl);
+  await user.click(sendControl);
   expect(sendSpy).toHaveBeenCalledTimes(1);
   expect(sendSpy).toHaveBeenCalledWith(50);
 });

apps/example-app/src/app/examples/02-input-output.spec.ts

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { FormsComponent } from './03-forms';
 
 test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => {
+  const user = userEvent.setup();
   await render(FormsComponent);
 
   const nameControl = screen.getByRole('textbox', { name: /name/i });
@@ -16,19 +17,19 @@ test('is possible to fill in a form and verify error messages (with the help of
   expect(errors).toContainElement(screen.queryByText('color is required'));
 
   expect(nameControl).toBeInvalid();
-  userEvent.type(nameControl, 'Tim');
-  userEvent.clear(scoreControl);
-  userEvent.type(scoreControl, '12');
+  await user.type(nameControl, 'Tim');
+  await user.clear(scoreControl);
+  await user.type(scoreControl, '12');
   fireEvent.blur(scoreControl);
-  userEvent.selectOptions(colorControl, 'G');
+  await user.selectOptions(colorControl, 'G');
 
   expect(screen.queryByText('name is required')).not.toBeInTheDocument();
   expect(screen.getByText('score must be lesser than 10')).toBeInTheDocument();
   expect(screen.queryByText('color is required')).not.toBeInTheDocument();
 
   expect(scoreControl).toBeInvalid();
-  userEvent.clear(scoreControl);
-  userEvent.type(scoreControl, '7');
+  await user.clear(scoreControl);
+  await user.type(scoreControl, '7');
   fireEvent.blur(scoreControl);
   expect(scoreControl).toBeValid();
 

apps/example-app/src/app/examples/03-forms.spec.ts

@@ -5,6 +5,8 @@ import { MaterialModule } from '../material.module';
 import { MaterialFormsComponent } from './04-forms-with-material';
 
 test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => {
+  const user = userEvent.setup();
+
   const { fixture } = await render(MaterialFormsComponent, {
     imports: [MaterialModule],
   });
@@ -22,14 +24,14 @@ test('is possible to fill in a form and verify error messages (with the help of
   expect(errors).toContainElement(screen.queryByText('color is required'));
   expect(errors).toContainElement(screen.queryByText('agree is required'));
 
-  userEvent.type(nameControl, 'Tim');
-  userEvent.clear(scoreControl);
-  userEvent.type(scoreControl, '12');
-  userEvent.click(colorControl);
-  userEvent.click(screen.getByText(/green/i));
+  await user.type(nameControl, 'Tim');
+  await user.clear(scoreControl);
+  await user.type(scoreControl, '12');
+  await user.click(colorControl);
+  await user.click(screen.getByText(/green/i));
 
   expect(checkboxControl).not.toBeChecked();
-  userEvent.click(checkboxControl);
+  await user.click(checkboxControl);
   expect(checkboxControl).toBeChecked();
   expect(checkboxControl).toBeValid();
 
@@ -39,11 +41,11 @@ test('is possible to fill in a form and verify error messages (with the help of
   expect(screen.queryByText('agree is required')).not.toBeInTheDocument();
 
   expect(scoreControl).toBeInvalid();
-  userEvent.clear(scoreControl);
-  userEvent.type(scoreControl, '7');
+  await user.clear(scoreControl);
+  await user.type(scoreControl, '7');
   expect(scoreControl).toBeValid();
 
-  userEvent.type(dateControl, '08/11/2022');
+  await user.type(dateControl, '08/11/2022');
 
   expect(errors).not.toBeInTheDocument();
 
@@ -65,6 +67,8 @@ test('is possible to fill in a form and verify error messages (with the help of
 });
 
 test('set and show pre-set form values', async () => {
+  const user = userEvent.setup();
+
   const { fixture, detectChanges } = await render(MaterialFormsComponent, {
     imports: [MaterialModule],
   });
@@ -87,7 +91,7 @@ test('set and show pre-set form values', async () => {
   expect(scoreControl).toHaveValue(4);
   expect(colorControl).toHaveTextContent('Blue');
   expect(checkboxControl).toBeChecked();
-  userEvent.click(checkboxControl);
+  await user.click(checkboxControl);
 
   const form = screen.getByRole('form');
   expect(form).toHaveFormValues({

apps/example-app/src/app/examples/04-forms-with-material.spec.ts

@@ -1,10 +1,13 @@
 import { TestBed } from '@angular/core/testing';
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
 import { provideMock, Mock, createMock } from '@testing-library/angular/jest-utils';
+import userEvent from '@testing-library/user-event';
 
 import { ComponentWithProviderComponent, CounterService } from './05-component-provider';
 
 test('renders the current value and can increment and decrement', async () => {
+  const user = userEvent.setup();
+
   await render(ComponentWithProviderComponent, {
     componentProviders: [
       {
@@ -20,15 +23,17 @@ test('renders the current value and can increment and decrement', async () => {
 
   expect(valueControl).toHaveTextContent('0');
 
-  fireEvent.click(incrementControl);
-  fireEvent.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
   expect(valueControl).toHaveTextContent('2');
 
-  fireEvent.click(decrementControl);
+  await user.click(decrementControl);
   expect(valueControl).toHaveTextContent('1');
 });
 
 test('renders the current value and can increment and decrement with a mocked jest-utils service', async () => {
+  const user = userEvent.setup();
+
   const counter = createMock(CounterService);
   let fakeCounterValue = 50;
   counter.increment.mockImplementation(() => (fakeCounterValue += 10));
@@ -50,25 +55,27 @@ test('renders the current value and can increment and decrement with a mocked je
 
   expect(valueControl).toHaveTextContent('50');
 
-  fireEvent.click(incrementControl);
-  fireEvent.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
   expect(valueControl).toHaveTextContent('70');
 
-  fireEvent.click(decrementControl);
+  await user.click(decrementControl);
   expect(valueControl).toHaveTextContent('60');
 });
 
 test('renders the current value and can increment and decrement with provideMocked from jest-utils', async () => {
+  const user = userEvent.setup();
+
   await render(ComponentWithProviderComponent, {
     componentProviders: [provideMock(CounterService)],
   });
 
   const incrementControl = screen.getByRole('button', { name: /increment/i });
   const decrementControl = screen.getByRole('button', { name: /decrement/i });
 
-  fireEvent.click(incrementControl);
-  fireEvent.click(incrementControl);
-  fireEvent.click(decrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(decrementControl);
 
   const counterService = TestBed.inject(CounterService) as Mock<CounterService>;
   expect(counterService.increment).toHaveBeenCalledTimes(2);

apps/example-app/src/app/examples/05-component-provider.spec.ts

@@ -1,9 +1,12 @@
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
 import { StoreModule } from '@ngrx/store';
+import userEvent from '@testing-library/user-event';
 
 import { WithNgRxStoreComponent, reducer } from './06-with-ngrx-store';
 
 test('works with ngrx store', async () => {
+  const user = userEvent.setup();
+
   await render(WithNgRxStoreComponent, {
     imports: [
       StoreModule.forRoot(
@@ -23,10 +26,10 @@ test('works with ngrx store', async () => {
 
   expect(valueControl).toHaveTextContent('0');
 
-  fireEvent.click(incrementControl);
-  fireEvent.click(incrementControl);
+  await user.click(incrementControl);
+  await user.click(incrementControl);
   expect(valueControl).toHaveTextContent('20');
 
-  fireEvent.click(decrementControl);
+  await user.click(decrementControl);
   expect(valueControl).toHaveTextContent('10');
 });

apps/example-app/src/app/examples/06-with-ngrx-store.spec.ts

@@ -1,10 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
 
 import { WithNgRxMockStoreComponent, selectItems } from './07-with-ngrx-mock-store';
 
 test('works with provideMockStore', async () => {
+  const user = userEvent.setup();
+
   await render(WithNgRxMockStoreComponent, {
     providers: [
       provideMockStore({
@@ -21,7 +24,7 @@ test('works with provideMockStore', async () => {
   const store = TestBed.inject(MockStore);
   store.dispatch = jest.fn();
 
-  fireEvent.click(screen.getByText(/seven/i));
+  await user.click(screen.getByText(/seven/i));
 
   expect(store.dispatch).toHaveBeenCalledWith({ type: '[Item List] send', item: 'Seven' });
 });

apps/example-app/src/app/examples/07-with-ngrx-mock-store.spec.ts

@@ -1,8 +1,11 @@
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
 
 import { SpoilerDirective } from './08-directive';
 
 test('it is possible to test directives', async () => {
+  const user = userEvent.setup();
+
   await render('<div appSpoiler data-testid="dir"></div>', {
     declarations: [SpoilerDirective],
   });
@@ -12,16 +15,17 @@ test('it is possible to test directives', async () => {
   expect(screen.queryByText('I am visible now...')).not.toBeInTheDocument();
   expect(screen.getByText('SPOILER')).toBeInTheDocument();
 
-  fireEvent.mouseOver(directive);
+  await user.hover(directive);
   expect(screen.queryByText('SPOILER')).not.toBeInTheDocument();
   expect(screen.getByText('I am visible now...')).toBeInTheDocument();
 
-  fireEvent.mouseLeave(directive);
+  await user.unhover(directive);
   expect(screen.getByText('SPOILER')).toBeInTheDocument();
   expect(screen.queryByText('I am visible now...')).not.toBeInTheDocument();
 });
 
 test('it is possible to test directives with props', async () => {
+  const user = userEvent.setup();
   const hidden = 'SPOILER ALERT';
   const visible = 'There is nothing to see here ...';
 
@@ -36,16 +40,17 @@ test('it is possible to test directives with props', async () => {
   expect(screen.queryByText(visible)).not.toBeInTheDocument();
   expect(screen.getByText(hidden)).toBeInTheDocument();
 
-  fireEvent.mouseOver(screen.getByText(hidden));
+  await user.hover(screen.getByText(hidden));
   expect(screen.queryByText(hidden)).not.toBeInTheDocument();
   expect(screen.getByText(visible)).toBeInTheDocument();
 
-  fireEvent.mouseLeave(screen.getByText(visible));
+  await user.unhover(screen.getByText(visible));
   expect(screen.getByText(hidden)).toBeInTheDocument();
   expect(screen.queryByText(visible)).not.toBeInTheDocument();
 });
 
 test('it is possible to test directives with props in template', async () => {
+  const user = userEvent.setup();
   const hidden = 'SPOILER ALERT';
   const visible = 'There is nothing to see here ...';
 
@@ -56,11 +61,11 @@ test('it is possible to test directives with props in template', async () => {
   expect(screen.queryByText(visible)).not.toBeInTheDocument();
   expect(screen.getByText(hidden)).toBeInTheDocument();
 
-  fireEvent.mouseOver(screen.getByText(hidden));
+  await user.hover(screen.getByText(hidden));
   expect(screen.queryByText(hidden)).not.toBeInTheDocument();
   expect(screen.getByText(visible)).toBeInTheDocument();
 
-  fireEvent.mouseLeave(screen.getByText(visible));
+  await user.unhover(screen.getByText(visible));
   expect(screen.getByText(hidden)).toBeInTheDocument();
   expect(screen.queryByText(visible)).not.toBeInTheDocument();
 });