update more specs

Author: markgoho

apps/example-app/src/app/examples/09-router.spec.ts

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { DetailComponent, RootComponent, HiddenDetailComponent } from './09-router';
 
 test('it can navigate to routes', async () => {
+  const user = userEvent.setup();
   await render(RootComponent, {
     declarations: [DetailComponent, HiddenDetailComponent],
     routes: [
@@ -25,20 +26,20 @@ test('it can navigate to routes', async () => {
 
   expect(screen.queryByText(/Detail one/i)).not.toBeInTheDocument();
 
-  userEvent.click(screen.getByRole('link', { name: /load one/i }));
+  await user.click(screen.getByRole('link', { name: /load one/i }));
   expect(await screen.findByRole('heading', { name: /Detail one/i })).toBeInTheDocument();
 
-  userEvent.click(screen.getByRole('link', { name: /load three/i }));
+  await user.click(screen.getByRole('link', { name: /load three/i }));
   expect(screen.queryByRole('heading', { name: /Detail one/i })).not.toBeInTheDocument();
   expect(await screen.findByRole('heading', { name: /Detail three/i })).toBeInTheDocument();
 
-  userEvent.click(screen.getByRole('link', { name: /back to parent/i }));
+  await user.click(screen.getByRole('link', { name: /back to parent/i }));
   expect(screen.queryByRole('heading', { name: /Detail three/i })).not.toBeInTheDocument();
 
-  userEvent.click(screen.getByRole('link', { name: /load two/i }));
+  await user.click(screen.getByRole('link', { name: /load two/i }));
   expect(await screen.findByRole('heading', { name: /Detail two/i })).toBeInTheDocument();
 
-  userEvent.click(screen.getByRole('link', { name: /hidden x/i }));
+  await user.click(screen.getByRole('link', { name: /hidden x/i }));
   expect(await screen.findByText(/You found the treasure!/i)).toBeInTheDocument();
 });
 

apps/example-app/src/app/examples/14-async-component.spec.ts

@@ -3,6 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/angular';
 
 import { AsyncComponent } from './14-async-component';
 
+// eslint-disable-next-line jest/no-disabled-tests
 test.skip('can use fakeAsync utilities', fakeAsync(async () => {
   await render(AsyncComponent);
 
@@ -20,6 +21,8 @@ test('can use fakeTimer utilities', async () => {
   await render(AsyncComponent);
 
   const load = await screen.findByRole('button', { name: /load/i });
+
+  // userEvent not working with fake timers
   fireEvent.click(load);
 
   jest.advanceTimersByTime(10_000);

apps/example-app/src/app/examples/15-dialog.component.spec.ts

@@ -1,10 +1,12 @@
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
 import { DialogComponent, DialogContentComponent, DialogContentComponentModule } from './15-dialog.component';
 
 test('dialog closes', async () => {
+  const user = userEvent.setup();
+
   const closeFn = jest.fn();
   await render(DialogContentComponent, {
     imports: [MatDialogModule],
@@ -19,28 +21,28 @@ test('dialog closes', async () => {
   });
 
   const cancelButton = await screen.findByRole('button', { name: /cancel/i });
-  userEvent.click(cancelButton);
+  await user.click(cancelButton);
 
   expect(closeFn).toHaveBeenCalledTimes(1);
 });
 
 test('closes the dialog via the backdrop', async () => {
+  const user = userEvent.setup();
+
   await render(DialogComponent, {
     imports: [MatDialogModule, DialogContentComponentModule],
   });
 
   const openDialogButton = await screen.findByRole('button', { name: /open dialog/i });
-  userEvent.click(openDialogButton);
+  await user.click(openDialogButton);
 
   const dialogControl = await screen.findByRole('dialog');
   expect(dialogControl).toBeInTheDocument();
   const dialogTitleControl = await screen.findByRole('heading', { name: /dialog title/i });
   expect(dialogTitleControl).toBeInTheDocument();
 
-  // using fireEvent because of:
-  // unable to click element as it has or inherits pointer-events set to "none"
-  // eslint-disable-next-line testing-library/no-node-access, @typescript-eslint/no-non-null-assertion
-  fireEvent.click(document.querySelector('.cdk-overlay-backdrop')!);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, testing-library/no-node-access
+  await user.click(document.querySelector('.cdk-overlay-backdrop')!);
 
   expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
@@ -49,20 +51,22 @@ test('closes the dialog via the backdrop', async () => {
 });
 
 test('opens and closes the dialog with buttons', async () => {
+  const user = userEvent.setup();
+
   await render(DialogComponent, {
     imports: [MatDialogModule, DialogContentComponentModule],
   });
 
   const openDialogButton = await screen.findByRole('button', { name: /open dialog/i });
-  userEvent.click(openDialogButton);
+  await user.click(openDialogButton);
 
   const dialogControl = await screen.findByRole('dialog');
   expect(dialogControl).toBeInTheDocument();
   const dialogTitleControl = await screen.findByRole('heading', { name: /dialog title/i });
   expect(dialogTitleControl).toBeInTheDocument();
 
   const cancelButton = await screen.findByRole('button', { name: /cancel/i });
-  userEvent.click(cancelButton);
+  await user.click(cancelButton);
 
   expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 

apps/example-app/src/app/examples/20-test-harness.spec.ts

@@ -6,6 +6,7 @@ import user from '@testing-library/user-event';
 
 import { SnackBarComponent } from './20-test-harness';
 
+// eslint-disable-next-line jest/no-disabled-tests
 test.skip('can be used with TestHarness', async () => {
   const view = await render(`<app-harness></app-harness>`, {
     imports: [SnackBarComponent],
@@ -20,6 +21,7 @@ test.skip('can be used with TestHarness', async () => {
   expect(await snackbarHarness.getMessage()).toMatch(/Pizza Party!!!/i);
 });
 
+// eslint-disable-next-line jest/no-disabled-tests
 test.skip('can be used in combination with TestHarness', async () => {
   const view = await render(SnackBarComponent);
   const loader = TestbedHarnessEnvironment.documentRootLoader(view.fixture);