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],
});