@mtes-mct/monitor-ui 12.0.3 → 12.1.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [12.1.0](https://github.com/MTES-MCT/monitor-ui/compare/v12.0.3...v12.1.0) (2024-02-27)
+
+
+### Features
+
+* **cypress:** add logs in fill() and all its subcommands ([f9b320f](https://github.com/MTES-MCT/monitor-ui/commit/f9b320fc335745bb562da34f00b98ef78bf5ef74))
+
+
+### Bug Fixes
+
+* **cypress:** replace picker popup closure check with a wait in fill() ([9b4108b](https://github.com/MTES-MCT/monitor-ui/commit/9b4108be9479fb25d99902ca451dc329192bdb18))
+
+
+### Buid System & Dependencies
+
+* **vite:** disable CSS minification for storybook build ([c98d7c9](https://github.com/MTES-MCT/monitor-ui/commit/c98d7c99c053f4084bec5c044a8ff1050e2029aa))
+
+## [12.0.3](https://github.com/MTES-MCT/monitor-ui/compare/v12.0.2...v12.0.3) (2024-02-27)
+
+
+### Styles
+
+* **fields:** fix MultiCheckbox options margin when isInline ([d98f1a5](https://github.com/MTES-MCT/monitor-ui/commit/d98f1a549ac2b7ffb0b82c67435c39f0a6fd9ea8))
+
 ## [12.0.2](https://github.com/MTES-MCT/monitor-ui/compare/v12.0.1...v12.0.2) (2024-02-27)
 
 

package/cypress/index.js

@@ -110,22 +110,35 @@ function clickLink(linkText) {
     });
 }
 
+const MAX_PARENT_INDEX = 100;
 function findElementParentBySelector(element, parentSelector, index = 0) {
-    let foundElement;
-    let foundElementIndex = 0;
-    const potentialParents = Cypress.$(element).parents(parentSelector);
-    potentialParents// eslint-disable-next-line func-names
-    .each(function() {
-        if (foundElementIndex === index) {
-            foundElement = this;
-            return;
+    let currentParentElement = element;
+    let lastFoundParentIndex = 0;
+    let parentIndex = -1;
+    while(parentIndex < MAX_PARENT_INDEX){
+        parentIndex += 1;
+        currentParentElement = currentParentElement.parentElement;
+        if (!currentParentElement) {
+            return undefined;
         }
-        foundElementIndex += 1;
-    });
-    return foundElement;
+        if (currentParentElement.matches(parentSelector)) {
+            if (lastFoundParentIndex === index) {
+                return currentParentElement;
+            }
+            lastFoundParentIndex += 1;
+        }
+    }
+    return undefined;
 }
 
 function checkCheckbox(fieldElement, value, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'checkCheckbox'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -144,6 +157,13 @@ function checkCheckbox(fieldElement, value, _label) {
 }
 
 function checkMultiCheckboxOptions(fieldsetElement, values, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldsetElement,
+                Elements: 1
+            }),
+        name: 'checkMultiCheckboxOptions'
+    });
     cy.wrap(fieldsetElement).scrollIntoView({
         offset: {
             left: 0,
@@ -166,13 +186,19 @@ function checkMultiCheckboxOptions(fieldsetElement, values, _label) {
 }
 
 function checkMultiRadioOption(fieldsetElement, value, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldsetElement,
+                Elements: 1
+            }),
+        name: 'checkMultiRadioOption'
+    });
     cy.wrap(fieldsetElement).scrollIntoView({
         offset: {
             left: 0,
             top: -100
         }
     }).find('label').contains(value).forceClick().wait(250);
-    return fieldsetElement;
 }
 
 function throwError(message) {
@@ -180,6 +206,13 @@ function throwError(message) {
 }
 
 function fillDatePicker(fieldsetElement, dateOrDateWithTimeTuple, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldsetElement,
+                Elements: 1
+            }),
+        name: 'fillDatePicker'
+    });
     const inputElements = fieldsetElement.querySelectorAll('input');
     if (inputElements.length !== 4 && inputElements.length !== 6) {
         throwError(`Expected to find 4 or 6 inputs within in DatePicker but found ${inputElements.length}.`);
@@ -220,11 +253,21 @@ function fillDatePicker(fieldsetElement, dateOrDateWithTimeTuple, _label) {
     cy.wait(250);
     // Close the calendar & ranged time picker popup by pressing the escape key
     cy.get('body').type('{esc}');
-    cy.wrap(fieldsetElement).find('.Field-DatePicker__CalendarPicker').should('not.be.visible');
-    cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangedTimePicker').should('not.exist');
+    // 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);
+// cy.wrap(fieldsetElement).find('.Field-DatePicker__CalendarPicker').should('not.be.visible')
+// cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangedTimePicker').should('not.exist')
 }
 
 function fillDateRangePicker(fieldsetElement, dateOrDateWithTimeTupleRange, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldsetElement,
+                Elements: 1
+            }),
+        name: 'fillDateRangePicker'
+    });
     const inputElements = fieldsetElement.querySelectorAll('input');
     if (inputElements.length !== 7 && inputElements.length !== 11) {
         throwError(`Expected to find 7 or 11 inputs within in DatePicker but found ${inputElements.length}.`);
@@ -288,11 +331,21 @@ function fillDateRangePicker(fieldsetElement, dateOrDateWithTimeTupleRange, _lab
     cy.wait(250);
     // Close the range calendar & ranged time picker popup by pressing the escape key
     cy.get('body').type('{esc}');
-    cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangeCalendarPicker').should('not.be.visible');
-    cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangedTimePicker').should('not.exist');
+    // 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);
+// cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangeCalendarPicker').should('not.be.visible')
+// cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangedTimePicker').should('not.exist')
 }
 
 function fillNumberInput(fieldElement, value, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'fillNumberInput'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -312,6 +365,13 @@ function fillNumberInput(fieldElement, value, _label) {
 }
 
 function fillTextarea(fieldElement, value, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'fillTextarea'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -331,6 +391,13 @@ function fillTextarea(fieldElement, value, _label) {
 }
 
 function fillTextInput(fieldElement, value, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'fillTextInput'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -350,6 +417,13 @@ function fillTextInput(fieldElement, value, _label) {
 }
 
 function pickCheckPickerOptions(fieldElement, values, label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'pickCheckPickerOptions'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -383,11 +457,21 @@ function pickCheckPickerOptions(fieldElement, values, label) {
         });
         // Close the picker popup by pressing the escape key
         cy.get('body').type('{esc}');
-        cy.wrap(fieldElement).find('.rs-picker-popup').should('not.exist');
+        // 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);
+    // cy.wrap(fieldElement).find('.rs-picker-popup').should('not.exist')
     });
 }
 
 function pickMultiSelectOptions(fieldElement, values, label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'pickMultiSelectOptions'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -421,11 +505,21 @@ function pickMultiSelectOptions(fieldElement, values, label) {
         });
         // Close the picker popup by pressing the escape key
         cy.get('body').type('{esc}');
-        cy.wrap(fieldElement).find('.rs-picker-popup').should('not.exist');
+        // 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);
+    // cy.wrap(fieldElement).find('.rs-picker-popup').should('not.exist')
     });
 }
 
 function pickSearchOption(fieldElement, value, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'pickSearchOption'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -453,6 +547,13 @@ function pickSearchOption(fieldElement, value, _label) {
 }
 
 function pickSelectOption(fieldElement, value, label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'pickSelectOption'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -541,6 +642,13 @@ function assertStringArrayOrUndefined(value, component) {
 
 const RETRIES = 5;
 function fill(label, value, leftRetries = RETRIES) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Left Retries': leftRetries
+            }),
+        message: `Filling field with label/legend "${label}" with value "${JSON.stringify(value)}".`,
+        name: 'fill'
+    });
     try {
         // =========================================================================
         // If it's a field labelled by a `<label />` element

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.0.3",
+  "version": "12.1.1",
   "license": "AGPL-3.0",
   "type": "module",
   "engines": {