xmlui 0.11.4 → 0.11.7

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

@@ -1,518 +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");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic functionality", () => {
-    (0, fixtures_1.test)("component renders with default props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <FlowLayout>
-        <Text testId="item1">Item 1</Text>
-        <Text testId="item2">Item 2</Text>
-        <Text testId="item3">Item 3</Text>
-      </FlowLayout>
-    `);
-        // Check that the component is visible
-        const item1 = page.getByTestId("item1");
-        const rect1 = yield item1.boundingBox();
-        const item2 = page.getByTestId("item2");
-        const rect2 = yield item2.boundingBox();
-        const item3 = page.getByTestId("item3");
-        const rect3 = yield item3.boundingBox();
-        // Check that children are rendered
-        (0, fixtures_1.expect)(rect1.height).toBe(rect2.height);
-        (0, fixtures_1.expect)(rect2.height).toBe(rect3.height);
-        (0, fixtures_1.expect)(rect1.width).toBeGreaterThan(0);
-        (0, fixtures_1.expect)(rect2.width).toBeGreaterThan(0);
-        (0, fixtures_1.expect)(rect3.width).toBeGreaterThan(0);
-        (0, fixtures_1.expect)(rect1.x).toBe(rect2.x);
-        (0, fixtures_1.expect)(rect2.x).toBe(rect3.x);
-        (0, fixtures_1.expect)(rect1.y).toBeLessThan(rect2.y);
-        (0, fixtures_1.expect)(rect2.y).toBeLessThan(rect3.y);
-    }));
-    (0, fixtures_1.test)("component renders when widths specified", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <FlowLayout>
-        <Text testId="item1" width="80px">Item 1</Text>
-        <Text testId="item2" width="80px">Item 2</Text>
-        <Text testId="item3" width="80px">Item 3</Text>
-      </FlowLayout>
-    `);
-        const item1 = page.getByTestId("item1");
-        const rect1 = yield item1.boundingBox();
-        const item2 = page.getByTestId("item2");
-        const rect2 = yield item2.boundingBox();
-        const item3 = page.getByTestId("item3");
-        const rect3 = yield item3.boundingBox();
-        // Check that children are rendered
-        (0, fixtures_1.expect)(rect1.height).toBe(rect2.height);
-        (0, fixtures_1.expect)(rect2.height).toBe(rect3.height);
-        (0, fixtures_1.expect)(rect1.width).toBeLessThanOrEqual(80);
-        (0, fixtures_1.expect)(rect2.width).toBeLessThanOrEqual(80);
-        (0, fixtures_1.expect)(rect3.width).toBeLessThanOrEqual(80);
-        (0, fixtures_1.expect)(rect1.y).toBe(rect2.y);
-        (0, fixtures_1.expect)(rect2.y).toBe(rect3.y);
-        (0, fixtures_1.expect)(rect1.x).toBeLessThan(rect2.x);
-        (0, fixtures_1.expect)(rect2.x).toBeLessThan(rect3.x);
-    }));
-    (0, fixtures_1.test)("component wraps items when they exceed container width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <FlowLayout width="280px">
-        <Text testId="item1" width="100px">Item 1</Text>
-        <Text testId="item2" width="100px">Item 2</Text>
-        <Text testId="item3" width="100px">Item 3</Text>
-      </FlowLayout>
-    `);
-        const item1 = page.getByTestId("item1");
-        const rect1 = yield item1.boundingBox();
-        const item2 = page.getByTestId("item2");
-        const rect2 = yield item2.boundingBox();
-        const item3 = page.getByTestId("item3");
-        const rect3 = yield item3.boundingBox();
-        // Check that children are rendered
-        (0, fixtures_1.expect)(rect1.height).toBe(rect2.height);
-        (0, fixtures_1.expect)(rect2.height).toBe(rect3.height);
-        (0, fixtures_1.expect)(rect1.y).toBe(rect2.y);
-        (0, fixtures_1.expect)(rect2.y).toBeLessThan(rect3.y);
-        (0, fixtures_1.expect)(rect1.x).toBeLessThan(rect2.x);
-        (0, fixtures_1.expect)(rect1.x).toBe(rect3.x);
-    }));
-    (0, fixtures_1.test)("component applies gap correctly (#1)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <FlowLayout gap="13px">
-        <Stack testId="item1" width="100px">Item 1</Stack>
-        <Stack testId="item2" width="100px">Item 2</Stack>
-        <Stack testId="item3" width="100px">Item 3</Stack>
-      </FlowLayout>
-    `);
-        const item1 = page.getByTestId("item1");
-        const rect1 = yield item1.boundingBox();
-        const item2 = page.getByTestId("item2");
-        const rect2 = yield item2.boundingBox();
-        const item3 = page.getByTestId("item3");
-        const rect3 = yield item3.boundingBox();
-        // Check that children are rendered
-        (0, fixtures_1.expect)(rect1.height).toBe(rect2.height);
-        (0, fixtures_1.expect)(rect2.height).toBe(rect3.height);
-        (0, fixtures_1.expect)(rect1.y).toBe(rect2.y);
-        (0, fixtures_1.expect)(rect2.y).toBe(rect3.y);
-        (0, fixtures_1.expect)(rect2.x - (rect1.x + rect1.width)).toBe(13);
-        (0, fixtures_1.expect)(rect3.x - (rect2.x + rect2.width)).toBe(13);
-    }));
-    (0, fixtures_1.test)("component applies gap correctly (#2)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <FlowLayout gap="13px">
-        <Stack testId="item1">Item 1</Stack>
-        <Stack testId="item2">Item 2</Stack>
-        <Stack testId="item3">Item 3</Stack>
-      </FlowLayout>
-    `);
-        const item1 = page.getByTestId("item1");
-        const rect1 = yield item1.boundingBox();
-        const item2 = page.getByTestId("item2");
-        const rect2 = yield item2.boundingBox();
-        const item3 = page.getByTestId("item3");
-        const rect3 = yield item3.boundingBox();
-        // Check that children are rendered
-        (0, fixtures_1.expect)(rect1.height).toBe(rect2.height);
-        (0, fixtures_1.expect)(rect2.height).toBe(rect3.height);
-        (0, fixtures_1.expect)(rect2.y - (rect1.y + rect1.height)).toBe(13);
-        (0, fixtures_1.expect)(rect3.y - (rect2.y + rect2.height)).toBe(13);
-    }));
-    (0, fixtures_1.test)("component applies columnGap correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <FlowLayout columnGap="13px" gap="40px">
-        <Stack testId="item1" width="100px">Item 1</Stack>
-        <Stack testId="item2" width="100px">Item 2</Stack>
-        <Stack testId="item3" width="100px">Item 3</Stack>
-      </FlowLayout>
-    `);
-        const item1 = page.getByTestId("item1");
-        const rect1 = yield item1.boundingBox();
-        const item2 = page.getByTestId("item2");
-        const rect2 = yield item2.boundingBox();
-        const item3 = page.getByTestId("item3");
-        const rect3 = yield item3.boundingBox();
-        // Check that children are rendered
-        (0, fixtures_1.expect)(rect1.height).toBe(rect2.height);
-        (0, fixtures_1.expect)(rect2.height).toBe(rect3.height);
-        (0, fixtures_1.expect)(rect1.y).toBe(rect2.y);
-        (0, fixtures_1.expect)(rect2.y).toBe(rect3.y);
-        (0, fixtures_1.expect)(rect2.x - (rect1.x + rect1.width)).toBe(13);
-        (0, fixtures_1.expect)(rect3.x - (rect2.x + rect2.width)).toBe(13);
-    }));
-    (0, fixtures_1.test)("component applies rowGap correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <FlowLayout rowGap="13px" gap="40px">
-        <Stack testId="item1">Item 1</Stack>
-        <Stack testId="item2">Item 2</Stack>
-        <Stack testId="item3">Item 3</Stack>
-      </FlowLayout>
-    `);
-        const item1 = page.getByTestId("item1");
-        const rect1 = yield item1.boundingBox();
-        const item2 = page.getByTestId("item2");
-        const rect2 = yield item2.boundingBox();
-        const item3 = page.getByTestId("item3");
-        const rect3 = yield item3.boundingBox();
-        // Check that children are rendered
-        (0, fixtures_1.expect)(rect1.height).toBe(rect2.height);
-        (0, fixtures_1.expect)(rect2.height).toBe(rect3.height);
-        (0, fixtures_1.expect)(rect2.y - (rect1.y + rect1.height)).toBe(13);
-        (0, fixtures_1.expect)(rect3.y - (rect2.y + rect2.height)).toBe(13);
-    }));
-    (0, fixtures_1.test)("component applies rowGap and columnGap correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <FlowLayout width="280px" columnGap="13px" rowGap="19px" gap="40px">
-        <Stack testId="item1" width="100px">Item 1</Stack>
-        <Stack testId="item2" width="100px">Item 2</Stack>
-        <Stack testId="item3" width="100px">Item 3</Stack>
-      </FlowLayout>
-    `);
-        const item1 = page.getByTestId("item1");
-        const rect1 = yield item1.boundingBox();
-        const item2 = page.getByTestId("item2");
-        const rect2 = yield item2.boundingBox();
-        const item3 = page.getByTestId("item3");
-        const rect3 = yield item3.boundingBox();
-        // Check that children are rendered
-        (0, fixtures_1.expect)(rect1.height).toBe(rect2.height);
-        (0, fixtures_1.expect)(rect2.height).toBe(rect3.height);
-        (0, fixtures_1.expect)(rect1.y).toBe(rect2.y);
-        (0, fixtures_1.expect)(rect2.y).toBeLessThan(rect3.y);
-        (0, fixtures_1.expect)(rect1.x).toBeLessThan(rect2.x);
-        (0, fixtures_1.expect)(rect2.x - (rect1.x + rect1.width)).toBe(13);
-        (0, fixtures_1.expect)(rect3.x).toBe(rect1.x);
-        (0, fixtures_1.expect)(rect3.y - (rect2.y + rect2.height)).toBe(19);
-    }));
-});
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-fixtures_1.test.describe("Edge cases", () => {
-    (0, fixtures_1.test)("component handles empty content gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<FlowLayout testId="flowLayout"></FlowLayout>`);
-        const layout = page.getByTestId("flowLayout");
-        yield (0, fixtures_1.expect)(layout).toBeAttached();
-        yield (0, fixtures_1.expect)(layout).toBeEmpty();
-    }));
-    (0, fixtures_1.test)("component handles very long items correctly (#1)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <FlowLayout width="200px">
-        <Text testId="item1">This is a very long item that should wrap to the next line because it's too long</Text>
-        <Text testId="item2">Short item</Text>
-      </FlowLayout>
-    `);
-        const item1 = page.getByTestId("item1");
-        const rect1 = yield item1.boundingBox();
-        const item2 = page.getByTestId("item2");
-        const rect2 = yield item2.boundingBox();
-        (0, fixtures_1.expect)(rect2.y).toBeGreaterThan(rect1.y + rect1.height);
-    }));
-    (0, fixtures_1.test)("component handles very long items correctly (#2)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <FlowLayout width="200px">
-        <Text testId="item1">Short item</Text>
-        <Text testId="item2">This is a very long item that should wrap to the next line because it's too long</Text>
-      </FlowLayout>
-    `);
-        const item1 = page.getByTestId("item1");
-        const rect1 = yield item1.boundingBox();
-        const item2 = page.getByTestId("item2");
-        const rect2 = yield item2.boundingBox();
-        (0, fixtures_1.expect)(rect2.y).toBeGreaterThan(rect1.y + rect1.height);
-    }));
-    const PAGE_WIDTH = 1280;
-    (0, fixtures_1.test)("1 item 25% width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const itemHeight = "64px";
-        const itemWidthPercent = "25%";
-        yield initTestBed(`
-      <FlowLayout width="${PAGE_WIDTH}">
-        <Stack testId="item" backgroundColor="red" height="${itemHeight}" width="${itemWidthPercent}"/>
-      </FlowLayout>
-    `);
-        const expectedWidth = (0, component_test_helpers_1.scaleByPercent)(PAGE_WIDTH, itemWidthPercent);
-        const { width: itemWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item"));
-        (0, fixtures_1.expect)(itemWidth).toEqual(expectedWidth);
-    }));
-    // gap should be ignored because of 1 item
-    (0, fixtures_1.test)("1 item 25% width + gap", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const itemHeight = "64px";
-        const itemWidthPercent = "25%";
-        const gap = "26px";
-        yield initTestBed(`
-      <FlowLayout gap="${gap}" width="${PAGE_WIDTH}">
-        <Stack testId="item" backgroundColor="red" height="${itemHeight}" width="${itemWidthPercent}"/>
-      </FlowLayout>
-    `);
-        const { right } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item"));
-        const expectedWidth = (0, component_test_helpers_1.scaleByPercent)(PAGE_WIDTH, itemWidthPercent);
-        (0, fixtures_1.expect)(right).toEqual(expectedWidth);
-    }));
-    // gap should be ignored because of 1 item
-    (0, fixtures_1.test)("1 item 100% width + gap", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const itemHeight = "64px";
-        const itemWidthPercent = "100%";
-        const gap = "26px";
-        yield initTestBed(`
-      <FlowLayout gap="${gap}" width="${PAGE_WIDTH}">
-        <Stack testId="item" backgroundColor="red" height="${itemHeight}" width="${itemWidthPercent}"/>
-      </FlowLayout>
-    `);
-        const { width } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item"));
-        const expectedWidth = PAGE_WIDTH;
-        (0, fixtures_1.expect)(width).toEqual(expectedWidth);
-    }));
-    (0, fixtures_1.test)("4 item 25% width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const layoutWidth = "400px";
-        const itemWidthPercent = "25%";
-        const itemHeight = 64;
-        yield initTestBed(`
-      <FlowLayout testId="layout" width="${layoutWidth}" backgroundColor="cyan">
-        <Stack backgroundColor="red" height="${itemHeight}px" width="${itemWidthPercent}"/>
-        <Stack backgroundColor="green" height="${itemHeight}px" width="${itemWidthPercent}"/>
-        <Stack backgroundColor="blue" height="${itemHeight}px" width="${itemWidthPercent}"/>
-        <Stack backgroundColor="yellow" height="${itemHeight}px" width="${itemWidthPercent}"/>
-      </FlowLayout>
-    `);
-        const { height: layoutHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("layout"));
-        (0, fixtures_1.expect)(layoutHeight).toEqual(itemHeight);
-    }));
-    (0, fixtures_1.test)("3 item 25% width, 1 item 25.1% wraps", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const itemHeight = 64;
-        const itemWidthPercent = "25%";
-        const itemWidthPercentBigger = "25.1%";
-        yield initTestBed(`
-      <FlowLayout testId="layout" width="${PAGE_WIDTH}" gap="0">
-        <Stack backgroundColor="red" height="${itemHeight}px" width="${itemWidthPercent}"/>
-        <Stack backgroundColor="green" height="${itemHeight}px" width="${itemWidthPercent}"/>
-        <Stack backgroundColor="blue" height="${itemHeight}px" width="${itemWidthPercent}"/>
-        <Stack backgroundColor="yellow" height="${itemHeight}px" width="${itemWidthPercentBigger}"/>
-      </FlowLayout>
-    `);
-        const { height: layoutHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("layout"));
-        const expectedHeight = itemHeight * 2;
-        (0, fixtures_1.expect)(layoutHeight).toEqual(expectedHeight);
-    }));
-    // When gap is specified and wrapping, a horizontal gap is applied
-    (0, fixtures_1.test)("wrap with gaps", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const layoutWidth = 400;
-        const itemWidthPercent = "25%";
-        const itemWidthPercentBigger = "25.1%";
-        const itemHeight = 64;
-        const gap = 20;
-        yield initTestBed(`
-      <FlowLayout testId="layout" width="${layoutWidth}px" backgroundColor="cyan" gap="${gap}px">
-        <Stack backgroundColor="red" height="${itemHeight}px" width="${itemWidthPercentBigger}"/>
-        <Stack backgroundColor="green" height="${itemHeight}px" width="${itemWidthPercent}"/>
-        <Stack backgroundColor="blue" height="${itemHeight}px" width="${itemWidthPercent}"/>
-        <Stack backgroundColor="yellow" height="${itemHeight}px" width="${itemWidthPercent}"/>
-      </FlowLayout>
-    `);
-        const { height: layoutHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("layout"));
-        const expectedHeight = gap + itemHeight * 2;
-        (0, fixtures_1.expect)(layoutHeight).toEqual(expectedHeight);
-    }));
-    (0, fixtures_1.test)("item with * width fills row", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const itemHeight = 64;
-        const itemWidth = "*";
-        yield initTestBed(`
-      <FlowLayout testId="layout">
-        <Stack backgroundColor="red" height="${itemHeight}px" width="50"/>
-        <Stack backgroundColor="green" height="${itemHeight}px" width="50"/>
-        <Stack testId="item2" backgroundColor="blue" height="${itemHeight}px" width="${itemWidth}"/>
-      </FlowLayout>
-    `);
-        const { height: layoutHeight, right: layoutRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("layout"));
-        const { right: starItemRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item2"));
-        (0, fixtures_1.expect)(layoutHeight).toEqual(itemHeight);
-        (0, fixtures_1.expect)(layoutRight).toEqual(starItemRight);
-    }));
-    // rowGap applies when wrapping
-    (0, fixtures_1.test)("wrap with rowGap", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const itemHeight = 64;
-        const itemWidthPercent = "50%";
-        const rowGap = 24;
-        yield initTestBed(`
-  <FlowLayout testId="layout" rowGap="${rowGap}px">
-    <Stack backgroundColor="red" height="${itemHeight}px" width="${itemWidthPercent}"/>
-    <Stack backgroundColor="green" height="${itemHeight}px" width="${itemWidthPercent}"/>
-    <Stack backgroundColor="blue" height="${itemHeight}px" width="${itemWidthPercent}"/>
-    <Stack backgroundColor="yellow" height="${itemHeight}px" width="${itemWidthPercent}"/>
-  </FlowLayout>
-  `);
-        const { height: layoutHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("layout"));
-        const expectedHeight = itemHeight * 2 + rowGap;
-        (0, fixtures_1.expect)(layoutHeight).toEqual(expectedHeight);
-    }));
-    (0, fixtures_1.test)("wrap with columnGap", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const itemWidth = 200;
-        const columnGap = 24;
-        const layoutWidth = itemWidth + columnGap + itemWidth;
-        const itemHeight = 64;
-        yield initTestBed(`
-  <FlowLayout testId="layout" width="${layoutWidth}px" columnGap="${columnGap}px">
-    <Stack backgroundColor="red" height="${itemHeight}px" width="${itemWidth}px"/>
-    <Stack backgroundColor="green" height="${itemHeight}px" width="${itemWidth}px"/>
-    <Stack backgroundColor="blue" height="${itemHeight}px" width="${itemWidth}px"/>
-    <Stack backgroundColor="yellow" testId="item3" height="${itemHeight}px" width="${itemWidth}px"/>
-  </FlowLayout>
-  `);
-        const { left: item3Left } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item3"));
-        const expectedItem3Left = itemWidth + columnGap;
-        (0, fixtures_1.expect)(item3Left).toEqual(expectedItem3Left);
-    }));
-    // wrapping: columnGap & rowGap overrules gap prop
-    (0, fixtures_1.test)("columnGap & rowGap overrules gap", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const itemWidth = 200;
-        const columnGap = 24;
-        const layoutWidth = itemWidth + columnGap + itemWidth;
-        const itemHeight = 64;
-        const rowGap = 24;
-        const gap = 5;
-        yield initTestBed(`
-  <FlowLayout testId="layout" width="${layoutWidth}px" gap="${gap}px" columnGap="${columnGap}px" rowGap="${rowGap}px">
-    <Stack testId="item0" backgroundColor="red" height="${itemHeight}px" width="${itemWidth}px"/>
-    <Stack testId="item1" backgroundColor="green" height="${itemHeight}px" width="${itemWidth}px"/>
-    <Stack testId="item2" backgroundColor="blue" height="${itemHeight}px" width="${itemWidth}px"/>
-    <Stack testId="item3" backgroundColor="yellow" height="${itemHeight}px" width="${itemWidth}px"/>
-  </FlowLayout>
-  `);
-        const { left: item3Left } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("item3"));
-        const expectedItem3Left = itemWidth + columnGap;
-        const { height: layoutHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("layout"));
-        const expectedLayoutHeight = itemHeight + rowGap + itemHeight;
-        (0, fixtures_1.expect)(item3Left).toEqual(expectedItem3Left);
-        (0, fixtures_1.expect)(layoutHeight).toEqual(expectedLayoutHeight);
-    }));
-    // 4 items with 25% each perfectly fit in one row
-    // gaps, borders, margins don't count when breaking into new lines
-    (0, fixtures_1.test)("no wrap from gap, border, margin", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const itemHeight = 64;
-        const width = "25%";
-        const marginInline = 100;
-        yield initTestBed(`
-  <FlowLayout testId="layout" gap="26px" >
-    <Stack testId="item0" border="solid 6px black" marginRight="${marginInline}px" marginLeft="${marginInline}px" backgroundColor="red" height="${itemHeight}px" width="${width}px"/>
-    <Stack testId="item1" border="solid 6px black" marginRight="${marginInline}px" marginLeft="${marginInline}px" backgroundColor="green" height="${itemHeight}px" width="${width}px"/>
-    <Stack testId="item2" border="solid 6px black" marginRight="${marginInline}px" marginLeft="${marginInline}px" backgroundColor="blue" height="${itemHeight}px" width="${width}px"/>
-    <Stack testId="item3" border="solid 6px black" marginRight="${marginInline}px" marginLeft="${marginInline}px" backgroundColor="yellow" height="${itemHeight}px" width="${width}px"/>
-  </FlowLayout>
-  `);
-        const { height: layoutHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("layout"));
-        (0, fixtures_1.expect)(layoutHeight).toEqual(itemHeight);
-    }));
-    // Elements will cap at 100% width
-    (0, fixtures_1.test)("no horizontal overflow", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const itemHeight = 64;
-        const bigWidths = { percent: "120%", px: "1000000000px", em: "1000000000em" };
-        yield initTestBed(`
-  <FlowLayout testId="layout" gap="0">
-    <Stack testId="item0" height="${itemHeight}px" width="${bigWidths.percent}"/>
-    <Stack testId="item1" height="${itemHeight}px" width="${bigWidths.px}"/>
-    <Stack testId="item2" height="${itemHeight}px" width="${bigWidths.em}"/>
-  </FlowLayout>
-  `);
-        const isOverflownItem0 = yield (0, component_test_helpers_1.overflows)(page.getByTestId("item0"), "x");
-        const isOverflownItem1 = yield (0, component_test_helpers_1.overflows)(page.getByTestId("item1"), "x");
-        const isOverflownItem2 = yield (0, component_test_helpers_1.overflows)(page.getByTestId("item2"), "x");
-        const { height: layoutHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("layout"));
-        const expectedLayoutHeight = itemHeight * 3;
-        (0, fixtures_1.expect)(isOverflownItem0).toStrictEqual(false);
-        (0, fixtures_1.expect)(isOverflownItem1).toStrictEqual(false);
-        (0, fixtures_1.expect)(isOverflownItem2).toStrictEqual(false);
-        (0, fixtures_1.expect)(layoutHeight).toEqual(expectedLayoutHeight);
-    }));
-    // SpaceFillers can be used to break into new lines
-    (0, fixtures_1.test)("SpaceFiller adds line break", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const itemHeight = 64;
-        const itemWidth = "20%";
-        yield initTestBed(`
-  <FlowLayout testId="layout" gap="0">
-    <Stack backgroundColor="red" height="${itemHeight}px" width="${itemWidth}"/>
-    <Stack backgroundColor="blue" height="${itemHeight}px" width="${itemWidth}"/>
-    <SpaceFiller/>
-    <Stack backgroundColor="green" height="${itemHeight}px" width="${itemWidth}"/>
-  </FlowLayout>
-  `);
-        const expectedHeight = 2 * itemHeight;
-        const { height: layoutHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("layout"));
-        (0, fixtures_1.expect)(layoutHeight).toEqual(expectedHeight);
-    }));
-    // The layout properly handles overflow on the Y axis
-    // The scrollbar must not overlap the rightmost element
-    (0, fixtures_1.test)("scrollbar on overflow Y", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const itemHeight = 128;
-        yield initTestBed(`
-  <FlowLayout testId="layout" height="100px" columnGap="10px" overflowY="auto">
-    <Stack backgroundColor="red" height="${itemHeight}px" border="solid 8px black"/>
-    <Stack backgroundColor="blue" height="${itemHeight}px"/>
-    <Stack backgroundColor="green" height="${itemHeight}px"/>
-  </FlowLayout>
-  `);
-        const result = yield (0, component_test_helpers_1.overflows)(page.getByTestId("layout"), "y");
-        (0, fixtures_1.expect)(result).toEqual(true);
-    }));
-    // The layout properly handles overflow on the Y axis
-    // The scrollbar must not overlap the rightmost element
-    (0, fixtures_1.test)("scrollbar on overflow Y multi items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const itemHeight = 128;
-        yield initTestBed(`
-  <FlowLayout testId="layout" height="100px" overflowY="auto">
-    <Stack backgroundColor="red" height="${itemHeight}px" border="solid 8px black" width="50%"/>
-    <Stack backgroundColor="blue" height="${itemHeight}px" border="solid 8px black" width="50%"/>
-    <Stack backgroundColor="green" height="${itemHeight}px"/>
-  </FlowLayout>
-  `);
-        const result = yield (0, component_test_helpers_1.overflows)(page.getByTestId("layout"), "y");
-        (0, fixtures_1.expect)(result).toEqual(true);
-    }));
-    (0, fixtures_1.test)("multiple star sized next to each other doesn't break", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
-        yield initTestBed(`
-    <FlowLayout testId="layout" width="100px" columnGap="10px">
-      <Stack testId="red" backgroundColor="red" height="10px" width="20px"/>
-      <Stack testId="green" backgroundColor="green" height="10px" width="*"/>
-      <Stack testId="blue" backgroundColor="blue" height="10px" width="2*"/>
-    </FlowLayout>`);
-        const { height: layoutHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("layout"));
-        const { width: redWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("red"));
-        const { width: greenWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("green"));
-        const { width: blueWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("blue"));
-        // red: 20px | 10px gap | green: 20px | 10px gap | blue: 40px
-        (0, fixtures_1.expect)(layoutHeight).toEqual(10);
-        (0, fixtures_1.expect)(redWidth).toEqual(20);
-        (0, fixtures_1.expect)(greenWidth).toEqual(20);
-        (0, fixtures_1.expect)(blueWidth).toEqual(40);
-    }));
-    (0, fixtures_1.test)("SpaceFiller breaks star sized items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-    <FlowLayout testId="layout" width="100px" gap="10px">
-      <Stack testId="red" backgroundColor="red" height="10px" width="20px"/>
-      <Stack testId="green" backgroundColor="green" height="10px" width="*"/>
-      <SpaceFiller/>
-      <Stack testId="blue" backgroundColor="blue" height="10px" width="2*"/>
-    </FlowLayout>`);
-        const { height: layoutHeight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("layout"));
-        const { width: redWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("red"));
-        const { width: greenWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("green"));
-        const { width: blueWidth } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("blue"));
-        // red: 20px | 10px gap | green: 70px
-        // gap 10px
-        // blue: 100px
-        (0, fixtures_1.expect)(layoutHeight).toEqual(30);
-        (0, fixtures_1.expect)(redWidth).toEqual(20);
-        (0, fixtures_1.expect)(greenWidth).toEqual(70);
-        (0, fixtures_1.expect)(blueWidth).toEqual(100);
-    }));
-});