@baloise/ds-testing 16.0.3-nightly.20240417 → 16.1.0

package/bal-input-stepper.command.esm.js

@@ -1,5 +1,5 @@
 import { b as byTestId, s as selectors } from './index.esm2.js';
-import { w as wrapOptions, l as log, c as checkAriaLabel, a as waitAfterFramePaint, b as waitAfterIdleCallback, d as areComponentsReady, e as deepReady, _ as _extends } from './helpers.esm.js';
+import { w as wrapOptions, l as log, c as checkAriaLabel, a as waitAfterFramePaint, b as waitAfterIdleCallback, d as areComponentsReady, e as deepReady, _ as _extends, f as isDropDown } from './helpers.esm.js';
 import { balViewport } from './viewports.esm.js';
 
 Cypress.Commands.add("getByTestId", function(testID, options) {
@@ -50,13 +50,13 @@ Cypress.Commands.add("getByLabelText", {
     if (subject) {
         return cy.wrap(subject, o).contains("label", labelText, o).invoke(o, "attr", "for").then(function(forAttributeValue) {
             return cy.get('input[id="' + forAttributeValue + '"], textarea[id="' + forAttributeValue + '"], button[id="' + forAttributeValue + '"]', o);
-        }).then(o, function($el) {
+        }).first(o).then(o, function($el) {
             return log(!!subject ? "-getByLabelText" : "getByLabelText", labelText, $el, options);
         });
     } else {
         return cy.contains("label", labelText, o).invoke(o, "attr", "for").then(function(forAttributeValue) {
             return cy.get('input[id="' + forAttributeValue + '"], textarea[id="' + forAttributeValue + '"], button[id="' + forAttributeValue + '"]', o);
-        }).then(o, function($el) {
+        }).first(o).then(o, function($el) {
             return log(!!subject ? "-getByLabelText" : "getByLabelText", labelText, $el, options);
         });
     }
@@ -67,7 +67,8 @@ Cypress.Commands.add("getByPlaceholder", {
     ]
 }, function(subject, placeholder, options) {
     var o = wrapOptions(options);
-    var element = subject ? cy.wrap(subject, o).find('input[placeholder="' + placeholder + '"], textarea[placeholder="' + placeholder + '"], [data-placeholder="' + placeholder + '"]', o).waitForComponents(o) : cy.get('input[placeholder="' + placeholder + '"], textarea[placeholder="' + placeholder + '"], [data-placeholder="' + placeholder + '"]', o).waitForComponents(o);
+    var selector = 'input[placeholder="' + placeholder + '"], textarea[placeholder="' + placeholder + '"], [data-placeholder="' + placeholder + '"]';
+    var element = subject ? cy.wrap(subject, o).find(selector, o).first(o).waitForComponents(o) : cy.get(selector, o).first(o).waitForComponents(o);
     element.then(o, function($el) {
         return log(!!subject ? "-getByPlaceholder" : "getByPlaceholder", placeholder, $el, options);
     });
@@ -83,7 +84,7 @@ Cypress.Commands.add("getByRole", {
     };
     var filterVisibleElements = function filterVisibleElements(elements) {
         return elements.filter(function(element) {
-            var isElementAriaHidden = options.hidden === true ? false : !!Cypress.$(element).attr("aria-hidden");
+            var isElementAriaHidden = options.hidden === true ? false : Cypress.$(element).attr("aria-hidden") === "true";
             return !isElementAriaHidden;
         });
     };
@@ -514,16 +515,21 @@ Cypress.Commands.add("balSelectFindOptions", {
     prevSubject: true
 }, function(subject, options) {
     var o = wrapOptions(options);
-    return cy.wrapComponent(subject, o).find(selectors.select.options, o).then(function($el) {
-        log("balSelectFindOptions", "", $el, options);
-        return $el;
-    }).waitForComponents(o);
+    if (isDropDown(subject)) {
+        return cy.wrapComponent(subject, o).find(selectors.dropdown.options, o).then(function($el) {
+            return log("balSelectFindOptions", "", $el, options);
+        }).waitForComponents(o);
+    } else {
+        return cy.wrapComponent(subject, o).find(selectors.select.options, o).then(function($el) {
+            return log("balSelectFindOptions", "", $el, options);
+        }).waitForComponents(o);
+    }
 });
 Cypress.Commands.add("balSelectShouldHaveOptions", {
     prevSubject: true
 }, function(subject, labels, dataKey, options) {
     if (dataKey === void 0) dataKey = "label";
-    log("balAccordionIsOpen", "", subject, options);
+    log("balSelectShouldHaveOptions", "", subject, options);
     var o = wrapOptions(options);
     return cy.wrapComponent(subject, o).balSelectFindOptions(o).should(function($o) {
         var dataItems = $o.map(function(_, el) {
@@ -536,9 +542,9 @@ Cypress.Commands.add("balSelectFindChips", {
     prevSubject: true
 }, function(subject, options) {
     var o = wrapOptions(options);
-    return cy.wrapComponent(subject, o).find(selectors.select.chips, o).then(function($el) {
-        log("balSelectFindChips", "", $el, options);
-        return $el;
+    var selector = isDropDown(subject) ? selectors.dropdown.chips : selectors.select.chips;
+    return cy.wrapComponent(subject, o).find(selector, o).then(function($el) {
+        return log("balSelectFindChips", "", $el, options);
     }).waitForComponents(o);
 });
 

package/helpers.esm.js

@@ -268,6 +268,9 @@ var isTabs = function(el) {
 var isSteps = function(el) {
     return isElement(el, "BAL-STEPS");
 };
+var isDropDown = function(el) {
+    return isElement(el, "BAL-DROPDOWN");
+};
 var isSlider = function(el) {
     return isElement(el, "BAL-INPUT-SLIDER");
 };
@@ -365,4 +368,4 @@ function checkAriaLabel(element, label) {
     ].includes(label.trim());
 }
 
-export { hasTestId as A, isSteps as B, _extends as _, waitAfterFramePaint as a, waitAfterIdleCallback as b, checkAriaLabel as c, areComponentsReady as d, deepReady as e, isAccordion as f, isCheckbox as g, isDatepicker as h, isButton as i, isInput as j, isInputDate as k, log as l, isNumberInput as m, isTextarea as n, isSlider as o, isRadio as p, isSelect as q, wrapCommand as r, isTag as s, testOnPlatforms as t, hasClass as u, isHint as v, wrapOptions as w, isLabel as x, isInputStepper as y, isTabs as z };
+export { isTabs as A, hasTestId as B, isSteps as C, _extends as _, waitAfterFramePaint as a, waitAfterIdleCallback as b, checkAriaLabel as c, areComponentsReady as d, deepReady as e, isDropDown as f, isAccordion as g, isCheckbox as h, isButton as i, isDatepicker as j, isInput as k, log as l, isInputDate as m, isNumberInput as n, isTextarea as o, isSlider as p, isRadio as q, isSelect as r, wrapCommand as s, testOnPlatforms as t, isTag as u, isHint as v, wrapOptions as w, hasClass as x, isLabel as y, isInputStepper as z };

package/index.esm2.js

@@ -216,6 +216,20 @@ var byDataSelectors = function(dateTestId, dataSelectors, value) {
      * Multi select tag .
      */ chips: byTestId("bal-select-chip")
     },
+    dropdown: {
+        /**
+     * Native input element.
+     */ input: "[data-native]",
+        /**
+     * Select option.
+     */ options: "bal-option",
+        /**
+     * Trigger to open and close the popup.
+     */ trigger: byTestId("bal-dropdown-trigger"),
+        /**
+     * Multi select tag .
+     */ chips: byTestId("bal-dropdown-chip")
+    },
     popover: {
         /**
      * Popover trigger.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baloise/ds-testing",
-  "version": "16.0.3-nightly.20240417",
+  "version": "16.1.0",
   "description": "The Baloise Design-System is an open source project for styling awesome web applications that follow the Baloise corporate styling guidelines.",
   "repository": {
     "type": "git",
@@ -12,7 +12,7 @@
   "homepage": "https://design.baloise.dev",
   "license": "Apache-2.0",
   "dependencies": {
-    "@baloise/ds-core": "16.0.3-nightly.20240417",
+    "@baloise/ds-core": "16.1.0",
     "cypress-file-upload": "~5.0.8"
   },
   "module": "./index.esm.js",

package/src/commands/helpers.d.ts

@@ -27,6 +27,7 @@ export declare const isSelect: isElementType;
 export declare const isTag: isElementType;
 export declare const isTabs: isElementType;
 export declare const isSteps: isElementType;
+export declare const isDropDown: isElementType;
 export declare const isSlider: isElementType;
 export declare const isHint: isElementType;
 export declare const isTextarea: isElementType;

package/src/selectors/index.d.ts

@@ -229,6 +229,24 @@ export declare const selectors: {
          */
         chips: string;
     };
+    dropdown: {
+        /**
+         * Native input element.
+         */
+        input: string;
+        /**
+         * Select option.
+         */
+        options: string;
+        /**
+         * Trigger to open and close the popup.
+         */
+        trigger: string;
+        /**
+         * Multi select tag .
+         */
+        chips: string;
+    };
     popover: {
         /**
          * Popover trigger.

package/type.command.esm.js

@@ -1,5 +1,5 @@
 import { s as selectors, p as parseDataTestID, a as byDataSelectors } from './index.esm2.js';
-import { f as isAccordion, i as isButton, g as isCheckbox, h as isDatepicker, j as isInput, k as isInputDate, m as isNumberInput, n as isTextarea, o as isSlider, p as isRadio, q as isSelect, r as wrapCommand, w as wrapOptions, s as isTag, u as hasClass, v as isHint, x as isLabel, y as isInputStepper, z as isTabs, A as hasTestId, B as isSteps } from './helpers.esm.js';
+import { g as isAccordion, i as isButton, h as isCheckbox, j as isDatepicker, k as isInput, m as isInputDate, n as isNumberInput, o as isTextarea, p as isSlider, q as isRadio, r as isSelect, f as isDropDown, s as wrapCommand, w as wrapOptions, u as isTag, v as isHint, l as log, x as hasClass, y as isLabel, z as isInputStepper, A as isTabs, B as hasTestId, C as isSteps } from './helpers.esm.js';
 
 Cypress.Commands.overwrite("blur", function(originalFn, element, options) {
     var command = wrapCommand("blur", element, "", function($el) {
@@ -38,6 +38,9 @@ Cypress.Commands.overwrite("blur", function(originalFn, element, options) {
     if (isSelect(element)) {
         return command(selectors.select.input);
     }
+    if (isDropDown(element)) {
+        return command(selectors.dropdown.input);
+    }
     return originalFn(element, options);
 });
 
@@ -90,13 +93,29 @@ Cypress.Commands.overwrite("clear", function(originalFn, element, options) {
     if (isSelect(element)) {
         return command(".bal-select__control__input");
     }
+    if (isDropDown(element)) {
+        return command(selectors.dropdown.input);
+    }
     return originalFn(element, options);
 });
 
 Cypress.Commands.overwrite("click", function(originalFn, element, options) {
-    var command = wrapCommand("click", element, "", function($el) {
-        return originalFn($el, wrapOptions(options));
-    });
+    var command = function(selector) {
+        return cy.wrapComponent(element, {
+            log: false
+        }).waitForComponents({
+            log: false
+        }).find(selector, {
+            log: false
+        }).click({
+            force: true,
+            log: false
+        }).then(function($el) {
+            return log("click", "", $el);
+        }).wrapComponent(element, {
+            log: false
+        });
+    };
     if (isAccordion(element)) {
         return command(selectors.accordion.trigger);
     }
@@ -112,12 +131,15 @@ Cypress.Commands.overwrite("click", function(originalFn, element, options) {
     if (isRadio(element)) {
         return command(selectors.radio.label);
     }
-    if (isTag(element) && hasClass(element, "sc-bal-select")) {
-        return command(".delete");
+    if (isTag(element)) {
+        return command(selectors.tag.close);
     }
     if (isHint(element)) {
         return command(selectors.hint.trigger);
     }
+    if (isDropDown(element)) {
+        return command(selectors.dropdown.trigger);
+    }
     return originalFn(element, options);
 });
 
@@ -158,6 +180,9 @@ Cypress.Commands.overwrite("focus", function(originalFn, element, options) {
     if (isSelect(element)) {
         return command(selectors.select.input);
     }
+    if (isDropDown(element)) {
+        return command(selectors.dropdown.input);
+    }
     return originalFn(element, options);
 });
 
@@ -337,6 +362,40 @@ var shouldAndAndCommand = function(originalFn, element, condition, key, value, o
                 return originalFn(element, "not.have.attr", "data-value", key.join(","), value);
         }
     }
+    if (hasClass(element, "bal-dropdown__root__input")) {
+        var parseKey = function() {
+            return typeof key === "string" ? key : key.map(function(k) {
+                return k.trim();
+            }).sort().join(",");
+        };
+        switch(condition){
+            case "have.value":
+                return originalFn(element, "have.attr", "data-label", parseKey(), value);
+            case "not.have.value":
+                return originalFn(element, "not.have.attr", "data-label", parseKey(), value);
+        }
+    }
+    if (isDropDown(element)) {
+        var nativeEl = element.find(selectors.dropdown.input, {
+            log: false
+        });
+        var parseKey1 = function() {
+            return typeof key === "string" ? key : key.map(function(k) {
+                return k.trim();
+            }).sort().join(",");
+        };
+        switch(condition){
+            case "have.focus":
+            case "not.have.focus":
+            case "be.disabled":
+            case "not.be.disabled":
+                return originalFn(nativeEl, condition, key, value, options);
+            case "have.value":
+                return originalFn(nativeEl, "have.attr", "data-label", parseKey1(), value);
+            case "not.have.value":
+                return originalFn(nativeEl, "not.have.attr", "data-label", parseKey1(), value);
+        }
+    }
     if (isTabs(element)) {
         switch(condition){
             case "have.value":
@@ -407,6 +466,39 @@ Cypress.Commands.overwrite("select", function(originalFn, element, values, optio
             log: false
         });
     }
+    if (isDropDown(element)) {
+        var valueArray1 = [];
+        if (typeof values === "string") {
+            valueArray1.push(values);
+        } else {
+            valueArray1 = [].concat(values);
+        }
+        log("select", valueArray1, element, options);
+        if (valueArray1.length === 0) {
+            return cy.wrap(element, {
+                log: false
+            }).clear({
+                log: false
+            });
+        }
+        return cy.wrap(element, {
+            log: false
+        }).within({
+            log: false
+        }, function() {
+            for(var index = 0; index < valueArray1.length; index++){
+                var label = valueArray1[index];
+                cy.getByRole("option", {
+                    name: label,
+                    log: false
+                }).click({
+                    log: false
+                });
+            }
+        }).wrap(element, {
+            log: false
+        });
+    }
     if (isTabs(element)) {
         if (typeof values === "string") {
             return cy.wrap(element, {
@@ -447,6 +539,9 @@ Cypress.Commands.overwrite("type", function(originalFn, element, content, option
     if (isInput(element)) {
         return command(selectors.input.native);
     }
+    if (isDropDown(element)) {
+        return command(selectors.dropdown.input);
+    }
     if (isInputDate(element)) {
         return command(selectors.dateInput.native);
     }