add module to appmodule

Author: timdeschryver

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

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

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,15 +24,15 @@ export class DialogComponent {
     </div>
   `,
 })
-export class DialogContentDialogComponent {
-  constructor(public dialogRef: MatDialogRef<DialogContentDialogComponent>) {}
+export class DialogContentComponent {
+  constructor(public dialogRef: MatDialogRef<DialogContentComponent>) {}
 
   cancel(): void {
     this.dialogRef.close();
   }
 }
 
 @NgModule({
-  declarations: [DialogContentDialogComponent],
+  declarations: [DialogContentComponent],
 })
-export class DialogContentDialogModule {}
+export class DialogContentComponentModule {}