xmlui 0.11.3 → 0.11.6

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

@@ -1,331 +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 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 horizontal layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<App layout="horizontal">test text</App>`);
-        yield (0, fixtures_1.expect)(page.getByText("test text")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with horizontal-sticky layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<App layout="horizontal-sticky">test text</App>`);
-        yield (0, fixtures_1.expect)(page.getByText("test text")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with condensed layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<App layout="condensed">test text</App>`);
-        yield (0, fixtures_1.expect)(page.getByText("test text")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with condensed-sticky layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<App layout="condensed-sticky">test text</App>`);
-        yield (0, fixtures_1.expect)(page.getByText("test text")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with vertical layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<App layout="vertical">test text</App>`);
-        yield (0, fixtures_1.expect)(page.getByText("test text")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with vertical-sticky layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<App layout="vertical-sticky">test text</App>`);
-        yield (0, fixtures_1.expect)(page.getByText("test text")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with vertical-full-header layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<App layout="vertical-full-header">test text</App>`);
-        yield (0, fixtures_1.expect)(page.getByText("test text")).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/);
-        yield 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);
-    }));
-});
-// =============================================================================
-// Drawer HANDLING TESTS
-// =============================================================================
-fixtures_1.test.describe("Drawer Handling", () => {
-    (0, fixtures_1.test)("Drawer displayed if NavPanel has no 'when'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        // Set small viewport to trigger drawer mode
-        yield page.setViewportSize({ width: 400, height: 600 });
-        yield initTestBed(`
-      <App layout="condensed">
-        <AppHeader testId="appHeader"/>
-        <NavPanel>
-          <NavGroup label="Pages">
-            <NavLink label="Page 1" to="/page1"/>
-            <NavLink label="Page 2" to="/page2"/>
-          </NavGroup>
-        </NavPanel>
-      </App>
-    `);
-        // Open drawer by clicking hamburger button
-        const appHeader = page.getByTestId("appHeader");
-        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
-        yield (0, fixtures_1.expect)(hamburgerButton).toBeVisible();
-    }));
-    (0, fixtures_1.test)("Drawer displayed if NavPanel has when='true'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        // Set small viewport to trigger drawer mode
-        yield page.setViewportSize({ width: 400, height: 600 });
-        yield initTestBed(`
-      <App layout="condensed">
-        <AppHeader testId="appHeader"/>
-        <NavPanel when="true">
-          <NavGroup label="Pages">
-            <NavLink label="Page 1" to="/page1"/>
-            <NavLink label="Page 2" to="/page2"/>
-          </NavGroup>
-        </NavPanel>
-      </App>
-    `);
-        // Open drawer by clicking hamburger button
-        const appHeader = page.getByTestId("appHeader");
-        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
-        yield (0, fixtures_1.expect)(hamburgerButton).toBeVisible();
-    }));
-    (0, fixtures_1.test)("Drawer displayed if NavPanel has when='{true}'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        // Set small viewport to trigger drawer mode
-        yield page.setViewportSize({ width: 400, height: 600 });
-        yield initTestBed(`
-      <App layout="condensed">
-        <AppHeader testId="appHeader"/>
-        <NavPanel when="{true}">
-          <NavGroup label="Pages">
-            <NavLink label="Page 1" to="/page1"/>
-            <NavLink label="Page 2" to="/page2"/>
-          </NavGroup>
-        </NavPanel>
-      </App>
-    `);
-        // Open drawer by clicking hamburger button
-        const appHeader = page.getByTestId("appHeader");
-        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
-        yield (0, fixtures_1.expect)(hamburgerButton).toBeVisible();
-    }));
-    (0, fixtures_1.test)("Drawer not displayed if NavPanel has when='false'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        // Set small viewport to trigger drawer mode
-        yield page.setViewportSize({ width: 400, height: 600 });
-        yield initTestBed(`
-      <App layout="condensed">
-        <AppHeader testId="appHeader"/>
-        <NavPanel when="false">
-          <NavGroup label="Pages">
-            <NavLink label="Page 1" to="/page1"/>
-            <NavLink label="Page 2" to="/page2"/>
-          </NavGroup>
-        </NavPanel>
-      </App>
-    `);
-        // Open drawer by clicking hamburger button
-        const appHeader = page.getByTestId("appHeader");
-        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
-        yield (0, fixtures_1.expect)(hamburgerButton).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("Drawer not displayed if NavPanel has when='{false}'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        // Set small viewport to trigger drawer mode
-        yield page.setViewportSize({ width: 400, height: 600 });
-        yield initTestBed(`
-      <App layout="condensed">
-        <AppHeader testId="appHeader"/>
-        <NavPanel when="{false}">
-          <NavGroup label="Pages">
-            <NavLink label="Page 1" to="/page1"/>
-            <NavLink label="Page 2" to="/page2"/>
-          </NavGroup>
-        </NavPanel>
-      </App>
-    `);
-        // Open drawer by clicking hamburger button
-        const appHeader = page.getByTestId("appHeader");
-        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
-        yield (0, fixtures_1.expect)(hamburgerButton).not.toBeVisible();
-    }));
-});

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

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppLayoutContext = exports.appLayouts = exports.appLayoutMd = void 0;
-exports.useAppLayoutContext = useAppLayoutContext;
-const react_1 = require("react");
-const appLayoutNames = [
-    "vertical",
-    "vertical-sticky",
-    "vertical-full-header",
-    "condensed",
-    "condensed-sticky",
-    "horizontal",
-    "horizontal-sticky",
-];
-exports.appLayoutMd = [
-    {
-        value: "vertical",
-        description: "This layout puts the navigation bar on the left side and displays its items vertically. The main content is aligned to the right (including the header and the footer), and its content is a single scroll container; every part of it moves as you scroll the page. This layout does not display the logo in the app header.",
-    },
-    {
-        value: "vertical-sticky",
-        description: "Similar to `vertical`, the header and the navigation bar dock to the top of the main content's viewport, while the footer sticks to the bottom. This layout does not display the logo in the app header.",
-    },
-    {
-        value: "vertical-full-header",
-        description: "Similar to `vertical-sticky`. However, the header and the navigation bar dock to the top of the app's window, while the footer sticks to the bottom.",
-    },
-    {
-        value: "condensed",
-        description: "Similar to `horizontal`. However, the header and the navigation bar are in a single header block. (default)",
-    },
-    {
-        value: "condensed-sticky",
-        description: "However, the header and the navigation bar are in a single header block.",
-    },
-    {
-        value: "horizontal",
-        description: "This layout stacks the layout sections in a single column in this order: header, navigation bar, main content, and footer. The application is a single scroll container; every part moves as you scroll the page.",
-    },
-    {
-        value: "horizontal-sticky",
-        description: "Similar to `horizontal`, the header and the navigation bar dock to the top of the viewport, while the footer sticks to the bottom.",
-    },
-];
-exports.appLayouts = [...appLayoutNames];
-exports.AppLayoutContext = (0, react_1.createContext)(null);
-function useAppLayoutContext() {
-    return (0, react_1.useContext)(exports.AppLayoutContext);
-}