Skip to content

Commit 62003a9

Browse files
authored
Merge pull request #2377 from ofhope/modal-tests
Modal tests
2 parents 0bd139b + 5a63677 commit 62003a9

File tree

3 files changed

+92
-0
lines changed

3 files changed

+92
-0
lines changed

.storybook/preview-head.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<script>
2+
// https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/176#issuecomment-683150213
3+
window.$RefreshReg$ = () => {};
4+
window.$RefreshSig$ = () => () => {};
5+
</script>
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import Modal from './Modal';
3+
4+
export default {
5+
title: 'IDE/Modal',
6+
component: Modal,
7+
argTypes: {
8+
onClose: { action: 'onClose' }
9+
}
10+
};
11+
12+
export const ModalDefault = {
13+
args: {
14+
title: 'Example Modal Title',
15+
children: <p>Example modal body</p>
16+
}
17+
};
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from 'react';
2+
import { fireEvent, render, screen } from '../../../test-utils';
3+
import Modal from './Modal';
4+
5+
describe('Modal', () => {
6+
it('can render title', () => {
7+
render(
8+
<Modal title="Foo" closeAriaLabel="Foo" onClose={jest.fn()}>
9+
Bar
10+
</Modal>
11+
);
12+
13+
expect(screen.getByRole('heading', { name: 'Foo' })).toBeVisible();
14+
});
15+
16+
it('can render child content', () => {
17+
render(
18+
<Modal title="Foo" closeAriaLabel="Foo" onClose={jest.fn()}>
19+
Bar
20+
</Modal>
21+
);
22+
23+
expect(screen.getByText('Bar')).toBeVisible();
24+
});
25+
26+
it('can call onClose when close button clicked', () => {
27+
const handleClose = jest.fn();
28+
render(
29+
<Modal title="Foo" closeAriaLabel="Foo" onClose={handleClose}>
30+
Bar
31+
</Modal>
32+
);
33+
34+
const buttonEl = screen.getByRole('button');
35+
fireEvent.click(buttonEl);
36+
37+
expect(handleClose).toHaveBeenCalledTimes(1);
38+
});
39+
40+
it('can call onClose when click event occurs in a parent node', () => {
41+
const handleClose = jest.fn();
42+
render(
43+
<div>
44+
<h1>Parent</h1>
45+
<Modal title="Foo" closeAriaLabel="Foo" onClose={handleClose}>
46+
Bar
47+
</Modal>
48+
</div>
49+
);
50+
51+
const headingEl = screen.getByRole('heading', { name: 'Parent' });
52+
fireEvent.click(headingEl);
53+
54+
expect(handleClose).toHaveBeenCalledTimes(1);
55+
});
56+
57+
it('can ignore click event for closing when it occurs inside component', () => {
58+
const handleClose = jest.fn();
59+
render(
60+
<Modal title="Foo" closeAriaLabel="Foo" onClose={handleClose}>
61+
Bar
62+
</Modal>
63+
);
64+
65+
const headingEl = screen.getByRole('heading', { name: 'Foo' });
66+
fireEvent.click(headingEl);
67+
68+
expect(handleClose).not.toHaveBeenCalled();
69+
});
70+
});

0 commit comments

Comments
 (0)