xmlui 0.10.13 → 0.10.14

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

@@ -0,0 +1,518 @@
+"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);
+    }));
+});