@instructure/ui-popover 8.53.3-snapshot-14 → 8.53.3-snapshot-16
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/es/Popover/__new-tests__/Popover.test.js +212 -6
- package/lib/Popover/__new-tests__/Popover.test.js +211 -5
- package/package.json +19 -19
- package/src/Popover/__new-tests__/Popover.test.tsx +290 -4
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/Popover/__new-tests__/Popover.test.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [8.53.3-snapshot-
|
|
6
|
+
## [8.53.3-snapshot-16](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-16) (2024-03-01)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-popover
|
|
9
9
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
-
var _button, _button2;
|
|
2
|
+
var _button, _button2, _h, _button3, _h2, _div, _button4, _h3, _Popover, _Popover2, _Popover3, _Popover4, _button5, _h4, _button6, _h5, _Popover5, _Popover6, _button7;
|
|
3
3
|
/*
|
|
4
|
-
* The MIT License (MIT)
|
|
4
|
+
* The MIT License (MIT).
|
|
5
5
|
*
|
|
6
6
|
* Copyright (c) 2015 - present Instructure, Inc.
|
|
7
7
|
*
|
|
@@ -25,9 +25,9 @@ var _button, _button2;
|
|
|
25
25
|
*/
|
|
26
26
|
|
|
27
27
|
import React, { useState } from 'react';
|
|
28
|
-
import { act, render, waitFor } from '@testing-library/react';
|
|
29
|
-
import { userEvent } from '@testing-library/user-event';
|
|
28
|
+
import { act, fireEvent, render, screen, waitFor, cleanup } from '@testing-library/react';
|
|
30
29
|
import '@testing-library/jest-dom';
|
|
30
|
+
import { userEvent } from '@testing-library/user-event';
|
|
31
31
|
import Popover from '../index';
|
|
32
32
|
const PopoverContainer = ({
|
|
33
33
|
onHideFn
|
|
@@ -57,6 +57,212 @@ const PopoverContainer = ({
|
|
|
57
57
|
}, "popover inner text"));
|
|
58
58
|
};
|
|
59
59
|
describe('<Popover />', () => {
|
|
60
|
+
afterEach(() => {
|
|
61
|
+
jest.resetAllMocks();
|
|
62
|
+
cleanup();
|
|
63
|
+
});
|
|
64
|
+
function testShowContent(on, eventType, eventInit) {
|
|
65
|
+
it(`should show content on ${on}`, () => {
|
|
66
|
+
const onValue = [on];
|
|
67
|
+
if (on === 'hover') {
|
|
68
|
+
onValue.push('focus');
|
|
69
|
+
}
|
|
70
|
+
render( /*#__PURE__*/React.createElement(Popover, {
|
|
71
|
+
on: onValue,
|
|
72
|
+
renderTrigger: _button2 || (_button2 = /*#__PURE__*/React.createElement("button", null, "Trigger"))
|
|
73
|
+
}, _h || (_h = /*#__PURE__*/React.createElement("h2", null, "Popover Content"))));
|
|
74
|
+
const trigger = screen.getByRole('button', {
|
|
75
|
+
name: 'Trigger'
|
|
76
|
+
});
|
|
77
|
+
switch (eventType) {
|
|
78
|
+
case 'click':
|
|
79
|
+
fireEvent.click(trigger, eventInit);
|
|
80
|
+
break;
|
|
81
|
+
case 'focus':
|
|
82
|
+
fireEvent.focus(trigger, eventInit);
|
|
83
|
+
break;
|
|
84
|
+
case 'mouseOver':
|
|
85
|
+
fireEvent.mouseOver(trigger, eventInit);
|
|
86
|
+
break;
|
|
87
|
+
default:
|
|
88
|
+
break;
|
|
89
|
+
}
|
|
90
|
+
expect(screen.getByText('Popover Content')).toBeInTheDocument();
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
function testEventHandler(handler, eventType) {
|
|
94
|
+
it(`should fire ${handler} handler for ${eventType} event`, () => {
|
|
95
|
+
const handlerSpy = jest.fn();
|
|
96
|
+
const props = {
|
|
97
|
+
[handler]: handlerSpy
|
|
98
|
+
};
|
|
99
|
+
render( /*#__PURE__*/React.createElement(Popover, Object.assign({}, props, {
|
|
100
|
+
renderTrigger: _button3 || (_button3 = /*#__PURE__*/React.createElement("button", null, "Trigger"))
|
|
101
|
+
}), _h2 || (_h2 = /*#__PURE__*/React.createElement("h2", null, "Popover content"))));
|
|
102
|
+
const trigger = screen.getByRole('button', {
|
|
103
|
+
name: 'Trigger'
|
|
104
|
+
});
|
|
105
|
+
switch (eventType) {
|
|
106
|
+
case 'click':
|
|
107
|
+
fireEvent.click(trigger);
|
|
108
|
+
break;
|
|
109
|
+
case 'focus':
|
|
110
|
+
fireEvent.focus(trigger);
|
|
111
|
+
break;
|
|
112
|
+
case 'blur':
|
|
113
|
+
fireEvent.blur(trigger);
|
|
114
|
+
break;
|
|
115
|
+
case 'focusOut':
|
|
116
|
+
fireEvent.focusOut(trigger);
|
|
117
|
+
break;
|
|
118
|
+
default:
|
|
119
|
+
break;
|
|
120
|
+
}
|
|
121
|
+
expect(handlerSpy).toHaveBeenCalledTimes(1);
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
it('should not render content by default', () => {
|
|
125
|
+
render(_div || (_div = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Popover, {
|
|
126
|
+
on: "click",
|
|
127
|
+
renderTrigger: /*#__PURE__*/React.createElement("button", null, "Trigger button")
|
|
128
|
+
}, /*#__PURE__*/React.createElement("h2", null, "Popover Title")))));
|
|
129
|
+
const triggerButton = screen.getByRole('button', {
|
|
130
|
+
name: 'Trigger button'
|
|
131
|
+
});
|
|
132
|
+
const popoverContent = screen.queryByText('Popover Title');
|
|
133
|
+
expect(triggerButton).toBeInTheDocument();
|
|
134
|
+
expect(popoverContent).not.toBeInTheDocument();
|
|
135
|
+
});
|
|
136
|
+
describe('Popover Event Handlers', () => {
|
|
137
|
+
testShowContent('click', 'click');
|
|
138
|
+
testShowContent('focus', 'focus');
|
|
139
|
+
testShowContent('hover', 'mouseOver', {
|
|
140
|
+
relatedTarget: document.documentElement
|
|
141
|
+
});
|
|
142
|
+
testEventHandler('onClick', 'click');
|
|
143
|
+
testEventHandler('onFocus', 'focus');
|
|
144
|
+
testEventHandler('onBlur', 'blur');
|
|
145
|
+
testEventHandler('onBlur', 'focusOut');
|
|
146
|
+
});
|
|
147
|
+
it('should hide content when trigger is clicked', () => {
|
|
148
|
+
const onHideContent = jest.fn();
|
|
149
|
+
render( /*#__PURE__*/React.createElement(Popover, {
|
|
150
|
+
on: "click",
|
|
151
|
+
onHideContent: (_e, o) => onHideContent(o),
|
|
152
|
+
shouldCloseOnDocumentClick: false,
|
|
153
|
+
renderTrigger: _button4 || (_button4 = /*#__PURE__*/React.createElement("button", null, "Trigger button"))
|
|
154
|
+
}, _h3 || (_h3 = /*#__PURE__*/React.createElement("h2", null, "Popover Title"))));
|
|
155
|
+
const triggerButton = screen.getByRole('button', {
|
|
156
|
+
name: 'Trigger button'
|
|
157
|
+
});
|
|
158
|
+
expect(triggerButton).toBeInTheDocument();
|
|
159
|
+
expect(screen.queryByText('Popover Title')).not.toBeInTheDocument();
|
|
160
|
+
fireEvent.click(triggerButton);
|
|
161
|
+
expect(onHideContent).not.toHaveBeenCalled();
|
|
162
|
+
expect(screen.queryByText('Popover Title')).toBeInTheDocument();
|
|
163
|
+
fireEvent.click(triggerButton);
|
|
164
|
+
expect(onHideContent).toHaveBeenCalled();
|
|
165
|
+
expect(onHideContent).toHaveBeenCalledWith(expect.objectContaining({
|
|
166
|
+
documentClick: false
|
|
167
|
+
}));
|
|
168
|
+
expect(screen.queryByText('Popover Title')).not.toBeInTheDocument();
|
|
169
|
+
});
|
|
170
|
+
it('should show content if defaultIsShowingContent is true', () => {
|
|
171
|
+
render(_Popover || (_Popover = /*#__PURE__*/React.createElement(Popover, {
|
|
172
|
+
on: "click",
|
|
173
|
+
defaultIsShowingContent: true,
|
|
174
|
+
renderTrigger: /*#__PURE__*/React.createElement("button", null, "Trigger")
|
|
175
|
+
}, /*#__PURE__*/React.createElement("h2", null, "Popover content"))));
|
|
176
|
+
const popoverContent = screen.queryByText('Popover content');
|
|
177
|
+
expect(popoverContent).toBeInTheDocument();
|
|
178
|
+
});
|
|
179
|
+
describe('controlled', () => {
|
|
180
|
+
it('should show content by default if isShowingContent is true', () => {
|
|
181
|
+
render(_Popover2 || (_Popover2 = /*#__PURE__*/React.createElement(Popover, {
|
|
182
|
+
on: "click",
|
|
183
|
+
isShowingContent: true,
|
|
184
|
+
renderTrigger: /*#__PURE__*/React.createElement("button", null, "Trigger")
|
|
185
|
+
}, /*#__PURE__*/React.createElement("h2", null, "Popover content"))));
|
|
186
|
+
const popoverContent = screen.queryByText('Popover content');
|
|
187
|
+
expect(popoverContent).toBeInTheDocument();
|
|
188
|
+
});
|
|
189
|
+
it('should not show content if isShowingContent prop is false', () => {
|
|
190
|
+
render(_Popover3 || (_Popover3 = /*#__PURE__*/React.createElement(Popover, {
|
|
191
|
+
on: "click",
|
|
192
|
+
isShowingContent: false,
|
|
193
|
+
renderTrigger: /*#__PURE__*/React.createElement("button", null, "Trigger")
|
|
194
|
+
}, /*#__PURE__*/React.createElement("h2", null, "Popover content"))));
|
|
195
|
+
const triggerButton = screen.getByRole('button', {
|
|
196
|
+
name: 'Trigger'
|
|
197
|
+
});
|
|
198
|
+
const popoverContent = screen.queryByText('Popover content');
|
|
199
|
+
expect(triggerButton).toBeInTheDocument();
|
|
200
|
+
expect(popoverContent).not.toBeInTheDocument();
|
|
201
|
+
});
|
|
202
|
+
it('should show content if isShowingContent prop is true', () => {
|
|
203
|
+
render(_Popover4 || (_Popover4 = /*#__PURE__*/React.createElement(Popover, {
|
|
204
|
+
on: "click",
|
|
205
|
+
isShowingContent: true,
|
|
206
|
+
renderTrigger: /*#__PURE__*/React.createElement("button", null, "Trigger")
|
|
207
|
+
}, /*#__PURE__*/React.createElement("h2", null, "Popover content"))));
|
|
208
|
+
const popoverContent = screen.queryByText('Popover content');
|
|
209
|
+
expect(popoverContent).toBeInTheDocument();
|
|
210
|
+
});
|
|
211
|
+
it('should call onShowContent', () => {
|
|
212
|
+
const onShowContent = jest.fn();
|
|
213
|
+
render( /*#__PURE__*/React.createElement(Popover, {
|
|
214
|
+
on: "click",
|
|
215
|
+
isShowingContent: false,
|
|
216
|
+
shouldCloseOnDocumentClick: false,
|
|
217
|
+
onShowContent: onShowContent,
|
|
218
|
+
renderTrigger: _button5 || (_button5 = /*#__PURE__*/React.createElement("button", null, "Trigger"))
|
|
219
|
+
}, _h4 || (_h4 = /*#__PURE__*/React.createElement("h2", null, "Popover content"))));
|
|
220
|
+
const trigger = screen.getByRole('button', {
|
|
221
|
+
name: 'Trigger'
|
|
222
|
+
});
|
|
223
|
+
fireEvent.click(trigger);
|
|
224
|
+
expect(onShowContent).toHaveBeenCalledTimes(1);
|
|
225
|
+
});
|
|
226
|
+
it('should call onHideContent', () => {
|
|
227
|
+
const onHideContent = jest.fn();
|
|
228
|
+
render( /*#__PURE__*/React.createElement(Popover, {
|
|
229
|
+
on: "click",
|
|
230
|
+
isShowingContent: true,
|
|
231
|
+
shouldCloseOnDocumentClick: false,
|
|
232
|
+
onHideContent: (_e, o) => onHideContent(o),
|
|
233
|
+
renderTrigger: _button6 || (_button6 = /*#__PURE__*/React.createElement("button", null, "Trigger"))
|
|
234
|
+
}, _h5 || (_h5 = /*#__PURE__*/React.createElement("h2", null, "Popover content"))));
|
|
235
|
+
const trigger = screen.getByRole('button', {
|
|
236
|
+
name: 'Trigger'
|
|
237
|
+
});
|
|
238
|
+
fireEvent.click(trigger);
|
|
239
|
+
expect(onHideContent).toHaveBeenCalledWith({
|
|
240
|
+
documentClick: false
|
|
241
|
+
});
|
|
242
|
+
});
|
|
243
|
+
it('should not show content on click', () => {
|
|
244
|
+
render(_Popover5 || (_Popover5 = /*#__PURE__*/React.createElement(Popover, {
|
|
245
|
+
on: "click",
|
|
246
|
+
isShowingContent: false,
|
|
247
|
+
renderTrigger: /*#__PURE__*/React.createElement("button", null, "Trigger")
|
|
248
|
+
}, /*#__PURE__*/React.createElement("h2", null, "Popover content"))));
|
|
249
|
+
const triggerButton = screen.getByRole('button', {
|
|
250
|
+
name: 'Trigger'
|
|
251
|
+
});
|
|
252
|
+
fireEvent.click(triggerButton);
|
|
253
|
+
const popoverContent = screen.queryByText('Popover content');
|
|
254
|
+
expect(popoverContent).not.toBeInTheDocument();
|
|
255
|
+
});
|
|
256
|
+
});
|
|
257
|
+
it('should pass positionContainerDisplay prop to Position', () => {
|
|
258
|
+
render(_Popover6 || (_Popover6 = /*#__PURE__*/React.createElement(Popover, {
|
|
259
|
+
on: "click",
|
|
260
|
+
renderTrigger: /*#__PURE__*/React.createElement("button", null, "Trigger"),
|
|
261
|
+
positionContainerDisplay: "block"
|
|
262
|
+
}, /*#__PURE__*/React.createElement("h2", null, "Popover content"))));
|
|
263
|
+
const popover = document.querySelector('[data-position^="Popover_"]');
|
|
264
|
+
expect(popover).toHaveStyle('display: block');
|
|
265
|
+
});
|
|
60
266
|
it('should close the popover via trigger before dismissing via documentClick', async () => {
|
|
61
267
|
const hideContentFn = jest.fn();
|
|
62
268
|
const _render = render( /*#__PURE__*/React.createElement(PopoverContainer, {
|
|
@@ -75,7 +281,7 @@ describe('<Popover />', () => {
|
|
|
75
281
|
it('should call onHideContent when clicking outside', async () => {
|
|
76
282
|
const hideContentFn = jest.fn();
|
|
77
283
|
render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Popover, {
|
|
78
|
-
renderTrigger:
|
|
284
|
+
renderTrigger: _button7 || (_button7 = /*#__PURE__*/React.createElement("button", null, "Trigger btn")),
|
|
79
285
|
isShowingContent: true,
|
|
80
286
|
onHideContent: (_e, o) => hideContentFn(o),
|
|
81
287
|
on: "click",
|
|
@@ -83,7 +289,7 @@ describe('<Popover />', () => {
|
|
|
83
289
|
shouldContainFocus: true,
|
|
84
290
|
shouldReturnFocus: true,
|
|
85
291
|
offsetY: "16px"
|
|
86
|
-
}, "popover inner
|
|
292
|
+
}, "popover inner texts")));
|
|
87
293
|
await act(async () => {
|
|
88
294
|
await userEvent.click(document.body);
|
|
89
295
|
});
|
|
@@ -5,12 +5,12 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
|
|
|
5
5
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
6
6
|
var _react = _interopRequireWildcard(require("react"));
|
|
7
7
|
var _react2 = require("@testing-library/react");
|
|
8
|
-
var _userEvent = require("@testing-library/user-event");
|
|
9
8
|
require("@testing-library/jest-dom");
|
|
9
|
+
var _userEvent = require("@testing-library/user-event");
|
|
10
10
|
var _index = _interopRequireDefault(require("../index"));
|
|
11
|
-
var _button, _button2;
|
|
11
|
+
var _button, _button2, _h, _button3, _h2, _div, _button4, _h3, _Popover, _Popover2, _Popover3, _Popover4, _button5, _h4, _button6, _h5, _Popover5, _Popover6, _button7;
|
|
12
12
|
/*
|
|
13
|
-
* The MIT License (MIT)
|
|
13
|
+
* The MIT License (MIT).
|
|
14
14
|
*
|
|
15
15
|
* Copyright (c) 2015 - present Instructure, Inc.
|
|
16
16
|
*
|
|
@@ -60,6 +60,212 @@ const PopoverContainer = ({
|
|
|
60
60
|
}, "popover inner text"));
|
|
61
61
|
};
|
|
62
62
|
describe('<Popover />', () => {
|
|
63
|
+
afterEach(() => {
|
|
64
|
+
jest.resetAllMocks();
|
|
65
|
+
(0, _react2.cleanup)();
|
|
66
|
+
});
|
|
67
|
+
function testShowContent(on, eventType, eventInit) {
|
|
68
|
+
it(`should show content on ${on}`, () => {
|
|
69
|
+
const onValue = [on];
|
|
70
|
+
if (on === 'hover') {
|
|
71
|
+
onValue.push('focus');
|
|
72
|
+
}
|
|
73
|
+
(0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
74
|
+
on: onValue,
|
|
75
|
+
renderTrigger: _button2 || (_button2 = /*#__PURE__*/_react.default.createElement("button", null, "Trigger"))
|
|
76
|
+
}, _h || (_h = /*#__PURE__*/_react.default.createElement("h2", null, "Popover Content"))));
|
|
77
|
+
const trigger = _react2.screen.getByRole('button', {
|
|
78
|
+
name: 'Trigger'
|
|
79
|
+
});
|
|
80
|
+
switch (eventType) {
|
|
81
|
+
case 'click':
|
|
82
|
+
_react2.fireEvent.click(trigger, eventInit);
|
|
83
|
+
break;
|
|
84
|
+
case 'focus':
|
|
85
|
+
_react2.fireEvent.focus(trigger, eventInit);
|
|
86
|
+
break;
|
|
87
|
+
case 'mouseOver':
|
|
88
|
+
_react2.fireEvent.mouseOver(trigger, eventInit);
|
|
89
|
+
break;
|
|
90
|
+
default:
|
|
91
|
+
break;
|
|
92
|
+
}
|
|
93
|
+
expect(_react2.screen.getByText('Popover Content')).toBeInTheDocument();
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
function testEventHandler(handler, eventType) {
|
|
97
|
+
it(`should fire ${handler} handler for ${eventType} event`, () => {
|
|
98
|
+
const handlerSpy = jest.fn();
|
|
99
|
+
const props = {
|
|
100
|
+
[handler]: handlerSpy
|
|
101
|
+
};
|
|
102
|
+
(0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, Object.assign({}, props, {
|
|
103
|
+
renderTrigger: _button3 || (_button3 = /*#__PURE__*/_react.default.createElement("button", null, "Trigger"))
|
|
104
|
+
}), _h2 || (_h2 = /*#__PURE__*/_react.default.createElement("h2", null, "Popover content"))));
|
|
105
|
+
const trigger = _react2.screen.getByRole('button', {
|
|
106
|
+
name: 'Trigger'
|
|
107
|
+
});
|
|
108
|
+
switch (eventType) {
|
|
109
|
+
case 'click':
|
|
110
|
+
_react2.fireEvent.click(trigger);
|
|
111
|
+
break;
|
|
112
|
+
case 'focus':
|
|
113
|
+
_react2.fireEvent.focus(trigger);
|
|
114
|
+
break;
|
|
115
|
+
case 'blur':
|
|
116
|
+
_react2.fireEvent.blur(trigger);
|
|
117
|
+
break;
|
|
118
|
+
case 'focusOut':
|
|
119
|
+
_react2.fireEvent.focusOut(trigger);
|
|
120
|
+
break;
|
|
121
|
+
default:
|
|
122
|
+
break;
|
|
123
|
+
}
|
|
124
|
+
expect(handlerSpy).toHaveBeenCalledTimes(1);
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
it('should not render content by default', () => {
|
|
128
|
+
(0, _react2.render)(_div || (_div = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
129
|
+
on: "click",
|
|
130
|
+
renderTrigger: /*#__PURE__*/_react.default.createElement("button", null, "Trigger button")
|
|
131
|
+
}, /*#__PURE__*/_react.default.createElement("h2", null, "Popover Title")))));
|
|
132
|
+
const triggerButton = _react2.screen.getByRole('button', {
|
|
133
|
+
name: 'Trigger button'
|
|
134
|
+
});
|
|
135
|
+
const popoverContent = _react2.screen.queryByText('Popover Title');
|
|
136
|
+
expect(triggerButton).toBeInTheDocument();
|
|
137
|
+
expect(popoverContent).not.toBeInTheDocument();
|
|
138
|
+
});
|
|
139
|
+
describe('Popover Event Handlers', () => {
|
|
140
|
+
testShowContent('click', 'click');
|
|
141
|
+
testShowContent('focus', 'focus');
|
|
142
|
+
testShowContent('hover', 'mouseOver', {
|
|
143
|
+
relatedTarget: document.documentElement
|
|
144
|
+
});
|
|
145
|
+
testEventHandler('onClick', 'click');
|
|
146
|
+
testEventHandler('onFocus', 'focus');
|
|
147
|
+
testEventHandler('onBlur', 'blur');
|
|
148
|
+
testEventHandler('onBlur', 'focusOut');
|
|
149
|
+
});
|
|
150
|
+
it('should hide content when trigger is clicked', () => {
|
|
151
|
+
const onHideContent = jest.fn();
|
|
152
|
+
(0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
153
|
+
on: "click",
|
|
154
|
+
onHideContent: (_e, o) => onHideContent(o),
|
|
155
|
+
shouldCloseOnDocumentClick: false,
|
|
156
|
+
renderTrigger: _button4 || (_button4 = /*#__PURE__*/_react.default.createElement("button", null, "Trigger button"))
|
|
157
|
+
}, _h3 || (_h3 = /*#__PURE__*/_react.default.createElement("h2", null, "Popover Title"))));
|
|
158
|
+
const triggerButton = _react2.screen.getByRole('button', {
|
|
159
|
+
name: 'Trigger button'
|
|
160
|
+
});
|
|
161
|
+
expect(triggerButton).toBeInTheDocument();
|
|
162
|
+
expect(_react2.screen.queryByText('Popover Title')).not.toBeInTheDocument();
|
|
163
|
+
_react2.fireEvent.click(triggerButton);
|
|
164
|
+
expect(onHideContent).not.toHaveBeenCalled();
|
|
165
|
+
expect(_react2.screen.queryByText('Popover Title')).toBeInTheDocument();
|
|
166
|
+
_react2.fireEvent.click(triggerButton);
|
|
167
|
+
expect(onHideContent).toHaveBeenCalled();
|
|
168
|
+
expect(onHideContent).toHaveBeenCalledWith(expect.objectContaining({
|
|
169
|
+
documentClick: false
|
|
170
|
+
}));
|
|
171
|
+
expect(_react2.screen.queryByText('Popover Title')).not.toBeInTheDocument();
|
|
172
|
+
});
|
|
173
|
+
it('should show content if defaultIsShowingContent is true', () => {
|
|
174
|
+
(0, _react2.render)(_Popover || (_Popover = /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
175
|
+
on: "click",
|
|
176
|
+
defaultIsShowingContent: true,
|
|
177
|
+
renderTrigger: /*#__PURE__*/_react.default.createElement("button", null, "Trigger")
|
|
178
|
+
}, /*#__PURE__*/_react.default.createElement("h2", null, "Popover content"))));
|
|
179
|
+
const popoverContent = _react2.screen.queryByText('Popover content');
|
|
180
|
+
expect(popoverContent).toBeInTheDocument();
|
|
181
|
+
});
|
|
182
|
+
describe('controlled', () => {
|
|
183
|
+
it('should show content by default if isShowingContent is true', () => {
|
|
184
|
+
(0, _react2.render)(_Popover2 || (_Popover2 = /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
185
|
+
on: "click",
|
|
186
|
+
isShowingContent: true,
|
|
187
|
+
renderTrigger: /*#__PURE__*/_react.default.createElement("button", null, "Trigger")
|
|
188
|
+
}, /*#__PURE__*/_react.default.createElement("h2", null, "Popover content"))));
|
|
189
|
+
const popoverContent = _react2.screen.queryByText('Popover content');
|
|
190
|
+
expect(popoverContent).toBeInTheDocument();
|
|
191
|
+
});
|
|
192
|
+
it('should not show content if isShowingContent prop is false', () => {
|
|
193
|
+
(0, _react2.render)(_Popover3 || (_Popover3 = /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
194
|
+
on: "click",
|
|
195
|
+
isShowingContent: false,
|
|
196
|
+
renderTrigger: /*#__PURE__*/_react.default.createElement("button", null, "Trigger")
|
|
197
|
+
}, /*#__PURE__*/_react.default.createElement("h2", null, "Popover content"))));
|
|
198
|
+
const triggerButton = _react2.screen.getByRole('button', {
|
|
199
|
+
name: 'Trigger'
|
|
200
|
+
});
|
|
201
|
+
const popoverContent = _react2.screen.queryByText('Popover content');
|
|
202
|
+
expect(triggerButton).toBeInTheDocument();
|
|
203
|
+
expect(popoverContent).not.toBeInTheDocument();
|
|
204
|
+
});
|
|
205
|
+
it('should show content if isShowingContent prop is true', () => {
|
|
206
|
+
(0, _react2.render)(_Popover4 || (_Popover4 = /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
207
|
+
on: "click",
|
|
208
|
+
isShowingContent: true,
|
|
209
|
+
renderTrigger: /*#__PURE__*/_react.default.createElement("button", null, "Trigger")
|
|
210
|
+
}, /*#__PURE__*/_react.default.createElement("h2", null, "Popover content"))));
|
|
211
|
+
const popoverContent = _react2.screen.queryByText('Popover content');
|
|
212
|
+
expect(popoverContent).toBeInTheDocument();
|
|
213
|
+
});
|
|
214
|
+
it('should call onShowContent', () => {
|
|
215
|
+
const onShowContent = jest.fn();
|
|
216
|
+
(0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
217
|
+
on: "click",
|
|
218
|
+
isShowingContent: false,
|
|
219
|
+
shouldCloseOnDocumentClick: false,
|
|
220
|
+
onShowContent: onShowContent,
|
|
221
|
+
renderTrigger: _button5 || (_button5 = /*#__PURE__*/_react.default.createElement("button", null, "Trigger"))
|
|
222
|
+
}, _h4 || (_h4 = /*#__PURE__*/_react.default.createElement("h2", null, "Popover content"))));
|
|
223
|
+
const trigger = _react2.screen.getByRole('button', {
|
|
224
|
+
name: 'Trigger'
|
|
225
|
+
});
|
|
226
|
+
_react2.fireEvent.click(trigger);
|
|
227
|
+
expect(onShowContent).toHaveBeenCalledTimes(1);
|
|
228
|
+
});
|
|
229
|
+
it('should call onHideContent', () => {
|
|
230
|
+
const onHideContent = jest.fn();
|
|
231
|
+
(0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
232
|
+
on: "click",
|
|
233
|
+
isShowingContent: true,
|
|
234
|
+
shouldCloseOnDocumentClick: false,
|
|
235
|
+
onHideContent: (_e, o) => onHideContent(o),
|
|
236
|
+
renderTrigger: _button6 || (_button6 = /*#__PURE__*/_react.default.createElement("button", null, "Trigger"))
|
|
237
|
+
}, _h5 || (_h5 = /*#__PURE__*/_react.default.createElement("h2", null, "Popover content"))));
|
|
238
|
+
const trigger = _react2.screen.getByRole('button', {
|
|
239
|
+
name: 'Trigger'
|
|
240
|
+
});
|
|
241
|
+
_react2.fireEvent.click(trigger);
|
|
242
|
+
expect(onHideContent).toHaveBeenCalledWith({
|
|
243
|
+
documentClick: false
|
|
244
|
+
});
|
|
245
|
+
});
|
|
246
|
+
it('should not show content on click', () => {
|
|
247
|
+
(0, _react2.render)(_Popover5 || (_Popover5 = /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
248
|
+
on: "click",
|
|
249
|
+
isShowingContent: false,
|
|
250
|
+
renderTrigger: /*#__PURE__*/_react.default.createElement("button", null, "Trigger")
|
|
251
|
+
}, /*#__PURE__*/_react.default.createElement("h2", null, "Popover content"))));
|
|
252
|
+
const triggerButton = _react2.screen.getByRole('button', {
|
|
253
|
+
name: 'Trigger'
|
|
254
|
+
});
|
|
255
|
+
_react2.fireEvent.click(triggerButton);
|
|
256
|
+
const popoverContent = _react2.screen.queryByText('Popover content');
|
|
257
|
+
expect(popoverContent).not.toBeInTheDocument();
|
|
258
|
+
});
|
|
259
|
+
});
|
|
260
|
+
it('should pass positionContainerDisplay prop to Position', () => {
|
|
261
|
+
(0, _react2.render)(_Popover6 || (_Popover6 = /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
262
|
+
on: "click",
|
|
263
|
+
renderTrigger: /*#__PURE__*/_react.default.createElement("button", null, "Trigger"),
|
|
264
|
+
positionContainerDisplay: "block"
|
|
265
|
+
}, /*#__PURE__*/_react.default.createElement("h2", null, "Popover content"))));
|
|
266
|
+
const popover = document.querySelector('[data-position^="Popover_"]');
|
|
267
|
+
expect(popover).toHaveStyle('display: block');
|
|
268
|
+
});
|
|
63
269
|
it('should close the popover via trigger before dismissing via documentClick', async () => {
|
|
64
270
|
const hideContentFn = jest.fn();
|
|
65
271
|
const _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(PopoverContainer, {
|
|
@@ -78,7 +284,7 @@ describe('<Popover />', () => {
|
|
|
78
284
|
it('should call onHideContent when clicking outside', async () => {
|
|
79
285
|
const hideContentFn = jest.fn();
|
|
80
286
|
(0, _react2.render)( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
81
|
-
renderTrigger:
|
|
287
|
+
renderTrigger: _button7 || (_button7 = /*#__PURE__*/_react.default.createElement("button", null, "Trigger btn")),
|
|
82
288
|
isShowingContent: true,
|
|
83
289
|
onHideContent: (_e, o) => hideContentFn(o),
|
|
84
290
|
on: "click",
|
|
@@ -86,7 +292,7 @@ describe('<Popover />', () => {
|
|
|
86
292
|
shouldContainFocus: true,
|
|
87
293
|
shouldReturnFocus: true,
|
|
88
294
|
offsetY: "16px"
|
|
89
|
-
}, "popover inner
|
|
295
|
+
}, "popover inner texts")));
|
|
90
296
|
await (0, _react2.act)(async () => {
|
|
91
297
|
await _userEvent.userEvent.click(document.body);
|
|
92
298
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-popover",
|
|
3
|
-
"version": "8.53.3-snapshot-
|
|
3
|
+
"version": "8.53.3-snapshot-16",
|
|
4
4
|
"description": "A component for hiding or showing content based on user interaction.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -24,28 +24,28 @@
|
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.23.2",
|
|
27
|
-
"@instructure/console": "8.53.3-snapshot-
|
|
28
|
-
"@instructure/emotion": "8.53.3-snapshot-
|
|
29
|
-
"@instructure/ui-a11y-utils": "8.53.3-snapshot-
|
|
30
|
-
"@instructure/ui-dialog": "8.53.3-snapshot-
|
|
31
|
-
"@instructure/ui-dom-utils": "8.53.3-snapshot-
|
|
32
|
-
"@instructure/ui-i18n": "8.53.3-snapshot-
|
|
33
|
-
"@instructure/ui-position": "8.53.3-snapshot-
|
|
34
|
-
"@instructure/ui-prop-types": "8.53.3-snapshot-
|
|
35
|
-
"@instructure/ui-react-utils": "8.53.3-snapshot-
|
|
36
|
-
"@instructure/ui-testable": "8.53.3-snapshot-
|
|
37
|
-
"@instructure/ui-utils": "8.53.3-snapshot-
|
|
38
|
-
"@instructure/ui-view": "8.53.3-snapshot-
|
|
39
|
-
"@instructure/uid": "8.53.3-snapshot-
|
|
27
|
+
"@instructure/console": "8.53.3-snapshot-16",
|
|
28
|
+
"@instructure/emotion": "8.53.3-snapshot-16",
|
|
29
|
+
"@instructure/ui-a11y-utils": "8.53.3-snapshot-16",
|
|
30
|
+
"@instructure/ui-dialog": "8.53.3-snapshot-16",
|
|
31
|
+
"@instructure/ui-dom-utils": "8.53.3-snapshot-16",
|
|
32
|
+
"@instructure/ui-i18n": "8.53.3-snapshot-16",
|
|
33
|
+
"@instructure/ui-position": "8.53.3-snapshot-16",
|
|
34
|
+
"@instructure/ui-prop-types": "8.53.3-snapshot-16",
|
|
35
|
+
"@instructure/ui-react-utils": "8.53.3-snapshot-16",
|
|
36
|
+
"@instructure/ui-testable": "8.53.3-snapshot-16",
|
|
37
|
+
"@instructure/ui-utils": "8.53.3-snapshot-16",
|
|
38
|
+
"@instructure/ui-view": "8.53.3-snapshot-16",
|
|
39
|
+
"@instructure/uid": "8.53.3-snapshot-16",
|
|
40
40
|
"keycode": "^2.2.1",
|
|
41
41
|
"prop-types": "^15.8.1"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@instructure/ui-babel-preset": "8.53.3-snapshot-
|
|
45
|
-
"@instructure/ui-color-utils": "8.53.3-snapshot-
|
|
46
|
-
"@instructure/ui-test-locator": "8.53.3-snapshot-
|
|
47
|
-
"@instructure/ui-test-queries": "8.53.3-snapshot-
|
|
48
|
-
"@instructure/ui-test-utils": "8.53.3-snapshot-
|
|
44
|
+
"@instructure/ui-babel-preset": "8.53.3-snapshot-16",
|
|
45
|
+
"@instructure/ui-color-utils": "8.53.3-snapshot-16",
|
|
46
|
+
"@instructure/ui-test-locator": "8.53.3-snapshot-16",
|
|
47
|
+
"@instructure/ui-test-queries": "8.53.3-snapshot-16",
|
|
48
|
+
"@instructure/ui-test-utils": "8.53.3-snapshot-16",
|
|
49
49
|
"@testing-library/jest-dom": "^6.1.4",
|
|
50
50
|
"@testing-library/react": "^14.1.2",
|
|
51
51
|
"@testing-library/user-event": "^14.5.1"
|