@mtes-mct/monitor-ui 12.2.0 → 12.3.0

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/cypress/global.d.ts +15 -7
  3. package/cypress/index.js +226 -95
  4. package/cypress/index.js.map +1 -1
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,26 @@
1
+ ## [12.2.1](https://github.com/MTES-MCT/monitor-ui/compare/v12.2.0...v12.2.1) (2024-02-29)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **cypress:** widen input type for fill() on TextInput ([e7f9984](https://github.com/MTES-MCT/monitor-ui/commit/e7f998474148d970cc81b9dee23740a991dc1d5b))
7
+
8
+ ## [12.2.0](https://github.com/MTES-MCT/monitor-ui/compare/v12.1.3...v12.2.0) (2024-02-29)
9
+
10
+
11
+ ### Features
12
+
13
+ * **cypress:** add forceCheck() command ([ab382b7](https://github.com/MTES-MCT/monitor-ui/commit/ab382b76e6569e80f305c3abffe9133a2d5cac0c))
14
+ * **cypress:** add forceClear() command ([ebd5ad8](https://github.com/MTES-MCT/monitor-ui/commit/ebd5ad86249aaf333ce088b06561b5827bd8a156))
15
+ * **cypress:** add forceType() command ([c6017a1](https://github.com/MTES-MCT/monitor-ui/commit/c6017a1b3c0f480b5595563102ff1778d1961841))
16
+ * **cypress:** add forceUncheck() command ([d75171a](https://github.com/MTES-MCT/monitor-ui/commit/d75171ab811bd7cbebd61efa617b4d67c2ea874b))
17
+
18
+
19
+ ### Bug Fixes
20
+
21
+ * **cypress:** force all actions in fill() subcommands ([359b752](https://github.com/MTES-MCT/monitor-ui/commit/359b752fbc4186ebfb9e9d2d1a6ba7b8114a6249))
22
+ * **cypress:** upse native uncheck for fill() on MultiCheckbox ([f9e2ef9](https://github.com/MTES-MCT/monitor-ui/commit/f9e2ef9a7b80834d28034f4f3303590ae1ee8e9d))
23
+
1
24
  ## [12.1.3](https://github.com/MTES-MCT/monitor-ui/compare/v12.1.2...v12.1.3) (2024-02-29)
2
25
 
3
26
 
package/cypress/global.d.ts CHANGED
@@ -26,7 +26,11 @@ declare namespace Cypress {
26
26
 
27
27
  /**
28
28
  * @description
29
- * You can set the `retries` parameter to a number greater than 5 (default) to retry the action in case of failure.
29
+ * You can set the `retries` option to a number greater than 5 (default) to retry the action in case of failure.
30
+ * You can also set the `force` option to `true` to force the action without waiting for the element to be visible.
31
+ *
32
+ * ⚠️ In order to ensure backward compatibility, the `force` option is set to `true` by default.
33
+ * This will be changed to `false` in the next major version.
30
34
  *
31
35
  * @example
32
36
  * ```ts
@@ -44,13 +48,13 @@ declare namespace Cypress {
44
48
  * cy.fill('My Field', undefined)
45
49
  * ```
46
50
  */
47
- fill(label: string, value: any, retries?: number): Chainable<Element>
51
+ fill(label: string, value: any, options?: Partial<FillOptions>): void
48
52
 
49
- forceCheck(options?: Partial<Cypress.CheckOptions>): Chainable<JQuery<HTMLElement>>
50
- forceClear(options?: Partial<Cypress.ClearOptions>): Chainable<JQuery<HTMLElement>>
51
- forceClick(options?: Partial<Cypress.ClickOptions>): Chainable<JQuery<HTMLElement>>
52
- forceType(text: string, options?: Partial<Cypress.TypeOption>): Chainable<JQuery<HTMLElement>>
53
- forceUncheck(options?: Partial<Cypress.CheckOptions>): Chainable<JQuery<HTMLElement>>
53
+ forceCheck(options?: Partial<CheckOptions>): Chainable<JQuery<HTMLElement>>
54
+ forceClear(options?: Partial<ClearOptions>): Chainable<JQuery<HTMLElement>>
55
+ forceClick(options?: Partial<ClickOptions>): Chainable<JQuery<HTMLElement>>
56
+ forceType(text: string, options?: Partial<TypeOption>): Chainable<JQuery<HTMLElement>>
57
+ forceUncheck(options?: Partial<CheckOptions>): Chainable<JQuery<HTMLElement>>
54
58
 
55
59
  /**
56
60
  * @example
@@ -108,4 +112,8 @@ declare namespace Cypress {
108
112
 
109
113
  type DateRangeTuple = [DateTuple, DateTuple]
110
114
  type DateWithTimeRangeTuple = [DateWithTimeTuple, DateWithTimeTuple]
115
+
116
+ interface FillOptions extends Forceable {
117
+ retries: number
118
+ }
111
119
  }
package/cypress/index.js CHANGED
@@ -45,7 +45,7 @@ function findElementBytext(selector, text, { fallbackSelector, index = 0, inElem
45
45
  return foundElement;
46
46
  }
47
47
 
48
- const RETRIES$1 = 5;
48
+ const RETRIES = 5;
49
49
  function findButton(label, preSelector, { index, prevSubjectElement }) {
50
50
  const buttonElement = findElementBytext(`${preSelector}button`, label, {
51
51
  index,
@@ -71,7 +71,7 @@ function findButton(label, preSelector, { index, prevSubjectElement }) {
71
71
  }
72
72
  return undefined;
73
73
  }
74
- function clickButton(prevSubjectElements, label, { index = 0, withinSelector } = {}, leftRetries = RETRIES$1) {
74
+ function clickButton(prevSubjectElements, label, { index = 0, withinSelector } = {}, leftRetries = RETRIES) {
75
75
  const prevSubjectElement = prevSubjectElements ? prevSubjectElements[0] : undefined;
76
76
  if (prevSubjectElements && !prevSubjectElements[0]) {
77
77
  throw new Error('`prevSubjectElements[0]` is undefined.');
@@ -86,7 +86,7 @@ function clickButton(prevSubjectElements, label, { index = 0, withinSelector } =
86
86
  }
87
87
  if (leftRetries > 0) {
88
88
  return cy.wait(250).then(()=>{
89
- cy.log(`Retrying (${RETRIES$1 - leftRetries + 1} / ${RETRIES$1})...`);
89
+ cy.log(`Retrying (${RETRIES - leftRetries + 1} / ${RETRIES})...`);
90
90
  return clickButton(prevSubjectElements, label, {
91
91
  index,
92
92
  withinSelector
@@ -131,7 +131,7 @@ function findElementParentBySelector(element, parentSelector, index = 0) {
131
131
  return undefined;
132
132
  }
133
133
 
134
- function checkCheckbox(fieldElement, value, _label) {
134
+ function checkCheckbox(fieldElement, value, _label, force) {
135
135
  Cypress.log({
136
136
  consoleProps: ()=>({
137
137
  'Applied to': fieldElement,
@@ -146,13 +146,17 @@ function checkCheckbox(fieldElement, value, _label) {
146
146
  }
147
147
  });
148
148
  if (value) {
149
- cy.wrap(fieldElement).find('input[type="checkbox"]').forceCheck().wait(250);
149
+ cy.wrap(fieldElement).find('input[type="checkbox"]').check({
150
+ force
151
+ }).wait(250);
150
152
  } else {
151
- cy.wrap(fieldElement).find('input[type="checkbox"]').forceUncheck().wait(250);
153
+ cy.wrap(fieldElement).find('input[type="checkbox"]').uncheck({
154
+ force
155
+ }).wait(250);
152
156
  }
153
157
  }
154
158
 
155
- function checkMultiCheckboxOptions(fieldsetElement, values, _label) {
159
+ function checkMultiCheckboxOptions(fieldsetElement, values, _label, force) {
156
160
  Cypress.log({
157
161
  consoleProps: ()=>({
158
162
  'Applied to': fieldsetElement,
@@ -167,19 +171,21 @@ function checkMultiCheckboxOptions(fieldsetElement, values, _label) {
167
171
  }
168
172
  });
169
173
  cy.wrap(fieldsetElement).find('input[type="checkbox"]').uncheck({
170
- force: true
174
+ force
171
175
  }).wait(250);
172
176
  // If `values` is undefined, we don't need to check anything
173
177
  if (!values) {
174
178
  return;
175
179
  }
176
180
  values.forEach((value)=>{
177
- cy.wrap(fieldsetElement).find('label').contains(value).find('input[type="checkbox"]').forceCheck();
181
+ cy.wrap(fieldsetElement).find('label').contains(value).find('input[type="checkbox"]').check({
182
+ force
183
+ });
178
184
  });
179
185
  cy.wait(250);
180
186
  }
181
187
 
182
- function checkMultiRadioOption(fieldsetElement, value, _label) {
188
+ function checkMultiRadioOption(fieldsetElement, value, _label, force) {
183
189
  Cypress.log({
184
190
  consoleProps: ()=>({
185
191
  'Applied to': fieldsetElement,
@@ -192,14 +198,21 @@ function checkMultiRadioOption(fieldsetElement, value, _label) {
192
198
  left: 0,
193
199
  top: -100
194
200
  }
195
- }).find('label').contains(value).forceClick().wait(250);
201
+ }).find('label').contains(value).click({
202
+ force
203
+ }).wait(250);
196
204
  }
197
205
 
206
+ const DEFAULT_OPTIONS = {
207
+ force: true,
208
+ retries: 5
209
+ };
210
+
198
211
  function throwError(message) {
199
212
  throw new Error(`[monitor-ui > Cypress] ${message}`);
200
213
  }
201
214
 
202
- function fillDatePicker(fieldsetElement, dateOrDateWithTimeTuple, _label) {
215
+ function fillDatePicker(fieldsetElement, dateOrDateWithTimeTuple, _label, force) {
203
216
  Cypress.log({
204
217
  consoleProps: ()=>({
205
218
  'Applied to': fieldsetElement,
@@ -216,27 +229,49 @@ function fillDatePicker(fieldsetElement, dateOrDateWithTimeTuple, _label) {
216
229
  if (!dateOrDateWithTimeTuple) {
217
230
  // -------------------------------------------------------------------------
218
231
  // Date without time
219
- cy.wrap(fieldsetElement).find('[aria-label="Jour"]').forceClear();
220
- cy.wrap(fieldsetElement).find('[aria-label="Mois"]').forceClear();
221
- cy.wrap(fieldsetElement).find('[aria-label="Année"]').forceClear();
232
+ cy.wrap(fieldsetElement).find('[aria-label="Jour"]').clear({
233
+ force
234
+ });
235
+ cy.wrap(fieldsetElement).find('[aria-label="Mois"]').clear({
236
+ force
237
+ });
238
+ cy.wrap(fieldsetElement).find('[aria-label="Année"]').clear({
239
+ force
240
+ });
222
241
  if (hasTimeInputs) {
223
- cy.wrap(fieldsetElement).find('[aria-label="Heure"]').forceClear();
224
- cy.wrap(fieldsetElement).find('[aria-label="Minute"]').forceClear();
242
+ cy.wrap(fieldsetElement).find('[aria-label="Heure"]').clear({
243
+ force
244
+ });
245
+ cy.wrap(fieldsetElement).find('[aria-label="Minute"]').clear({
246
+ force
247
+ });
225
248
  }
226
249
  } else {
227
250
  const [year, month, day] = dateOrDateWithTimeTuple;
228
- cy.wrap(fieldsetElement).find('[aria-label="Jour"]').forceType(String(day).padStart(2, '0'));
229
- cy.wrap(fieldsetElement).find('[aria-label="Mois"]').forceType(String(month).padStart(2, '0'));
230
- cy.wrap(fieldsetElement).find('[aria-label="Année"]').forceType(String(year));
251
+ cy.wrap(fieldsetElement).find('[aria-label="Jour"]').type(String(day).padStart(2, '0'), {
252
+ force
253
+ });
254
+ cy.wrap(fieldsetElement).find('[aria-label="Mois"]').type(String(month).padStart(2, '0'), {
255
+ force
256
+ });
257
+ cy.wrap(fieldsetElement).find('[aria-label="Année"]').type(String(year), {
258
+ force
259
+ });
231
260
  if (hasTimeInputs) {
232
261
  const [hour, minute] = dateOrDateWithTimeTuple.slice(3);
233
- cy.wrap(fieldsetElement).find('[aria-label="Heure"]').forceType(String(hour).padStart(2, '0'));
234
- cy.wrap(fieldsetElement).find('[aria-label="Minute"]').forceType(String(minute).padStart(2, '0'));
262
+ cy.wrap(fieldsetElement).find('[aria-label="Heure"]').type(String(hour).padStart(2, '0'), {
263
+ force
264
+ });
265
+ cy.wrap(fieldsetElement).find('[aria-label="Minute"]').type(String(minute).padStart(2, '0'), {
266
+ force
267
+ });
235
268
  }
236
269
  }
237
270
  cy.wait(250);
238
271
  // Close the calendar & ranged time picker popup by pressing the escape key
239
- cy.get('body').forceType('{esc}');
272
+ cy.get('body').type('{esc}', {
273
+ force
274
+ });
240
275
  // TODO Create a util to handle the `fieldsetElement` re-creation cases.
241
276
  // We to use a `wait` as a temporary fix to handle `fieldsetElement` re-creation cases.
242
277
  cy.wait(250);
@@ -244,7 +279,7 @@ function fillDatePicker(fieldsetElement, dateOrDateWithTimeTuple, _label) {
244
279
  // cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangedTimePicker').should('not.exist')
245
280
  }
246
281
 
247
- function fillDateRangePicker(fieldsetElement, dateOrDateWithTimeTupleRange, _label) {
282
+ function fillDateRangePicker(fieldsetElement, dateOrDateWithTimeTupleRange, _label, force) {
248
283
  Cypress.log({
249
284
  consoleProps: ()=>({
250
285
  'Applied to': fieldsetElement,
@@ -259,42 +294,84 @@ function fillDateRangePicker(fieldsetElement, dateOrDateWithTimeTupleRange, _lab
259
294
  const hasTimeInput = inputElements.length !== 7;
260
295
  // Empty the inputs if `dateOrDateWithTimeTupleRange` is undefined
261
296
  if (!dateOrDateWithTimeTupleRange) {
262
- cy.wrap(fieldsetElement).find('[aria-label="Jour de début"]').forceClear();
263
- cy.wrap(fieldsetElement).find('[aria-label="Mois de début"]').forceClear();
264
- cy.wrap(fieldsetElement).find('[aria-label="Année de début"]').forceClear();
297
+ cy.wrap(fieldsetElement).find('[aria-label="Jour de début"]').clear({
298
+ force
299
+ });
300
+ cy.wrap(fieldsetElement).find('[aria-label="Mois de début"]').clear({
301
+ force
302
+ });
303
+ cy.wrap(fieldsetElement).find('[aria-label="Année de début"]').clear({
304
+ force
305
+ });
265
306
  if (hasTimeInput) {
266
- cy.wrap(fieldsetElement).find('[aria-label="Heure de début"]').forceClear();
267
- cy.wrap(fieldsetElement).find('[aria-label="Minute de début"]').forceClear();
307
+ cy.wrap(fieldsetElement).find('[aria-label="Heure de début"]').clear({
308
+ force
309
+ });
310
+ cy.wrap(fieldsetElement).find('[aria-label="Minute de début"]').clear({
311
+ force
312
+ });
268
313
  }
269
- cy.wrap(fieldsetElement).find('[aria-label="Jour de fin"]').forceClear();
270
- cy.wrap(fieldsetElement).find('[aria-label="Mois de fin"]').forceClear();
271
- cy.wrap(fieldsetElement).find('[aria-label="Année de fin"]').forceClear();
314
+ cy.wrap(fieldsetElement).find('[aria-label="Jour de fin"]').clear({
315
+ force
316
+ });
317
+ cy.wrap(fieldsetElement).find('[aria-label="Mois de fin"]').clear({
318
+ force
319
+ });
320
+ cy.wrap(fieldsetElement).find('[aria-label="Année de fin"]').clear({
321
+ force
322
+ });
272
323
  if (hasTimeInput) {
273
- cy.wrap(fieldsetElement).find('[aria-label="Heure de fin"]').forceClear();
274
- cy.wrap(fieldsetElement).find('[aria-label="Minute de fin"]').forceClear();
324
+ cy.wrap(fieldsetElement).find('[aria-label="Heure de fin"]').clear({
325
+ force
326
+ });
327
+ cy.wrap(fieldsetElement).find('[aria-label="Minute de fin"]').clear({
328
+ force
329
+ });
275
330
  }
276
331
  } else {
277
332
  const [startDateOrDateWithTimeTuple, endDateOrDateWithTimeTuple] = dateOrDateWithTimeTupleRange;
278
333
  const [startYear, startMonth, startDay, startHour, startMinute] = startDateOrDateWithTimeTuple;
279
334
  const [endYear, endMonth, endDay, endHour, endMinute] = endDateOrDateWithTimeTuple;
280
- cy.wrap(fieldsetElement).find('[aria-label="Jour de début"]').forceType(String(startDay).padStart(2, '0'));
281
- cy.wrap(fieldsetElement).find('[aria-label="Mois de début"]').forceType(String(startMonth).padStart(2, '0'));
282
- cy.wrap(fieldsetElement).find('[aria-label="Année de début"]').forceType(String(startYear));
335
+ cy.wrap(fieldsetElement).find('[aria-label="Jour de début"]').type(String(startDay).padStart(2, '0'), {
336
+ force
337
+ });
338
+ cy.wrap(fieldsetElement).find('[aria-label="Mois de début"]').type(String(startMonth).padStart(2, '0'), {
339
+ force
340
+ });
341
+ cy.wrap(fieldsetElement).find('[aria-label="Année de début"]').type(String(startYear), {
342
+ force
343
+ });
283
344
  if (hasTimeInput) {
284
- cy.wrap(fieldsetElement).find('[aria-label="Heure de début"]').forceType(String(startHour).padStart(2, '0'));
285
- cy.wrap(fieldsetElement).find('[aria-label="Minute de début"]').forceType(String(startMinute).padStart(2, '0'));
345
+ cy.wrap(fieldsetElement).find('[aria-label="Heure de début"]').type(String(startHour).padStart(2, '0'), {
346
+ force
347
+ });
348
+ cy.wrap(fieldsetElement).find('[aria-label="Minute de début"]').type(String(startMinute).padStart(2, '0'), {
349
+ force
350
+ });
286
351
  }
287
- cy.wrap(fieldsetElement).find('[aria-label="Jour de fin"]').forceType(String(endDay).padStart(2, '0'));
288
- cy.wrap(fieldsetElement).find('[aria-label="Mois de fin"]').forceType(String(endMonth).padStart(2, '0'));
289
- cy.wrap(fieldsetElement).find('[aria-label="Année de fin"]').forceType(String(endYear));
352
+ cy.wrap(fieldsetElement).find('[aria-label="Jour de fin"]').type(String(endDay).padStart(2, '0'), {
353
+ force
354
+ });
355
+ cy.wrap(fieldsetElement).find('[aria-label="Mois de fin"]').type(String(endMonth).padStart(2, '0'), {
356
+ force
357
+ });
358
+ cy.wrap(fieldsetElement).find('[aria-label="Année de fin"]').type(String(endYear), {
359
+ force
360
+ });
290
361
  if (hasTimeInput) {
291
- cy.wrap(fieldsetElement).find('[aria-label="Heure de fin"]').forceType(String(endHour).padStart(2, '0'));
292
- cy.wrap(fieldsetElement).find('[aria-label="Minute de fin"]').forceType(String(endMinute).padStart(2, '0'));
362
+ cy.wrap(fieldsetElement).find('[aria-label="Heure de fin"]').type(String(endHour).padStart(2, '0'), {
363
+ force
364
+ });
365
+ cy.wrap(fieldsetElement).find('[aria-label="Minute de fin"]').type(String(endMinute).padStart(2, '0'), {
366
+ force
367
+ });
293
368
  }
294
369
  }
295
370
  cy.wait(250);
296
371
  // Close the range calendar & ranged time picker popup by pressing the escape key
297
- cy.get('body').forceType('{esc}');
372
+ cy.get('body').type('{esc}', {
373
+ force
374
+ });
298
375
  // TODO Create a util to handle the `fieldsetElement` re-creation cases.
299
376
  // We to use a `wait` as a temporary fix to handle `fieldsetElement` re-creation cases.
300
377
  cy.wait(250);
@@ -302,7 +379,7 @@ function fillDateRangePicker(fieldsetElement, dateOrDateWithTimeTupleRange, _lab
302
379
  // cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangedTimePicker').should('not.exist')
303
380
  }
304
381
 
305
- function fillNumberInput(fieldElement, value, _label) {
382
+ function fillNumberInput(fieldElement, value, _label, force) {
306
383
  Cypress.log({
307
384
  consoleProps: ()=>({
308
385
  'Applied to': fieldElement,
@@ -316,15 +393,19 @@ function fillNumberInput(fieldElement, value, _label) {
316
393
  top: -100
317
394
  }
318
395
  });
319
- cy.wrap(fieldElement).find('input[type="number"]').forceClear().wait(250);
396
+ cy.wrap(fieldElement).find('input[type="number"]').clear({
397
+ force
398
+ }).wait(250);
320
399
  // If `value` is undefined, we don't need to input anything
321
400
  if (!value) {
322
401
  return;
323
402
  }
324
- cy.wrap(fieldElement).find('input[type="number"]').forceType(String(value)).wait(250);
403
+ cy.wrap(fieldElement).find('input[type="number"]').type(String(value), {
404
+ force
405
+ }).wait(250);
325
406
  }
326
407
 
327
- function fillTextarea(fieldElement, value, _label) {
408
+ function fillTextarea(fieldElement, value, _label, force) {
328
409
  Cypress.log({
329
410
  consoleProps: ()=>({
330
411
  'Applied to': fieldElement,
@@ -338,15 +419,19 @@ function fillTextarea(fieldElement, value, _label) {
338
419
  top: -100
339
420
  }
340
421
  });
341
- cy.wrap(fieldElement).find('textarea').forceClear().wait(250);
422
+ cy.wrap(fieldElement).find('textarea').clear({
423
+ force
424
+ }).wait(250);
342
425
  // If `value` is undefined, we don't need to input anything
343
426
  if (!value) {
344
427
  return;
345
428
  }
346
- cy.wrap(fieldElement).find('textarea').forceType(value).wait(250);
429
+ cy.wrap(fieldElement).find('textarea').type(value, {
430
+ force
431
+ }).wait(250);
347
432
  }
348
433
 
349
- function fillTextInput(fieldElement, value, _label) {
434
+ function fillTextInput(fieldElement, value, _label, force) {
350
435
  Cypress.log({
351
436
  consoleProps: ()=>({
352
437
  'Applied to': fieldElement,
@@ -360,15 +445,19 @@ function fillTextInput(fieldElement, value, _label) {
360
445
  top: -100
361
446
  }
362
447
  });
363
- cy.wrap(fieldElement).find('input[type="text"]').forceClear().wait(250);
448
+ cy.wrap(fieldElement).find('input').clear({
449
+ force
450
+ }).wait(250);
364
451
  // If `value` is undefined, we don't need to input anything
365
452
  if (!value) {
366
453
  return;
367
454
  }
368
- cy.wrap(fieldElement).find('input[type="text"]').forceType(value).wait(250);
455
+ cy.wrap(fieldElement).find('input').type(value, {
456
+ force
457
+ }).wait(250);
369
458
  }
370
459
 
371
- function pickCheckPickerOptions(fieldElement, values, label) {
460
+ function pickCheckPickerOptions(fieldElement, values, label, force) {
372
461
  Cypress.log({
373
462
  consoleProps: ()=>({
374
463
  'Applied to': fieldElement,
@@ -385,13 +474,17 @@ function pickCheckPickerOptions(fieldElement, values, label) {
385
474
  // Clear the field if there is a clear button
386
475
  const maybeClearButton = fieldElement.querySelector('.rs-stack > .rs-stack-item > .rs-picker-clean');
387
476
  if (maybeClearButton) {
388
- cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').forceClick().wait(250);
477
+ cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').click({
478
+ force
479
+ }).wait(250);
389
480
  }
390
481
  // If `values` is undefined, we don't need to select anything
391
482
  if (!values) {
392
483
  return;
393
484
  }
394
- cy.wrap(fieldElement).find('.rs-picker-toggle').forceClick();
485
+ cy.wrap(fieldElement).find('.rs-picker-toggle').click({
486
+ force
487
+ });
395
488
  // Wait for the picker to open
396
489
  cy.wrap(fieldElement).find('.rs-picker-popup').then(([rsuitePickerPopupElement])=>{
397
490
  if (!rsuitePickerPopupElement) {
@@ -401,12 +494,18 @@ function pickCheckPickerOptions(fieldElement, values, label) {
401
494
  const maybeSearchInput = rsuitePickerPopupElement.querySelector('input[role="searchbox"]');
402
495
  values.forEach((value)=>{
403
496
  if (maybeSearchInput) {
404
- cy.wrap(rsuitePickerPopupElement).find('input[role="searchbox"]').forceType(value).wait(250);
497
+ cy.wrap(rsuitePickerPopupElement).find('input[role="searchbox"]').type(value, {
498
+ force
499
+ }).wait(250);
405
500
  }
406
- cy.wrap(rsuitePickerPopupElement).find('[role="option"]').contains(value).scrollIntoView().forceClick();
501
+ cy.wrap(rsuitePickerPopupElement).find('[role="option"]').contains(value).scrollIntoView().click({
502
+ force
503
+ });
407
504
  });
408
505
  // Close the picker popup by pressing the escape key
409
- cy.get('body').forceType('{esc}');
506
+ cy.get('body').type('{esc}', {
507
+ force
508
+ });
410
509
  // TODO Create a util to handle the `fieldElement` re-creation cases.
411
510
  // We to use a `wait` as a temporary fix to handle `fieldElement` re-creation cases.
412
511
  cy.wait(250);
@@ -414,7 +513,7 @@ function pickCheckPickerOptions(fieldElement, values, label) {
414
513
  });
415
514
  }
416
515
 
417
- function pickMultiSelectOptions(fieldElement, values, label) {
516
+ function pickMultiSelectOptions(fieldElement, values, label, force) {
418
517
  Cypress.log({
419
518
  consoleProps: ()=>({
420
519
  'Applied to': fieldElement,
@@ -431,26 +530,34 @@ function pickMultiSelectOptions(fieldElement, values, label) {
431
530
  // Clear the field if there is a clear button
432
531
  const maybeClearButton = fieldElement.querySelector('.rs-stack > .rs-stack-item > .rs-picker-clean');
433
532
  if (maybeClearButton) {
434
- cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').forceClick({
435
- force: true
533
+ cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').click({
534
+ force
436
535
  }).wait(250);
437
536
  }
438
537
  // If `values` is undefined, we don't need to select anything
439
538
  if (!values) {
440
539
  return;
441
540
  }
442
- cy.wrap(fieldElement).find('.rs-picker-toggle').forceClick();
541
+ cy.wrap(fieldElement).find('.rs-picker-toggle').click({
542
+ force
543
+ });
443
544
  // Wait for the picker to open
444
545
  cy.wrap(fieldElement).get('.rs-picker-popup').then(([rsuitePickerPopupElement])=>{
445
546
  if (!rsuitePickerPopupElement) {
446
547
  throwError(`Could not find '.rs-picker-popup' in in field with label "${label}". Did the picker open?`);
447
548
  }
448
549
  values.forEach((value)=>{
449
- cy.wrap(fieldElement).find('.rs-picker-toggle').forceClick().wait(250).forceType(value).wait(250);
450
- cy.wrap(rsuitePickerPopupElement).find('[role="option"]').contains(value).scrollIntoView().forceClick();
550
+ cy.wrap(fieldElement).find('.rs-picker-toggle').click({
551
+ force
552
+ }).wait(250).type(value, {
553
+ force
554
+ }).wait(250);
555
+ cy.wrap(rsuitePickerPopupElement).find('[role="option"]').contains(value).scrollIntoView().click({
556
+ force
557
+ });
451
558
  });
452
559
  // Close the picker popup by pressing the escape key
453
- cy.get('body').forceType('{esc}');
560
+ cy.get('body').type('{esc}');
454
561
  // TODO Create a util to handle the `fieldElement` re-creation cases.
455
562
  // We to use a `wait` as a temporary fix to handle `fieldElement` re-creation cases.
456
563
  cy.wait(250);
@@ -458,7 +565,7 @@ function pickMultiSelectOptions(fieldElement, values, label) {
458
565
  });
459
566
  }
460
567
 
461
- function pickSearchOption(fieldElement, value, _label) {
568
+ function pickSearchOption(fieldElement, value, _label, force) {
462
569
  Cypress.log({
463
570
  consoleProps: ()=>({
464
571
  'Applied to': fieldElement,
@@ -475,22 +582,28 @@ function pickSearchOption(fieldElement, value, _label) {
475
582
  // Clear the field if there is a clear button
476
583
  const maybeClearButton = fieldElement.querySelector('.Field-Search__ClearButton');
477
584
  if (maybeClearButton) {
478
- cy.wrap(fieldElement).find('.Field-Search__ClearButton').forceClick().wait(250);
585
+ cy.wrap(fieldElement).find('.Field-Search__ClearButton').click({
586
+ force
587
+ }).wait(250);
479
588
  }
480
589
  // If the value is undefined, we don't need to select anything
481
590
  if (!value) {
482
591
  return;
483
592
  }
484
593
  // Search for the value
485
- cy.wrap(fieldElement).find('input[role="combobox"]').forceType(value);
594
+ cy.wrap(fieldElement).find('input[role="combobox"]').type(value, {
595
+ force
596
+ });
486
597
  // Wait for the picker to open
487
598
  cy.wrap(fieldElement).get('.rs-picker-popup').then(([rsuitePickerPopupElement])=>{
488
599
  // Select the first picker option
489
- cy.wrap(rsuitePickerPopupElement).find('[role="option"]').first().scrollIntoView().forceClick().wait(250);
600
+ cy.wrap(rsuitePickerPopupElement).find('[role="option"]').first().scrollIntoView().click({
601
+ force
602
+ }).wait(250);
490
603
  });
491
604
  }
492
605
 
493
- function pickSelectOption(fieldElement, value, label) {
606
+ function pickSelectOption(fieldElement, value, label, force) {
494
607
  Cypress.log({
495
608
  consoleProps: ()=>({
496
609
  'Applied to': fieldElement,
@@ -507,14 +620,18 @@ function pickSelectOption(fieldElement, value, label) {
507
620
  // Clear the field if there is a clear button
508
621
  const maybeClearButton = fieldElement.querySelector('.rs-stack > .rs-stack-item > .rs-picker-clean');
509
622
  if (maybeClearButton) {
510
- cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').forceClick().wait(250);
623
+ cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').click({
624
+ force
625
+ }).wait(250);
511
626
  }
512
627
  // If the value is undefined, we don't need to select anything
513
628
  if (!value) {
514
629
  return;
515
630
  }
516
631
  // Open the picker
517
- cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-caret-icon').forceClick().wait(250);
632
+ cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-caret-icon').click({
633
+ force
634
+ }).wait(250);
518
635
  // Wait for the picker to open
519
636
  cy.wrap(fieldElement).get('.rs-picker-popup').then(([rsuitePickerPopupElement])=>{
520
637
  if (!rsuitePickerPopupElement) {
@@ -523,9 +640,13 @@ function pickSelectOption(fieldElement, value, label) {
523
640
  // Search for the value if there is a search input
524
641
  const maybeSearchInput = rsuitePickerPopupElement.querySelector('input[role="searchbox"]');
525
642
  if (maybeSearchInput) {
526
- cy.wrap(rsuitePickerPopupElement).find('input[role="searchbox"]').forceType(value).wait(250);
643
+ cy.wrap(rsuitePickerPopupElement).find('input[role="searchbox"]').type(value, {
644
+ force
645
+ }).wait(250);
527
646
  }
528
- cy.wrap(rsuitePickerPopupElement).find('[role="option"]').contains(value).scrollIntoView().forceClick().wait(250);
647
+ cy.wrap(rsuitePickerPopupElement).find('[role="option"]').contains(value).scrollIntoView().click({
648
+ force
649
+ }).wait(250);
529
650
  });
530
651
  }
531
652
 
@@ -582,11 +703,18 @@ function assertStringArrayOrUndefined(value, component) {
582
703
  throwAssertionError('string[] | undefined', component);
583
704
  }
584
705
 
585
- const RETRIES = 5;
586
- function fill(label, value, leftRetries = RETRIES) {
706
+ let TOTAL_RETRIES;
707
+ function fill(label, value, options = {}) {
708
+ const controlledOptions = {
709
+ ...DEFAULT_OPTIONS,
710
+ ...options
711
+ };
712
+ if (!TOTAL_RETRIES) {
713
+ TOTAL_RETRIES = controlledOptions.retries;
714
+ }
587
715
  Cypress.log({
588
716
  consoleProps: ()=>({
589
- 'Left Retries': leftRetries
717
+ 'Left Retries': controlledOptions.retries
590
718
  }),
591
719
  message: `Filling field with label/legend "${label}" with value "${JSON.stringify(value)}".`,
592
720
  name: 'fill'
@@ -605,49 +733,49 @@ function fill(label, value, leftRetries = RETRIES) {
605
733
  // Checkbox
606
734
  case fieldElement.classList.contains('Field-Checkbox'):
607
735
  assertBooleanOrUndefined(value, 'Checkbox');
608
- checkCheckbox(fieldElement, value, label);
736
+ checkCheckbox(fieldElement, value, label, controlledOptions.force);
609
737
  return;
610
738
  // ---------------------------------------------------------------------
611
739
  // CheckPicker
612
740
  case fieldElement.classList.contains('Field-CheckPicker'):
613
741
  assertStringArrayOrUndefined(value, 'CheckPicker');
614
- pickCheckPickerOptions(fieldElement, value, label);
742
+ pickCheckPickerOptions(fieldElement, value, label, controlledOptions.force);
615
743
  return;
616
744
  // ---------------------------------------------------------------------
617
745
  // MultiSelect
618
746
  case fieldElement.classList.contains('Field-MultiSelect'):
619
747
  assertStringArrayOrUndefined(value, 'MultiSelect');
620
- pickMultiSelectOptions(fieldElement, value, label);
748
+ pickMultiSelectOptions(fieldElement, value, label, controlledOptions.force);
621
749
  return;
622
750
  // ---------------------------------------------------------------------
623
751
  // Search
624
752
  case fieldElement.classList.contains('Field-Search'):
625
753
  assertStringOrUndefined(value, 'Search');
626
- pickSearchOption(fieldElement, value, label);
754
+ pickSearchOption(fieldElement, value, label, controlledOptions.force);
627
755
  return;
628
756
  // ---------------------------------------------------------------------
629
757
  // Select
630
758
  case fieldElement.classList.contains('Field-Select'):
631
759
  assertStringOrUndefined(value, 'Select');
632
- pickSelectOption(fieldElement, value, label);
760
+ pickSelectOption(fieldElement, value, label, controlledOptions.force);
633
761
  return;
634
762
  // ---------------------------------------------------------------------
635
763
  // NumberInput
636
764
  case fieldElement.classList.contains('Field-NumberInput'):
637
765
  assertNumberOrUndefined(value, 'TextInput');
638
- fillNumberInput(fieldElement, value, label);
766
+ fillNumberInput(fieldElement, value, label, controlledOptions.force);
639
767
  return;
640
768
  // ---------------------------------------------------------------------
641
769
  // Textarea
642
770
  case fieldElement.classList.contains('Field-Textarea'):
643
771
  assertStringOrUndefined(value, 'Textarea');
644
- fillTextarea(fieldElement, value, label);
772
+ fillTextarea(fieldElement, value, label, controlledOptions.force);
645
773
  return;
646
774
  // ---------------------------------------------------------------------
647
775
  // TextInput
648
776
  case fieldElement.classList.contains('Field-TextInput'):
649
777
  assertStringOrUndefined(value, 'TextInput');
650
- fillTextInput(fieldElement, value, label);
778
+ fillTextInput(fieldElement, value, label, controlledOptions.force);
651
779
  return;
652
780
  default:
653
781
  throwError(`\`cy.fill()\` can't handle field with \`<label>\` "${label}".`);
@@ -666,25 +794,25 @@ function fill(label, value, leftRetries = RETRIES) {
666
794
  // DatePicker
667
795
  case fieldsetElement.classList.contains('Field-DatePicker'):
668
796
  assertDateTupleOrDateWithTimeTupleOrUndefined(value, 'DatePicker');
669
- fillDatePicker(fieldsetElement, value, label);
797
+ fillDatePicker(fieldsetElement, value, label, controlledOptions.force);
670
798
  return;
671
799
  // ---------------------------------------------------------------------
672
800
  // DateRangePicker
673
801
  case fieldsetElement.classList.contains('Field-DateRangePicker'):
674
802
  assertDateRangeTupleOrDateWithTimeRangeTupleOrUndefined(value, 'DateRangePicker');
675
- fillDateRangePicker(fieldsetElement, value, label);
803
+ fillDateRangePicker(fieldsetElement, value, label, controlledOptions.force);
676
804
  return;
677
805
  // ---------------------------------------------------------------------
678
806
  // MultiCheckbox
679
807
  case fieldsetElement.classList.contains('Field-MultiCheckbox'):
680
808
  assertStringArrayOrUndefined(value, 'MultiCheckbox');
681
- checkMultiCheckboxOptions(fieldsetElement, value, label);
809
+ checkMultiCheckboxOptions(fieldsetElement, value, label, controlledOptions.force);
682
810
  return;
683
811
  // ---------------------------------------------------------------------
684
812
  // MultiRadio
685
813
  case fieldsetElement.classList.contains('Field-MultiRadio'):
686
814
  assertString(value, 'MultiRadio');
687
- checkMultiRadioOption(fieldsetElement, value, label);
815
+ checkMultiRadioOption(fieldsetElement, value, label, controlledOptions.force);
688
816
  return;
689
817
  default:
690
818
  throwError(`\`cy.fill()\` can't handle the input element in field with \`<legend>\` "${label}".`);
@@ -692,10 +820,13 @@ function fill(label, value, leftRetries = RETRIES) {
692
820
  }
693
821
  throwError(`Could not find a field labelled by a \`<label />\` or \`<legend />\` "${label}".`);
694
822
  } catch (err) {
695
- if (leftRetries > 0) {
823
+ if (controlledOptions.retries > 0) {
696
824
  cy.wait(250).then(()=>{
697
- cy.log(`[monitor-ui > Cypress] Retrying (${RETRIES - leftRetries + 1} / ${RETRIES})...`);
698
- fill(label, value, leftRetries - 1);
825
+ cy.log(`[monitor-ui > Cypress] Retrying (${TOTAL_RETRIES - controlledOptions.retries + 1} / ${TOTAL_RETRIES})...`);
826
+ fill(label, value, {
827
+ ...controlledOptions,
828
+ retries: controlledOptions.retries - 1
829
+ });
699
830
  });
700
831
  return;
701
832
  }
@@ -711,7 +842,7 @@ function fill(label, value, leftRetries = RETRIES) {
711
842
  name: 'fill'
712
843
  }).error(normalizedError);
713
844
  throwError([
714
- `Could not find or fill field with label or legend "${label}" after ${RETRIES} attempts.`,
845
+ `Could not find or fill field with label or legend "${label}" after ${TOTAL_RETRIES} attempts.`,
715
846
  `This error was thrown: “${normalizedError.message}”`,
716
847
  `Please check the Cypress "- ERROR" log above for more details.`
717
848
  ].join('\n'));
package/cypress/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mtes-mct/monitor-ui",
3
3
  "description": "Common React components, hooks, utilities and CSS stylesheets for MonitorFish, MonitorEnv and RapportNav.",
4
- "version": "12.2.0",
4
+ "version": "12.3.0",
5
5
  "license": "AGPL-3.0",
6
6
  "type": "module",
7
7
  "engines": {