xmlui 0.10.12 → 0.10.14

package/dist/scripts/src/components/Button/Button.spec.js

@@ -0,0 +1,454 @@
+"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 });
+const component_test_helpers_1 = require("../../testing/component-test-helpers");
+const fixtures_1 = require("../../testing/fixtures");
+const abstractions_1 = require("../../components/abstractions");
+const abstractions_2 = require("../abstractions");
+const ButtonNative_1 = require("./ButtonNative");
+// --- Smoke
+fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
+    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        yield initTestBed(`<Button />`);
+        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toBeAttached();
+    }));
+    // --- label
+    (0, fixtures_1.test)("renders ASCII text in label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        yield initTestBed(`<Button label="hello" />`);
+        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveText("hello");
+    }));
+    (0, fixtures_1.test)("renders Unicode text in label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        yield initTestBed(`<Button label="😀" />`);
+        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveText("😀");
+    }));
+    // --- icon
+    (0, fixtures_1.test)("can render icon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        yield initTestBed(`<Button icon="test" />`, {
+            resources: {
+                "icon.test": "resources/bell.svg",
+            },
+        });
+        yield (0, fixtures_1.expect)((yield createButtonDriver()).getIcons().first()).toBeVisible();
+    }));
+    // --- enabled
+    (0, fixtures_1.test)("has enabled state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        yield initTestBed(`<Button enabled="true" />`);
+        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toBeEnabled();
+    }));
+    (0, fixtures_1.test)("has disabled state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        yield initTestBed(`<Button enabled="false" />`);
+        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toBeDisabled();
+    }));
+    // --- click
+    (0, fixtures_1.test)("click event fires", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        const { testStateDriver } = yield initTestBed(`<Button onClick="testState = true" />`);
+        yield (yield createButtonDriver()).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
+    }));
+    // --- variant & themeColor
+    // background color
+    const EXPECTED_BACKGROUND_COLOR = "rgb(255, 0, 0)";
+    abstractions_1.buttonThemeValues.forEach((themeColor) => {
+        (0, fixtures_1.test)(`"solid" background color: "${themeColor}"`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+            yield initTestBed(`<Button variant="solid" themeColor="${themeColor}" />`, {
+                testThemeVars: {
+                    [`backgroundColor-Button-${themeColor}-solid`]: EXPECTED_BACKGROUND_COLOR,
+                },
+            });
+            yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveCSS("background-color", EXPECTED_BACKGROUND_COLOR);
+        }));
+    });
+    // content/label color
+    const EXPECTED_CONTENT_COLOR = "rgb(255, 255, 255)";
+    abstractions_1.buttonVariantValues.forEach((variant) => {
+        abstractions_1.buttonThemeValues.forEach((themeColor) => {
+            (0, fixtures_1.test)(`"${variant}" content color: "${themeColor}"`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+                yield initTestBed(`<Button variant="${variant}" themeColor="${themeColor}" />`, {
+                    testThemeVars: {
+                        [`textColor-Button-${themeColor}-${variant}`]: EXPECTED_CONTENT_COLOR,
+                    },
+                });
+                yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveCSS("color", EXPECTED_CONTENT_COLOR);
+            }));
+        });
+    });
+    // border
+    const EXPECTED_BORDER_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_BORDER_WIDTH = "5px";
+    const EXPECTED_BORDER_STYLE = "dotted";
+    const EXPECTED_BORDER_RADIUS = "10px";
+    abstractions_1.buttonVariantValues
+        .filter((v) => v !== "ghost")
+        .forEach((variant) => {
+        abstractions_1.buttonThemeValues.forEach((themeColor) => {
+            (0, fixtures_1.test)(`border: "${themeColor}" "${variant}" variant`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+                yield initTestBed(`<Button variant="${variant}" themeColor="${themeColor}" />`, {
+                    testThemeVars: {
+                        [`borderColor-Button-${themeColor}-${variant}`]: EXPECTED_BORDER_COLOR,
+                        [`borderWidth-Button-${themeColor}-${variant}`]: EXPECTED_BORDER_WIDTH,
+                        [`borderRadius-Button-${themeColor}-${variant}`]: EXPECTED_BORDER_RADIUS,
+                        [`borderStyle-Button-${themeColor}-${variant}`]: EXPECTED_BORDER_STYLE,
+                    },
+                });
+                const driver = yield createButtonDriver();
+                yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", EXPECTED_BORDER_COLOR);
+                yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-width", EXPECTED_BORDER_WIDTH);
+                yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-radius", EXPECTED_BORDER_RADIUS);
+                yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-style", EXPECTED_BORDER_STYLE);
+            }));
+        });
+    });
+    abstractions_1.buttonThemeValues.forEach((themeColor) => {
+        (0, fixtures_1.test)(`border: "${themeColor}" "ghost" variant`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            yield initTestBed(`<Button variant="ghost" themeColor="${themeColor}" />`, {
+                testThemeVars: {
+                    [`borderWidth-Button-${themeColor}-ghost`]: EXPECTED_BORDER_WIDTH,
+                    [`borderRadius-Button-${themeColor}-ghost`]: EXPECTED_BORDER_RADIUS,
+                },
+            });
+            const driver = yield createButtonDriver();
+            yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-width", EXPECTED_BORDER_WIDTH);
+            yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-radius", EXPECTED_BORDER_RADIUS);
+        }));
+    });
+    // fonts
+    const EXPECTED_FONT_FAMILY = "Arial, sans-serif";
+    const EXPECTED_FONT_SIZE = "20px";
+    const EXPECTED_FONT_WEIGHT = "200";
+    abstractions_1.buttonVariantValues.forEach((variant) => {
+        abstractions_1.buttonThemeValues.forEach((themeColor) => {
+            (0, fixtures_1.test)(`font: "${themeColor}" "${variant}" variant`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+                yield initTestBed(`<Button variant="${variant}" themeColor="${themeColor}" />`, {
+                    testThemeVars: {
+                        [`fontFamily-Button-${themeColor}-${variant}`]: EXPECTED_FONT_FAMILY,
+                        [`fontSize-Button-${themeColor}-${variant}`]: EXPECTED_FONT_SIZE,
+                        [`fontWeight-Button-${themeColor}-${variant}`]: EXPECTED_FONT_WEIGHT,
+                    },
+                });
+                const driver = yield createButtonDriver();
+                yield (0, fixtures_1.expect)(driver.component).toHaveCSS("font-family", EXPECTED_FONT_FAMILY);
+                yield (0, fixtures_1.expect)(driver.component).toHaveCSS("font-size", EXPECTED_FONT_SIZE);
+                yield (0, fixtures_1.expect)(driver.component).toHaveCSS("font-weight", EXPECTED_FONT_WEIGHT);
+            }));
+        });
+    });
+    // --- Accessibility
+    (0, fixtures_1.test)("icon-only button has accessible name", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        yield initTestBed(`<Button icon="test" />`, {
+            resources: {
+                "icon.test": "resources/bell.svg",
+            },
+        });
+        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveText("test");
+    }));
+    (0, fixtures_1.test)("icon & label button uses label name only", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        yield initTestBed(`<Button icon="test" label="label" />`, {
+            resources: {
+                "icon.test": "resources/bell.svg",
+            },
+        });
+        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveText("label");
+    }));
+    (0, fixtures_1.test)("icon-only button uses contextualLabel", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        yield initTestBed(`<Button icon="test" contextualLabel="label" />`, {
+            resources: {
+                "icon.test": "resources/bell.svg",
+            },
+        });
+        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveText("label");
+    }));
+    (0, fixtures_1.test)("icon, label, contextualLabel button uses label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+        yield initTestBed(`<Button icon="test" label="label" contextualLabel="contextLabel" />`, {
+            resources: {
+                "icon.test": "resources/bell.svg",
+            },
+        });
+        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveText("label");
+    }));
+});
+// --- E2E
+// --- label
+// Label inputs resolved with converting them to a string
+[
+    { label: "null", input: null, toExpect: "null" },
+    { label: "undefined", input: undefined, toExpect: "undefined" },
+    { label: "empty object", input: {}, toExpect: "[object Object]" },
+    { label: "object", input: { a: 1, b: "hi" }, toExpect: "[object Object]" },
+    { label: "empty array", input: [], toExpect: undefined },
+    { label: "array", input: [1, 2, 3], toExpect: "1,2,3" },
+    { label: "arrow function returning string", input: "{() => ''}", toExpect: "[object Object]" },
+    {
+        label: "function returning string",
+        input: "{function () { return ''; }}",
+        toExpect: "[object Object]",
+    },
+    {
+        label: "IIFE returning string",
+        input: "{(function () { return 'hello'; })()}",
+        toExpect: "hello",
+    },
+].forEach((type) => {
+    (0, fixtures_1.test)(`if label is ${type.label} renders label as "${type.toExpect}"`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+        yield initTestBed(`<Button label="${type.input}" />`);
+        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveExplicitLabel(type.toExpect);
+    }));
+});
+(0, fixtures_1.test)("text node as children are same as setting label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+    yield initTestBed(`<Button>hello</Button>`);
+    yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveExplicitLabel("hello");
+}));
+(0, fixtures_1.test)("ignores label property if children present", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+    yield initTestBed(`<Button label="hello">world</Button>`);
+    yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveExplicitLabel("world");
+}));
+(0, fixtures_1.test)("renders XMLUI Text component as child", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, createTextDriver, }) {
+    yield initTestBed(`<Button label="hello"><Text testId="text">world</Text></Button>`);
+    yield (0, fixtures_1.expect)((yield createButtonDriver()).component).not.toHaveExplicitLabel("hello");
+    yield (0, fixtures_1.expect)((yield createTextDriver("text")).component).toHaveText("world");
+}));
+(0, fixtures_1.test)("renders XMLUI Complex component as child", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, createCardDriver, }) {
+    yield initTestBed(`<Button label="hello"><Card testId="card" title="Button">Content</Card></Button>`);
+    yield (0, fixtures_1.expect)((yield createButtonDriver()).component).not.toHaveExplicitLabel("hello");
+    yield (0, fixtures_1.expect)((yield createCardDriver("card")).component).toBeAttached();
+}));
+// --- icon
+(0, fixtures_1.test)("renders icon and label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+    yield initTestBed(`<Button icon="test" label="hello" />`, {
+        resources: {
+            "icon.test": "resources/bell.svg",
+        },
+    });
+    const driver = yield createButtonDriver();
+    yield (0, fixtures_1.expect)(driver.component).toHaveText("hello");
+    yield (0, fixtures_1.expect)(driver.getIcons().first()).toBeVisible();
+}));
+(0, fixtures_1.test)("renders icon if children present", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+    yield initTestBed(`<Button icon="test">Hello World</Button>`, {
+        resources: {
+            "icon.test": "resources/bell.svg",
+        },
+    });
+    yield (0, fixtures_1.expect)((yield createButtonDriver()).getIcons().first()).toBeVisible();
+}));
+[
+    { label: "null", value: null },
+    { label: "undefined", value: undefined },
+    { label: "empty object", value: {} },
+    { label: "object", value: { a: 1, b: "hi" } },
+    { label: "empty array", value: [] },
+    { label: "array", value: [] },
+    { label: "function", value: () => { } },
+].forEach((type) => {
+    (0, fixtures_1.test)(`does not render icon if icon is of type ${type.label}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+        yield initTestBed(`<Button icon="${type.value}" />`);
+        yield (0, fixtures_1.expect)((yield createButtonDriver()).getIcons().first()).not.toBeAttached();
+    }));
+});
+(0, fixtures_1.test)("renders if icon is not found and label is present", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+    yield initTestBed(`<Button icon="_" label="hello" />`);
+    const driver = yield createButtonDriver();
+    yield (0, fixtures_1.expect)(driver.getIcons().first()).not.toBeAttached();
+    yield (0, fixtures_1.expect)(driver.component).toHaveText("hello");
+}));
+// --- iconPosition
+const iconPositionCases = [
+    { position: "left", value: "start" },
+    { position: "right", value: "end" },
+];
+// This is a helper function to calculate the icon position
+function iconPositionCalculation(buttonDriver, iconDriver) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const buttonBounds = yield (0, component_test_helpers_1.getBounds)(buttonDriver);
+        const buttonPadding = yield (0, component_test_helpers_1.getPaddings)(buttonDriver);
+        const buttonBorders = yield (0, component_test_helpers_1.getBorders)(buttonDriver);
+        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(iconDriver);
+        const buttonContentLeft = buttonBounds.left + buttonBorders.left.width.value + buttonPadding.left.value;
+        const buttonContentRight = buttonBounds.right - buttonBorders.right.width.value - buttonPadding.right.value;
+        return { buttonContentLeft, buttonContentRight, iconLeft, iconRight };
+    });
+}
+iconPositionCases.forEach(({ value }) => {
+    (0, fixtures_1.test)(`iconPosition=${value} leaves icon in middle`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, createIconDriver, }) {
+        yield initTestBed(`<Button icon="test" iconPosition="${value}" />`, {
+            resources: {
+                "icon.test": "resources/bell.svg",
+            },
+        });
+        const buttonDriver = yield createButtonDriver();
+        const iconDriver = yield createIconDriver(buttonDriver.getIcons().first());
+        const { buttonContentLeft, buttonContentRight, iconLeft, iconRight } = yield iconPositionCalculation(buttonDriver, iconDriver);
+        (0, fixtures_1.expect)(buttonContentLeft).toBeCloseTo(iconLeft, 5);
+        (0, fixtures_1.expect)(buttonContentRight).toBeCloseTo(iconRight, 5);
+    }));
+});
+// With label
+iconPositionCases.forEach(({ position, value }) => {
+    (0, fixtures_1.test)(`iconPosition=${value} places icon on the ${position} of label`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, createIconDriver, }) {
+        yield initTestBed(`<Button icon="test" label="hello" iconPosition="${value}" />`, {
+            resources: {
+                "icon.test": "resources/bell.svg",
+            },
+        });
+        const buttonDriver = yield createButtonDriver();
+        const iconDriver = yield createIconDriver(buttonDriver.getIcons().first());
+        const { buttonContentLeft, buttonContentRight, iconLeft, iconRight } = yield iconPositionCalculation(buttonDriver, iconDriver);
+        // Depending on orientation, the icon's leftmost and rightmost points fall shorter
+        // compared to the button's leftmost and rightmost points because of the label
+        if (value === "start") {
+            (0, fixtures_1.expect)(buttonContentLeft).toBeCloseTo(iconLeft, 5);
+            (0, fixtures_1.expect)(buttonContentRight).toBeGreaterThan(iconRight + 1);
+        }
+        else {
+            (0, fixtures_1.expect)(buttonContentLeft).toBeLessThan(iconLeft - 1);
+            (0, fixtures_1.expect)(buttonContentRight).toBeCloseTo(iconRight, 5);
+        }
+    }));
+});
+// With children
+iconPositionCases.forEach(({ position, value }) => {
+    (0, fixtures_1.test)(`iconPosition=${value} places icon on ${position} of children`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, createIconDriver, }) {
+        yield initTestBed(`<Button icon="test" iconPosition="${value}">
+          <Card title="Test">This is some content</Card>
+        </Button>`, {
+            resources: {
+                "icon.test": "resources/bell.svg",
+            },
+        });
+        const buttonDriver = yield createButtonDriver();
+        const iconDriver = yield createIconDriver(buttonDriver.getIcons().first());
+        const { buttonContentLeft, buttonContentRight, iconLeft, iconRight } = yield iconPositionCalculation(buttonDriver, iconDriver);
+        // Depending on orientation, the icon's leftmost and rightmost points fall shorter
+        // compared to the button's leftmost and rightmost points because of the children
+        if (value === "start") {
+            (0, fixtures_1.expect)(buttonContentLeft).toBeCloseTo(iconLeft, 5);
+            (0, fixtures_1.expect)(buttonContentRight).toBeGreaterThan(iconRight + 1);
+        }
+        else {
+            (0, fixtures_1.expect)(buttonContentLeft).toBeLessThan(iconLeft - 1);
+            (0, fixtures_1.expect)(buttonContentRight).toBeCloseTo(iconRight, 5);
+        }
+    }));
+});
+// --- contentPosition
+abstractions_1.alignmentOptionValues.forEach((pos) => {
+    (0, fixtures_1.test)(`label and icon is positioned to the ${pos}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+        yield initTestBed(`<Button width="100%" icon="test" label="hello" contentPosition="${pos}" />`, {
+            resources: {
+                "icon.test": "resources/bell.svg",
+            },
+        });
+        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveCSS("justify-content", pos);
+    }));
+});
+// --- type
+abstractions_1.buttonTypeValues.forEach((type) => {
+    (0, fixtures_1.test)(`type="${type}" is reflected in html`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        yield initTestBed(`<Button type="${type}" />`);
+        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveAttribute("type", type);
+    }));
+});
+// --- autoFocus
+(0, fixtures_1.test)("focuses component if autoFocus is set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+    yield initTestBed(`<Button autoFocus="{true}" />`);
+    yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toBeFocused();
+}));
+// --- size
+// Relative testing is acceptable for now - basis of the test is the default size
+(0, fixtures_1.test)("relative size test", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    const components = abstractions_2.sizeValues
+        .map((size) => {
+        return `<Button testId="${size}" size="${size}" />`;
+    })
+        .join("\n");
+    yield initTestBed(`<Fragment>${components}</Fragment>`);
+    const { width: widthXs, height: heightXs } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("xs"));
+    const { width: widthSm, height: heightSm } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("sm"));
+    const { width: widthMd, height: heightMd } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("md"));
+    const { width: widthLg, height: heightLg } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("lg"));
+    (0, fixtures_1.expect)(widthXs).toBeLessThanOrEqual(widthSm);
+    (0, fixtures_1.expect)(widthSm).toBeLessThanOrEqual(widthMd);
+    (0, fixtures_1.expect)(widthMd).toBeLessThanOrEqual(widthLg);
+    (0, fixtures_1.expect)(heightXs).toBeLessThanOrEqual(heightSm);
+    (0, fixtures_1.expect)(heightSm).toBeLessThanOrEqual(heightMd);
+    (0, fixtures_1.expect)(heightMd).toBeLessThanOrEqual(heightLg);
+}));
+(0, fixtures_1.test)(`invalid size falls back to default ${ButtonNative_1.defaultProps.size}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+    yield initTestBed(`
+    <Fragment>
+      <Button testId="reference" size="${ButtonNative_1.defaultProps.size}" />
+      <Button testId="invalid" size="invalid"/>
+    </Fragment>
+  `);
+    const reference = page.getByTestId("reference");
+    const invalid = page.getByTestId("invalid");
+    const { width: widthRef, height: heightRef } = yield (0, component_test_helpers_1.getBounds)(reference);
+    const { width: widthInvalid, height: heightInvalid } = yield (0, component_test_helpers_1.getBounds)(invalid);
+    yield (0, fixtures_1.expect)(invalid).toBeVisible();
+    (0, fixtures_1.expect)(widthInvalid).toBe(widthRef);
+    (0, fixtures_1.expect)(heightInvalid).toBe(heightRef);
+}));
+(0, fixtures_1.test)(`no size prop defaults to ${ButtonNative_1.defaultProps.size}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+    yield initTestBed(`<Fragment>
+      <Button testId="reference" size="${ButtonNative_1.defaultProps.size}" />
+      <Button testId="default" />
+    </Fragment>`);
+    const reference = page.getByTestId("reference");
+    const defaultButton = page.getByTestId("default");
+    const { width: widthRef, height: heightRef } = yield (0, component_test_helpers_1.getBounds)(reference);
+    const { width: widthDefault, height: heightDefault } = yield (0, component_test_helpers_1.getBounds)(defaultButton);
+    yield (0, fixtures_1.expect)(defaultButton).toBeVisible();
+    (0, fixtures_1.expect)(widthDefault).toBe(widthRef);
+    (0, fixtures_1.expect)(heightDefault).toBe(heightRef);
+}));
+(0, fixtures_1.test)("testState initializes to default value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed }) {
+    const getState = (yield initTestBed(`<Fragment />`)).testStateDriver.testState;
+    yield fixtures_1.expect.poll(getState).toEqual(null);
+}));
+// --- gotFocus
+(0, fixtures_1.test)("is focused & gotFocus event fires", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+    const { testStateDriver } = yield initTestBed(`<Button onGotFocus="testState = true" />`);
+    const driver = yield createButtonDriver();
+    yield driver.focus();
+    yield (0, fixtures_1.expect)(driver.component).toBeFocused();
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
+}));
+(0, fixtures_1.test)("gotFocus event does not fire if disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+    const { testStateDriver } = yield initTestBed(`<Button enabled="false" onGotFocus="testState = true" />`);
+    const driver = yield createButtonDriver();
+    yield driver.focus();
+    // testState remains unchanged
+    yield (0, fixtures_1.expect)(driver.component).not.toBeFocused();
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
+}));
+// --- lostFocus
+(0, fixtures_1.test)("lostFocus event fires & is not focused", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+    const { testStateDriver } = yield initTestBed(`<Button onLostFocus="testState = true" />`);
+    const driver = yield createButtonDriver();
+    yield driver.focus();
+    yield driver.blur();
+    yield (0, fixtures_1.expect)(driver.component).not.toBeFocused();
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
+}));
+(0, fixtures_1.test)("cannot emit lostFocus event if not focused before", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+    const { testStateDriver } = yield initTestBed(`<Button onLostFocus="testState = true" />`);
+    const driver = yield createButtonDriver();
+    yield driver.blur();
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
+}));
+(0, fixtures_1.test)("lostFocus event does not fire if disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+    const { testStateDriver } = yield initTestBed(`<Button enabled="false" onLostFocus="testState = true" />`);
+    const driver = yield createButtonDriver();
+    yield driver.focus();
+    yield driver.blur();
+    // testState remains unchanged
+    yield (0, fixtures_1.expect)(driver.component).not.toBeFocused();
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
+}));

package/dist/scripts/src/components/Card/Card.spec.js

@@ -0,0 +1,150 @@
+"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 });
+const component_test_helpers_1 = require("../../testing/component-test-helpers");
+const fixtures_1 = require("../../testing/fixtures");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("Card renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCardDriver }) {
+        yield initTestBed(`<Card />`);
+        const driver = yield createCardDriver();
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+    (0, fixtures_1.test)("Card renders with title", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCardDriver }) {
+        yield initTestBed(`<Card title="Test Title" />`);
+        const title = (yield createCardDriver()).component.getByRole("heading");
+        yield (0, fixtures_1.expect)(title).toBeVisible();
+        yield (0, fixtures_1.expect)(title).toHaveText("Test Title");
+    }));
+    (0, fixtures_1.test)("Card renders with subtitle", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCardDriver }) {
+        yield initTestBed(`<Card subtitle="Test Subtitle" />`);
+        const subtitle = (yield createCardDriver()).component.locator("div").first();
+        yield (0, fixtures_1.expect)(subtitle).toBeVisible();
+        yield (0, fixtures_1.expect)(subtitle).toHaveText("Test Subtitle");
+    }));
+    (0, fixtures_1.test)("Card renders with both title and subtitle", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCardDriver }) {
+        yield initTestBed(`
+      <Card title="Test Title" subtitle="Test Subtitle">
+        <Text value="Card content" />
+      </Card>
+    `);
+        const driver = yield createCardDriver();
+        const title = driver.component.getByRole("heading");
+        const subtitle = driver.component.getByText("Test Subtitle");
+        yield (0, fixtures_1.expect)(title).toHaveText("Test Title");
+        yield (0, fixtures_1.expect)(subtitle).toBeVisible();
+    }));
+    (0, fixtures_1.test)("displays avatar when avatarUrl is provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCardDriver }) {
+        yield initTestBed(`<Card avatarUrl="/resources/flower-640x480.jpg" />`);
+        const avatar = (yield createCardDriver()).avatar;
+        yield (0, fixtures_1.expect)(avatar).toBeVisible();
+        yield (0, fixtures_1.expect)(avatar).toHaveAttribute("src", "/resources/flower-640x480.jpg");
+    }));
+    (0, fixtures_1.test)("clicking linkTo title navigates", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createCardDriver }) {
+        yield initTestBed(`<Card title="Clickable Title" linkTo="/test-link" />`);
+        const titleLink = (yield createCardDriver()).component.getByRole("link", {
+            name: "Clickable Title",
+        });
+        yield titleLink.click();
+        yield (0, fixtures_1.expect)(page).toHaveURL(/\/test-link$/);
+    }));
+    (0, fixtures_1.test)("showAvatar=false hides avatar even when avatarUrl is provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCardDriver, }) {
+        yield initTestBed(`
+      <Card avatarUrl="https://i.pravatar.cc/100" showAvatar="false" title="Test Title" />
+    `);
+        const driver = yield createCardDriver();
+        yield (0, fixtures_1.expect)(driver.avatar).not.toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component.getByText("Test Title")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("showAvatar displays initials with single word title", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCardDriver, }) {
+        yield initTestBed(`<Card showAvatar="true" title="John" />`);
+        yield (0, fixtures_1.expect)((yield createCardDriver()).component.getByText("J", { exact: true })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("showAvatar=true with empty title displays no initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCardDriver, }) {
+        yield initTestBed(`<Card showAvatar="true" />`);
+        const avatar = (yield createCardDriver()).avatar;
+        yield (0, fixtures_1.expect)(avatar).toHaveText(/^$/);
+    }));
+    (0, fixtures_1.test)("linkTo without title does not create link", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCardDriver }) {
+        yield initTestBed(`
+      <Card linkTo="/test-link">
+        <Text value="Content" />
+      </Card>
+    `);
+        const driver = yield createCardDriver();
+        yield (0, fixtures_1.expect)(driver.component.getByRole("link")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component.getByText("Content")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("orientation horizontal displays children in row", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
+        yield initTestBed(`
+      <Card orientation="horizontal">
+        <Text testId="text-1" value="Child 1" />
+        <Text testId="text-2" value="Child 2" />
+      </Card>
+    `);
+        const text1Driver = yield createTextDriver("text-1");
+        const text2Driver = yield createTextDriver("text-2");
+        const { right: text1Right } = yield (0, component_test_helpers_1.getBounds)(text1Driver);
+        const { right: text2Left } = yield (0, component_test_helpers_1.getBounds)(text2Driver);
+        (0, fixtures_1.expect)(text1Right).toBeLessThan(text2Left);
+    }));
+    (0, fixtures_1.test)("orientation vertical displays children in column", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
+        yield initTestBed(`
+      <Card orientation="vertical">
+        <Text testId="text-1" value="Child 1" />
+        <Text testId="text-2" value="Child 2" />
+      </Card>
+    `);
+        const text1Driver = yield createTextDriver("text-1");
+        const text2Driver = yield createTextDriver("text-2");
+        const { bottom: text1Bottom } = yield (0, component_test_helpers_1.getBounds)(text1Driver);
+        const { top: text2Top } = yield (0, component_test_helpers_1.getBounds)(text2Driver);
+        (0, fixtures_1.expect)(text1Bottom).toBeLessThan(text2Top);
+    }));
+});
+// =============================================================================
+// EVENT HANDLING TESTS
+// =============================================================================
+fixtures_1.test.describe("Event Handling", () => {
+    (0, fixtures_1.test)("click event is triggered when Card is clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCardDriver, }) {
+        const { testStateDriver } = yield initTestBed(`<Card onClick="testState = true" />`);
+        yield (yield createCardDriver()).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
+    }));
+    (0, fixtures_1.test)("Card click does not interfere with link click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createCardDriver, createTextDriver, }) {
+        yield initTestBed(`
+      <Card title="Title" linkTo="/test-link" onClick="testState = true">
+        <Text testId="text-1" when="{testState}" value="visible" />
+      </Card>
+    `);
+        const cardDriver = yield createCardDriver();
+        const textDriver = yield createTextDriver("text-1");
+        yield cardDriver.click();
+        yield (0, fixtures_1.expect)(textDriver.component).toHaveText("visible");
+        yield (0, fixtures_1.expect)(page).not.toHaveURL(/\/test-link$/);
+    }));
+    (0, fixtures_1.test)("Link click does not interfere with Card click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createCardDriver, createTextDriver, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Card title="Title" linkTo="/test-link" onClick="testState = true">
+        <Text testId="text-1" when="{testState}" value="visible" />
+      </Card>
+    `);
+        const textDriver = yield createTextDriver("text-1");
+        const title = (yield createCardDriver()).component.getByRole("heading");
+        yield (0, fixtures_1.expect)(textDriver.component).not.toBeVisible();
+        yield title.click();
+        yield page.waitForTimeout(200);
+        yield (0, fixtures_1.expect)(page).toHaveURL(/\/test-link$/);
+        yield (0, fixtures_1.expect)(textDriver.component).toBeVisible();
+    }));
+});