xmlui 0.10.12 → 0.10.14

package/dist/scripts/src/components/Animation/Animation.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.animationComponentRenderer = exports.AnimationMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("../../components-core/renderers");
+const metadata_helpers_1 = require("../metadata-helpers");
+const AnimationNative_1 = require("./AnimationNative");
+const COMP = "Animation";
+exports.AnimationMd = (0, metadata_helpers_1.createMetadata)({
+    status: "experimental",
+    description: ``,
+    props: {
+        animation: {
+            description: `The animation object to be applied to the component`,
+        },
+        animateWhenInView: {
+            description: `Indicates whether the animation should start when the component is in view`,
+        },
+        duration: {
+            description: `The duration of the animation in milliseconds`,
+        },
+        once: {
+            description: `Indicates whether the animation should only run once`,
+            defaultValue: AnimationNative_1.defaultProps.once,
+        },
+        reverse: {
+            description: `Indicates whether the animation should run in reverse`,
+            defaultValue: AnimationNative_1.defaultProps.reverse,
+        },
+        loop: {
+            description: `Indicates whether the animation should loop`,
+            defaultValue: AnimationNative_1.defaultProps.loop,
+        },
+        delay: {
+            description: `The delay before the animation starts in milliseconds`,
+            defaultValue: AnimationNative_1.defaultProps.delay,
+        },
+    },
+    events: {
+        started: { description: `Event fired when the animation starts` },
+        stopped: { description: `Event fired when the animation stops` },
+    },
+    apis: {
+        start: { description: `Starts the animation` },
+        stop: { description: `Stops the animation` },
+    },
+});
+exports.animationComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AnimationMd, ({ registerComponentApi, renderChild, node, extractValue, lookupEventHandler }) => {
+    return ((0, jsx_runtime_1.jsx)(AnimationNative_1.Animation, { registerComponentApi: registerComponentApi, animation: extractValue(node.props.animation), onStop: lookupEventHandler("stopped"), onStart: lookupEventHandler("started"), duration: extractValue.asOptionalNumber(node.props.duration), animateWhenInView: extractValue.asOptionalBoolean(node.props.animateWhenInView), once: extractValue.asOptionalBoolean(node.props.once), reverse: extractValue.asOptionalBoolean(node.props.reverse), loop: extractValue.asOptionalBoolean(node.props.loop), delay: extractValue.asOptionalNumber(node.props.delay), children: renderChild(node.children) }));
+});

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

@@ -0,0 +1,219 @@
+"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 fixtures_1 = require("../../testing/fixtures");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<App name="Test App" testId="app"/>`);
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with different layout types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<App layout="horizontal" testId="app"/>`);
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
+        yield initTestBed(`<App layout="horizontal-sticky" testId="app"/>`);
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
+        yield initTestBed(`<App layout="condensed" testId="app"/>`);
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
+        yield initTestBed(`<App layout="condensed-sticky" testId="app"/>`);
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
+        yield initTestBed(`<App layout="vertical" testId="app"/>`);
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
+        yield initTestBed(`<App layout="vertical-sticky" testId="app"/>`);
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
+        yield initTestBed(`<App layout="vertical-full-header" testId="app"/>`);
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles layout prop changes correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createButtonDriver, }) {
+        yield initTestBed(`
+      <App var.lo="vertical" layout="{lo}" testId="app">
+        <Button testId="toggleLayout" label="Toggle" onClick="lo = 'horizontal'" />
+      </App>
+    `);
+        const buttonDriver = yield createButtonDriver("toggleLayout");
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toHaveClass(/vertical/);
+        buttonDriver.click();
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toHaveClass(/horizontal/);
+    }));
+    (0, fixtures_1.test)("sets document title from name prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const APP_NAME = "My Test Application";
+        yield initTestBed(`<App name="${APP_NAME}" testId="app"/>`);
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
+        (0, fixtures_1.expect)(yield page.title()).toBe(APP_NAME);
+    }));
+    (0, fixtures_1.test)("handles different visual states with scrolling options", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        // Test with scrollWholePage=true
+        yield initTestBed(`<App scrollWholePage="true" testId="app"/>`);
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toHaveClass(/scrollWholePage/);
+        // Test with scrollWholePage=false
+        yield initTestBed(`<App scrollWholePage="false" testId="app"/>`);
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).not.toHaveClass(/scrollWholePage/);
+    }));
+});
+// =============================================================================
+// EDGE CASE TESTS
+// =============================================================================
+fixtures_1.test.describe("Edge Cases", () => {
+    (0, fixtures_1.test)("handles undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<App testId="app" />`);
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
+        // App should use a default layout
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toHaveClass(/horizontal/);
+    }));
+    (0, fixtures_1.test)("works correctly with basic content structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App testId="app">
+        <Text testId="content">Content</Text>
+      </App>`);
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("content")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Content")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("works correctly with complex content structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App testId="app">
+        <AppHeader testId="header">Header Content</AppHeader>
+        <NavPanel testId="nav">
+          <NavLink testId="link1" to="#">Link 1</NavLink>
+          <NavGroup testId="group" label="Group">
+            <NavLink testId="nestedLink" to="#">Nested Link</NavLink>
+          </NavGroup>
+        </NavPanel>
+        <Pages fallbackPath="/">
+          <Page url="/" testId="homePage">
+            <Text testId="homeContent">Home Content</Text>
+          </Page>
+        </Pages>
+        <Footer testId="footer">Footer Content</Footer>
+      </App>`);
+        yield (0, fixtures_1.expect)(page.getByTestId("app")).toBeVisible();
+        // Test component structure
+        yield (0, fixtures_1.expect)(page.getByTestId("header")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("nav")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toBeVisible();
+        // Test content
+        yield (0, fixtures_1.expect)(page.getByText("Header Content")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Link 1")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Group")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Home Content")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Footer Content")).toBeVisible();
+    }));
+});
+// =============================================================================
+// EVENT HANDLING TESTS
+// =============================================================================
+fixtures_1.test.describe("Event Handling", () => {
+    (0, fixtures_1.test)("ready event is triggered when App component finishes rendering", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <App 
+        onReady="() => testState = 'app-ready'" 
+        testId="app"
+      />
+    `);
+        // Verify the ready event was fired
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("app-ready");
+    }));
+    (0, fixtures_1.test)("ready event is triggered for App with complex content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed }) {
+        const { testStateDriver } = yield initTestBed(`
+      <App 
+        onReady="() => testState = 'complex-app-ready'" 
+        layout="horizontal"
+        testId="app"
+      >
+        <AppHeader>
+          <property name="logoTemplate">
+            <Text value="Test App" />
+          </property>
+        </AppHeader>
+        <Pages fallbackPath="/">
+          <Page url="/">
+            <Text value="Home Page" />
+          </Page>
+        </Pages>
+        <Footer>
+          <Text value="Footer Content" />
+        </Footer>
+      </App>
+    `);
+        // Verify the ready event was fired even with complex content
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("complex-app-ready");
+    }));
+    (0, fixtures_1.test)("ready event fires only once during component lifecycle", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <App 
+        var.counter="{0}"
+        onReady="() => { counter = counter + 1; testState = counter; }" 
+        testId="app"
+      >
+        <Button 
+          testId="trigger-rerender" 
+          label="Re-render" 
+          onClick="counter = counter" 
+        />
+      </App>
+    `);
+        // Initial ready event should fire
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(1);
+        // Trigger a re-render by clicking the button
+        yield page.getByTestId("trigger-rerender").click();
+        // Counter should still be 1 (ready event doesn't fire again)
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(1);
+    }));
+    (0, fixtures_1.test)("messageReceived event is triggered when window receives a message", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <App 
+        onMessageReceived="(msg, ev) => testState = msg" 
+        testId="app"
+      />
+    `);
+        // Send a message to the window
+        yield page.evaluate(() => {
+            window.postMessage("test-message", "*");
+        });
+        // Verify the event was received and handled
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("test-message");
+    }));
+    (0, fixtures_1.test)("messageReceived event receives both message data and event object", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <App 
+        onMessageReceived="(msg, ev) => testState = { message: msg, eventType: ev.type, origin: ev.origin }" 
+        testId="app"
+      />
+    `);
+        // Send a message to the window
+        yield page.evaluate(() => {
+            window.postMessage("event-test", "*");
+        });
+        // Verify both parameters are accessible
+        yield fixtures_1.expect.poll(testStateDriver.testState).toMatchObject({
+            message: "event-test",
+            eventType: "message",
+            origin: fixtures_1.expect.any(String),
+        });
+    }));
+    (0, fixtures_1.test)("messageReceived event handles complex data objects", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <App 
+        onMessageReceived="(msg, ev) => testState = msg" 
+        testId="app"
+      />
+    `);
+        // Send a complex object as message data
+        const testData = { action: "test", payload: { id: 123, name: "test-item" } };
+        yield page.evaluate((data) => {
+            window.postMessage(data, "*");
+        }, testData);
+        // Verify the complex data is received correctly
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(testData);
+    }));
+});

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

@@ -0,0 +1,169 @@
+"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 fixtures_1 = require("../../testing/fixtures");
+const CODE = `
+  <AppHeader>
+    Hello, World!
+  </AppHeader>
+`;
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver }) {
+        yield initTestBed(`<App><AppHeader testId="header" /></App>`);
+        const driver = yield createAppHeaderDriver();
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with title prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver }) {
+        const TITLE = "Application Title";
+        yield initTestBed(`<App><AppHeader testId="header" title="${TITLE}" /></App>`);
+        const driver = yield createAppHeaderDriver();
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toContainText(TITLE);
+    }));
+    (0, fixtures_1.test)("renders with custom logo content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver, page }) {
+        yield initTestBed(`
+      <App>
+        <AppHeader testId="header">
+          <property name="logoTemplate">
+            <Icon name="star" testId="customLogo" />
+          </property>
+        </AppHeader>
+      </App>`);
+        const driver = yield createAppHeaderDriver();
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("customLogo")).toBeVisible();
+    }));
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Accessibility", () => {
+    (0, fixtures_1.test)("has correct accessibility structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver, }) {
+        // TODO: review these Copilot-created tests
+        yield initTestBed(`<App><AppHeader testId="header" title="Accessible Header" /></App>`);
+        const driver = yield createAppHeaderDriver("header");
+        // AppHeader should have a role of "banner"
+        yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("role", "banner");
+    }));
+    (0, fixtures_1.test)("properly handles focus management", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <AppHeader testId="header">
+          <NavLink testId="headerLink1" to="#">Link 1</NavLink>
+          <NavLink testId="headerLink2" to="#">Link 2</NavLink>
+        </AppHeader>
+      </App>`);
+        // Test that links within the header are keyboard focusable
+        yield page.getByTestId("headerLink1").focus();
+        yield (0, fixtures_1.expect)(page.getByTestId("headerLink1")).toBeFocused();
+        // Test tab navigation works between links
+        yield page.keyboard.press("Tab");
+        yield (0, fixtures_1.expect)(page.getByTestId("headerLink2")).toBeFocused();
+    }));
+});
+// =============================================================================
+// THEME VARIABLE TESTS
+// =============================================================================
+fixtures_1.test.describe("Theme Variables", () => {
+    (0, fixtures_1.test)("applies background color theme variable correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver, }) {
+        const EXPECTED_BG_COLOR = "rgb(0, 240, 0)";
+        yield initTestBed(`<App><AppHeader testId="header" /></App>`, {
+            testThemeVars: {
+                "backgroundColor-AppHeader": EXPECTED_BG_COLOR,
+            },
+        });
+        const driver = yield createAppHeaderDriver("header");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", EXPECTED_BG_COLOR);
+    }));
+    (0, fixtures_1.test)("applies height theme variable correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver, }) {
+        const EXPECTED_HEIGHT = "80px";
+        yield initTestBed(`<App><AppHeader testId="header" /></App>`, {
+            testThemeVars: {
+                "height-AppHeader": EXPECTED_HEIGHT,
+            },
+        });
+        const driver = yield createAppHeaderDriver("header");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("height", EXPECTED_HEIGHT);
+    }));
+    (0, fixtures_1.test)("border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(CODE, {
+            testThemeVars: {
+                "border-AppHeader": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createAppHeaderDriver()).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(CODE, {
+            testThemeVars: {
+                "borderLeft-AppHeader": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        const component = (yield createAppHeaderDriver()).component;
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+});
+// =============================================================================
+// EDGE CASE TESTS
+// =============================================================================
+fixtures_1.test.describe("Edge Cases", () => {
+    (0, fixtures_1.test)("handles undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver }) {
+        yield initTestBed(`<App><AppHeader testId="header" title="{undefined}" /></App>`);
+        const driver = yield createAppHeaderDriver("header");
+        // Component should render without errors when props are undefined
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles special characters in title prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver, }) {
+        const SPECIAL_TITLE = "应用程序 & Test – Special Character's Test 🚀 ñáéíóú ≤≥∞ «»";
+        yield initTestBed(`<App><AppHeader testId="header" title="${SPECIAL_TITLE}" /></App>`);
+        const driver = yield createAppHeaderDriver("header");
+        // Special characters should display correctly
+        yield (0, fixtures_1.expect)(driver.component).toContainText(SPECIAL_TITLE);
+    }));
+    (0, fixtures_1.test)("handles empty child components", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAppHeaderDriver }) {
+        yield initTestBed(`
+      <App>
+        <AppHeader testId="header">
+          <property name="logoTemplate"></property>
+        </AppHeader>
+      </App>
+    `);
+        const driver = yield createAppHeaderDriver("header");
+        // Component should handle empty template slots gracefully
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+});