xmlui 0.10.13 → 0.10.14

package/dist/scripts/src/components/Stack/VStack.spec.js

@@ -0,0 +1,67 @@
+"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 items vertically", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <VStack testId="vstack">
+        <Stack testId="item1" height="32px" width="32px" backgroundColor="red" />
+        <Stack testId="item2" height="32px" width="32px" backgroundColor="blue" />
+        <Stack testId="item3" height="32px" width="32px" backgroundColor="green" />
+      </VStack>
+    `);
+        const vstack = page.getByTestId("vstack");
+        const item1 = page.getByTestId("item1");
+        const item2 = page.getByTestId("item2");
+        const item3 = page.getByTestId("item3");
+        yield (0, fixtures_1.expect)(vstack).toBeVisible();
+        yield (0, fixtures_1.expect)(item1).toBeVisible();
+        yield (0, fixtures_1.expect)(item2).toBeVisible();
+        yield (0, fixtures_1.expect)(item3).toBeVisible();
+        // Get bounding boxes to verify vertical layout
+        const item1Box = yield item1.boundingBox();
+        const item2Box = yield item2.boundingBox();
+        const item3Box = yield item3.boundingBox();
+        // Verify items are stacked vertically (item2 should be below item1, item3 below item2)
+        (0, fixtures_1.expect)(item2Box.y).toBeGreaterThan(item1Box.y + item1Box.height - 1); // -1 for floating point tolerance
+        (0, fixtures_1.expect)(item3Box.y).toBeGreaterThan(item2Box.y + item2Box.height - 1); // -1 for floating point tolerance
+        // Verify items are horizontally aligned (should start at roughly the same x position)
+        (0, fixtures_1.expect)(Math.abs(item1Box.x - item2Box.x)).toBeLessThan(1);
+        (0, fixtures_1.expect)(Math.abs(item2Box.x - item3Box.x)).toBeLessThan(1);
+    }));
+    (0, fixtures_1.test)("renders empty VStack", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<VStack testId="vstack"></VStack>`);
+        const vstack = page.getByTestId("vstack");
+        yield (0, fixtures_1.expect)(vstack).toBeAttached();
+        yield (0, fixtures_1.expect)(vstack).toBeEmpty();
+    }));
+    (0, fixtures_1.test)("ignores orientation property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <VStack testId="vstack" orientation="horizontal">
+        <Stack testId="item1" height="32px" width="32px" backgroundColor="red" />
+        <Stack testId="item2" height="32px" width="32px" backgroundColor="blue" />
+      </VStack>
+    `);
+        const item1 = page.getByTestId("item1");
+        const item2 = page.getByTestId("item2");
+        yield (0, fixtures_1.expect)(item1).toBeVisible();
+        yield (0, fixtures_1.expect)(item2).toBeVisible();
+        // Get bounding boxes to verify still renders vertically despite orientation="horizontal"
+        const item1Box = yield item1.boundingBox();
+        const item2Box = yield item2.boundingBox();
+        // Verify items are still stacked vertically (orientation prop should be ignored)
+        (0, fixtures_1.expect)(item2Box.y).toBeGreaterThan(item1Box.y + item1Box.height - 1);
+    }));
+});