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

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

@@ -1,14 +1,12 @@
 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) {
     var o = wrapOptions(options);
-    var element = cy.get(byTestId(testID), o).waitForComponents(o);
-    element.then(o, function($el) {
+    return cy.get(byTestId(testID), o).waitForComponents(o).then(o, function($el) {
         return log("getByTestId", testID, $el, options);
     });
-    return element;
 });
 Cypress.Commands.add("getDescribingElement", {
     prevSubject: [
@@ -51,14 +49,14 @@ Cypress.Commands.add("getByLabelText", {
     var o = wrapOptions(options);
     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 + '"]', o);
-        }).then(o, function($el) {
+            return cy.get('input[id="' + forAttributeValue + '"], textarea[id="' + forAttributeValue + '"], button[id="' + forAttributeValue + '"]', o);
+        }).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 + '"]', o);
-        }).then(o, function($el) {
+            return cy.get('input[id="' + forAttributeValue + '"], textarea[id="' + forAttributeValue + '"], button[id="' + forAttributeValue + '"]', o);
+        }).first(o).then(o, function($el) {
             return log(!!subject ? "-getByLabelText" : "getByLabelText", labelText, $el, options);
         });
     }
@@ -69,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 + '"]', o).waitForComponents(o) : cy.get('input[placeholder="' + placeholder + '"], textarea[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);
     });
@@ -85,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;
         });
     };
@@ -100,11 +99,9 @@ Cypress.Commands.add("getByRole", {
         var visibleElements = filterVisibleElements(buttons);
         var labeledElements = filterLabeling(visibleElements);
         if (labeledElements.length > 0) {
-            var firstElement = cy.wrap(labeledElements[0]).waitForComponents();
-            firstElement.then(o, function($el) {
+            return cy.wrap(labeledElements[0], o).waitForComponents(o).then(o, function($el) {
                 return log(!!subject ? "-getByRole" : "getByRole", role + " " + JSON.stringify(options), $el, options);
             });
-            return firstElement;
         }
         return subject;
     });
@@ -163,8 +160,10 @@ Cypress.Commands.add("waitForComponents", {
     }).then(function(document) {
         return document.fonts.ready;
     });
-    log("waitForComponents", "", subject, options);
     var o = wrapOptions(options);
+    if (o.log) {
+        log("waitForComponents", "", subject, options);
+    }
     return cy.wrap(subject, o).then(function($el) {
         return areComponentsReady($el);
     }).then(function() {
@@ -516,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) {
@@ -538,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");
 };
@@ -297,7 +300,9 @@ var wrapCommand = function(displayName, element, message, fn) {
     return function(selector) {
         return cy.wrapComponent(element, {
             log: false
-        }).waitForComponents().find(selector, {
+        }).waitForComponents({
+            log: false
+        }).find(selector, {
             log: false
         }).then(function($el) {
             Cypress.log({
@@ -325,6 +330,7 @@ var log = function(displayName, message, $el, options) {
             message: message
         });
     }
+    return $el;
 };
 var areComponentsReady = function($el) {
     var queue = [];
@@ -350,10 +356,16 @@ function checkAriaLabel(element, label) {
     if (label === undefined || label === null || label === "") {
         return true;
     }
+    var text = Cypress.$(element).text().trim();
     var ariaLabel = Cypress.$(element).attr("aria-label");
     var title = Cypress.$(element).attr("title");
-    var text = Cypress.$(element).text().trim();
-    return text === label.trim() || ariaLabel === label.trim() || title === label.trim();
+    var value = Cypress.$(element).attr("value");
+    return [
+        text,
+        ariaLabel,
+        title,
+        value
+    ].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",
+  "version": "16.1.0-nightly.20240418",
   "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",
+    "@baloise/ds-core": "16.1.0-nightly.20240418",
     "cypress-file-upload": "~5.0.8"
   },
   "module": "./index.esm.js",

package/src/commands/custom/get.types.d.ts

@@ -38,6 +38,6 @@ declare namespace Cypress {
         /**
          * Gets a element by the role
          */
-        getByRole(role: 'button' | 'label', options: Partial<GetByRoleOptions & Loggable & Timeoutable & Withinable & Shadow>): Chainable<JQuery>;
+        getByRole(role: 'button' | 'label' | 'option' | 'input', options: Partial<GetByRoleOptions & Loggable & Timeoutable & Withinable & Shadow>): Chainable<JQuery>;
     }
 }

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;
@@ -42,7 +43,7 @@ export declare const isInputDate: isElementType;
 export declare const wrapOptions: (options: any) => any;
 export declare const wrapCommand: (displayName: string, element: Cypress.Chainable<JQuery>, message: any, fn: ($el: any) => Cypress.Chainable<JQuery> | void) => (selector: string) => Cypress.Chainable<JQuery<HTMLElement>>;
 export declare const shouldLog: (options?: Partial<Cypress.Loggable>) => boolean;
-export declare const log: (displayName: string, message: any, $el: any, options?: Partial<Cypress.Loggable>) => void;
+export declare const log: (displayName: string, message: any, $el: any, options?: Partial<Cypress.Loggable>) => any;
 export declare const areComponentsReady: ($el: any) => Promise<void[]>;
 export declare const testOnPlatforms: (platforms: Platforms[], fn: (platform: Platforms) => Promise<void> | void) => void;
 export declare function checkAriaLabel(element: HTMLElement, label: string | undefined | null): boolean;

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);
     }