update more specs

Author: markgoho

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

@@ -1,5 +1,6 @@
 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 () => {

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 { 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/02-input-output.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/03-forms.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();