@mtes-mct/monitor-ui 4.0.3 → 4.0.5

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [4.0.4](https://github.com/MTES-MCT/monitor-ui/compare/v4.0.3...v4.0.4) (2023-03-30)
+
+
+### Bug Fixes
+
+* **cypress:** improve fill command reliability ([26ad3f7](https://github.com/MTES-MCT/monitor-ui/commit/26ad3f7d8e5558181a4adaa9ad4cdb0f9b2ae9c7))
+
+## [4.0.3](https://github.com/MTES-MCT/monitor-ui/compare/v4.0.2...v4.0.3) (2023-03-29)
+
+
+### Bug Fixes
+
+* **fields:** handle value change in MultiSelect ([e4b80fa](https://github.com/MTES-MCT/monitor-ui/commit/e4b80fa78de54085d905a7e1afded79440c157e7))
+
 ## [4.0.2](https://github.com/MTES-MCT/monitor-ui/compare/v4.0.1...v4.0.2) (2023-03-29)
 
 

package/cypress/commands/clickButton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 /// <reference types="cypress" />
-export declare function clickButton(label: string, { index, withinSelector }?: Partial<{
+export declare function clickButton(prevSubjectElements: HTMLElement[] | undefined, label: string, { index, withinSelector }?: Partial<{
     index: number | undefined;
     withinSelector: string | undefined;
-}>, leftRetries?: number): Cypress.Chainable<JQuery<HTMLButtonElement>>;
+}>, leftRetries?: number): Cypress.Chainable<JQuery<HTMLElement>>;

package/cypress/commands/fill/checkMultiCheckboxOptions.d.ts

@@ -1 +1 @@
-export declare function checkMultiCheckboxOptions(fieldsetElement: HTMLElement, values: string[] | undefined): HTMLElement;
+export declare function checkMultiCheckboxOptions(fieldsetElement: HTMLElement, values: string[] | undefined, leftRetries?: number): void;

package/cypress/commands/fill/pickSelectOption.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="cypress" />
 /// <reference types="cypress" />
-export declare function pickSelectOption(cypressSelectInputElement: Cypress.Chainable<JQuery<HTMLElement>>, value: string | undefined): Cypress.Chainable<JQuery<HTMLElement>>;
+export declare function pickSelectOption(cypressSelectInputElement: Cypress.Chainable<JQuery<HTMLElement>>, value: string | undefined): void;

package/cypress/index.js

@@ -47,29 +47,47 @@ function findElementBytext(selector, text, { fallbackSelector, index = 0, inElem
     return foundElement;
 }
 
-const RETRIES$1 = 5;
-function clickButton(label, { index = 0, withinSelector } = {}, leftRetries = RETRIES$1) {
+const RETRIES$2 = 5;
+function clickButton(prevSubjectElements, label, { index = 0, withinSelector } = {}, leftRetries = RETRIES$2) {
+    const prevSubjectElement = prevSubjectElements ? prevSubjectElements[0] : undefined;
+    if (prevSubjectElements && !prevSubjectElements[0]) {
+        throw new Error('`prevSubjectElements[0]` is undefined.');
+    }
     const preSelector = withinSelector ? `${withinSelector} ` : '';
-    const iconButtonElement = Cypress.$(`${preSelector}button[aria-label="${label}"]`).get(index);
-    const textButtonElement = findElementBytext(`${preSelector}button`, label, { index });
-    const menuItemElement = findElementBytext(`${preSelector}[role="menuitem"]`, label, { index });
-    if (iconButtonElement) {
-        return cy.wrap(iconButtonElement).scrollIntoView().click({ force: true }).wait(250);
+    const iconButtonElementByAriaLabel = prevSubjectElement
+        ? Cypress.$(prevSubjectElement).find(`${preSelector}button[aria-label="${label}"]`).get(index)
+        : Cypress.$(`${preSelector}button[aria-label="${label}"]`).get(index);
+    const iconButtonElementByTitle = prevSubjectElement
+        ? Cypress.$(prevSubjectElement).find(`${preSelector}button[aria-label="${label}"]`).get(index)
+        : Cypress.$(`${preSelector}button[title="${label}"]`).get(index);
+    const textButtonElement = findElementBytext(`${preSelector}button`, label, {
+        index,
+        inElement: prevSubjectElement
+    });
+    const menuItemElement = findElementBytext(`${preSelector}[role="menuitem"]`, label, {
+        index,
+        inElement: prevSubjectElement
+    });
+    if (iconButtonElementByAriaLabel) {
+        return cy.wrap(iconButtonElementByAriaLabel).scrollIntoView().click({ force: true }).wait(250);
+    }
+    if (iconButtonElementByTitle) {
+        return cy.wrap(iconButtonElementByTitle).scrollIntoView().click({ force: true }).wait(250);
     }
     if (menuItemElement) {
         return cy
             .wrap(menuItemElement)
             .scrollIntoView()
-            .click({ force: true })
+            .forceClick()
             .wait(250);
     }
     if (textButtonElement) {
-        return cy.wrap(textButtonElement).scrollIntoView().click({ force: true }).wait(250);
+        return cy.wrap(textButtonElement).scrollIntoView().forceClick().wait(250);
     }
     if (leftRetries > 0) {
         return cy.wait(250).then(() => {
-            cy.log(`Retrying (${RETRIES$1 - leftRetries + 1} / ${RETRIES$1})...`);
-            return clickButton(label, { index, withinSelector }, leftRetries - 1);
+            cy.log(`Retrying (${RETRIES$2 - leftRetries + 1} / ${RETRIES$2})...`);
+            return clickButton(prevSubjectElements, label, { index, withinSelector }, leftRetries - 1);
         });
     }
     throw new Error(`Unable to find button with label "${label}".`);
@@ -81,7 +99,7 @@ function clickButton(label, { index = 0, withinSelector } = {}, leftRetries = RE
  */
 function clickOutside(xPosition = 0, yPosition = 0) {
     cy.log(`Click outside at position: ${xPosition}, ${yPosition}`);
-    cy.get('body').click(xPosition, yPosition);
+    cy.get('body').click(xPosition, yPosition, { force: true });
 }
 
 // I have no idea why I have to add this dirty hack of setting an external variable
@@ -676,14 +694,22 @@ function checkCheckbox(checkboxInputElement, value) {
     }
 }
 
-function checkMultiCheckboxOptions(fieldsetElement, values) {
-    cy.wrap(fieldsetElement).scrollIntoView().find('input[type="checkbox"]').uncheck({ force: true });
+const RETRIES$1 = 5;
+function checkMultiCheckboxOptions(fieldsetElement, values, leftRetries = RETRIES$1) {
+    cy.wrap(fieldsetElement).scrollIntoView();
+    cy.wrap(fieldsetElement).find('input[type="checkbox"]').uncheck({ force: true }).wait(250);
+    if (fieldsetElement.querySelector('[aria-checked="true"]') && leftRetries > 0) {
+        cy.wait(250).then(() => {
+            cy.log(`Retrying (${RETRIES$1 - leftRetries + 1} / ${RETRIES$1})...`);
+            checkMultiCheckboxOptions(fieldsetElement, values, leftRetries - 1);
+        });
+        return;
+    }
     if (values) {
         values.forEach(value => {
             cy.wrap(fieldsetElement).find('label').contains(value).find('input[type="checkbox"]').check({ force: true });
         });
     }
-    return fieldsetElement;
 }
 
 function checkMultiRadioOption(fieldsetElement, value) {
@@ -707,7 +733,7 @@ function fillTextarea(textareaElement, value) {
 
 function fillTextInput(textInputElement, value) {
     if (value) {
-        cy.wrap(textInputElement).scrollIntoView().type(value);
+        cy.wrap(textInputElement).scrollIntoView().type(value, { force: true });
     }
     else {
         cy.wrap(textInputElement).scrollIntoView().clear();
@@ -715,51 +741,49 @@ function fillTextInput(textInputElement, value) {
 }
 
 function pickMultiSelectOptions(cypressMultiSelectInputElement, values) {
-    cypressMultiSelectInputElement
-        .parent()
-        .parent()
-        .parent()
-        .parent()
-        .parent()
-        .then(([rsuiteMultiSelectWrapperElement]) => {
-        if (!rsuiteMultiSelectWrapperElement) {
-            throw new Error('This should never happen.');
+    cypressMultiSelectInputElement.parents('.Field-MultiSelect').then(([fieldElement]) => {
+        if (!fieldElement) {
+            throw new Error('`fieldElement` is undefined.');
         }
-        const maybeClearButton = rsuiteMultiSelectWrapperElement.querySelector('.rs-picker-toggle-clean');
-        if (maybeClearButton) {
-            cy.wrap(maybeClearButton).scrollIntoView().click({ force: true }).wait(250);
+        cy.wrap(fieldElement).scrollIntoView();
+        const maybeCleanButton = fieldElement.querySelector('.rs-picker-toggle-clean');
+        if (maybeCleanButton) {
+            cy.wrap(fieldElement).find('.rs-picker-toggle-clean').forceClick().wait(250);
         }
         if (!values) {
             return;
         }
-        cy.wrap(rsuiteMultiSelectWrapperElement).scrollIntoView();
-        cy.wrap(rsuiteMultiSelectWrapperElement).get('.rs-picker-toggle-caret').click();
-        cy.get('.rs-picker-picker-check-menu').then(([rsuiteMultiSelectMenu]) => {
-            if (!rsuiteMultiSelectMenu) {
-                throw new Error('This should never happen.');
+        cy.wrap(fieldElement).find('.rs-picker-toggle-caret').forceClick();
+        cy.get('.rs-picker-picker-check-menu').then(([multiSelectMenuElement]) => {
+            if (!multiSelectMenuElement) {
+                throw new Error('`multiSelectMenuElement` is undefined.');
             }
-            const maybeSearchInput = rsuiteMultiSelectMenu.querySelector('.rs-picker-search-bar-input');
+            const maybeSearchInput = multiSelectMenuElement.querySelector('.rs-picker-search-bar-input');
             values.forEach(value => {
                 if (maybeSearchInput) {
-                    cy.wrap(maybeSearchInput).scrollIntoView().type(value);
+                    cy.get('.rs-picker-picker-check-menu').find('.rs-picker-search-bar-input').type(value);
                 }
-                cy.get('.rs-checkbox-checker').contains(value).scrollIntoView().click({ force: true });
+                cy.get('.rs-picker-picker-check-menu')
+                    .find('.rs-checkbox-checker')
+                    .contains(value)
+                    .scrollIntoView()
+                    .forceClick();
             });
-            const offsetLeft = rsuiteMultiSelectWrapperElement.offsetLeft
-                ? rsuiteMultiSelectWrapperElement.offsetLeft
+            const offsetLeft = fieldElement.offsetLeft
+                ? fieldElement.offsetLeft
                 : (() => {
-                    if (!rsuiteMultiSelectWrapperElement.offsetParent) {
-                        throw new Error('`rsuiteMultiSelectWrapperElement.offsetParent` is undefined.');
+                    if (!fieldElement.offsetParent) {
+                        throw new Error('`fieldElement.offsetParent` is undefined.');
                     }
-                    return rsuiteMultiSelectWrapperElement.offsetParent.offsetLeft;
+                    return fieldElement.offsetParent.offsetLeft;
                 })();
-            const offsetTop = rsuiteMultiSelectWrapperElement.offsetTop !== 0
-                ? rsuiteMultiSelectWrapperElement.offsetTop
+            const offsetTop = fieldElement.offsetTop !== 0
+                ? fieldElement.offsetTop
                 : (() => {
-                    if (!rsuiteMultiSelectWrapperElement.offsetParent) {
-                        throw new Error('`rsuiteMultiSelectWrapperElement.offsetParent` is undefined.');
+                    if (!fieldElement.offsetParent) {
+                        throw new Error('`fieldElement.offsetParent` is undefined.');
                     }
-                    return rsuiteMultiSelectWrapperElement.offsetParent.offsetTop;
+                    return fieldElement.offsetParent.offsetTop;
                 })();
             // TODO Investigate that (this should be -1).
             cy.clickOutside(offsetLeft, offsetTop - 16);
@@ -770,36 +794,36 @@ function pickMultiSelectOptions(cypressMultiSelectInputElement, values) {
 
 function pickSelectOption(cypressSelectInputElement, value) {
     cypressSelectInputElement
-        .parent()
-        .parent()
-        .parent()
-        .parent()
-        .parent()
+        .parents('.Field-Select')
         .scrollIntoView()
-        .then(([rsuiteSelectWrapperElement]) => {
-        if (!rsuiteSelectWrapperElement) {
-            throw new Error('This should never happen.');
+        .then(([fieldElement]) => {
+        if (!fieldElement) {
+            throw new Error('`fieldElement` is undefined.');
         }
-        const maybeClearButton = rsuiteSelectWrapperElement.querySelector('.rs-picker-toggle-clean');
-        if (maybeClearButton) {
-            cy.wrap(maybeClearButton).scrollIntoView().click({ force: true });
+        cy.wrap(fieldElement).scrollIntoView();
+        const maybeCleanButton = fieldElement.querySelector('.rs-picker-toggle-clean');
+        if (maybeCleanButton) {
+            cy.wrap(fieldElement).find('.rs-picker-toggle-clean').scrollIntoView().forceClick().wait(250);
         }
         if (!value) {
             return;
         }
-        cy.wrap(rsuiteSelectWrapperElement).scrollIntoView().get('.rs-picker-toggle-caret').click();
-        cy.get('.rs-picker-select-menu').then(([rsuiteSelectMenu]) => {
-            if (!rsuiteSelectMenu) {
-                throw new Error('This should never happen.');
+        cy.wrap(fieldElement).find('.rs-picker-toggle-caret').click();
+        cy.get('.rs-picker-select-menu').then(([selectMenuElement]) => {
+            if (!selectMenuElement) {
+                throw new Error('`selectMenuElement` is undefined.');
             }
-            const maybeSearchInput = rsuiteSelectMenu.querySelector('.rs-picker-search-bar-input');
+            const maybeSearchInput = selectMenuElement.querySelector('.rs-picker-search-bar-input');
             if (maybeSearchInput) {
-                cy.wrap(maybeSearchInput).scrollIntoView().type(value);
+                cy.wrap(selectMenuElement).find('.rs-picker-search-bar-input').type(value);
             }
-            cy.get('.rs-picker-select-menu-item').contains(value).scrollIntoView().click({ force: true });
+            cy.wrap(selectMenuElement)
+                .get('.rs-picker-select-menu-item')
+                .contains(value)
+                .scrollIntoView()
+                .click({ force: true });
         });
     });
-    return cypressSelectInputElement;
 }
 
 /* eslint-disable cypress/no-assigning-return-values */
@@ -917,14 +941,20 @@ function forceClick([subject]) {
     if (!subject) {
         throw new Error(`Could not find subject.`);
     }
-    return subject.click({ force: true });
+    console.log(subject);
+    try {
+        return subject.click({ force: true });
+    }
+    catch (_) {
+        return cy.wrap(subject).click({ force: true });
+    }
 }
 
 function getDataCy(dataCy) {
     return cy.get(`[data-cy="${dataCy}"]`);
 }
 
-Cypress.Commands.add('clickButton', clickButton);
+Cypress.Commands.add('clickButton', { prevSubject: 'optional' }, clickButton);
 Cypress.Commands.add('clickLink', (linkText) => cy.get('a').contains(linkText).click());
 /**
  * @description