docs: add dialog example (#175)

Author: timdeschryver

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

@@ -0,0 +1,63 @@
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { render, screen, fireEvent, waitForElementToBeRemoved } from '@testing-library/angular';
+
+import { DialogComponent, DialogContentComponent, DialogContentComponentModule } from './15-dialog.component';
+
+test('dialog closes', async () => {
+  const closeFn = jest.fn();
+  await render(DialogContentComponent, {
+    imports: [MatDialogModule],
+    providers: [
+      {
+        provide: MatDialogRef,
+        useValue: {
+          close: closeFn,
+        },
+      },
+    ],
+  });
+
+  const cancelButton = await screen.findByRole('button', { name: /cancel/i });
+  fireEvent.click(cancelButton);
+
+  expect(closeFn).toHaveBeenCalledTimes(1);
+});
+
+test('opens and closes the dialog with buttons', async () => {
+  await render(DialogComponent, {
+    imports: [MatDialogModule, DialogContentComponentModule],
+  });
+
+  const openDialogButton = await screen.findByRole('button', { name: /open dialog/i });
+  fireEvent.click(openDialogButton);
+
+  await screen.findByRole('dialog');
+  await screen.findByRole('heading', { name: /dialog title/i });
+
+  const cancelButton = await screen.findByRole('button', { name: /cancel/i });
+  fireEvent.click(cancelButton);
+
+  await waitForElementToBeRemoved(() => screen.getByRole('dialog'));
+
+  const dialogTitle = screen.queryByRole('heading', { name: /dialog title/i });
+  expect(dialogTitle).not.toBeInTheDocument();
+});
+
+test('closes the dialog via the backdrop', async () => {
+  await render(DialogComponent, {
+    imports: [MatDialogModule, DialogContentComponentModule],
+  });
+
+  const openDialogButton = await screen.findByRole('button', { name: /open dialog/i });
+  fireEvent.click(openDialogButton);
+
+  await screen.findByRole('dialog');
+  await screen.findByRole('heading', { name: /dialog title/i });
+
+  fireEvent.click(document.querySelector('.cdk-overlay-backdrop'));
+
+  await waitForElementToBeRemoved(() => screen.getByRole('dialog'));
+
+  const dialogTitle = screen.queryByRole('heading', { name: /dialog title/i });
+  expect(dialogTitle).not.toBeInTheDocument();
+});

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

@@ -0,0 +1,38 @@
+import { Component, NgModule } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'dialog-overview-example',
+  template: `<button (click)="openDialog()">Open dialog</button>`,
+})
+export class DialogComponent {
+  constructor(public dialog: MatDialog) {}
+
+  openDialog(): void {
+    this.dialog.open(DialogContentComponent);
+  }
+}
+
+@Component({
+  selector: 'dialog-overview-example-dialog',
+  template: `
+    <h1 mat-dialog-title>Dialog Title</h1>
+    <div mat-dialog-content>Dialog content</div>
+    <div mat-dialog-actions>
+      <button (click)="cancel()">Cancel</button>
+      <button mat-dialog-close="OK">Ok</button>
+    </div>
+  `,
+})
+export class DialogContentComponent {
+  constructor(public dialogRef: MatDialogRef<DialogContentComponent>) {}
+
+  cancel(): void {
+    this.dialogRef.close();
+  }
+}
+
+@NgModule({
+  declarations: [DialogContentComponent],
+})
+export class DialogContentComponentModule {}

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0-semantically-released",
   "scripts": {
     "ng": "ng",
+    "postinstall": "ngcc",
     "start": "ng serve",
     "build": "nx run-many --target=build --projects=testing-library,jest-utils",
     "test": "nx run-many --target=test --all",