xmlui 0.10.13 → 0.10.14

package/dist/scripts/src/testing/component-test-helpers.js

@@ -0,0 +1,389 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BorderSideValues = exports.SKIP_REASON = void 0;
+exports.mapObject = mapObject;
+exports.getComponentTagName = getComponentTagName;
+exports.parseComponentIfNecessary = parseComponentIfNecessary;
+exports.scaleByPercent = scaleByPercent;
+exports.getBoundingRect = getBoundingRect;
+exports.getElementStyle = getElementStyle;
+exports.getElementStyles = getElementStyles;
+exports.isIndeterminate = isIndeterminate;
+exports.overflows = overflows;
+exports.getStyles = getStyles;
+exports.getPseudoStyles = getPseudoStyles;
+exports.getHtmlAttributes = getHtmlAttributes;
+exports.getPaddings = getPaddings;
+exports.getBorders = getBorders;
+exports.getMargins = getMargins;
+exports.getBounds = getBounds;
+exports.pixelStrToNum = pixelStrToNum;
+exports.parseAsCssBorder = parseAsCssBorder;
+exports.isNumericCSS = isNumericCSS;
+exports.parseAsNumericCss = parseAsNumericCss;
+exports.numericCSSToString = numericCSSToString;
+exports.isCSSColor = isCSSColor;
+exports.parseAsCSSColor = parseAsCSSColor;
+exports.isCSSBorderStyle = isCSSBorderStyle;
+exports.parseAsCSSBorderStyle = parseAsCSSBorderStyle;
+exports.isBorderSide = isBorderSide;
+const xmlui_parser_1 = require("../components-core/xmlui-parser");
+const chroma_js_1 = __importDefault(require("chroma-js"));
+const ComponentDrivers_1 = require("./ComponentDrivers");
+function mapObject(obj, valFn = ((val) => val), keyFn = ((val) => val)) {
+    const newObject = {};
+    Object.entries(obj).forEach(([key, value]) => {
+        newObject[keyFn(key)] = valFn(value);
+    });
+    return newObject;
+}
+function getComponentTagName(locator) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return locator.evaluate((el) => el.tagName.toLowerCase());
+    });
+}
+function parseComponentIfNecessary(rawComponent) {
+    if (typeof rawComponent === "string") {
+        return (0, xmlui_parser_1.xmlUiMarkupToComponent)(rawComponent);
+    }
+    return {
+        component: rawComponent,
+        errors: [],
+        erroneousCompoundComponentName: undefined,
+    };
+}
+/**
+ * Scales a value by a percentage, using NumericCSS for parsing and clarity.
+ * @param scalarOf100Percent The value representing 100%.
+ * @param percentage A percentage string in the format "NN%", e.g., "40%". Must end with '%'.
+ * @returns The scaled value.
+ */
+function scaleByPercent(scalarOf100Percent, percentage) {
+    const parsed = parseAsNumericCss(percentage);
+    if (parsed.unit !== "%") {
+        throw new Error(`Expected percentage unit (%), got: ${parsed.unit}`);
+    }
+    return (scalarOf100Percent / 100) * parsed.value;
+}
+function getBoundingRect(locator) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return locator.evaluate((element) => element.getBoundingClientRect());
+    });
+}
+function getElementStyle(specifier, style) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return specifier.evaluate((element, style) => window.getComputedStyle(element).getPropertyValue(style), style);
+    });
+}
+/**
+ * Retreives all the provided style properties from the locator
+ * @returns an object with the keys being the elements of the styles argument
+ */
+function getElementStyles(locator_1) {
+    return __awaiter(this, arguments, void 0, function* (locator, styles = []) {
+        return locator.evaluate((element, styles) => Object.fromEntries(styles.map((styleName) => [
+            styleName,
+            window.getComputedStyle(element).getPropertyValue(styleName),
+        ])), styles);
+    });
+}
+function isIndeterminate(specifier) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (specifier instanceof ComponentDrivers_1.ComponentDriver)
+            specifier = specifier.component;
+        return specifier.evaluate((el) => el.indeterminate);
+    });
+}
+function overflows(locator_1) {
+    return __awaiter(this, arguments, void 0, function* (locator, direction = "both") {
+        const [width, height, scrollWidth, scrollHeight] = yield locator.evaluate((element) => [
+            element.clientWidth,
+            element.clientHeight,
+            element.scrollWidth,
+            element.scrollHeight,
+        ]);
+        if (direction === "x")
+            return scrollWidth > width;
+        if (direction === "y")
+            return scrollHeight > height;
+        return scrollWidth > width && scrollHeight > height;
+    });
+}
+// ----------------------------------
+// ComponentDriver style helpers
+// ----------------------------------
+function getStyles(specifier, style) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (specifier instanceof ComponentDrivers_1.ComponentDriver)
+            specifier = specifier.component;
+        style = Array.isArray(style) ? style : [style];
+        return specifier.evaluate((element, styles) => Object.fromEntries(styles.map((styleName) => [
+            styleName
+                .trim()
+                .split("-")
+                .map((n, idx) => (idx === 0 ? n : n[0].toUpperCase() + n.slice(1)))
+                .join(""),
+            window.getComputedStyle(element).getPropertyValue(styleName),
+        ])), style);
+    });
+}
+function getPseudoStyles(specifier, pseudoElement, style) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (specifier instanceof ComponentDrivers_1.ComponentDriver)
+            specifier = specifier.component;
+        style = Array.isArray(style) ? style : [style];
+        return specifier.evaluate((element, obj) => Object.fromEntries(obj.style.map((styleName) => [
+            styleName
+                .trim()
+                .split("-")
+                .map((n, idx) => (idx === 0 ? n : n[0].toUpperCase() + n.slice(1)))
+                .join(""),
+            window.getComputedStyle(element, obj.pseudoElement).getPropertyValue(styleName),
+        ])), { style, pseudoElement });
+    });
+}
+function getHtmlAttributes(specifier, attributes) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (specifier instanceof ComponentDrivers_1.ComponentDriver)
+            specifier = specifier.component;
+        attributes = Array.isArray(attributes) ? attributes : [attributes];
+        const mapped = yield Promise.all(attributes.map((attr) => __awaiter(this, void 0, void 0, function* () {
+            return [attr, yield specifier.getAttribute(attr)];
+        })));
+        return Object.fromEntries(mapped);
+    });
+}
+function getPaddings(specifier) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const paddings = mapObject(yield getStyles(specifier, ["padding-left", "padding-right", "padding-top", "padding-bottom"]), parseAsNumericCss);
+        return {
+            left: paddings.paddingLeft,
+            right: paddings.paddingRight,
+            top: paddings.paddingTop,
+            bottom: paddings.paddingBottom,
+        };
+    });
+}
+function getBorders(specifier) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const borders = mapObject(yield getStyles(specifier, ["border-left", "border-right", "border-top", "border-bottom"]), parseAsCssBorder);
+        return {
+            left: borders.borderLeft,
+            right: borders.borderRight,
+            top: borders.borderTop,
+            bottom: borders.borderBottom,
+        };
+    });
+}
+function getMargins(specifier) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return getStyles(specifier, ["margin-left", "margin-right", "margin-top", "margin-bottom"]);
+    });
+}
+/**
+ * Retrieves the bounding rectangle of the component including **margins** and **padding**
+ * added to the dimensions.
+ */
+function getBounds(specifier) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (specifier instanceof ComponentDrivers_1.ComponentDriver)
+            specifier = specifier.component;
+        const boundingRect = yield specifier.evaluate((element) => element.getBoundingClientRect());
+        const m = mapObject(yield getMargins(specifier), parseFloat);
+        const width = boundingRect.width + m.marginLeft + m.marginRight;
+        const height = boundingRect.height + m.marginTop + m.marginBottom;
+        const left = boundingRect.left - m.marginLeft;
+        const right = boundingRect.right + m.marginRight;
+        const top = boundingRect.top - m.marginTop;
+        const bottom = boundingRect.bottom + m.marginBottom;
+        return {
+            width,
+            height,
+            left,
+            right,
+            top,
+            bottom,
+        };
+    });
+}
+/**
+ * Provides annotations for skipped tests and the ability to specify a reason.
+ * Use it via the SKIP_REASON exported variable.
+ */
+class TestSkipReason {
+    addAnnotation(type, description) {
+        return {
+            annotation: {
+                type,
+                description: description !== null && description !== void 0 ? description : "",
+            },
+        };
+    }
+    NOT_IMPLEMENTED_XMLUI(description) {
+        return this.addAnnotation("not implemented in xmlui", description);
+    }
+    TO_BE_IMPLEMENTED(description) {
+        return this.addAnnotation("to be implemented", description);
+    }
+    XMLUI_BUG(description) {
+        return this.addAnnotation("xmlui bug", description);
+    }
+    TEST_INFRA_BUG(description) {
+        return this.addAnnotation("test infra bug", description);
+    }
+    TEST_NOT_WORKING(description) {
+        return this.addAnnotation("test not working", description);
+    }
+    TEST_INFRA_NOT_IMPLEMENTED(description) {
+        return this.addAnnotation("test infra not implemented", description);
+    }
+    REFACTOR(description) {
+        return this.addAnnotation("refactor", description);
+    }
+    // Need to specify a reason here!
+    UNSURE(description) {
+        return this.addAnnotation("unsure", description);
+    }
+}
+/**
+ * Provides annotations for skipped tests and the ability to specify a reason.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import { SKIP_REASON } from "./tests/component-test-helpers";
+ *
+ * test.skip(
+ *   "test name",
+ *   SKIP_REASON.NOT_IMPLEMENTED_XMLUI("This test is not implemented in xmlui")
+ *   async ({}) => {},
+ * );
+ * ```
+ */
+exports.SKIP_REASON = new TestSkipReason();
+// --- CSS types and parsers
+function pixelStrToNum(pixelStr) {
+    return Number(pixelStr.replace("px", ""));
+}
+function parseAsCssBorder(str) {
+    const parts = str.split(/\s+(?=[a-z]+|\()/i);
+    if (parts.length > 3) {
+        throw new Error(`Provided value ${str} cannot be parsed as a CSS border`);
+    }
+    const style = parts.filter(isCSSBorderStyle);
+    if (style.length > 1) {
+        throw new Error(`Too many border styles provided in ${str}`);
+    }
+    const width = parts.filter(isNumericCSS);
+    if (width.length > 1) {
+        throw new Error(`Too many border widths provided in ${str}`);
+    }
+    const color = parts.filter((p) => chroma_js_1.default.valid(p));
+    if (color.length > 1) {
+        throw new Error(`Too many border colors provided in ${str}`);
+    }
+    const result = {
+        width: !!width[0] ? parseAsNumericCss(width[0]) : undefined,
+        style: style[0],
+        color: (0, chroma_js_1.default)(color[0]),
+    };
+    return result;
+}
+const numericCSSRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
+function isNumericCSS(str) {
+    const parts = str.match(numericCSSRegex);
+    if (!parts)
+        return false;
+    if (parts.length < 3)
+        return false;
+    if (isNaN(parseFloat(parts[1])))
+        return false;
+    if (!isCSSUnit(parts[2]))
+        return false;
+    return true;
+}
+function parseAsNumericCss(str) {
+    const parts = str.match(numericCSSRegex);
+    if (!parts) {
+        throw new Error(`Provided value ${str} cannot be parsed as a numeric CSS value`);
+    }
+    if (parts.length < 3) {
+        throw new Error(`${parts[0]} is not a correct numeric CSS value`);
+    }
+    const value = parseFloat(parts[1]);
+    if (isNaN(value)) {
+        throw new Error(`${value} is not a valid number in ${str}`);
+    }
+    const unit = parts[2];
+    if (!isCSSUnit(unit)) {
+        throw new Error(`${unit} is not have a valid CSS unit in ${str}`);
+    }
+    const result = { value, unit };
+    return result;
+}
+function numericCSSToString(cssValue) {
+    return `${cssValue.value}${cssValue.unit}`;
+}
+function isCSSColor(str) {
+    return chroma_js_1.default.valid(str);
+}
+function parseAsCSSColor(str) {
+    return (0, chroma_js_1.default)(str);
+}
+const CSSUnitValues = [
+    "px",
+    "em",
+    "rem",
+    "vh",
+    "vw",
+    "%",
+    "cm",
+    "mm",
+    "in",
+    "pt",
+    "pc",
+    "ex",
+    "ch",
+    "vmin",
+    "vmax",
+];
+function isCSSUnit(str) {
+    return CSSUnitValues.includes(str);
+}
+const CSSBorderStyleValues = [
+    "solid",
+    "dotted",
+    "dashed",
+    "double",
+    "none",
+    "hidden",
+    "groove",
+    "ridge",
+    "inset",
+    "outset",
+];
+function isCSSBorderStyle(str) {
+    return CSSBorderStyleValues.includes(str);
+}
+function parseAsCSSBorderStyle(str) {
+    if (!isCSSBorderStyle(str)) {
+        throw new Error(`Provided value ${str} cannot be parsed as a CSS border style`);
+    }
+    return str;
+}
+exports.BorderSideValues = ["top", "bottom", "left", "right"];
+function isBorderSide(str) {
+    return exports.BorderSideValues.includes(str);
+}

package/dist/scripts/src/testing/drivers/DateInputDriver.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateInputDriver = void 0;
+const ComponentDrivers_1 = require("../ComponentDrivers");
+class DateInputDriver extends ComponentDrivers_1.InputComponentDriver {
+    get dayInput() {
+        return this.getByPartName("day");
+    }
+    get monthInput() {
+        return this.getByPartName("month");
+    }
+    get yearInput() {
+        return this.getByPartName("year");
+    }
+    get clearButton() {
+        return this.getByPartName("clearButton");
+    }
+}
+exports.DateInputDriver = DateInputDriver;

package/dist/scripts/src/testing/drivers/ModalDialogDriver.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalDialogDriver = void 0;
+const ComponentDrivers_1 = require("../ComponentDrivers");
+class ModalDialogDriver extends ComponentDrivers_1.ComponentDriver {
+    get titlePart() {
+        return this.getByPartName("title");
+    }
+}
+exports.ModalDialogDriver = ModalDialogDriver;

package/dist/scripts/src/testing/drivers/TimeInputDriver.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeInputDriver = void 0;
+const ComponentDrivers_1 = require("../ComponentDrivers");
+class TimeInputDriver extends ComponentDrivers_1.InputComponentDriver {
+    get hourInput() {
+        return this.getByPartName("hour");
+    }
+    get minuteInput() {
+        return this.getByPartName("minute");
+    }
+    get secondInput() {
+        return this.getByPartName("second");
+    }
+    get amPmInput() {
+        return this.getByPartName("ampm");
+    }
+    get clearButton() {
+        return this.getByPartName("clearButton");
+    }
+}
+exports.TimeInputDriver = TimeInputDriver;

package/dist/scripts/src/testing/drivers/TimerDriver.js

@@ -0,0 +1,64 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimerDriver = void 0;
+const ComponentDrivers_1 = require("../ComponentDrivers");
+class TimerDriver extends ComponentDrivers_1.ComponentDriver {
+    isEnabled() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const enabled = yield this.component.getAttribute("data-timer-enabled");
+            return enabled === "true";
+        });
+    }
+    isRunning() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const running = yield this.component.getAttribute("data-timer-running");
+            return running === "true";
+        });
+    }
+    isPaused() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const paused = yield this.component.getAttribute("data-timer-paused");
+            return paused === "true";
+        });
+    }
+    isInInitialDelay() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const inDelay = yield this.component.getAttribute("data-timer-in-initial-delay");
+            return inDelay === "true";
+        });
+    }
+    getInterval() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const interval = yield this.component.getAttribute("data-timer-interval");
+            return parseInt(interval || "0", 10);
+        });
+    }
+    getInitialDelay() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const delay = yield this.component.getAttribute("data-timer-initial-delay");
+            return parseInt(delay || "0", 10);
+        });
+    }
+    isOnce() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const once = yield this.component.getAttribute("data-timer-once");
+            return once === "true";
+        });
+    }
+    hasExecuted() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const executed = yield this.component.getAttribute("data-timer-has-executed");
+            return executed === "true";
+        });
+    }
+}
+exports.TimerDriver = TimerDriver;