xmlui 0.11.4 → 0.11.6

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

@@ -1,966 +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 });
-const component_test_helpers_1 = require("../../testing/component-test-helpers");
-const fixtures_1 = require("../../testing/fixtures");
-const abstractions_1 = require("./abstractions");
-fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
-    (0, fixtures_1.test)("Heading is rendered", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<Heading />`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeAttached();
-    }));
-    abstractions_1.headingLevels.forEach((htmlElement) => {
-        (0, fixtures_1.test)(`HtmlTag '${htmlElement}' is rendered`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-            yield initTestBed(`<${htmlElement} />`);
-            const driver = yield createHeadingDriver();
-            yield (0, fixtures_1.expect)(driver.component).toBeAttached();
-        }));
-    });
-    // --- value
-    // correct types: string, undefined, null, number, boolean -> everything will be coerced to strings
-    [
-        { label: "undefined", value: "'{undefined}'", toExpect: "" },
-        { label: "null", value: "'{null}'", toExpect: "" },
-        { label: "empty string", value: "''", toExpect: "" },
-        { label: "string", value: "'test'", toExpect: "test" },
-        { label: "integer", value: "'{1}'", toExpect: "1" },
-        { label: "float", value: "'{1.2}'", toExpect: "1.2" },
-        { label: "boolean", value: "'{true}'", toExpect: "true" },
-        { label: "empty object", value: "'{{}}'", toExpect: {}.toString() },
-        { label: "object", value: "\"{{ a: 1, b: 'hi' }}\"", toExpect: { a: 1, b: "hi" }.toString() },
-        { label: "empty array", value: "'{[]}'", toExpect: "" },
-        { label: "array", value: "'{[1, 2, 3]}'", toExpect: [1, 2, 3].toString() },
-    ].forEach(({ label, value, toExpect }) => {
-        (0, fixtures_1.test)(`setting value to ${label} sets value of field`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-            yield initTestBed(`<Heading value=${value} />`);
-            const driver = yield createHeadingDriver();
-            yield (0, fixtures_1.expect)(driver.component).toHaveText(toExpect);
-        }));
-    });
-    (0, fixtures_1.test)("setting value prop has no whitespace collapsing", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        const expected = "test        content";
-        yield initTestBed(`<Heading value="${expected}" />`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText(expected);
-    }));
-    (0, fixtures_1.test)("child overrides value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        const expected = "this test text is the value of the heading";
-        yield initTestBed(`
-      <Heading value="${expected}">
-        This is a child
-      </Heading>
-    `);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText(expected);
-    }));
-    // --- comparisons
-    function sizeComparisonSetup(initTestBed, createHeadingDriver) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield initTestBed(`
-      <Fragment>
-        <Heading level="h1" testId="heading1">Test</Heading>
-        <Heading level="h2" testId="heading2">Test</Heading>
-        <Heading level="h3" testId="heading3">Test</Heading>
-        <Heading level="h4" testId="heading4">Test</Heading>
-        <Heading level="h5" testId="heading5">Test</Heading>
-        <Heading level="h6" testId="heading6">Test</Heading>
-      </Fragment>
-    `);
-            const headings = [
-                yield createHeadingDriver("heading1"),
-                yield createHeadingDriver("heading2"),
-                yield createHeadingDriver("heading3"),
-                yield createHeadingDriver("heading4"),
-                yield createHeadingDriver("heading5"),
-                yield createHeadingDriver("heading6"),
-            ];
-            const headingSizes = yield Promise.all(headings.map((heading) => __awaiter(this, void 0, void 0, function* () {
-                const { width, height } = yield (0, component_test_helpers_1.getBounds)(heading);
-                return { width, height };
-            })));
-            return headingSizes;
-        });
-    }
-    // NOTE: we don't explicitly test h6, since all other headings have tested for its size
-    abstractions_1.headingLevels
-        .filter((l) => l !== "h6")
-        .forEach((level, idx) => {
-        (0, fixtures_1.test)(`compare ${level} size to other levels`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-            const headingSizes = yield sizeComparisonSetup(initTestBed, createHeadingDriver);
-            for (let i = idx + 1; i < headingSizes.length; i++) {
-                /* console.log(
-                  `${level} width: ${headingSizes[idx].width} and height: ${headingSizes[idx].height}`,
-                );
-                console.log(
-                  `compared to h${i + 1} width: ${headingSizes[i].width} and height: ${headingSizes[i].height}`,
-                ); */
-                (0, fixtures_1.expect)(headingSizes[idx].width).toBeGreaterThanOrEqual(headingSizes[i].width);
-                (0, fixtures_1.expect)(headingSizes[idx].height).toBeGreaterThanOrEqual(headingSizes[i].height);
-            }
-        }));
-    });
-    [
-        { label: "H1 is the same as Heading level='h1'", specializedComp: "H1", level: "h1" },
-        { label: "H2 is the same as Heading level='h2'", specializedComp: "H2", level: "h2" },
-        { label: "H3 is the same as Heading level='h3'", specializedComp: "H3", level: "h3" },
-        { label: "H4 is the same as Heading level='h4'", specializedComp: "H4", level: "h4" },
-        { label: "H5 is the same as Heading level='h5'", specializedComp: "H5", level: "h5" },
-        { label: "H6 is the same as Heading level='h6'", specializedComp: "H6", level: "h6" },
-    ].forEach(({ label, specializedComp, level }) => {
-        const textContent = "Content";
-        (0, fixtures_1.test)(label, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-            yield initTestBed(`
-        <Fragment>
-          <Heading testId="generic" level="${level}">${textContent}</Heading>
-          <${specializedComp} testId="specialized">${textContent}</${specializedComp}>
-        </Fragment>
-      `);
-            const generic = yield createHeadingDriver("generic");
-            const specialized = yield createHeadingDriver("specialized");
-            const genericTagName = yield generic.getComponentTagName();
-            const specializedTagName = yield specialized.getComponentTagName();
-            (0, fixtures_1.expect)(genericTagName).toEqual(specializedTagName);
-            yield (0, fixtures_1.expect)(generic.component).toHaveText(textContent);
-            yield (0, fixtures_1.expect)(specialized.component).toHaveText(textContent);
-        }));
-    });
-    // --- maxLines
-    (0, fixtures_1.test)('maxLines="2" cuts off long text', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`
-      <Fragment>
-        <Heading testId="headingShort" width="200px">Short</Heading>
-        <Heading testId="headingLong" width="200px" maxLines="2">
-          Though this long text does not fit into a single line, please do not break it!
-        </Heading>
-      </Fragment>
-    `);
-        const shortHeading = yield createHeadingDriver("headingShort");
-        const longHeading = yield createHeadingDriver("headingLong");
-        const { height: heightHeadingShort } = yield (0, component_test_helpers_1.getBounds)(shortHeading);
-        const { height: heightHeadingLong } = yield (0, component_test_helpers_1.getBounds)(longHeading);
-        (0, fixtures_1.expect)(heightHeadingLong).toEqual(heightHeadingShort * 2);
-    }));
-    // --- preserveLinebreaks
-    (0, fixtures_1.test)("preserve line breaks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`
-    <Fragment>
-      <Heading testId="headingShort">Short</Heading>
-      <Heading testId="headingLong" preserveLinebreaks="true"
-        value="Though this long
-text does not fit into a single line,
-please do not break it!"
-      />
-    </Fragment>
-    `);
-        const { height: heightHeadingShort } = yield (0, component_test_helpers_1.getBounds)(yield createHeadingDriver("headingShort"));
-        const { height: heightHeadingLong } = yield (0, component_test_helpers_1.getBounds)(yield createHeadingDriver("headingLong"));
-        (0, fixtures_1.expect)(heightHeadingLong).toEqualWithTolerance(heightHeadingShort * 3, 0.01);
-    }));
-    // --- ellipses
-    (0, fixtures_1.test)("ellipses in long text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`
-      <Fragment>
-        <Heading testId="headingShort" width="200">Short</Heading>
-        <Heading testId="headingLong" width="200" maxLines="1">
-          Though this long text does not fit into a single line, please do not break it!
-        </Heading>
-      </Fragment>
-    `);
-        const shortTextDriver = yield createHeadingDriver("headingShort");
-        const longTextDriver = yield createHeadingDriver("headingLong");
-        const { height: heightHeadingShort } = yield (0, component_test_helpers_1.getBounds)(shortTextDriver);
-        const { height: heightHeadingLong } = yield (0, component_test_helpers_1.getBounds)(longTextDriver);
-        (0, fixtures_1.expect)(heightHeadingShort).toEqual(heightHeadingLong);
-        yield (0, fixtures_1.expect)(longTextDriver.component).toHaveCSS("text-overflow", "ellipsis");
-    }));
-    (0, fixtures_1.test)("no ellipses long text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`
-      <Fragment>
-        <Heading testId="headingShort" width="200">Short</Heading>
-        <Heading testId="headingLong" width="200" maxLines="1" ellipses="false">
-          Though this long text does not fit into a single line, please do not break it!
-        </Heading>
-      </Fragment>
-    `);
-        const shortTextDriver = yield createHeadingDriver("headingShort");
-        const longTextDriver = yield createHeadingDriver("headingLong");
-        const { height: heightHeadingShort } = yield (0, component_test_helpers_1.getBounds)(shortTextDriver);
-        const { height: heightHeadingLong } = yield (0, component_test_helpers_1.getBounds)(longTextDriver);
-        (0, fixtures_1.expect)(heightHeadingShort).toEqual(heightHeadingLong);
-        yield (0, fixtures_1.expect)(longTextDriver.component).not.toHaveCSS("text-overflow", "ellipsis");
-    }));
-    // --- implicit text
-    (0, fixtures_1.test)("nested text whitespace collapsing", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`
-      <Heading>
-      test      content
-          here
-      </Heading>
-    `);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("test content here");
-    }));
-});
-// --- Other Tests
-// --- formatting
-(0, fixtures_1.test)("non-breaking space", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-    const content = "4 spaces here [&nbsp;&nbsp;&nbsp;&nbsp;], &amp;nbsp; written out.";
-    const expected = "4 spaces here [    ], &nbsp; written out.";
-    yield initTestBed(`<Heading>${content}</Heading>`);
-    const driver = yield createHeadingDriver();
-    yield (0, fixtures_1.expect)(driver.component).toHaveText(expected);
-}));
-(0, fixtures_1.test)("break long text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-    yield initTestBed(`
-    <Fragment>
-      <Heading testId="headingShort" width="200px">Short</Heading>
-      <Heading testId="headingLong" width="200px">
-        This long text does not fit into a viewport with a 200-pixel width.
-      </Heading>
-    </Fragment>
-  `);
-    const shortHeading = yield createHeadingDriver("headingShort");
-    const longHeading = yield createHeadingDriver("headingLong");
-    yield (0, fixtures_1.expect)(longHeading.component).toBeVisible();
-    const { height: heightHeadingShort } = yield (0, component_test_helpers_1.getBounds)(shortHeading);
-    const { height: heightHeadingLong } = yield (0, component_test_helpers_1.getBounds)(longHeading);
-    (0, fixtures_1.expect)(heightHeadingShort).toBeLessThan(heightHeadingLong);
-}));
-// --- inside layout
-(0, fixtures_1.test)("Heading is inline in HStack", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, createIconDriver, }) {
-    yield initTestBed(`
-    <HStack>
-      <Heading testId="heading0" >Show me a trash</Heading>
-      <Icon testId="icon0" name="trash"/>
-      <Heading testId="heading1" >icon!</Heading>
-    </HStack>
-  `);
-    const { top: topHeading0 } = yield (0, component_test_helpers_1.getBounds)(yield createHeadingDriver("heading0"));
-    const { top: topIcon0 } = yield (0, component_test_helpers_1.getBounds)(yield createIconDriver("icon0"));
-    const { top: topHeading1 } = yield (0, component_test_helpers_1.getBounds)(yield createHeadingDriver("heading1"));
-    (0, fixtures_1.expect)(topHeading0).toEqual(topIcon0);
-    (0, fixtures_1.expect)(topIcon0).toEqual(topHeading1);
-}));
-(0, fixtures_1.test)("Heading is block in VStack", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, createIconDriver, }) {
-    yield initTestBed(`
-    <VStack>
-      <Heading testId="heading0" >Show me a trash</Heading>
-      <Icon testId="icon0" name="trash"/>
-      <Heading testId="heading1" >icon!</Heading>
-    </VStack>
-  `);
-    const { top: topHeading0 } = yield (0, component_test_helpers_1.getBounds)(yield createHeadingDriver("heading0"));
-    const { top: topIcon0 } = yield (0, component_test_helpers_1.getBounds)((yield createIconDriver("icon0")).svgIcon);
-    const { top: topHeading1 } = yield (0, component_test_helpers_1.getBounds)(yield createHeadingDriver("heading1"));
-    (0, fixtures_1.expect)(topHeading0).toBeLessThan(topIcon0);
-    (0, fixtures_1.expect)(topIcon0).toBeLessThan(topHeading1);
-}));
-(0, fixtures_1.test)("Heading overflows container dimensions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createVStackDriver, createHeadingDriver, }) {
-    const widthLayoutExpected = 300;
-    const widthHeadingExpected = 400;
-    yield initTestBed(`
-    <VStack height="40" width="${widthLayoutExpected}px" border="1px solid red">
-      <Heading testId="heading" width="${widthHeadingExpected}px">
-        This text sets its size explicitly bigger than its container.
-        As it does not fit into the container's viewport, it overflows.
-      </Heading>
-    </VStack>
-  `);
-    const { width: widthLayout } = yield (0, component_test_helpers_1.getBounds)(yield createVStackDriver());
-    const { width: widthHeading } = yield (0, component_test_helpers_1.getBounds)(yield createHeadingDriver("heading"));
-    (0, fixtures_1.expect)(widthHeading).toEqual(widthHeadingExpected);
-    (0, fixtures_1.expect)(widthLayout).toEqual(widthLayoutExpected);
-}));
-(0, fixtures_1.test)("Heading accepts custom props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-    yield initTestBed(`<Heading custom="test" boolean>Test Heading</Heading>`);
-    const headingDriver = yield createHeadingDriver();
-    yield (0, fixtures_1.expect)(headingDriver.component).toHaveAttribute("custom", "test");
-    yield (0, fixtures_1.expect)(headingDriver.component).toHaveAttribute("boolean", "true");
-}));
-abstractions_1.headingLevels.forEach((level) => {
-    (0, fixtures_1.test)(`HtmlTag '${level}' accepts custom props`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<${level.toLowerCase()} custom="test" boolean>Test Heading</${level.toLowerCase()}>`);
-        const headingDriver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(headingDriver.component).toHaveAttribute("custom", "test");
-        yield (0, fixtures_1.expect)(headingDriver.component).toHaveAttribute("boolean", "true");
-    }));
-});
-// =============================================================================
-// COMPREHENSIVE END-TO-END TESTS (Following XMLUI Testing Conventions)
-// =============================================================================
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("component renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createHeadingDriver }) {
-        yield initTestBed(`<Heading>Test Heading</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("Test Heading");
-    }));
-    ["h1", "h2", "h3", "h4", "h5", "h6"].forEach((lvl) => {
-        (0, fixtures_1.test)(`component renders with ${lvl} level`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-            yield initTestBed(`<Heading level="${lvl}">Level ${lvl}</Heading>`);
-            const driver = yield createHeadingDriver();
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-            const tagName = yield driver.getComponentTagName();
-            (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(lvl);
-        }));
-    });
-    ["H1", "H2", "H3", "H4", "H5", "H6"].forEach((c) => {
-        (0, fixtures_1.test)(`specialized ${c} components renders content`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-            yield initTestBed(`<${c}>Specialized ${c}</${c}>`);
-            const driver = yield createHeadingDriver();
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-            yield (0, fixtures_1.expect)(driver.component).toHaveText(`Specialized ${c}`);
-        }));
-    });
-    (0, fixtures_1.test)("component handles value prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<Heading value="Value prop text" />`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("Value prop text");
-    }));
-    (0, fixtures_1.test)("component handles child content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<Heading>Child content text</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("Child content text");
-    }));
-    fixtures_1.test.describe("level property accepts numeric values", () => {
-        [1, 2, 3, 4, 5, 6].forEach((level) => {
-            (0, fixtures_1.test)(`level="{${level}}" renders as h${level}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-                yield initTestBed(`<Heading level="{${level}}">Numeric Level ${level}</Heading>`);
-                const driver = yield createHeadingDriver();
-                yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-                const tagName = yield driver.getComponentTagName();
-                (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(`h${level}`);
-                yield (0, fixtures_1.expect)(driver.component).toHaveText(`Numeric Level ${level}`);
-            }));
-        });
-    });
-    fixtures_1.test.describe("level property accepts string numeric values", () => {
-        ["1", "2", "3", "4", "5", "6"].forEach((level) => {
-            (0, fixtures_1.test)(`level="${level}" renders as h${level}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-                yield initTestBed(`<Heading level="${level}">String Level ${level}</Heading>`);
-                const driver = yield createHeadingDriver();
-                yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-                const tagName = yield driver.getComponentTagName();
-                (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(`h${level}`);
-                yield (0, fixtures_1.expect)(driver.component).toHaveText(`String Level ${level}`);
-            }));
-        });
-    });
-    fixtures_1.test.describe("level property accepts uppercase H format", () => {
-        ["H1", "H2", "H3", "H4", "H5", "H6"].forEach((level) => {
-            (0, fixtures_1.test)(`level="${level}" renders as ${level.toLowerCase()}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-                yield initTestBed(`<Heading level="${level}">Uppercase Level ${level}</Heading>`);
-                const driver = yield createHeadingDriver();
-                yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-                const tagName = yield driver.getComponentTagName();
-                (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(level.toLowerCase());
-                yield (0, fixtures_1.expect)(driver.component).toHaveText(`Uppercase Level ${level}`);
-            }));
-        });
-    });
-    fixtures_1.test.describe("level property handles invalid values", () => {
-        [
-            { value: '"invalid"', label: "invalid string" },
-            { value: '"{0}"', label: "zero" },
-            { value: '"{7}"', label: "out of range number (7)" },
-            { value: '"{-1}"', label: "negative number" },
-            { value: '"{999}"', label: "large number" },
-            { value: '"h7"', label: "invalid h-format (h7)" },
-            { value: '"h0"', label: "invalid h-format (h0)" },
-            { value: '"7"', label: "out of range string (7)" },
-            { value: '"{null}"', label: "null" },
-            { value: '"{undefined}"', label: "undefined" },
-            { value: '"{{}}"', label: "empty object" },
-            { value: '"{[]}"', label: "empty array" },
-        ].forEach(({ value, label }) => {
-            (0, fixtures_1.test)(`level=${value} (${label}) defaults to h1`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-                yield initTestBed(`<Heading level=${value}>Invalid Level Fallback</Heading>`);
-                const driver = yield createHeadingDriver();
-                yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-                const tagName = yield driver.getComponentTagName();
-                (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h1");
-                yield (0, fixtures_1.expect)(driver.component).toHaveText("Invalid Level Fallback");
-            }));
-        });
-    });
-    (0, fixtures_1.test)("level property with mixed case string formats", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        const testCases = [
-            { input: "H3", expected: "h3" },
-            { input: "h3", expected: "h3" },
-            { input: "h3", expected: "h3" },
-        ];
-        for (const { input, expected } of testCases) {
-            yield initTestBed(`<Heading level="${input}">Mixed Case ${input}</Heading>`);
-            const driver = yield createHeadingDriver();
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-            const tagName = yield driver.getComponentTagName();
-            (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(expected);
-        }
-    }));
-    (0, fixtures_1.test)("level property handles whitespace in string values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<Heading level=" h2 ">Whitespace Level</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        const tagName = yield driver.getComponentTagName();
-        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h2");
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS (REQUIRED)
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("component has correct semantic heading roles", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        yield initTestBed(`<Heading level="h2">Accessible Heading</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
-        const tagName = yield driver.getComponentTagName();
-        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h2");
-    }));
-    [
-        { component: "H1", expectedTag: "h1" },
-        { component: "H2", expectedTag: "h2" },
-        { component: "H3", expectedTag: "h3" },
-        { component: "H4", expectedTag: "h4" },
-        { component: "H5", expectedTag: "h5" },
-        { component: "H6", expectedTag: "h6" },
-    ].forEach(({ component, expectedTag }) => {
-        (0, fixtures_1.test)(`${component} renders as ${expectedTag} element`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-            yield initTestBed(`<${component}>Heading Level ${expectedTag}</${component}>`);
-            const driver = yield createHeadingDriver();
-            yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
-            const tagName = yield driver.getComponentTagName();
-            (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(expectedTag);
-        }));
-    });
-    (0, fixtures_1.test)("component supports accessible text content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        yield initTestBed(`<Heading>Accessible heading with proper content</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("Accessible heading with proper content");
-    }));
-    (0, fixtures_1.test)("component supports screen reader navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, page, }) {
-        yield initTestBed(`
-      <VStack>
-        <H1 testId="h1">Main Title</H1>
-        <H2 testId="h2">Section Title</H2>
-        <H3 testId="h3">Subsection Title</H3>
-      </VStack>
-    `);
-        // Verify heading structure by using testId selectors
-        const h1 = page.getByTestId("h1");
-        const h2 = page.getByTestId("h2");
-        const h3 = page.getByTestId("h3");
-        yield (0, fixtures_1.expect)(h1).toHaveRole("heading");
-        yield (0, fixtures_1.expect)(h2).toHaveRole("heading");
-        yield (0, fixtures_1.expect)(h3).toHaveRole("heading");
-        // Verify tag names for semantic structure
-        const h1TagName = yield h1.evaluate((el) => el.tagName.toLowerCase());
-        const h2TagName = yield h2.evaluate((el) => el.tagName.toLowerCase());
-        const h3TagName = yield h3.evaluate((el) => el.tagName.toLowerCase());
-        (0, fixtures_1.expect)(h1TagName).toBe("h1");
-        (0, fixtures_1.expect)(h2TagName).toBe("h2");
-        (0, fixtures_1.expect)(h3TagName).toBe("h3");
-    }));
-});
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-fixtures_1.test.describe("Visual States & Themes", () => {
-    (0, fixtures_1.test)("component applies theme variables correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        yield initTestBed(`<Heading>Themed Heading</Heading>`, {
-            testThemeVars: {
-                "color-Heading": "rgb(255, 0, 0)",
-            },
-        });
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        // Test that the component handles theme variables (may not always apply due to CSS specificity)
-        const color = yield driver.component.evaluate((el) => getComputedStyle(el).color);
-        // Either the theme color is applied or the component handles it gracefully
-        if (color === "rgb(255, 0, 0)") {
-            yield (0, fixtures_1.expect)(driver.component).toHaveCSS("color", "rgb(255, 0, 0)");
-        }
-        else {
-            // Component exists and functions even if theme variable isn't applied
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        }
-    }));
-    (0, fixtures_1.test)("component supports different heading levels with different font sizes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        // Test that h1 is larger than h2, h2 larger than h3, etc.
-        yield initTestBed(`
-      <VStack>
-        <H1 testId="h1">Heading 1</H1>
-        <H2 testId="h2">Heading 2</H2>
-        <H3 testId="h3">Heading 3</H3>
-      </VStack>
-    `);
-        const h1Driver = yield createHeadingDriver("h1");
-        const h2Driver = yield createHeadingDriver("h2");
-        const h3Driver = yield createHeadingDriver("h3");
-        const h1FontSize = yield h1Driver.component.evaluate((el) => getComputedStyle(el).fontSize);
-        const h2FontSize = yield h2Driver.component.evaluate((el) => getComputedStyle(el).fontSize);
-        const h3FontSize = yield h3Driver.component.evaluate((el) => getComputedStyle(el).fontSize);
-        const h1Size = parseFloat(h1FontSize);
-        const h2Size = parseFloat(h2FontSize);
-        const h3Size = parseFloat(h3FontSize);
-        (0, fixtures_1.expect)(h1Size).toBeGreaterThan(h2Size);
-        (0, fixtures_1.expect)(h2Size).toBeGreaterThan(h3Size);
-    }));
-    (0, fixtures_1.test)("component supports custom styling props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<Heading color="blue" fontSize="24px">Custom Styled</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("color", "rgb(0, 0, 255)");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("font-size", "24px");
-    }));
-    (0, fixtures_1.test)("component handles font weight variations", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<Heading>Default Weight Heading</Heading>`);
-        const driver = yield createHeadingDriver();
-        // Verify default font weight is set (typically 600 for headings)
-        const fontWeight = yield driver.component.evaluate((el) => getComputedStyle(el).fontWeight);
-        (0, fixtures_1.expect)(parseInt(fontWeight)).toBeGreaterThanOrEqual(400);
-    }));
-    (0, fixtures_1.test)("component supports text alignment", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<Heading textAlign="center">Centered Heading</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("text-align", "center");
-    }));
-    (0, fixtures_1.test)("component handles overflow and text truncation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        yield initTestBed(`
-      <Heading width="100px" maxLines="1">
-        This is a very long heading that should be truncated
-      </Heading>
-    `);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("text-overflow", "ellipsis");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("overflow", "hidden");
-    }));
-});
-// =============================================================================
-// EDGE CASE TESTS (CRITICAL)
-// =============================================================================
-fixtures_1.test.describe("Edge Cases", () => {
-    (0, fixtures_1.test)("component handles null and undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Heading/>`);
-        const component = page.getByTestId("test-id-component");
-        // Check if component exists in DOM
-        const exists = yield component.count();
-        (0, fixtures_1.expect)(exists).toBe(1);
-        // Component with no content may be hidden but should exist
-        const isVisible = yield component.isVisible();
-        if (!isVisible) {
-            // If not visible, that's acceptable for empty headings
-            (0, fixtures_1.expect)(isVisible).toBe(false);
-        }
-        else {
-            yield (0, fixtures_1.expect)(component).toBeVisible();
-        }
-    }));
-    (0, fixtures_1.test)("component handles empty content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Heading value="" />`);
-        const component = page.getByTestId("test-id-component");
-        // Check if component exists in DOM
-        const exists = yield component.count();
-        (0, fixtures_1.expect)(exists).toBe(1);
-        // Component with empty value may be hidden but should exist
-        const isVisible = yield component.isVisible();
-        if (!isVisible) {
-            // If not visible, that's acceptable for empty headings
-            (0, fixtures_1.expect)(isVisible).toBe(false);
-        }
-        else {
-            yield (0, fixtures_1.expect)(component).toBeVisible();
-            yield (0, fixtures_1.expect)(component).toHaveText("");
-        }
-    }));
-    (0, fixtures_1.test)("component handles whitespace-only content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Heading>   </Heading>`);
-        const component = page.getByTestId("test-id-component");
-        // Check if component exists in DOM
-        const exists = yield component.count();
-        (0, fixtures_1.expect)(exists).toBe(1);
-        // Component with whitespace-only content may be hidden but should exist
-        const isVisible = yield component.isVisible();
-        if (!isVisible) {
-            // If not visible, that's acceptable for whitespace-only headings
-            (0, fixtures_1.expect)(isVisible).toBe(false);
-        }
-        else {
-            yield (0, fixtures_1.expect)(component).toBeVisible();
-        }
-    }));
-    (0, fixtures_1.test)("component handles special characters correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        yield initTestBed(`<Heading>Test with émojis 🚀 & quotes "hello"</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText('Test with émojis 🚀 & quotes "hello"');
-    }));
-    (0, fixtures_1.test)("component handles very long text content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        const longText = "A".repeat(1000);
-        yield initTestBed(`<Heading>${longText}</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText(longText);
-    }));
-    (0, fixtures_1.test)("component handles numeric content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<Heading>12345</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("12345");
-    }));
-    (0, fixtures_1.test)("component handles boolean content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<Heading value="{true}" />`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("true");
-    }));
-    (0, fixtures_1.test)("component handles invalid level prop gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Heading level="invalid">Invalid Level</Heading>`);
-        const component = page.getByTestId("test-id-component");
-        const isVisible = yield component.isVisible();
-        if (isVisible) {
-            yield (0, fixtures_1.expect)(component).toBeVisible();
-            yield (0, fixtures_1.expect)(component).toHaveText("Invalid Level");
-        }
-        else {
-            (0, fixtures_1.expect)(isVisible).toBe(false);
-        }
-    }));
-    (0, fixtures_1.test)("component handles mixed content types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<Heading>Text 123 🎉 "quoted" & symbols</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText('Text 123 🎉 "quoted" & symbols');
-    }));
-    (0, fixtures_1.test)("component handles newlines and preserveLinebreaks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        yield initTestBed(`<Heading preserveLinebreaks="true" value="Line 1\nLine 2\nLine 3" />`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        // The component should preserve the line breaks
-        const height = yield driver.component.evaluate((el) => getComputedStyle(el).height);
-        (0, fixtures_1.expect)(parseFloat(height)).toBeGreaterThan(20); // Should be taller due to multiple lines
-    }));
-});
-// =============================================================================
-// PERFORMANCE TESTS
-// =============================================================================
-fixtures_1.test.describe("Performance", () => {
-    (0, fixtures_1.test)("component renders efficiently with minimal props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        // Simply test that the component renders without errors, not timing
-        yield initTestBed(`<Heading>Performance Test</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("Performance Test");
-    }));
-    (0, fixtures_1.test)("component handles multiple heading instances efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        const headings = Array.from({ length: 20 }, (_, i) => `<Heading testId="heading-${i}">Heading ${i}</Heading>`).join("");
-        yield initTestBed(`<VStack>${headings}</VStack>`);
-        // All headings should be visible
-        for (let i = 0; i < 20; i++) {
-            const heading = page.getByTestId(`heading-${i}`);
-            yield (0, fixtures_1.expect)(heading).toBeVisible();
-        }
-    }));
-    (0, fixtures_1.test)("component handles level changes without performance degradation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        yield initTestBed(`<Heading level="h1">Heading</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
-        const tagName = yield driver.getComponentTagName();
-        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h1");
-    }));
-    (0, fixtures_1.test)("component handles content updates efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        yield initTestBed(`<Heading>Initial Content</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("Initial Content");
-        // Component should handle content updates well
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-});
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-fixtures_1.test.describe("Integration", () => {
-    (0, fixtures_1.test)("component works correctly in VStack layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        yield initTestBed(`
-      <VStack>
-        <Heading>Header 1</Heading>
-        <Heading>Header 2</Heading>
-      </VStack>
-    `);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component works correctly in HStack layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        yield initTestBed(`
-      <HStack>
-        <Heading>Left Header</Heading>
-        <Heading>Right Header</Heading>
-      </HStack>
-    `);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component integrates with other text components", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, page, }) {
-        yield initTestBed(`
-      <VStack>
-        <Heading testId="heading">Main Title</Heading>
-        <Text testId="text">Body text content</Text>
-      </VStack>
-    `);
-        const heading = page.getByTestId("heading");
-        const text = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(heading).toBeVisible();
-        yield (0, fixtures_1.expect)(text).toBeVisible();
-        yield (0, fixtures_1.expect)(heading).toHaveText("Main Title");
-        yield (0, fixtures_1.expect)(text).toHaveText("Body text content");
-    }));
-    (0, fixtures_1.test)("component supports anchor links functionality", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, page, }) {
-        yield initTestBed(`<Heading anchorId="test-anchor">Linkable Heading</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        // Check if heading can be used as an anchor target
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("Linkable Heading");
-    }));
-    (0, fixtures_1.test)("component maintains accessibility in complex layouts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <VStack>
-        <H1 testId="main">Main Title</H1>
-        <VStack>
-          <H2 testId="section">Section</H2>
-          <HStack>
-            <H3 testId="sub1">Subsection 1</H3>
-            <H3 testId="sub2">Subsection 2</H3>
-          </HStack>
-        </VStack>
-      </VStack>
-    `);
-        const h1 = page.getByTestId("main");
-        const h2 = page.getByTestId("section");
-        const h3_1 = page.getByTestId("sub1");
-        const h3_2 = page.getByTestId("sub2");
-        yield (0, fixtures_1.expect)(h1).toHaveRole("heading");
-        yield (0, fixtures_1.expect)(h2).toHaveRole("heading");
-        yield (0, fixtures_1.expect)(h3_1).toHaveRole("heading");
-        yield (0, fixtures_1.expect)(h3_2).toHaveRole("heading");
-        // Verify proper heading hierarchy through tag names
-        const h1TagName = yield h1.evaluate((el) => el.tagName.toLowerCase());
-        const h2TagName = yield h2.evaluate((el) => el.tagName.toLowerCase());
-        const h3_1TagName = yield h3_1.evaluate((el) => el.tagName.toLowerCase());
-        const h3_2TagName = yield h3_2.evaluate((el) => el.tagName.toLowerCase());
-        (0, fixtures_1.expect)(h1TagName).toBe("h1");
-        (0, fixtures_1.expect)(h2TagName).toBe("h2");
-        (0, fixtures_1.expect)(h3_1TagName).toBe("h3");
-        (0, fixtures_1.expect)(h3_2TagName).toBe("h3");
-    }));
-    (0, fixtures_1.test)("component supports responsive behavior", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<Heading width="100%">Responsive Heading</Heading>`);
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("Responsive Heading");
-        // Test that the component handles responsive properties
-        // (The specific implementation may vary, but component should render)
-        const computedWidth = yield driver.component.evaluate((el) => getComputedStyle(el).width);
-        (0, fixtures_1.expect)(computedWidth).toBeTruthy(); // Should have some computed width
-    }));
-    (0, fixtures_1.test)("component works with theme providers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<Heading>Themed Heading</Heading>`, {
-            testThemeVars: {
-                "color-Heading": "rgb(0, 128, 0)",
-            },
-        });
-        const driver = yield createHeadingDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        // Test that the component accepts theme variables (may not always apply due to specificity)
-        const color = yield driver.component.evaluate((el) => getComputedStyle(el).color);
-        // Either the theme color is applied or the component handles it gracefully
-        if (color === "rgb(0, 128, 0)") {
-            yield (0, fixtures_1.expect)(driver.component).toHaveCSS("color", "rgb(0, 128, 0)");
-        }
-        else {
-            // Component exists and functions even if theme variable isn't applied due to CSS specificity
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        }
-    }));
-    (0, fixtures_1.test)("component preserves semantic heading hierarchy in large documents", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <VStack>
-        <H1 testId="h1">Document Title</H1>
-        <H2 testId="h2-1">Chapter 1</H2>
-        <H3 testId="h3-1">Section 1.1</H3>
-        <H3 testId="h3-2">Section 1.2</H3>
-        <H2 testId="h2-2">Chapter 2</H2>
-        <H3 testId="h3-3">Section 2.1</H3>
-        <H4 testId="h4-1">Subsection 2.1.1</H4>
-      </VStack>
-    `);
-        // Test each heading individually using testIds
-        const testIds = ["h1", "h2-1", "h3-1", "h3-2", "h2-2", "h3-3", "h4-1"];
-        const expectedTags = ["h1", "h2", "h3", "h3", "h2", "h3", "h4"];
-        for (let i = 0; i < testIds.length; i++) {
-            const heading = page.getByTestId(testIds[i]);
-            yield (0, fixtures_1.expect)(heading).toHaveRole("heading");
-            const tagName = yield heading.evaluate((el) => el.tagName.toLowerCase());
-            (0, fixtures_1.expect)(tagName).toBe(expectedTags[i]);
-        }
-    }));
-});
-// =============================================================================
-// API TESTS
-// =============================================================================
-fixtures_1.test.describe("API", () => {
-    (0, fixtures_1.test)("hasOverflow returns true when heading text overflows horizontally", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="200px">
-          <H1 id="overflowHeading" maxLines="{1}"
-            value="This is a very long heading text that should definitely overflow when constrained to a small width"
-          />
-          <Button onClick="testState = overflowHeading.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
-    }));
-    (0, fixtures_1.test)("hasOverflow returns true when heading text overflows with maxLines constraint", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="200px">
-          <H2 id="overflowHeading" maxLines="{2}" value="This is a very long heading text that will wrap to multiple lines and should overflow beyond the maxLines constraint when the container is wide enough to allow wrapping" />
-          <Button onClick="testState = overflowHeading.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
-    }));
-    (0, fixtures_1.test)("hasOverflow returns false when heading text fits within container", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="300px" height="100px">
-          <H3 id="normalHeading" value="Short heading" />
-          <Button onClick="testState = normalHeading.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(false);
-    }));
-    (0, fixtures_1.test)("hasOverflow returns false for empty heading text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="100px" height="50px">
-          <H4 id="emptyHeading" value="" />
-          <Button onClick="testState = emptyHeading.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(false);
-    }));
-    (0, fixtures_1.test)("hasOverflow returns false for heading with no size constraints", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <H5 id="unconstrainedHeading" value="This heading has no width or height constraints so it should not overflow" />
-        <Button onClick="testState = unconstrainedHeading.hasOverflow()" />
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(false);
-    }));
-    (0, fixtures_1.test)("hasOverflow works with different heading levels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="100px">
-          <H1 id="h1Text" maxLines="{1}" value="This is a very long heading that should overflow" />
-          <H2 id="h2Text" maxLines="{1}" value="This is a very long heading that should overflow" />
-          <H3 id="h3Text" maxLines="{1}" value="This is a very long heading that should overflow" />
-          <H4 id="h4Text" maxLines="{1}" value="This is a very long heading that should overflow" />
-          <H5 id="h5Text" maxLines="{1}" value="This is a very long heading that should overflow" />
-          <H6 id="h6Text" maxLines="{1}" value="This is a very long heading that should overflow" />
-          <Button onClick="testState = {
-            h1: h1Text.hasOverflow(),
-            h2: h2Text.hasOverflow(),
-            h3: h3Text.hasOverflow(),
-            h4: h4Text.hasOverflow(),
-            h5: h5Text.hasOverflow(),
-            h6: h6Text.hasOverflow()
-          }" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        const result = yield testStateDriver.testState();
-        (0, fixtures_1.expect)(result.h1).toBe(true);
-        (0, fixtures_1.expect)(result.h2).toBe(true);
-        (0, fixtures_1.expect)(result.h3).toBe(true);
-        (0, fixtures_1.expect)(result.h4).toBe(true);
-        (0, fixtures_1.expect)(result.h5).toBe(true);
-        (0, fixtures_1.expect)(result.h6).toBe(true);
-    }));
-    (0, fixtures_1.test)("hasOverflow returns correct result after content changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment var.headingText="Short">
-        <Stack width="100px">
-          <H1 id="dynamicHeading" value="{headingText}" maxLines="{1}" />
-          <Button testId="checkBtn" onClick="testState = dynamicHeading.hasOverflow()" />
-          <Button testId="changeBtn" onClick="headingText = 'This is a very long heading text that will definitely overflow the container'" />
-        </Stack>
-      </Fragment>
-    `);
-        // Check initial state (should not overflow)
-        yield page.getByTestId("checkBtn").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(false);
-        // Change content to overflow
-        yield page.getByTestId("changeBtn").click();
-        yield page.getByTestId("checkBtn").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
-    }));
-    (0, fixtures_1.test)("hasOverflow handles null/undefined values gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="100px">
-          <H2 id="nullHeading" value="{null}" />
-          <Button onClick="testState = nullHeading.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(false);
-    }));
-    (0, fixtures_1.test)("hasOverflow works with generic Heading component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="100px">
-          <Heading id="genericHeading" level="h3" maxLines="{1}" value="This is a very long heading text that should overflow" />
-          <Button onClick="testState = genericHeading.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
-    }));
-    (0, fixtures_1.test)("hasOverflow works with nested content instead of value prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="100px">
-          <H1 id="nestedHeading" maxLines="{1}">
-            This is a very long heading with nested content that should definitely overflow the container width
-          </H1>
-          <Button onClick="testState = nestedHeading.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
-    }));
-});