@@ -2,6 +2,7 @@ import { cleanup, fireEvent, render } from '@testing-library/react';
2
2
import React from 'react' ;
3
3
import Trigger , { UniqueProvider } from '../src' ;
4
4
import { awaitFakeTimer } from './util' ;
5
+ import type { TriggerProps } from '../src' ;
5
6
6
7
// Mock FloatBg to check if open props changed
7
8
global . openChangeLog = [ ] ;
@@ -27,6 +28,34 @@ jest.mock('../src/UniqueProvider/FloatBg', () => {
27
28
} ;
28
29
} ) ;
29
30
31
+ async function setupAndOpenPopup ( triggerProps : Partial < TriggerProps > = { } ) {
32
+ const { container } = render (
33
+ < UniqueProvider >
34
+ < Trigger
35
+ action = { [ 'click' ] }
36
+ popup = { < strong className = "x-content" > tooltip</ strong > }
37
+ unique
38
+ { ...triggerProps }
39
+ >
40
+ < div className = "target" > click me</ div >
41
+ </ Trigger >
42
+ </ UniqueProvider > ,
43
+ ) ;
44
+
45
+ // Initially no popup should be visible
46
+ expect ( document . querySelector ( '.rc-trigger-popup' ) ) . toBeFalsy ( ) ;
47
+
48
+ // Click trigger to show popup
49
+ fireEvent . click ( container . querySelector ( '.target' ) ) ;
50
+ await awaitFakeTimer ( ) ;
51
+
52
+ // Check that popup exists
53
+ const popup = document . querySelector ( '.rc-trigger-popup' ) ;
54
+ expect ( popup ) . toBeTruthy ( ) ;
55
+
56
+ return { container, popup } ;
57
+ }
58
+
30
59
describe ( 'Trigger.Unique' , ( ) => {
31
60
beforeEach ( ( ) => {
32
61
jest . useFakeTimers ( ) ;
@@ -154,29 +183,7 @@ describe('Trigger.Unique', () => {
154
183
} ) ;
155
184
156
185
it ( 'should apply uniqueBgClassName to FloatBg component' , async ( ) => {
157
- const { container } = render (
158
- < UniqueProvider >
159
- < Trigger
160
- action = { [ 'click' ] }
161
- popup = { < strong className = "x-content" > tooltip</ strong > }
162
- unique
163
- uniqueBgClassName = "custom-bg-class"
164
- >
165
- < div className = "target" > click me</ div >
166
- </ Trigger >
167
- </ UniqueProvider > ,
168
- ) ;
169
-
170
- // Initially no popup should be visible
171
- expect ( document . querySelector ( '.rc-trigger-popup' ) ) . toBeFalsy ( ) ;
172
-
173
- // Click trigger to show popup
174
- fireEvent . click ( container . querySelector ( '.target' ) ) ;
175
- await awaitFakeTimer ( ) ;
176
-
177
- // Check that popup exists
178
- const popup = document . querySelector ( '.rc-trigger-popup' ) ;
179
- expect ( popup ) . toBeTruthy ( ) ;
186
+ await setupAndOpenPopup ( { uniqueBgClassName : 'custom-bg-class' } ) ;
180
187
181
188
// Check that FloatBg has the custom background className
182
189
const floatBg = document . querySelector ( '.rc-trigger-popup-float-bg' ) ;
@@ -185,29 +192,7 @@ describe('Trigger.Unique', () => {
185
192
} ) ;
186
193
187
194
it ( 'should apply uniqueBgStyle to FloatBg component' , async ( ) => {
188
- const { container } = render (
189
- < UniqueProvider >
190
- < Trigger
191
- action = { [ 'click' ] }
192
- popup = { < strong className = "x-content" > tooltip</ strong > }
193
- unique
194
- uniqueBgStyle = { { backgroundColor : 'red' , border : '1px solid blue' } }
195
- >
196
- < div className = "target" > click me</ div >
197
- </ Trigger >
198
- </ UniqueProvider > ,
199
- ) ;
200
-
201
- // Initially no popup should be visible
202
- expect ( document . querySelector ( '.rc-trigger-popup' ) ) . toBeFalsy ( ) ;
203
-
204
- // Click trigger to show popup
205
- fireEvent . click ( container . querySelector ( '.target' ) ) ;
206
- await awaitFakeTimer ( ) ;
207
-
208
- // Check that popup exists
209
- const popup = document . querySelector ( '.rc-trigger-popup' ) ;
210
- expect ( popup ) . toBeTruthy ( ) ;
195
+ await setupAndOpenPopup ( { uniqueBgStyle : { backgroundColor : 'red' , border : '1px solid blue' } } ) ;
211
196
212
197
// Check that FloatBg has the custom background style
213
198
const floatBg = document . querySelector ( '.rc-trigger-popup-float-bg' ) ;
@@ -219,28 +204,7 @@ describe('Trigger.Unique', () => {
219
204
} ) ;
220
205
221
206
it ( 'should not apply any additional className to FloatBg when uniqueBgClassName is not provided' , async ( ) => {
222
- const { container } = render (
223
- < UniqueProvider >
224
- < Trigger
225
- action = { [ 'click' ] }
226
- popup = { < strong className = "x-content" > tooltip</ strong > }
227
- unique
228
- >
229
- < div className = "target" > click me</ div >
230
- </ Trigger >
231
- </ UniqueProvider > ,
232
- ) ;
233
-
234
- // Initially no popup should be visible
235
- expect ( document . querySelector ( '.rc-trigger-popup' ) ) . toBeFalsy ( ) ;
236
-
237
- // Click trigger to show popup
238
- fireEvent . click ( container . querySelector ( '.target' ) ) ;
239
- await awaitFakeTimer ( ) ;
240
-
241
- // Check that popup exists
242
- const popup = document . querySelector ( '.rc-trigger-popup' ) ;
243
- expect ( popup ) . toBeTruthy ( ) ;
207
+ await setupAndOpenPopup ( ) ;
244
208
245
209
// Check that FloatBg exists but does not have custom background className
246
210
const floatBg = document . querySelector ( '.rc-trigger-popup-float-bg' ) ;
0 commit comments