From 85e9f1a53f6de9511af7c01d58b020cab0730fb1 Mon Sep 17 00:00:00 2001 From: timdeschryver <28659384+timdeschryver@users.noreply.github.com> Date: Mon, 14 Dec 2020 14:48:39 +0100 Subject: [PATCH 1/4] docs: add dialog example --- .../app/examples/15-dialog.component.spec.ts | 63 +++++++++++++++++++ .../app/examples/15-dialog.component.ts | 38 +++++++++++ 2 files changed, 101 insertions(+) create mode 100644 apps/example-app/app/examples/15-dialog.component.spec.ts create mode 100644 apps/example-app/app/examples/15-dialog.component.ts diff --git a/apps/example-app/app/examples/15-dialog.component.spec.ts b/apps/example-app/app/examples/15-dialog.component.spec.ts new file mode 100644 index 00000000..d5bc8d2a --- /dev/null +++ b/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, DialogContentDialogComponent, DialogContentDialogModule } from './15-dialog.component'; + +test('dialog closes', async () => { + const closeFn = jest.fn(); + const { fixture } = await render(DialogContentDialogComponent, { + 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, DialogContentDialogModule], + }); + + 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, DialogContentDialogModule], + }); + + 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(); +}); diff --git a/apps/example-app/app/examples/15-dialog.component.ts b/apps/example-app/app/examples/15-dialog.component.ts new file mode 100644 index 00000000..4d8d85b1 --- /dev/null +++ b/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: ``, +}) +export class DialogComponent { + constructor(public dialog: MatDialog) {} + + openDialog(): void { + this.dialog.open(DialogContentDialogComponent); + } +} + +@Component({ + selector: 'dialog-overview-example-dialog', + template: ` +

Dialog Title

+
Dialog content
+
+ + +
+ `, +}) +export class DialogContentDialogComponent { + constructor(public dialogRef: MatDialogRef) {} + + cancel(): void { + this.dialogRef.close(); + } +} + +@NgModule({ + declarations: [DialogContentDialogComponent], +}) +export class DialogContentDialogModule {} From 6daac7df80ac0b3b02d09e6980de3d9f936c0a44 Mon Sep 17 00:00:00 2001 From: timdeschryver <28659384+timdeschryver@users.noreply.github.com> Date: Mon, 14 Dec 2020 18:50:04 +0100 Subject: [PATCH 2/4] add module to appmodule --- apps/example-app/app/app.module.ts | 2 ++ .../app/examples/15-dialog.component.spec.ts | 10 +++++----- apps/example-app/app/examples/15-dialog.component.ts | 10 +++++----- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/apps/example-app/app/app.module.ts b/apps/example-app/app/app.module.ts index 6b5357a9..addb96c4 100644 --- a/apps/example-app/app/app.module.ts +++ b/apps/example-app/app/app.module.ts @@ -21,6 +21,7 @@ import { ComponentWithProviderComponent } from './examples/05-component-provider import { WithNgRxStoreComponent, reducer } from './examples/06-with-ngrx-store'; import { WithNgRxMockStoreComponent } from './examples/07-with-ngrx-mock-store'; import { MasterComponent, DetailComponent, HiddenDetailComponent } from './examples/09-router'; +import { DialogContentComponentModule } from './examples/15-dialog.component'; function reducerItems() { return ['One', 'Two', 'Three']; @@ -57,6 +58,7 @@ function reducerItems() { value: reducer, items: reducerItems, }), + DialogContentComponentModule, ], bootstrap: [AppComponent], }) diff --git a/apps/example-app/app/examples/15-dialog.component.spec.ts b/apps/example-app/app/examples/15-dialog.component.spec.ts index d5bc8d2a..1df4e059 100644 --- a/apps/example-app/app/examples/15-dialog.component.spec.ts +++ b/apps/example-app/app/examples/15-dialog.component.spec.ts @@ -1,11 +1,11 @@ import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'; import { render, screen, fireEvent, waitForElementToBeRemoved } from '@testing-library/angular'; -import { DialogComponent, DialogContentDialogComponent, DialogContentDialogModule } from './15-dialog.component'; +import { DialogComponent, DialogContentComponent, DialogContentComponentModule } from './15-dialog.component'; test('dialog closes', async () => { const closeFn = jest.fn(); - const { fixture } = await render(DialogContentDialogComponent, { + await render(DialogContentComponent, { imports: [MatDialogModule], providers: [ { @@ -23,9 +23,9 @@ test('dialog closes', async () => { expect(closeFn).toHaveBeenCalledTimes(1); }); -test('opens and closes the dialog with buttons', async () => { +test.only('opens and closes the dialog with buttons', async () => { await render(DialogComponent, { - imports: [MatDialogModule, DialogContentDialogModule], + imports: [MatDialogModule, DialogContentComponentModule], }); const openDialogButton = await screen.findByRole('button', { name: /open dialog/i }); @@ -45,7 +45,7 @@ test('opens and closes the dialog with buttons', async () => { test('closes the dialog via the backdrop', async () => { await render(DialogComponent, { - imports: [MatDialogModule, DialogContentDialogModule], + imports: [MatDialogModule, DialogContentComponentModule], }); const openDialogButton = await screen.findByRole('button', { name: /open dialog/i }); diff --git a/apps/example-app/app/examples/15-dialog.component.ts b/apps/example-app/app/examples/15-dialog.component.ts index 4d8d85b1..ba7eb0da 100644 --- a/apps/example-app/app/examples/15-dialog.component.ts +++ b/apps/example-app/app/examples/15-dialog.component.ts @@ -9,7 +9,7 @@ export class DialogComponent { constructor(public dialog: MatDialog) {} openDialog(): void { - this.dialog.open(DialogContentDialogComponent); + this.dialog.open(DialogContentComponent); } } @@ -24,8 +24,8 @@ export class DialogComponent { `, }) -export class DialogContentDialogComponent { - constructor(public dialogRef: MatDialogRef) {} +export class DialogContentComponent { + constructor(public dialogRef: MatDialogRef) {} cancel(): void { this.dialogRef.close(); @@ -33,6 +33,6 @@ export class DialogContentDialogComponent { } @NgModule({ - declarations: [DialogContentDialogComponent], + declarations: [DialogContentComponent], }) -export class DialogContentDialogModule {} +export class DialogContentComponentModule {} From b767781532f87c809332ca5e5bd9312b985bc6c7 Mon Sep 17 00:00:00 2001 From: timdeschryver <28659384+timdeschryver@users.noreply.github.com> Date: Mon, 14 Dec 2020 18:54:57 +0100 Subject: [PATCH 3/4] run ngcc after install --- apps/example-app/app/app.module.ts | 2 -- package.json | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/example-app/app/app.module.ts b/apps/example-app/app/app.module.ts index addb96c4..6b5357a9 100644 --- a/apps/example-app/app/app.module.ts +++ b/apps/example-app/app/app.module.ts @@ -21,7 +21,6 @@ import { ComponentWithProviderComponent } from './examples/05-component-provider import { WithNgRxStoreComponent, reducer } from './examples/06-with-ngrx-store'; import { WithNgRxMockStoreComponent } from './examples/07-with-ngrx-mock-store'; import { MasterComponent, DetailComponent, HiddenDetailComponent } from './examples/09-router'; -import { DialogContentComponentModule } from './examples/15-dialog.component'; function reducerItems() { return ['One', 'Two', 'Three']; @@ -58,7 +57,6 @@ function reducerItems() { value: reducer, items: reducerItems, }), - DialogContentComponentModule, ], bootstrap: [AppComponent], }) diff --git a/package.json b/package.json index 07227646..79939bad 100644 --- a/package.json +++ b/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", From 5e5056c2f94d5bdbe6fed2cf767e0a031158efdc Mon Sep 17 00:00:00 2001 From: timdeschryver <28659384+timdeschryver@users.noreply.github.com> Date: Tue, 15 Dec 2020 09:35:24 +0100 Subject: [PATCH 4/4] remove only --- apps/example-app/app/examples/15-dialog.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/example-app/app/examples/15-dialog.component.spec.ts b/apps/example-app/app/examples/15-dialog.component.spec.ts index 1df4e059..f5849abc 100644 --- a/apps/example-app/app/examples/15-dialog.component.spec.ts +++ b/apps/example-app/app/examples/15-dialog.component.spec.ts @@ -23,7 +23,7 @@ test('dialog closes', async () => { expect(closeFn).toHaveBeenCalledTimes(1); }); -test.only('opens and closes the dialog with buttons', async () => { +test('opens and closes the dialog with buttons', async () => { await render(DialogComponent, { imports: [MatDialogModule, DialogContentComponentModule], });