xmlui 0.11.4 → 0.11.7

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

@@ -1,444 +0,0 @@
-"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,
-            };
-        });
-    },
-});