xmlui 0.10.13 → 0.10.15

package/dist/scripts/src/testing/assertions.js

@@ -0,0 +1,444 @@
+"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.expect = void 0;
+const test_1 = require("@playwright/test");
+const component_test_helpers_1 = require("./component-test-helpers");
+// --- Extending Expect
+exports.expect = test_1.expect.extend({
+    /**
+     * Asserts whether the Button component has the expected label either through the `label` property
+     * or as a text node child.
+     *
+     * **Usage**
+     *
+     * ```js
+     * await initTestBed(`<Button label="hello" />`);
+     * const driver = await createButtonDriver();
+     * await expect(driver.component).toHaveLabel("hello"); // <- resolves to true
+     * ```
+     *
+     * @param expected Expected string label
+     */
+    toHaveExplicitLabel(locator, expected) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const assertionName = "toHaveExplicitLabel";
+            let pass = false;
+            const label = yield locator.evaluate((element) => {
+                var _a;
+                return (_a = [...element.childNodes]
+                    .filter((e) => e.nodeType === Node.TEXT_NODE && e.textContent.trim())
+                    .map((e) => e.textContent.trim())) === null || _a === void 0 ? void 0 : _a[0];
+            });
+            if (label === expected) {
+                pass = true;
+            }
+            const message = pass
+                ? () => this.utils.matcherHint(assertionName, locator, expected, { isNot: this.isNot }) +
+                    "\n\n" +
+                    `Expected: ${this.isNot ? "not" : ""}${this.utils.printExpected(expected)}\n` +
+                    `Received: ${this.utils.printReceived(label)}`
+                : () => this.utils.matcherHint(assertionName, locator, expected, { isNot: this.isNot }) +
+                    "\n\n" +
+                    `Expected: ${this.utils.printExpected(expected)}\n` +
+                    `Received: ${this.utils.printReceived(label)}`;
+            return {
+                message,
+                pass,
+                name: assertionName,
+                expected,
+                actual: undefined,
+            };
+        });
+    },
+    /**
+     * Compares two numbers with an optional tolerance value. If the tolerance is set to 0 the comparator acts as `toEqual`.
+     * Used to compare element dimensions on different platforms because of half pixel rendering.
+     *
+     * **Usage**
+     *
+     * ```js
+     * const value = 8;
+     * expect(value).toEqualWithTolerance(10, 2); // true
+     * ```
+     *
+     * @param expected Expected value
+     * @param tolerance Tolerance value, **default is 1**
+     */
+    toEqualWithTolerance(provided, expected, tolerance = 1) {
+        const assertionName = "toEqualWithTolerance";
+        let pass = false;
+        if (provided >= expected - (tolerance || 0) && provided <= expected + (tolerance || 0)) {
+            pass = true;
+        }
+        const message = pass
+            ? () => this.utils.matcherHint(assertionName, provided, expected, { isNot: this.isNot }) +
+                "\n\n" +
+                `Expected: ${this.isNot ? "not" : ""}${this.utils.printExpected(expected)}\n` +
+                `Received: ${this.utils.printReceived(provided)}`
+            : () => this.utils.matcherHint(assertionName, provided, expected, { isNot: this.isNot }) +
+                "\n\n" +
+                `Expected: ${this.utils.printExpected(expected)}\n` +
+                `Received: ${this.utils.printReceived(provided)}`;
+        return {
+            message,
+            pass,
+            name: assertionName,
+            expected,
+            actual: undefined,
+        };
+    },
+    // ---
+    // --- NOTE: Assertations below this line are experimental and are reserved for future test cases (ex. comparison tests)
+    // ---
+    /**
+     * Asserts whether a component has the correct CSS `border-color` styling.
+     *
+     * @param expected Expected CSS color
+     * @param border Border side(s), Default: **"all"**
+     *
+     * ---
+     * **Usage**
+     *
+     * ```js
+     * await initTestBed(`<Button label="hello" />`, {
+     *    testThemeVars: { "borderLeftColor-Button": "rgb(0, 0, 0)" },
+     * });
+     * const driver = await createButtonDriver();
+     * await expect(driver.component).toHaveBorderColor("rgb(0, 0, 0)", "left");
+     * ```
+     */
+    toHaveBorderColor(locator_1, expected_1) {
+        return __awaiter(this, arguments, void 0, function* (locator, expected, border = "all") {
+            const assertionName = "toHaveBorder";
+            let expectedBorderColor;
+            try {
+                expectedBorderColor = (0, component_test_helpers_1.parseAsCSSColor)(expected);
+                if (Object.values(expectedBorderColor).length === 0) {
+                    throw new Error("Empty color!");
+                }
+            }
+            catch (e) {
+                return {
+                    message: () => "In " +
+                        this.utils.matcherHint(assertionName, locator, expected, { isNot: this.isNot }) +
+                        ":\n" +
+                        (e instanceof Error ? e.message : String(e)) +
+                        "\n\n" +
+                        `Expected: Correct CSS border color to expect (e.g. "red", "rgb(0, 0, 0)", "#AA0011")\n` +
+                        `Received: ${this.utils.printReceived(expected)}`,
+                    pass: false,
+                    name: assertionName,
+                    expected,
+                    actual: undefined,
+                };
+            }
+            let _border = [];
+            if (typeof border === "string") {
+                if (border === "all") {
+                    _border = ["top", "bottom", "left", "right"];
+                }
+                else {
+                    _border = [border];
+                }
+            }
+            else {
+                _border = Array.from(new Set(border)).filter(component_test_helpers_1.isBorderSide);
+            }
+            let pass = true;
+            let matcherResult;
+            const colorStr = `rgb(${expectedBorderColor.rgb().join(", ")})`;
+            try {
+                for (let b of _border) {
+                    yield (0, test_1.expect)(locator).toHaveCSS(`border-${b}-color`, colorStr);
+                }
+            }
+            catch (e) {
+                matcherResult = e.matcherResult;
+                pass = false;
+            }
+            const message = pass
+                ? () => this.utils.matcherHint(assertionName, undefined, undefined, { isNot: this.isNot }) +
+                    "\n\n" +
+                    `Expected: not ${this.utils.printExpected(expected)}\n` +
+                    (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "")
+                : () => this.utils.matcherHint(assertionName, undefined, undefined, { isNot: this.isNot }) +
+                    "\n\n" +
+                    `Expected: ${this.utils.printExpected(expected)}\n` +
+                    (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "");
+            return {
+                message,
+                pass,
+                name: assertionName,
+                expected,
+                actual: matcherResult === null || matcherResult === void 0 ? void 0 : matcherResult.actual,
+            };
+        });
+    },
+    /**
+     * Asserts whether a component has the correct CSS `border-width` styling.
+     *
+     * @param expected Expected CSS size
+     * @param border Border side(s), Default: **"all"**
+     *
+     * ---
+     * **Usage**
+     *
+     * ```js
+     * await initTestBed(`<Button label="hello" />`, {
+     *    testThemeVars: { "borderLeftWidth-Button": "12px" },
+     * });
+     * const driver = await createButtonDriver();
+     * await expect(driver.component).toHaveBorderWidth("12px", "left");
+     * ```
+     */
+    toHaveBorderWidth(locator_1, expected_1) {
+        return __awaiter(this, arguments, void 0, function* (locator, expected, border = "all") {
+            const assertionName = "toHaveBorder";
+            let expectedBorderWidth;
+            try {
+                expectedBorderWidth = (0, component_test_helpers_1.parseAsNumericCss)(expected);
+                if (Object.values(expectedBorderWidth).length === 0) {
+                    throw new Error("Empty width!");
+                }
+            }
+            catch (e) {
+                return {
+                    message: () => "In " +
+                        this.utils.matcherHint(assertionName, locator, expected, { isNot: this.isNot }) +
+                        ":\n" +
+                        (e instanceof Error ? e.message : String(e)) +
+                        "\n\n" +
+                        `Expected: Correct CSS border width to expect (e.g. "1px", "2rem")\n` +
+                        `Received: ${this.utils.printReceived(expected)}`,
+                    pass: false,
+                    name: assertionName,
+                    expected,
+                    actual: undefined,
+                };
+            }
+            let _border = [];
+            if (typeof border === "string") {
+                if (border === "all") {
+                    _border = ["top", "bottom", "left", "right"];
+                }
+                else {
+                    _border = [border];
+                }
+            }
+            else {
+                _border = Array.from(new Set(border)).filter(component_test_helpers_1.isBorderSide);
+            }
+            let pass = true;
+            let matcherResult;
+            const widthStr = (0, component_test_helpers_1.numericCSSToString)(expectedBorderWidth);
+            try {
+                for (let b of _border) {
+                    yield (0, test_1.expect)(locator).toHaveCSS(`border-${b}-width`, widthStr);
+                }
+            }
+            catch (e) {
+                matcherResult = e.matcherResult;
+                pass = false;
+            }
+            const message = pass
+                ? () => this.utils.matcherHint(assertionName, undefined, undefined, { isNot: this.isNot }) +
+                    "\n\n" +
+                    `Expected: not ${this.utils.printExpected(expected)}\n` +
+                    (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "")
+                : () => this.utils.matcherHint(assertionName, undefined, undefined, { isNot: this.isNot }) +
+                    "\n\n" +
+                    `Expected: ${this.utils.printExpected(expected)}\n` +
+                    (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "");
+            return {
+                message,
+                pass,
+                name: assertionName,
+                expected,
+                actual: matcherResult === null || matcherResult === void 0 ? void 0 : matcherResult.actual,
+            };
+        });
+    },
+    /**
+     * Asserts whether a component has the correct CSS `border-style` styling.
+     *
+     * @param expected Expected CSS border style
+     * @param border Border side(s), default: **"all"**
+     *
+     * ---
+     * **Usage**
+     *
+     * ```js
+     * await initTestBed(`<Button label="hello" />`, {
+     *    testThemeVars: { "borderLeftStyle-Button": "dotted" },
+     * });
+     * const driver = await createButtonDriver();
+     * await expect(driver.component).toHaveBorderStyle("dotted", "left");
+     * ```
+     */
+    toHaveBorderStyle(locator_1, expected_1) {
+        return __awaiter(this, arguments, void 0, function* (locator, expected, border = "all") {
+            const assertionName = "toHaveBorder";
+            let expectedBorderStyle;
+            try {
+                expectedBorderStyle = (0, component_test_helpers_1.parseAsCSSBorderStyle)(expected);
+                if (Object.values(expectedBorderStyle).length === 0) {
+                    throw new Error("Empty border style!");
+                }
+            }
+            catch (e) {
+                return {
+                    message: () => "In " +
+                        this.utils.matcherHint(assertionName, locator, expected, { isNot: this.isNot }) +
+                        ":\n" +
+                        (e instanceof Error ? e.message : String(e)) +
+                        "\n\n" +
+                        `Expected: Correct CSS border style to expect (e.g. "1px solid black")\n` +
+                        `Received: ${this.utils.printReceived(expected)}`,
+                    pass: false,
+                    name: assertionName,
+                    expected,
+                    actual: undefined,
+                };
+            }
+            let _border = [];
+            if (typeof border === "string") {
+                if (border === "all") {
+                    _border = ["top", "bottom", "left", "right"];
+                }
+                else {
+                    _border = [border];
+                }
+            }
+            else {
+                _border = Array.from(new Set(border)).filter(component_test_helpers_1.isBorderSide);
+            }
+            let pass = true;
+            let matcherResult;
+            try {
+                for (let b of _border) {
+                    yield (0, test_1.expect)(locator).toHaveCSS(`border-${b}-style`, expectedBorderStyle);
+                }
+            }
+            catch (e) {
+                matcherResult = e.matcherResult;
+                pass = false;
+            }
+            const message = pass
+                ? () => this.utils.matcherHint(assertionName, undefined, undefined, { isNot: this.isNot }) +
+                    "\n\n" +
+                    `Expected: not ${this.utils.printExpected(expected)}\n` +
+                    (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "")
+                : () => this.utils.matcherHint(assertionName, undefined, undefined, { isNot: this.isNot }) +
+                    "\n\n" +
+                    `Expected: ${this.utils.printExpected(expected)}\n` +
+                    (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "");
+            return {
+                message,
+                pass,
+                name: assertionName,
+                expected,
+                actual: matcherResult === null || matcherResult === void 0 ? void 0 : matcherResult.actual,
+            };
+        });
+    },
+    /**
+     * Asserts whether a component has the correct CSS `border` shorthand set:
+     * `color`, `width`, `style`.
+     *
+     * @param expected Expected string label
+     * @param border Border side(s), Default: **"all"**
+     *
+     * ---
+     * **Usage**
+     *
+     * ```js
+     * await initTestBed(`<Button label="hello" />`, {
+     *    testThemeVars: { "borderLeft-Button": "1px solid black" },
+     * });
+     * const driver = await createButtonDriver();
+     * await expect(driver.component).toHaveBorder("1px solid black", "left");
+     * ```
+     */
+    toHaveBorder(locator_1, expected_1) {
+        return __awaiter(this, arguments, void 0, function* (locator, expected, border = "all") {
+            const assertionName = "toHaveBorder";
+            let expectedBorder;
+            try {
+                expectedBorder = (0, component_test_helpers_1.parseAsCssBorder)(expected);
+                if (Object.values(expectedBorder).length === 0) {
+                    throw new Error("Empty style!");
+                }
+            }
+            catch (e) {
+                return {
+                    message: () => "In " +
+                        this.utils.matcherHint(assertionName, locator, expected, { isNot: this.isNot }) +
+                        ":\n" +
+                        (e instanceof Error ? e.message : String(e)) +
+                        "\n\n" +
+                        `Expected: Correct CSS border style to expect (e.g. "1px solid black")\n` +
+                        `Received: ${this.utils.printReceived(expected)}`,
+                    pass: false,
+                    name: assertionName,
+                    expected,
+                    actual: undefined,
+                };
+            }
+            let _border = [];
+            if (typeof border === "string") {
+                if (border === "all") {
+                    _border = ["top", "bottom", "left", "right"];
+                }
+                else {
+                    _border = [border];
+                }
+            }
+            else {
+                _border = Array.from(new Set(border)).filter(component_test_helpers_1.isBorderSide);
+            }
+            let pass = true;
+            let matcherResult;
+            try {
+                if (expectedBorder === null || expectedBorder === void 0 ? void 0 : expectedBorder.color) {
+                    const colorStr = `rgb(${expectedBorder.color.rgb().join(", ")})`;
+                    yield (0, exports.expect)(locator).toHaveBorderColor(colorStr, _border);
+                }
+                if (expectedBorder === null || expectedBorder === void 0 ? void 0 : expectedBorder.width) {
+                    yield (0, exports.expect)(locator).toHaveBorderWidth((0, component_test_helpers_1.numericCSSToString)(expectedBorder.width), _border);
+                }
+                if (expectedBorder === null || expectedBorder === void 0 ? void 0 : expectedBorder.style) {
+                    yield (0, exports.expect)(locator).toHaveBorderStyle(expectedBorder.style, _border);
+                }
+            }
+            catch (e) {
+                matcherResult = e.matcherResult;
+                pass = false;
+            }
+            const message = pass
+                ? () => this.utils.matcherHint(assertionName, undefined, undefined, { isNot: this.isNot }) +
+                    "\n\n" +
+                    `Expected: not ${this.utils.printExpected(expected)}\n` +
+                    (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "")
+                : () => this.utils.matcherHint(assertionName, undefined, undefined, { isNot: this.isNot }) +
+                    "\n\n" +
+                    `Expected: ${this.utils.printExpected(expected)}\n` +
+                    (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "");
+            return {
+                message,
+                pass,
+                name: assertionName,
+                expected,
+                actual: matcherResult === null || matcherResult === void 0 ? void 0 : matcherResult.actual,
+            };
+        });
+    },
+});