@mtes-mct/monitor-ui 12.1.2 → 12.2.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [12.1.3](https://github.com/MTES-MCT/monitor-ui/compare/v12.1.2...v12.1.3) (2024-02-29)
+
+
+### Buid System & Dependencies
+
+* **dev-deps:** bump @commitlint/config-conventional ([45fcba7](https://github.com/MTES-MCT/monitor-ui/commit/45fcba7f342dc70c4e29b3cd3d3cb2b0b02cc69a))
+
+
+### Documentation
+
+* **readme:** add Cypress badge ([f580fb9](https://github.com/MTES-MCT/monitor-ui/commit/f580fb93db6c38d38a6260a22697780ab22c5757))
+* **readme:** add documentation badge ([5057133](https://github.com/MTES-MCT/monitor-ui/commit/5057133e7431edcbdd182ff1bbc6dc82aef7a991))
+
+
+### Bug Fixes
+
+* **cypress:** fix forceClick() ability to be properly chained with other commands ([ffc733c](https://github.com/MTES-MCT/monitor-ui/commit/ffc733c22999f47a65408bb45a6728df26828839))
+* **cypress:** use forced click instead of click in fill() on MultiSelect ([b14f63a](https://github.com/MTES-MCT/monitor-ui/commit/b14f63a890ce355ed66d3b64e22f65d2936c40cb))
+
+## [12.1.2](https://github.com/MTES-MCT/monitor-ui/compare/v12.1.1...v12.1.2) (2024-02-28)
+
+
+### Bug Fixes
+
+* **cypress:** target right input during fill() search for MultiSelect ([1692c0b](https://github.com/MTES-MCT/monitor-ui/commit/1692c0bce324eeb172c58d77e0bb268d918226c8))
+
 ## [12.1.1](https://github.com/MTES-MCT/monitor-ui/compare/v12.1.0...v12.1.1) (2024-02-28)
 
 

package/README.md

@@ -1,6 +1,8 @@
 # Monitor UI
 
-[![License][img-license]][lnk-license] [![CI Status][img-github]][lnk-github] [![NPM Version][img-npm]][lnk-npm]
+[![License][img-license]][lnk-license] [![NPM Version][img-npm]][lnk-npm]
+[![Unit Tests][img-unit-tests]][lnk-unit-tests] [![E2E Tests][img-e2e-tests]][lnk-e2e-tests]
+[![Documentation][img-documentation]][lnk-documentation]
 
 > Common React components, hooks, utilities and CSS stylesheets for [MonitorFish][lnk-github-monitorfish],
 > [MonitorEnv][lnk-github-monitorenv] and [RapportNav][lnk-github-rapportnav].
@@ -48,7 +50,7 @@ export function App() {
 
 ## Documentation
 
-Here is [the Storybook][lnk-storybook].
+Here is [the Storybook documentation][lnk-documentation].
 
 ## Contributing
 
@@ -56,14 +58,19 @@ Please read the [contributing document](CONTRIBUTING.md) for setup and contribut
 
 ---
 
-[img-github]:
-  https://img.shields.io/github/actions/workflow/status/MTES-MCT/monitor-ui/check.yml?branch=main&style=flat-square
-[img-license]: https://img.shields.io/github/license/MTES-MCT/monitor-ui?style=flat-square
-[img-npm]: https://img.shields.io/npm/v/@mtes-mct/monitor-ui?style=flat-square
-[lnk-github]: https://github.com/MTES-MCT/monitor-ui/actions?query=branch%3Amain++
+[img-documentation]: https://img.shields.io/badge/StoryBook-Docs-007ec6?logo=storybook&style=for-the-badge
+[img-e2e-tests]:
+  https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/qnpjm2/main&label=E2E&logo=cypress&style=for-the-badge
+[img-license]: https://img.shields.io/github/license/MTES-MCT/monitor-ui?style=for-the-badge
+[img-npm]: https://img.shields.io/npm/v/@mtes-mct/monitor-ui?style=for-the-badge
+[img-unit-tests]:
+  https://img.shields.io/github/actions/workflow/status/MTES-MCT/monitor-ui/check.yml?branch=main&label=Unit&style=for-the-badge
+[lnk-documentation]: https://mtes-mct.github.io/monitor-ui/?path=/docs/introduction--documentation
+[lnk-e2e-tests]: https://cloud.cypress.io/projects/qnpjm2/runs
+[lnk-e2e-tests]: https://cloud.cypress.io/projects/qnpjm2/runs
 [lnk-github-monitorenv]: https://github.com/MTES-MCT/monitorenv
 [lnk-github-monitorfish]: https://github.com/MTES-MCT/monitorfish
 [lnk-github-rapportnav]: https://github.com/MTES-MCT/rapportnav2
 [lnk-license]: https://github.com/MTES-MCT/monitor-ui/blob/main/LICENSE
 [lnk-npm]: https://www.npmjs.com/package/@mtes-mct/monitor-ui
-[lnk-storybook]: https://mtes-mct.github.io/monitor-ui/
+[lnk-unit-tests]: https://github.com/MTES-MCT/monitor-ui/actions?query=branch%3Amain++

package/cypress/global.d.ts

@@ -46,7 +46,11 @@ declare namespace Cypress {
      */
     fill(label: string, value: any, retries?: number): Chainable<Element>
 
-    forceClick(): Chainable<JQuery<HTMLElement>>
+    forceCheck(options?: Partial<Cypress.CheckOptions>): Chainable<JQuery<HTMLElement>>
+    forceClear(options?: Partial<Cypress.ClearOptions>): Chainable<JQuery<HTMLElement>>
+    forceClick(options?: Partial<Cypress.ClickOptions>): Chainable<JQuery<HTMLElement>>
+    forceType(text: string, options?: Partial<Cypress.TypeOption>): Chainable<JQuery<HTMLElement>>
+    forceUncheck(options?: Partial<Cypress.CheckOptions>): Chainable<JQuery<HTMLElement>>
 
     /**
      * @example

package/cypress/index.js

@@ -146,13 +146,9 @@ function checkCheckbox(fieldElement, value, _label) {
         }
     });
     if (value) {
-        cy.wrap(fieldElement).find('input[type="checkbox"]').check({
-            force: true
-        }).wait(250);
+        cy.wrap(fieldElement).find('input[type="checkbox"]').forceCheck().wait(250);
     } else {
-        cy.wrap(fieldElement).find('input[type="checkbox"]').uncheck({
-            force: true
-        }).wait(250);
+        cy.wrap(fieldElement).find('input[type="checkbox"]').forceUncheck().wait(250);
     }
 }
 
@@ -178,9 +174,7 @@ function checkMultiCheckboxOptions(fieldsetElement, values, _label) {
         return;
     }
     values.forEach((value)=>{
-        cy.wrap(fieldsetElement).find('label').contains(value).find('input[type="checkbox"]').check({
-            force: true
-        });
+        cy.wrap(fieldsetElement).find('label').contains(value).find('input[type="checkbox"]').forceCheck();
     });
     cy.wait(250);
 }
@@ -222,37 +216,27 @@ function fillDatePicker(fieldsetElement, dateOrDateWithTimeTuple, _label) {
     if (!dateOrDateWithTimeTuple) {
         // -------------------------------------------------------------------------
         // Date without time
-        cy.wrap(fieldsetElement).find('[aria-label="Jour"]').clear({
-            force: true
-        });
-        cy.wrap(fieldsetElement).find('[aria-label="Mois"]').clear({
-            force: true
-        });
-        cy.wrap(fieldsetElement).find('[aria-label="Année"]').clear({
-            force: true
-        });
+        cy.wrap(fieldsetElement).find('[aria-label="Jour"]').forceClear();
+        cy.wrap(fieldsetElement).find('[aria-label="Mois"]').forceClear();
+        cy.wrap(fieldsetElement).find('[aria-label="Année"]').forceClear();
         if (hasTimeInputs) {
-            cy.wrap(fieldsetElement).find('[aria-label="Heure"]').clear({
-                force: true
-            });
-            cy.wrap(fieldsetElement).find('[aria-label="Minute"]').clear({
-                force: true
-            });
+            cy.wrap(fieldsetElement).find('[aria-label="Heure"]').forceClear();
+            cy.wrap(fieldsetElement).find('[aria-label="Minute"]').forceClear();
         }
     } else {
         const [year, month, day] = dateOrDateWithTimeTuple;
-        cy.wrap(fieldsetElement).find('[aria-label="Jour"]').type(String(day).padStart(2, '0'));
-        cy.wrap(fieldsetElement).find('[aria-label="Mois"]').type(String(month).padStart(2, '0'));
-        cy.wrap(fieldsetElement).find('[aria-label="Année"]').type(String(year));
+        cy.wrap(fieldsetElement).find('[aria-label="Jour"]').forceType(String(day).padStart(2, '0'));
+        cy.wrap(fieldsetElement).find('[aria-label="Mois"]').forceType(String(month).padStart(2, '0'));
+        cy.wrap(fieldsetElement).find('[aria-label="Année"]').forceType(String(year));
         if (hasTimeInputs) {
             const [hour, minute] = dateOrDateWithTimeTuple.slice(3);
-            cy.wrap(fieldsetElement).find('[aria-label="Heure"]').type(String(hour).padStart(2, '0'));
-            cy.wrap(fieldsetElement).find('[aria-label="Minute"]').type(String(minute).padStart(2, '0'));
+            cy.wrap(fieldsetElement).find('[aria-label="Heure"]').forceType(String(hour).padStart(2, '0'));
+            cy.wrap(fieldsetElement).find('[aria-label="Minute"]').forceType(String(minute).padStart(2, '0'));
         }
     }
     cy.wait(250);
     // Close the calendar & ranged time picker popup by pressing the escape key
-    cy.get('body').type('{esc}');
+    cy.get('body').forceType('{esc}');
     // TODO Create a util to handle the `fieldsetElement` re-creation cases.
     // We to use a `wait` as a temporary fix to handle `fieldsetElement` re-creation cases.
     cy.wait(250);
@@ -275,62 +259,42 @@ function fillDateRangePicker(fieldsetElement, dateOrDateWithTimeTupleRange, _lab
     const hasTimeInput = inputElements.length !== 7;
     // Empty the inputs if `dateOrDateWithTimeTupleRange` is undefined
     if (!dateOrDateWithTimeTupleRange) {
-        cy.wrap(fieldsetElement).find('[aria-label="Jour de début"]').clear({
-            force: true
-        });
-        cy.wrap(fieldsetElement).find('[aria-label="Mois de début"]').clear({
-            force: true
-        });
-        cy.wrap(fieldsetElement).find('[aria-label="Année de début"]').clear({
-            force: true
-        });
+        cy.wrap(fieldsetElement).find('[aria-label="Jour de début"]').forceClear();
+        cy.wrap(fieldsetElement).find('[aria-label="Mois de début"]').forceClear();
+        cy.wrap(fieldsetElement).find('[aria-label="Année de début"]').forceClear();
         if (hasTimeInput) {
-            cy.wrap(fieldsetElement).find('[aria-label="Heure de début"]').clear({
-                force: true
-            });
-            cy.wrap(fieldsetElement).find('[aria-label="Minute de début"]').clear({
-                force: true
-            });
+            cy.wrap(fieldsetElement).find('[aria-label="Heure de début"]').forceClear();
+            cy.wrap(fieldsetElement).find('[aria-label="Minute de début"]').forceClear();
         }
-        cy.wrap(fieldsetElement).find('[aria-label="Jour de fin"]').clear({
-            force: true
-        });
-        cy.wrap(fieldsetElement).find('[aria-label="Mois de fin"]').clear({
-            force: true
-        });
-        cy.wrap(fieldsetElement).find('[aria-label="Année de fin"]').clear({
-            force: true
-        });
+        cy.wrap(fieldsetElement).find('[aria-label="Jour de fin"]').forceClear();
+        cy.wrap(fieldsetElement).find('[aria-label="Mois de fin"]').forceClear();
+        cy.wrap(fieldsetElement).find('[aria-label="Année de fin"]').forceClear();
         if (hasTimeInput) {
-            cy.wrap(fieldsetElement).find('[aria-label="Heure de fin"]').clear({
-                force: true
-            });
-            cy.wrap(fieldsetElement).find('[aria-label="Minute de fin"]').clear({
-                force: true
-            });
+            cy.wrap(fieldsetElement).find('[aria-label="Heure de fin"]').forceClear();
+            cy.wrap(fieldsetElement).find('[aria-label="Minute de fin"]').forceClear();
         }
     } else {
         const [startDateOrDateWithTimeTuple, endDateOrDateWithTimeTuple] = dateOrDateWithTimeTupleRange;
         const [startYear, startMonth, startDay, startHour, startMinute] = startDateOrDateWithTimeTuple;
         const [endYear, endMonth, endDay, endHour, endMinute] = endDateOrDateWithTimeTuple;
-        cy.wrap(fieldsetElement).find('[aria-label="Jour de début"]').type(String(startDay).padStart(2, '0'));
-        cy.wrap(fieldsetElement).find('[aria-label="Mois de début"]').type(String(startMonth).padStart(2, '0'));
-        cy.wrap(fieldsetElement).find('[aria-label="Année de début"]').type(String(startYear));
+        cy.wrap(fieldsetElement).find('[aria-label="Jour de début"]').forceType(String(startDay).padStart(2, '0'));
+        cy.wrap(fieldsetElement).find('[aria-label="Mois de début"]').forceType(String(startMonth).padStart(2, '0'));
+        cy.wrap(fieldsetElement).find('[aria-label="Année de début"]').forceType(String(startYear));
         if (hasTimeInput) {
-            cy.wrap(fieldsetElement).find('[aria-label="Heure de début"]').type(String(startHour).padStart(2, '0'));
-            cy.wrap(fieldsetElement).find('[aria-label="Minute de début"]').type(String(startMinute).padStart(2, '0'));
+            cy.wrap(fieldsetElement).find('[aria-label="Heure de début"]').forceType(String(startHour).padStart(2, '0'));
+            cy.wrap(fieldsetElement).find('[aria-label="Minute de début"]').forceType(String(startMinute).padStart(2, '0'));
         }
-        cy.wrap(fieldsetElement).find('[aria-label="Jour de fin"]').type(String(endDay).padStart(2, '0'));
-        cy.wrap(fieldsetElement).find('[aria-label="Mois de fin"]').type(String(endMonth).padStart(2, '0'));
-        cy.wrap(fieldsetElement).find('[aria-label="Année de fin"]').type(String(endYear));
+        cy.wrap(fieldsetElement).find('[aria-label="Jour de fin"]').forceType(String(endDay).padStart(2, '0'));
+        cy.wrap(fieldsetElement).find('[aria-label="Mois de fin"]').forceType(String(endMonth).padStart(2, '0'));
+        cy.wrap(fieldsetElement).find('[aria-label="Année de fin"]').forceType(String(endYear));
         if (hasTimeInput) {
-            cy.wrap(fieldsetElement).find('[aria-label="Heure de fin"]').type(String(endHour).padStart(2, '0'));
-            cy.wrap(fieldsetElement).find('[aria-label="Minute de fin"]').type(String(endMinute).padStart(2, '0'));
+            cy.wrap(fieldsetElement).find('[aria-label="Heure de fin"]').forceType(String(endHour).padStart(2, '0'));
+            cy.wrap(fieldsetElement).find('[aria-label="Minute de fin"]').forceType(String(endMinute).padStart(2, '0'));
         }
     }
     cy.wait(250);
     // Close the range calendar & ranged time picker popup by pressing the escape key
-    cy.get('body').type('{esc}');
+    cy.get('body').forceType('{esc}');
     // TODO Create a util to handle the `fieldsetElement` re-creation cases.
     // We to use a `wait` as a temporary fix to handle `fieldsetElement` re-creation cases.
     cy.wait(250);
@@ -352,16 +316,12 @@ function fillNumberInput(fieldElement, value, _label) {
             top: -100
         }
     });
-    cy.wrap(fieldElement).find('input[type="number"]').clear({
-        force: true
-    }).wait(250);
+    cy.wrap(fieldElement).find('input[type="number"]').forceClear().wait(250);
     // If `value` is undefined, we don't need to input anything
     if (!value) {
         return;
     }
-    cy.wrap(fieldElement).find('input[type="number"]').type(String(value), {
-        force: true
-    }).wait(250);
+    cy.wrap(fieldElement).find('input[type="number"]').forceType(String(value)).wait(250);
 }
 
 function fillTextarea(fieldElement, value, _label) {
@@ -378,16 +338,12 @@ function fillTextarea(fieldElement, value, _label) {
             top: -100
         }
     });
-    cy.wrap(fieldElement).find('textarea').clear({
-        force: true
-    }).wait(250);
+    cy.wrap(fieldElement).find('textarea').forceClear().wait(250);
     // If `value` is undefined, we don't need to input anything
     if (!value) {
         return;
     }
-    cy.wrap(fieldElement).find('textarea').type(value, {
-        force: true
-    }).wait(250);
+    cy.wrap(fieldElement).find('textarea').forceType(value).wait(250);
 }
 
 function fillTextInput(fieldElement, value, _label) {
@@ -404,16 +360,12 @@ function fillTextInput(fieldElement, value, _label) {
             top: -100
         }
     });
-    cy.wrap(fieldElement).find('input[type="text"]').clear({
-        force: true
-    }).wait(250);
+    cy.wrap(fieldElement).find('input[type="text"]').forceClear().wait(250);
     // If `value` is undefined, we don't need to input anything
     if (!value) {
         return;
     }
-    cy.wrap(fieldElement).find('input[type="text"]').type(value, {
-        force: true
-    }).wait(250);
+    cy.wrap(fieldElement).find('input[type="text"]').forceType(value).wait(250);
 }
 
 function pickCheckPickerOptions(fieldElement, values, label) {
@@ -433,9 +385,7 @@ function pickCheckPickerOptions(fieldElement, values, label) {
     // Clear the field if there is a clear button
     const maybeClearButton = fieldElement.querySelector('.rs-stack > .rs-stack-item > .rs-picker-clean');
     if (maybeClearButton) {
-        cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').click({
-            force: true
-        }).wait(250);
+        cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').forceClick().wait(250);
     }
     // If `values` is undefined, we don't need to select anything
     if (!values) {
@@ -451,12 +401,12 @@ function pickCheckPickerOptions(fieldElement, values, label) {
         const maybeSearchInput = rsuitePickerPopupElement.querySelector('input[role="searchbox"]');
         values.forEach((value)=>{
             if (maybeSearchInput) {
-                cy.wrap(rsuitePickerPopupElement).find('input[role="searchbox"]').type(value).wait(250);
+                cy.wrap(rsuitePickerPopupElement).find('input[role="searchbox"]').forceType(value).wait(250);
             }
             cy.wrap(rsuitePickerPopupElement).find('[role="option"]').contains(value).scrollIntoView().forceClick();
         });
         // Close the picker popup by pressing the escape key
-        cy.get('body').type('{esc}');
+        cy.get('body').forceType('{esc}');
         // TODO Create a util to handle the `fieldElement` re-creation cases.
         // We to use a `wait` as a temporary fix to handle `fieldElement` re-creation cases.
         cy.wait(250);
@@ -481,7 +431,7 @@ function pickMultiSelectOptions(fieldElement, values, label) {
     // Clear the field if there is a clear button
     const maybeClearButton = fieldElement.querySelector('.rs-stack > .rs-stack-item > .rs-picker-clean');
     if (maybeClearButton) {
-        cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').click({
+        cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').forceClick({
             force: true
         }).wait(250);
     }
@@ -496,11 +446,11 @@ function pickMultiSelectOptions(fieldElement, values, label) {
             throwError(`Could not find '.rs-picker-popup' in in field with label "${label}". Did the picker open?`);
         }
         values.forEach((value)=>{
-            cy.wrap(fieldElement).find('.rs-picker-toggle').click().wait(250).type(value).wait(250);
+            cy.wrap(fieldElement).find('.rs-picker-toggle').forceClick().wait(250).forceType(value).wait(250);
             cy.wrap(rsuitePickerPopupElement).find('[role="option"]').contains(value).scrollIntoView().forceClick();
         });
         // Close the picker popup by pressing the escape key
-        cy.get('body').type('{esc}');
+        cy.get('body').forceType('{esc}');
         // TODO Create a util to handle the `fieldElement` re-creation cases.
         // We to use a `wait` as a temporary fix to handle `fieldElement` re-creation cases.
         cy.wait(250);
@@ -525,16 +475,14 @@ function pickSearchOption(fieldElement, value, _label) {
     // Clear the field if there is a clear button
     const maybeClearButton = fieldElement.querySelector('.Field-Search__ClearButton');
     if (maybeClearButton) {
-        cy.wrap(fieldElement).find('.Field-Search__ClearButton').click({
-            force: true
-        }).wait(250);
+        cy.wrap(fieldElement).find('.Field-Search__ClearButton').forceClick().wait(250);
     }
     // If the value is undefined, we don't need to select anything
     if (!value) {
         return;
     }
     // Search for the value
-    cy.wrap(fieldElement).find('input[role="combobox"]').type(value);
+    cy.wrap(fieldElement).find('input[role="combobox"]').forceType(value);
     // Wait for the picker to open
     cy.wrap(fieldElement).get('.rs-picker-popup').then(([rsuitePickerPopupElement])=>{
         // Select the first picker option
@@ -559,9 +507,7 @@ function pickSelectOption(fieldElement, value, label) {
     // Clear the field if there is a clear button
     const maybeClearButton = fieldElement.querySelector('.rs-stack > .rs-stack-item > .rs-picker-clean');
     if (maybeClearButton) {
-        cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').click({
-            force: true
-        }).wait(250);
+        cy.wrap(fieldElement).find('.rs-stack > .rs-stack-item > .rs-picker-clean').forceClick().wait(250);
     }
     // If the value is undefined, we don't need to select anything
     if (!value) {
@@ -577,7 +523,7 @@ function pickSelectOption(fieldElement, value, label) {
         // Search for the value if there is a search input
         const maybeSearchInput = rsuitePickerPopupElement.querySelector('input[role="searchbox"]');
         if (maybeSearchInput) {
-            cy.wrap(rsuitePickerPopupElement).find('input[role="searchbox"]').type(value).wait(250);
+            cy.wrap(rsuitePickerPopupElement).find('input[role="searchbox"]').forceType(value).wait(250);
         }
         cy.wrap(rsuitePickerPopupElement).find('[role="option"]').contains(value).scrollIntoView().forceClick().wait(250);
     });
@@ -772,10 +718,43 @@ function fill(label, value, leftRetries = RETRIES) {
     }
 }
 
-function forceClick([subject]) {
+function forceCheck(subject, options = {}) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': subject,
+                Elements: 1
+            }),
+        name: 'forceCheck'
+    });
+    if (!subject) {
+        throw new Error(`Could not find subject.`);
+    }
+    const wrappedSubject = cy.wrap(subject);
+    return wrappedSubject.check({
+        ...options,
+        force: true
+    });
+}
+
+function forceClear(subject, options = {}) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': subject,
+                Elements: 1
+            }),
+        name: 'forceClear'
+    });
     if (!subject) {
         throw new Error(`Could not find subject.`);
     }
+    const wrappedSubject = cy.wrap(subject);
+    return wrappedSubject.clear({
+        ...options,
+        force: true
+    });
+}
+
+function forceClick(subject, options = {}) {
     Cypress.log({
         consoleProps: ()=>({
                 'Applied to': subject,
@@ -783,15 +762,50 @@ function forceClick([subject]) {
             }),
         name: 'forceClick'
     });
-    try {
-        return subject.click({
-            force: true
-        });
-    } catch (_) {
-        return cy.wrap(subject).click({
-            force: true
-        });
+    if (!subject) {
+        throw new Error(`Could not find subject.`);
     }
+    const wrappedSubject = cy.wrap(subject);
+    return wrappedSubject.click({
+        ...options,
+        force: true
+    });
+}
+
+function forceType(subject, text, options = {}) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': subject,
+                Elements: 1
+            }),
+        name: 'forceType'
+    });
+    if (!subject) {
+        throw new Error(`Could not find subject.`);
+    }
+    const wrappedSubject = cy.wrap(subject);
+    return wrappedSubject.type(text, {
+        ...options,
+        force: true
+    });
+}
+
+function forceUncheck(subject, options = {}) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': subject,
+                Elements: 1
+            }),
+        name: 'forceUncheck'
+    });
+    if (!subject) {
+        throw new Error(`Could not find subject.`);
+    }
+    const wrappedSubject = cy.wrap(subject);
+    return wrappedSubject.uncheck({
+        ...options,
+        force: true
+    });
 }
 
 function getDataCy(dataCy) {
@@ -840,9 +854,21 @@ const registerMonitorUiCustomCommands = ()=>{
     Cypress.Commands.add('waitForLastRequest', waitForLastRequest);
     Cypress.Commands.add('clickOutside', clickOutside);
     Cypress.Commands.add('fill', fill);
+    Cypress.Commands.add('forceCheck', {
+        prevSubject: true
+    }, forceCheck);
+    Cypress.Commands.add('forceClear', {
+        prevSubject: true
+    }, forceClear);
     Cypress.Commands.add('forceClick', {
         prevSubject: true
     }, forceClick);
+    Cypress.Commands.add('forceType', {
+        prevSubject: true
+    }, forceType);
+    Cypress.Commands.add('forceUncheck', {
+        prevSubject: true
+    }, forceUncheck);
     Cypress.Commands.add('getDataCy', getDataCy);
     Cypress.Commands.add('getTableRowById', {
         prevSubject: 'optional'

package/cypress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mtes-mct/monitor-ui",
   "description": "Common React components, hooks, utilities and CSS stylesheets for MonitorFish, MonitorEnv and RapportNav.",
-  "version": "12.1.2",
+  "version": "12.2.0",
   "license": "AGPL-3.0",
   "type": "module",
   "engines": {