Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6be4511

Browse files
docs: add dialog example (testing-library#175)
1 parent 3437e96 commit 6be4511

File tree

3 files changed

+102
-0
lines changed

3 files changed

+102
-0
lines changed
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
2+
import { render, screen, fireEvent, waitForElementToBeRemoved } from '@testing-library/angular';
3+
4+
import { DialogComponent, DialogContentComponent, DialogContentComponentModule } from './15-dialog.component';
5+
6+
test('dialog closes', async () => {
7+
const closeFn = jest.fn();
8+
await render(DialogContentComponent, {
9+
imports: [MatDialogModule],
10+
providers: [
11+
{
12+
provide: MatDialogRef,
13+
useValue: {
14+
close: closeFn,
15+
},
16+
},
17+
],
18+
});
19+
20+
const cancelButton = await screen.findByRole('button', { name: /cancel/i });
21+
fireEvent.click(cancelButton);
22+
23+
expect(closeFn).toHaveBeenCalledTimes(1);
24+
});
25+
26+
test('opens and closes the dialog with buttons', async () => {
27+
await render(DialogComponent, {
28+
imports: [MatDialogModule, DialogContentComponentModule],
29+
});
30+
31+
const openDialogButton = await screen.findByRole('button', { name: /opendialog/i });
32+
fireEvent.click(openDialogButton);
33+
34+
await screen.findByRole('dialog');
35+
await screen.findByRole('heading', { name: /dialogtitle/i });
36+
37+
const cancelButton = await screen.findByRole('button', { name: /cancel/i });
38+
fireEvent.click(cancelButton);
39+
40+
await waitForElementToBeRemoved(() => screen.getByRole('dialog'));
41+
42+
const dialogTitle = screen.queryByRole('heading', { name: /dialogtitle/i });
43+
expect(dialogTitle).not.toBeInTheDocument();
44+
});
45+
46+
test('closes the dialog via the backdrop', async () => {
47+
await render(DialogComponent, {
48+
imports: [MatDialogModule, DialogContentComponentModule],
49+
});
50+
51+
const openDialogButton = await screen.findByRole('button', { name: /opendialog/i });
52+
fireEvent.click(openDialogButton);
53+
54+
await screen.findByRole('dialog');
55+
await screen.findByRole('heading', { name: /dialogtitle/i });
56+
57+
fireEvent.click(document.querySelector('.cdk-overlay-backdrop'));
58+
59+
await waitForElementToBeRemoved(() => screen.getByRole('dialog'));
60+
61+
const dialogTitle = screen.queryByRole('heading', { name: /dialogtitle/i });
62+
expect(dialogTitle).not.toBeInTheDocument();
63+
});
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Component, NgModule } from '@angular/core';
2+
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
3+
4+
@Component({
5+
selector: 'dialog-overview-example',
6+
template: `<button (click)="openDialog()">Open dialog</button>`,
7+
})
8+
export class DialogComponent {
9+
constructor(public dialog: MatDialog) {}
10+
11+
openDialog(): void {
12+
this.dialog.open(DialogContentComponent);
13+
}
14+
}
15+
16+
@Component({
17+
selector: 'dialog-overview-example-dialog',
18+
template: `
19+
<h1 mat-dialog-title>Dialog Title</h1>
20+
<div mat-dialog-content>Dialog content</div>
21+
<div mat-dialog-actions>
22+
<button (click)="cancel()">Cancel</button>
23+
<button mat-dialog-close="OK">Ok</button>
24+
</div>
25+
`,
26+
})
27+
export class DialogContentComponent {
28+
constructor(public dialogRef: MatDialogRef<DialogContentComponent>) {}
29+
30+
cancel(): void {
31+
this.dialogRef.close();
32+
}
33+
}
34+
35+
@NgModule({
36+
declarations: [DialogContentComponent],
37+
})
38+
export class DialogContentComponentModule {}

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.0.0-semantically-released",
44
"scripts": {
55
"ng": "ng",
6+
"postinstall": "ngcc",
67
"start": "ng serve",
78
"build": "nx run-many --target=build --projects=testing-library,jest-utils",
89
"test": "nx run-many --target=test --all",

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /