@instructure/ui-modal 10.19.2-snapshot-2 → 10.19.2-snapshot-4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -1
- package/package.json +19 -19
- package/tsconfig.build.tsbuildinfo +1 -1
- package/es/Modal/ModalBody/__new-tests__/ModalBody.test.js +0 -111
- package/es/Modal/ModalFooter/__new-tests__/ModalFooter.test.js +0 -58
- package/es/Modal/ModalHeader/__new-tests__/ModalHeader.test.js +0 -98
- package/es/Modal/__new-tests__/Modal.test.js +0 -474
- package/lib/Modal/ModalBody/__new-tests__/ModalBody.test.js +0 -113
- package/lib/Modal/ModalFooter/__new-tests__/ModalFooter.test.js +0 -60
- package/lib/Modal/ModalHeader/__new-tests__/ModalHeader.test.js +0 -100
- package/lib/Modal/__new-tests__/Modal.test.js +0 -476
- package/src/Modal/ModalBody/__new-tests__/ModalBody.test.tsx +0 -116
- package/src/Modal/ModalFooter/__new-tests__/ModalFooter.test.tsx +0 -63
- package/src/Modal/ModalHeader/__new-tests__/ModalHeader.test.tsx +0 -105
- package/src/Modal/__new-tests__/Modal.test.tsx +0 -465
- package/types/Modal/ModalBody/__new-tests__/ModalBody.test.d.ts +0 -2
- package/types/Modal/ModalBody/__new-tests__/ModalBody.test.d.ts.map +0 -1
- package/types/Modal/ModalFooter/__new-tests__/ModalFooter.test.d.ts +0 -2
- package/types/Modal/ModalFooter/__new-tests__/ModalFooter.test.d.ts.map +0 -1
- package/types/Modal/ModalHeader/__new-tests__/ModalHeader.test.d.ts +0 -2
- package/types/Modal/ModalHeader/__new-tests__/ModalHeader.test.d.ts.map +0 -1
- package/types/Modal/__new-tests__/Modal.test.d.ts +0 -2
- package/types/Modal/__new-tests__/Modal.test.d.ts.map +0 -1
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* The MIT License (MIT)
|
|
3
|
-
*
|
|
4
|
-
* Copyright (c) 2015 - present Instructure, Inc.
|
|
5
|
-
*
|
|
6
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
-
* of this software and associated documentation files (the "Software"), to deal
|
|
8
|
-
* in the Software without restriction, including without limitation the rights
|
|
9
|
-
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
-
* copies of the Software, and to permit persons to whom the Software is
|
|
11
|
-
* furnished to do so, subject to the following conditions:
|
|
12
|
-
*
|
|
13
|
-
* The above copyright notice and this permission notice shall be included in all
|
|
14
|
-
* copies or substantial portions of the Software.
|
|
15
|
-
*
|
|
16
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
-
* SOFTWARE.
|
|
23
|
-
*/
|
|
24
|
-
|
|
25
|
-
import { render } from '@testing-library/react'
|
|
26
|
-
import '@testing-library/jest-dom'
|
|
27
|
-
|
|
28
|
-
import canvas from '@instructure/ui-themes'
|
|
29
|
-
import { color2hex } from '@instructure/ui-color-utils'
|
|
30
|
-
|
|
31
|
-
import { ModalFooter } from '../index'
|
|
32
|
-
import generateComponentTheme from '../theme'
|
|
33
|
-
|
|
34
|
-
const FOOTER_TEXT = 'Modal-footer-text'
|
|
35
|
-
|
|
36
|
-
describe('<ModalFooter />', () => {
|
|
37
|
-
it('should render', async () => {
|
|
38
|
-
const { findByText } = render(<ModalFooter>{FOOTER_TEXT}</ModalFooter>)
|
|
39
|
-
const modalFooter = await findByText(FOOTER_TEXT)
|
|
40
|
-
|
|
41
|
-
expect(modalFooter).toBeInTheDocument()
|
|
42
|
-
})
|
|
43
|
-
|
|
44
|
-
it('should set inverse styles', async () => {
|
|
45
|
-
const themeVariables = generateComponentTheme(canvas)
|
|
46
|
-
const { findByText } = render(
|
|
47
|
-
<ModalFooter variant="inverse">{FOOTER_TEXT}</ModalFooter>
|
|
48
|
-
)
|
|
49
|
-
const modalFooter = await findByText(FOOTER_TEXT)
|
|
50
|
-
|
|
51
|
-
const modalFooterStyle = window.getComputedStyle(modalFooter)
|
|
52
|
-
const footerBackground = color2hex(
|
|
53
|
-
modalFooterStyle.getPropertyValue('background-color')
|
|
54
|
-
)
|
|
55
|
-
const footerBorderColor = color2hex(
|
|
56
|
-
modalFooterStyle.getPropertyValue('border-top-color')
|
|
57
|
-
)
|
|
58
|
-
|
|
59
|
-
expect(modalFooter).toBeInTheDocument()
|
|
60
|
-
expect(footerBackground).toBe(themeVariables.inverseBackground)
|
|
61
|
-
expect(footerBorderColor).toBe(themeVariables.inverseBorderColor)
|
|
62
|
-
})
|
|
63
|
-
})
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* The MIT License (MIT)
|
|
3
|
-
*
|
|
4
|
-
* Copyright (c) 2015 - present Instructure, Inc.
|
|
5
|
-
*
|
|
6
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
-
* of this software and associated documentation files (the "Software"), to deal
|
|
8
|
-
* in the Software without restriction, including without limitation the rights
|
|
9
|
-
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
-
* copies of the Software, and to permit persons to whom the Software is
|
|
11
|
-
* furnished to do so, subject to the following conditions:
|
|
12
|
-
*
|
|
13
|
-
* The above copyright notice and this permission notice shall be included in all
|
|
14
|
-
* copies or substantial portions of the Software.
|
|
15
|
-
*
|
|
16
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
-
* SOFTWARE.
|
|
23
|
-
*/
|
|
24
|
-
|
|
25
|
-
import { render } from '@testing-library/react'
|
|
26
|
-
import '@testing-library/jest-dom'
|
|
27
|
-
|
|
28
|
-
import canvas from '@instructure/ui-themes'
|
|
29
|
-
import { color2hex } from '@instructure/ui-color-utils'
|
|
30
|
-
|
|
31
|
-
import { ModalHeader } from '../index'
|
|
32
|
-
import generateComponentTheme from '../theme'
|
|
33
|
-
|
|
34
|
-
const HEADER_TEXT = 'Modal-footer-text'
|
|
35
|
-
|
|
36
|
-
describe('<ModalHeader />', () => {
|
|
37
|
-
it('should render', async () => {
|
|
38
|
-
const { findByText } = render(<ModalHeader>{HEADER_TEXT}</ModalHeader>)
|
|
39
|
-
const modalHeader = await findByText(HEADER_TEXT)
|
|
40
|
-
|
|
41
|
-
expect(modalHeader).toBeInTheDocument()
|
|
42
|
-
})
|
|
43
|
-
|
|
44
|
-
it('should set inverse styles', async () => {
|
|
45
|
-
const themeVariables = generateComponentTheme(canvas)
|
|
46
|
-
const { findByText } = render(
|
|
47
|
-
<ModalHeader variant="inverse">{HEADER_TEXT}</ModalHeader>
|
|
48
|
-
)
|
|
49
|
-
const modalHeader = await findByText(HEADER_TEXT)
|
|
50
|
-
|
|
51
|
-
const modalHeaderStyle = window.getComputedStyle(modalHeader)
|
|
52
|
-
const headerBackground = color2hex(
|
|
53
|
-
modalHeaderStyle.getPropertyValue('background-color')
|
|
54
|
-
)
|
|
55
|
-
const headerBorderColor = color2hex(
|
|
56
|
-
modalHeaderStyle.getPropertyValue('border-bottom-color')
|
|
57
|
-
)
|
|
58
|
-
|
|
59
|
-
expect(modalHeader).toBeInTheDocument()
|
|
60
|
-
expect(headerBackground).toBe(themeVariables.inverseBackground)
|
|
61
|
-
expect(headerBorderColor).toBe(themeVariables.inverseBorderColor)
|
|
62
|
-
})
|
|
63
|
-
|
|
64
|
-
describe('spacing prop', () => {
|
|
65
|
-
it('should be correct by default', async () => {
|
|
66
|
-
const themeVariables = generateComponentTheme(canvas)
|
|
67
|
-
const { findByText } = render(<ModalHeader>{HEADER_TEXT}</ModalHeader>)
|
|
68
|
-
const modalHeader = await findByText(HEADER_TEXT)
|
|
69
|
-
|
|
70
|
-
const modalHeaderStyle = window.getComputedStyle(modalHeader)
|
|
71
|
-
const headerPadding = modalHeaderStyle.padding
|
|
72
|
-
|
|
73
|
-
expect(modalHeader).toBeInTheDocument()
|
|
74
|
-
expect(headerPadding).toBe(themeVariables.padding)
|
|
75
|
-
})
|
|
76
|
-
|
|
77
|
-
it('should correctly set default spacing', async () => {
|
|
78
|
-
const themeVariables = generateComponentTheme(canvas)
|
|
79
|
-
const { findByText } = render(
|
|
80
|
-
<ModalHeader spacing="default">{HEADER_TEXT}</ModalHeader>
|
|
81
|
-
)
|
|
82
|
-
const modalHeader = await findByText(HEADER_TEXT)
|
|
83
|
-
|
|
84
|
-
const modalHeaderStyle = window.getComputedStyle(modalHeader)
|
|
85
|
-
const headerPadding = modalHeaderStyle.padding
|
|
86
|
-
|
|
87
|
-
expect(modalHeader).toBeInTheDocument()
|
|
88
|
-
expect(headerPadding).toBe(themeVariables.padding)
|
|
89
|
-
})
|
|
90
|
-
|
|
91
|
-
it('should correctly set compact spacing', async () => {
|
|
92
|
-
const themeVariables = generateComponentTheme(canvas)
|
|
93
|
-
const { findByText } = render(
|
|
94
|
-
<ModalHeader spacing="compact">{HEADER_TEXT}</ModalHeader>
|
|
95
|
-
)
|
|
96
|
-
const modalHeader = await findByText(HEADER_TEXT)
|
|
97
|
-
|
|
98
|
-
const modalHeaderStyle = window.getComputedStyle(modalHeader)
|
|
99
|
-
const headerPadding = modalHeaderStyle.padding
|
|
100
|
-
|
|
101
|
-
expect(modalHeader).toBeInTheDocument()
|
|
102
|
-
expect(headerPadding).toBe(themeVariables.paddingCompact)
|
|
103
|
-
})
|
|
104
|
-
})
|
|
105
|
-
})
|
|
@@ -1,465 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* The MIT License (MIT)
|
|
3
|
-
*
|
|
4
|
-
* Copyright (c) 2015 - present Instructure, Inc.
|
|
5
|
-
*
|
|
6
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
-
* of this software and associated documentation files (the "Software"), to deal
|
|
8
|
-
* in the Software without restriction, including without limitation the rights
|
|
9
|
-
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
-
* copies of the Software, and to permit persons to whom the Software is
|
|
11
|
-
* furnished to do so, subject to the following conditions:
|
|
12
|
-
*
|
|
13
|
-
* The above copyright notice and this permission notice shall be included in all
|
|
14
|
-
* copies or substantial portions of the Software.
|
|
15
|
-
*
|
|
16
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
-
* SOFTWARE.
|
|
23
|
-
*/
|
|
24
|
-
|
|
25
|
-
import { Component } from 'react'
|
|
26
|
-
import { render, waitFor } from '@testing-library/react'
|
|
27
|
-
import { vi } from 'vitest'
|
|
28
|
-
import userEvent from '@testing-library/user-event'
|
|
29
|
-
import '@testing-library/jest-dom'
|
|
30
|
-
|
|
31
|
-
import { Modal, ModalHeader, ModalBody, ModalFooter } from '../index'
|
|
32
|
-
import type { ModalProps } from '../props'
|
|
33
|
-
import { View } from '@instructure/ui-view'
|
|
34
|
-
|
|
35
|
-
describe('<Modal />', () => {
|
|
36
|
-
let consoleWarningMock: ReturnType<typeof vi.spyOn>
|
|
37
|
-
let consoleErrorMock: ReturnType<typeof vi.spyOn>
|
|
38
|
-
const originalScroll = window.scroll
|
|
39
|
-
|
|
40
|
-
beforeEach(() => {
|
|
41
|
-
// Mocking console to prevent test output pollution and expect for messages
|
|
42
|
-
consoleWarningMock = vi
|
|
43
|
-
.spyOn(console, 'warn')
|
|
44
|
-
.mockImplementation(() => {}) as any
|
|
45
|
-
consoleErrorMock = vi
|
|
46
|
-
.spyOn(console, 'error')
|
|
47
|
-
.mockImplementation(() => {}) as any
|
|
48
|
-
})
|
|
49
|
-
|
|
50
|
-
afterEach(() => {
|
|
51
|
-
consoleWarningMock.mockRestore()
|
|
52
|
-
consoleErrorMock.mockRestore()
|
|
53
|
-
})
|
|
54
|
-
|
|
55
|
-
beforeAll(() => {
|
|
56
|
-
// Mocking window.scroll to prevent test output pollution
|
|
57
|
-
Object.defineProperty(window, 'scroll', {
|
|
58
|
-
value: vi.fn(),
|
|
59
|
-
writable: true
|
|
60
|
-
})
|
|
61
|
-
})
|
|
62
|
-
|
|
63
|
-
afterAll(() => {
|
|
64
|
-
window.scroll = originalScroll
|
|
65
|
-
})
|
|
66
|
-
|
|
67
|
-
it('should render nothing and have a node with no parent when closed', () => {
|
|
68
|
-
const { container } = render(
|
|
69
|
-
<Modal label="Modal Dialog" shouldReturnFocus={false}>
|
|
70
|
-
<Modal.Body>Foo Bar Baz</Modal.Body>
|
|
71
|
-
</Modal>
|
|
72
|
-
)
|
|
73
|
-
expect(container.firstChild).not.toBeInTheDocument()
|
|
74
|
-
})
|
|
75
|
-
|
|
76
|
-
it('should apply theme overrides when open', async () => {
|
|
77
|
-
const testFont = 'test-font'
|
|
78
|
-
const bodyText = 'Modal-body-text'
|
|
79
|
-
const { findByText, findByRole } = render(
|
|
80
|
-
<Modal
|
|
81
|
-
open
|
|
82
|
-
size="small"
|
|
83
|
-
label="Modal Dialog"
|
|
84
|
-
shouldReturnFocus={false}
|
|
85
|
-
themeOverride={{ fontFamily: testFont }}
|
|
86
|
-
>
|
|
87
|
-
<Modal.Body>{bodyText}</Modal.Body>
|
|
88
|
-
</Modal>
|
|
89
|
-
)
|
|
90
|
-
const modalBody = await findByText(bodyText)
|
|
91
|
-
const dialog = await findByRole('dialog')
|
|
92
|
-
const dialogStyle = window.getComputedStyle(dialog)
|
|
93
|
-
|
|
94
|
-
expect(modalBody).toBeInTheDocument()
|
|
95
|
-
expect(dialogStyle.fontFamily).toBe(testFont)
|
|
96
|
-
})
|
|
97
|
-
|
|
98
|
-
it('should render its own positioning context if constrained to parent', async () => {
|
|
99
|
-
const { findByRole } = render(
|
|
100
|
-
<Modal
|
|
101
|
-
open
|
|
102
|
-
label="Modal Dialog"
|
|
103
|
-
shouldReturnFocus={false}
|
|
104
|
-
constrain="parent"
|
|
105
|
-
>
|
|
106
|
-
<Modal.Body>Foo Bar Baz</Modal.Body>
|
|
107
|
-
</Modal>
|
|
108
|
-
)
|
|
109
|
-
const dialog = await findByRole('dialog')
|
|
110
|
-
const constrain = document.querySelector("[class*='constrainContext']")
|
|
111
|
-
|
|
112
|
-
expect(dialog).toBeInTheDocument()
|
|
113
|
-
expect(constrain).toBeInTheDocument()
|
|
114
|
-
})
|
|
115
|
-
|
|
116
|
-
it("should not inherit its parent's font color", async () => {
|
|
117
|
-
const { findByRole } = render(
|
|
118
|
-
<div style={{ color: 'rgb(255, 255, 255)' }}>
|
|
119
|
-
<Modal
|
|
120
|
-
open
|
|
121
|
-
label="Modal Dialog"
|
|
122
|
-
shouldReturnFocus={false}
|
|
123
|
-
constrain="parent"
|
|
124
|
-
themeOverride={{ textColor: 'rgb(0, 0, 0)' }}
|
|
125
|
-
>
|
|
126
|
-
<Modal.Body>Foo Bar Baz</Modal.Body>
|
|
127
|
-
</Modal>
|
|
128
|
-
</div>
|
|
129
|
-
)
|
|
130
|
-
const dialog = await findByRole('dialog')
|
|
131
|
-
const dialogStyle = window.getComputedStyle(dialog)
|
|
132
|
-
|
|
133
|
-
expect(dialog).toBeInTheDocument()
|
|
134
|
-
expect(dialogStyle.color).toBe('rgb(0, 0, 0)')
|
|
135
|
-
})
|
|
136
|
-
|
|
137
|
-
it('should pass `as` prop to the dialog', async () => {
|
|
138
|
-
const { findByRole, rerender } = render(
|
|
139
|
-
<Modal open label="Modal Dialog" shouldReturnFocus={false}>
|
|
140
|
-
<Modal.Body>Foo Bar Baz</Modal.Body>
|
|
141
|
-
</Modal>
|
|
142
|
-
)
|
|
143
|
-
const dialog = await findByRole('dialog')
|
|
144
|
-
|
|
145
|
-
expect(dialog).toBeInTheDocument()
|
|
146
|
-
expect(dialog.tagName).toBe('SPAN')
|
|
147
|
-
|
|
148
|
-
rerender(
|
|
149
|
-
<Modal as="form" open label="Modal Dialog" shouldReturnFocus={false}>
|
|
150
|
-
<Modal.Body>Foo Bar Baz</Modal.Body>
|
|
151
|
-
</Modal>
|
|
152
|
-
)
|
|
153
|
-
const dialogForm = await findByRole('dialog')
|
|
154
|
-
|
|
155
|
-
expect(dialogForm.tagName).toBe('FORM')
|
|
156
|
-
})
|
|
157
|
-
|
|
158
|
-
it('should handle null children', async () => {
|
|
159
|
-
const bodyText = 'Modal-body-text'
|
|
160
|
-
const { findByText } = render(
|
|
161
|
-
<Modal open label="Modal Dialog" shouldReturnFocus={false}>
|
|
162
|
-
{null}
|
|
163
|
-
<Modal.Body>{bodyText}</Modal.Body>
|
|
164
|
-
{null}
|
|
165
|
-
</Modal>
|
|
166
|
-
)
|
|
167
|
-
const modalBody = await findByText(bodyText)
|
|
168
|
-
|
|
169
|
-
expect(modalBody).toBeInTheDocument()
|
|
170
|
-
})
|
|
171
|
-
|
|
172
|
-
it('should handle custom children', async () => {
|
|
173
|
-
const bodyText = 'Modal-body-text'
|
|
174
|
-
const { findByText } = render(
|
|
175
|
-
<Modal open label="Modal Dialog" shouldReturnFocus={false}>
|
|
176
|
-
<View>This is a custom child</View>
|
|
177
|
-
<Modal.Body>{bodyText}</Modal.Body>
|
|
178
|
-
</Modal>
|
|
179
|
-
)
|
|
180
|
-
const modalBody = await findByText(bodyText)
|
|
181
|
-
const customChild = await findByText('This is a custom child')
|
|
182
|
-
|
|
183
|
-
expect(modalBody).toBeInTheDocument()
|
|
184
|
-
expect(customChild).toBeInTheDocument()
|
|
185
|
-
})
|
|
186
|
-
|
|
187
|
-
it('should apply the aria attributes', async () => {
|
|
188
|
-
const { findByRole } = render(
|
|
189
|
-
<Modal open label="Modal Dialog" shouldReturnFocus={false}>
|
|
190
|
-
<Modal.Body>Foo Bar Baz</Modal.Body>
|
|
191
|
-
</Modal>
|
|
192
|
-
)
|
|
193
|
-
const dialog = await findByRole('dialog')
|
|
194
|
-
|
|
195
|
-
expect(dialog).toBeInTheDocument()
|
|
196
|
-
expect(dialog).toHaveAttribute('aria-label', 'Modal Dialog')
|
|
197
|
-
})
|
|
198
|
-
|
|
199
|
-
it('should use transition', async () => {
|
|
200
|
-
const onEnter = vi.fn()
|
|
201
|
-
const onEntering = vi.fn()
|
|
202
|
-
const onEntered = vi.fn()
|
|
203
|
-
|
|
204
|
-
const { findByRole } = render(
|
|
205
|
-
<Modal
|
|
206
|
-
open
|
|
207
|
-
onEnter={onEnter}
|
|
208
|
-
onEntering={onEntering}
|
|
209
|
-
onEntered={onEntered}
|
|
210
|
-
transition="fade"
|
|
211
|
-
label="Modal Dialog"
|
|
212
|
-
shouldReturnFocus={false}
|
|
213
|
-
>
|
|
214
|
-
<Modal.Body>Foo Bar Baz</Modal.Body>
|
|
215
|
-
</Modal>
|
|
216
|
-
)
|
|
217
|
-
const dialog = await findByRole('dialog')
|
|
218
|
-
|
|
219
|
-
expect(dialog).toBeInTheDocument()
|
|
220
|
-
|
|
221
|
-
await waitFor(() => {
|
|
222
|
-
expect(onEnter).toHaveBeenCalled()
|
|
223
|
-
expect(onEntering).toHaveBeenCalled()
|
|
224
|
-
expect(onEntered).toHaveBeenCalled()
|
|
225
|
-
})
|
|
226
|
-
})
|
|
227
|
-
|
|
228
|
-
it('should support onOpen prop', async () => {
|
|
229
|
-
const onOpen = vi.fn()
|
|
230
|
-
const { findByRole } = render(
|
|
231
|
-
<Modal
|
|
232
|
-
open
|
|
233
|
-
onOpen={onOpen}
|
|
234
|
-
label="Modal Dialog"
|
|
235
|
-
shouldReturnFocus={false}
|
|
236
|
-
>
|
|
237
|
-
<Modal.Body>Foo Bar Baz</Modal.Body>
|
|
238
|
-
</Modal>
|
|
239
|
-
)
|
|
240
|
-
const dialog = await findByRole('dialog')
|
|
241
|
-
|
|
242
|
-
expect(dialog).toBeInTheDocument()
|
|
243
|
-
|
|
244
|
-
await waitFor(() => {
|
|
245
|
-
expect(onOpen).toHaveBeenCalled()
|
|
246
|
-
})
|
|
247
|
-
})
|
|
248
|
-
|
|
249
|
-
it('should support onClose prop', async () => {
|
|
250
|
-
const onClose = vi.fn()
|
|
251
|
-
|
|
252
|
-
const { findByRole, rerender } = render(
|
|
253
|
-
<Modal
|
|
254
|
-
open
|
|
255
|
-
onClose={onClose}
|
|
256
|
-
label="Modal Dialog"
|
|
257
|
-
shouldReturnFocus={false}
|
|
258
|
-
>
|
|
259
|
-
<Modal.Body>Foo Bar Baz</Modal.Body>
|
|
260
|
-
</Modal>
|
|
261
|
-
)
|
|
262
|
-
const dialog = await findByRole('dialog')
|
|
263
|
-
|
|
264
|
-
expect(dialog).toBeInTheDocument()
|
|
265
|
-
|
|
266
|
-
rerender(
|
|
267
|
-
<Modal
|
|
268
|
-
open={false}
|
|
269
|
-
onClose={onClose}
|
|
270
|
-
label="Modal Dialog"
|
|
271
|
-
shouldReturnFocus={false}
|
|
272
|
-
>
|
|
273
|
-
<Modal.Body>Foo Bar Baz</Modal.Body>
|
|
274
|
-
</Modal>
|
|
275
|
-
)
|
|
276
|
-
|
|
277
|
-
await waitFor(() => {
|
|
278
|
-
expect(onClose).toHaveBeenCalled()
|
|
279
|
-
})
|
|
280
|
-
})
|
|
281
|
-
|
|
282
|
-
it('should dismiss when overlay clicked by default', async () => {
|
|
283
|
-
const onDismiss = vi.fn()
|
|
284
|
-
const { findByText } = render(
|
|
285
|
-
<Modal
|
|
286
|
-
open
|
|
287
|
-
onDismiss={onDismiss}
|
|
288
|
-
label="Modal Dialog"
|
|
289
|
-
shouldReturnFocus={false}
|
|
290
|
-
>
|
|
291
|
-
<Modal.Body>Modal Text</Modal.Body>
|
|
292
|
-
</Modal>
|
|
293
|
-
)
|
|
294
|
-
const modalBody = await findByText('Modal Text')
|
|
295
|
-
|
|
296
|
-
expect(modalBody).toBeInTheDocument()
|
|
297
|
-
|
|
298
|
-
await waitFor(() => {
|
|
299
|
-
userEvent.click(document.body)
|
|
300
|
-
expect(onDismiss).toHaveBeenCalled()
|
|
301
|
-
})
|
|
302
|
-
})
|
|
303
|
-
|
|
304
|
-
it('should NOT dismiss when overlay clicked with shouldCloseOnDocumentClick=false', async () => {
|
|
305
|
-
const onDismiss = vi.fn()
|
|
306
|
-
const onClickOuter = vi.fn()
|
|
307
|
-
|
|
308
|
-
const { findByRole, getByTestId } = render(
|
|
309
|
-
<div>
|
|
310
|
-
<button data-testid="outer-element" onClick={onClickOuter}>
|
|
311
|
-
for dismiss
|
|
312
|
-
</button>
|
|
313
|
-
<Modal
|
|
314
|
-
open
|
|
315
|
-
onDismiss={onDismiss}
|
|
316
|
-
label="Modal Dialog"
|
|
317
|
-
shouldReturnFocus={false}
|
|
318
|
-
shouldCloseOnDocumentClick={false}
|
|
319
|
-
>
|
|
320
|
-
<Modal.Body>
|
|
321
|
-
Foo Bar Baz <button>click me</button>
|
|
322
|
-
</Modal.Body>
|
|
323
|
-
</Modal>
|
|
324
|
-
</div>
|
|
325
|
-
)
|
|
326
|
-
const dialog = await findByRole('dialog')
|
|
327
|
-
|
|
328
|
-
expect(dialog).toBeInTheDocument()
|
|
329
|
-
|
|
330
|
-
userEvent.click(getByTestId('outer-element'))
|
|
331
|
-
|
|
332
|
-
await waitFor(() => {
|
|
333
|
-
expect(onClickOuter).toHaveBeenCalled()
|
|
334
|
-
expect(onDismiss).not.toHaveBeenCalled()
|
|
335
|
-
expect(dialog).toBeInTheDocument()
|
|
336
|
-
})
|
|
337
|
-
})
|
|
338
|
-
|
|
339
|
-
it('should render children', async () => {
|
|
340
|
-
const { findByText } = render(
|
|
341
|
-
<Modal open label="Modal Dialog" shouldReturnFocus={false}>
|
|
342
|
-
<Modal.Body>
|
|
343
|
-
<button>Cancel</button>
|
|
344
|
-
</Modal.Body>
|
|
345
|
-
</Modal>
|
|
346
|
-
)
|
|
347
|
-
const cancelButton = await findByText('Cancel')
|
|
348
|
-
|
|
349
|
-
expect(cancelButton).toBeInTheDocument()
|
|
350
|
-
})
|
|
351
|
-
|
|
352
|
-
describe('children validation', () => {
|
|
353
|
-
it('should pass validation when children are valid', async () => {
|
|
354
|
-
const { findByRole } = render(
|
|
355
|
-
<Modal open label="Modal Dialog" shouldReturnFocus={false}>
|
|
356
|
-
<Modal.Header>Hello World</Modal.Header>
|
|
357
|
-
<Modal.Body>Foo Bar Baz</Modal.Body>
|
|
358
|
-
<Modal.Footer>
|
|
359
|
-
<button>Cancel</button>
|
|
360
|
-
</Modal.Footer>
|
|
361
|
-
</Modal>
|
|
362
|
-
)
|
|
363
|
-
const dialog = await findByRole('dialog')
|
|
364
|
-
|
|
365
|
-
expect(dialog).toBeInTheDocument()
|
|
366
|
-
expect(consoleErrorMock).not.toHaveBeenCalled()
|
|
367
|
-
})
|
|
368
|
-
|
|
369
|
-
it('should pass inverse variant to children when set', async () => {
|
|
370
|
-
let headerRef: ModalHeader | null = null
|
|
371
|
-
let bodyRef: ModalBody | null = null
|
|
372
|
-
let footerRef: ModalFooter | null = null
|
|
373
|
-
|
|
374
|
-
const { findByRole } = render(
|
|
375
|
-
<Modal
|
|
376
|
-
open
|
|
377
|
-
label="Dark Modal"
|
|
378
|
-
shouldReturnFocus={false}
|
|
379
|
-
variant="inverse"
|
|
380
|
-
>
|
|
381
|
-
<Modal.Header ref={(el) => (headerRef = el)}>header</Modal.Header>
|
|
382
|
-
<Modal.Body ref={(el) => (bodyRef = el)}>body</Modal.Body>
|
|
383
|
-
<Modal.Footer ref={(el) => (footerRef = el)}>footer</Modal.Footer>
|
|
384
|
-
</Modal>
|
|
385
|
-
)
|
|
386
|
-
const dialog = await findByRole('dialog')
|
|
387
|
-
|
|
388
|
-
expect(dialog).toBeInTheDocument()
|
|
389
|
-
expect(headerRef!.props.variant).toBe('inverse')
|
|
390
|
-
expect(bodyRef!.props.variant).toBe('inverse')
|
|
391
|
-
expect(footerRef!.props.variant).toBe('inverse')
|
|
392
|
-
})
|
|
393
|
-
|
|
394
|
-
it('should pass overflow to Modal.Body', async () => {
|
|
395
|
-
let bodyRef: ModalBody | null = null
|
|
396
|
-
|
|
397
|
-
const { findByRole } = render(
|
|
398
|
-
<Modal open label="Modal" shouldReturnFocus={false} overflow="fit">
|
|
399
|
-
<Modal.Body ref={(el) => (bodyRef = el)}>body</Modal.Body>
|
|
400
|
-
</Modal>
|
|
401
|
-
)
|
|
402
|
-
const dialog = await findByRole('dialog')
|
|
403
|
-
|
|
404
|
-
expect(dialog).toBeInTheDocument()
|
|
405
|
-
expect(bodyRef!.props.overflow).toBe('fit')
|
|
406
|
-
})
|
|
407
|
-
})
|
|
408
|
-
|
|
409
|
-
describe('managed focus', () => {
|
|
410
|
-
class ModalExample extends Component<Partial<ModalProps>> {
|
|
411
|
-
static propTypes = {
|
|
412
|
-
// eslint-disable-next-line react/forbid-foreign-prop-types
|
|
413
|
-
...Modal.propTypes
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
render() {
|
|
417
|
-
const { label, ...props } = this.props
|
|
418
|
-
|
|
419
|
-
return (
|
|
420
|
-
<div>
|
|
421
|
-
<input type="text" />
|
|
422
|
-
<Modal label={label!} {...props}>
|
|
423
|
-
<Modal.Header>
|
|
424
|
-
<button>Close</button>
|
|
425
|
-
</Modal.Header>
|
|
426
|
-
<Modal.Body>
|
|
427
|
-
<input type="text" id="input-one" data-testid="input-first" />
|
|
428
|
-
<input type="text" id="input-two" data-testid="input-second" />
|
|
429
|
-
</Modal.Body>
|
|
430
|
-
<Modal.Footer>
|
|
431
|
-
<button>Cancel</button>
|
|
432
|
-
</Modal.Footer>
|
|
433
|
-
</Modal>
|
|
434
|
-
</div>
|
|
435
|
-
)
|
|
436
|
-
}
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
it('should focus closeButton by default', async () => {
|
|
440
|
-
const { findByText } = render(<ModalExample open label="A Modal" />)
|
|
441
|
-
const closeButton = await findByText('Close')
|
|
442
|
-
|
|
443
|
-
expect(closeButton).toBeInTheDocument()
|
|
444
|
-
|
|
445
|
-
await waitFor(() => {
|
|
446
|
-
expect(document.activeElement).toBe(closeButton)
|
|
447
|
-
})
|
|
448
|
-
})
|
|
449
|
-
|
|
450
|
-
it('should take a prop for finding default focus', async () => {
|
|
451
|
-
const { findByTestId } = render(
|
|
452
|
-
<ModalExample
|
|
453
|
-
open
|
|
454
|
-
label="A Modal"
|
|
455
|
-
defaultFocusElement={() => document.getElementById('input-one')}
|
|
456
|
-
/>
|
|
457
|
-
)
|
|
458
|
-
const input = await findByTestId('input-first')
|
|
459
|
-
|
|
460
|
-
await waitFor(() => {
|
|
461
|
-
expect(input).toHaveFocus()
|
|
462
|
-
})
|
|
463
|
-
})
|
|
464
|
-
})
|
|
465
|
-
})
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ModalBody.test.d.ts","sourceRoot":"","sources":["../../../../src/Modal/ModalBody/__new-tests__/ModalBody.test.tsx"],"names":[],"mappings":"AA0BA,OAAO,2BAA2B,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ModalFooter.test.d.ts","sourceRoot":"","sources":["../../../../src/Modal/ModalFooter/__new-tests__/ModalFooter.test.tsx"],"names":[],"mappings":"AAyBA,OAAO,2BAA2B,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ModalHeader.test.d.ts","sourceRoot":"","sources":["../../../../src/Modal/ModalHeader/__new-tests__/ModalHeader.test.tsx"],"names":[],"mappings":"AAyBA,OAAO,2BAA2B,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.test.d.ts","sourceRoot":"","sources":["../../../src/Modal/__new-tests__/Modal.test.tsx"],"names":[],"mappings":"AA4BA,OAAO,2BAA2B,CAAA"}
|