angular-testing-library/apps/example-app-jest/src/app/examples/15-dialog.component.spec.ts at a61ba0597c3a3fee3fc1d8facae62ce5caa7cc41 · JeevanMahesha/angular-testing-library · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import { provideZoneChangeDetection } from '@angular/core';
import { MATERIAL_ANIMATIONS } from '@angular/material/core';
import { MatDialogRef } from '@angular/material/dialog';
import { render, screen } from '@testing-library/angular';
import userEvent from '@testing-library/user-event';

import { DialogComponent, DialogContentComponent } from './15-dialog.component';

test('dialog closes', async () => {
  const user = userEvent.setup();

  const closeFn = jest.fn();
  await render(DialogContentComponent, {
    providers: [
      { provide: MATERIAL_ANIMATIONS, useValue: { animationsDisabled: true } },
      {
        provide: MatDialogRef,
        useValue: {
          close: closeFn,
        },
      },
      provideZoneChangeDetection(),
    ],
  });

  const cancelButton = await screen.findByRole('button', { name: /cancel/i });
  await user.click(cancelButton);

  expect(closeFn).toHaveBeenCalledTimes(1);
});

test('closes the dialog via the backdrop', async () => {
  const user = userEvent.setup();

  await render(DialogComponent, {
    providers: [{ provide: MATERIAL_ANIMATIONS, useValue: { animationsDisabled: true } }],
  });

  const openDialogButton = await screen.findByRole('button', { name: /open dialog/i });
  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();

  // eslint-disable-next-line testing-library/no-node-access
  await user.click(document.querySelector('.cdk-overlay-backdrop')!);

  expect(screen.queryByRole('dialog')).not.toBeInTheDocument();

  const dialogTitle = screen.queryByRole('heading', { name: /dialog title/i });
  expect(dialogTitle).not.toBeInTheDocument();
});

test('opens and closes the dialog with buttons', async () => {
  const user = userEvent.setup();

  await render(DialogComponent, {
    providers: [{ provide: MATERIAL_ANIMATIONS, useValue: { animationsDisabled: true } }, provideZoneChangeDetection()],
  });

  const openDialogButton = await screen.findByRole('button', { name: /open dialog/i });
  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 });
  await user.click(cancelButton);

  expect(screen.queryByRole('dialog')).not.toBeInTheDocument();

  const dialogTitle = screen.queryByRole('heading', { name: /dialog title/i });
  expect(dialogTitle).not.toBeInTheDocument();
});