xmlui 0.10.13 → 0.10.14

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

@@ -0,0 +1,131 @@
+"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
+// =============================================================================
+(0, fixtures_1.test)("component renders with default props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver }) {
+    // TODO: review these Copilot-created tests
+    yield initTestBed(`<Backdrop>Content</Backdrop>`, {});
+    const backdropDriver = yield createBackdropDriver();
+    const backdropElement = backdropDriver.getBackdrop();
+    yield (0, fixtures_1.expect)(backdropElement).toBeVisible();
+    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("background-color", backdropDriver.getDefaultBackgroundColor());
+    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("opacity", backdropDriver.getDefaultOpacity());
+    yield (0, fixtures_1.expect)(backdropDriver.component).toHaveText("Content");
+}));
+(0, fixtures_1.test)("component renders with custom background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver, }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)"; // Red color
+    yield initTestBed(`<Backdrop backgroundColor="${EXPECTED_COLOR}">Content</Backdrop>`, {});
+    const backdropDriver = yield createBackdropDriver();
+    const backdropElement = backdropDriver.getBackdrop();
+    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("background-color", EXPECTED_COLOR);
+}));
+(0, fixtures_1.test)("component renders with custom opacity", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver }) {
+    const EXPECTED_OPACITY = "0.5";
+    yield initTestBed(`<Backdrop opacity="${EXPECTED_OPACITY}">Content</Backdrop>`, {});
+    const backdropDriver = yield createBackdropDriver();
+    const backdropElement = backdropDriver.getBackdrop();
+    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("opacity", EXPECTED_OPACITY);
+}));
+(0, fixtures_1.test)("component renders with overlay template", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver }) {
+    yield initTestBed(`
+    <Backdrop>
+      <property name="overlayTemplate">
+        <H1>Overlay</H1>
+      </property>
+      Content
+    </Backdrop>
+  `, {});
+    const backdropDriver = yield createBackdropDriver();
+    const backdropElement = backdropDriver.getBackdrop();
+    yield (0, fixtures_1.expect)(backdropElement).toBeVisible();
+    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("background-color", backdropDriver.getDefaultBackgroundColor());
+    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("opacity", backdropDriver.getDefaultOpacity());
+    yield (0, fixtures_1.expect)(backdropDriver.component).toContainText("Content");
+    yield (0, fixtures_1.expect)(backdropDriver.getOverlay()).toContainText("Overlay");
+}));
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+// TODO: Implement accessibility tests
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+(0, fixtures_1.test)("component handles different background colors", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver, }) {
+    yield initTestBed(`<Backdrop backgroundColor="blue">Content</Backdrop>`, {});
+    const EXPECTED_COLOR = "rgb(0, 0, 255)"; // Blue color
+    const backdropDriver = yield createBackdropDriver();
+    const backdropElement = backdropDriver.getBackdrop();
+    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("background-color", EXPECTED_COLOR);
+}));
+(0, fixtures_1.test)("component handles theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver, }) {
+    yield initTestBed(`<Backdrop>Content</Backdrop>`, {
+        testThemeVars: {
+            "backgroundColor-Backdrop": "rgb(255, 0, 0)", // Red color
+            "opacity-Backdrop": "0.75",
+        },
+    });
+    const backdropDriver = yield createBackdropDriver();
+    const backdropElement = backdropDriver.getBackdrop();
+    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("background-color", "rgb(255, 0, 0)"); // Red color
+    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("opacity", "0.75");
+}));
+// =============================================================================
+// EDGE CASE TESTS
+// =============================================================================
+(0, fixtures_1.test)("component handles empty string props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver, }) {
+    yield initTestBed(`<Backdrop backgroundColor="">Content</Backdrop>`, {});
+    const backdropDriver = yield createBackdropDriver();
+    const backdropElement = backdropDriver.getBackdrop();
+    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("background-color", "rgb(0, 0, 0)"); // Default transparent color
+    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("opacity", "0.1");
+}));
+(0, fixtures_1.test)("component handles special characters in content correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver, }) {
+    yield initTestBed(`<Backdrop>Content with special characters: !@#$%^&*()</Backdrop>`, {});
+    const backdropDriver = yield createBackdropDriver();
+    const backdropElement = backdropDriver.getBackdrop();
+    yield (0, fixtures_1.expect)(backdropElement).toBeVisible();
+    yield (0, fixtures_1.expect)(backdropDriver.component).toContainText("Content with special characters: !@#$%^&*()");
+}));
+// =============================================================================
+// INTEGRATION TESTS
+// =============================================================================
+(0, fixtures_1.test)("component works correctly with nested content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver }) {
+    // TODO: review these Copilot-created tests
+    yield initTestBed(`
+    <Backdrop>
+      <VStack>
+        <Text>Line 1</Text>
+        <Text>Line 2</Text>
+      </VStack>
+    </Backdrop>
+  `, {});
+    const backdropDriver = yield createBackdropDriver();
+    // Test that nested content renders correctly
+    yield (0, fixtures_1.expect)(backdropDriver.component).toContainText("Line 1");
+    yield (0, fixtures_1.expect)(backdropDriver.component).toContainText("Line 2");
+    // Test that backdrop is rendered over the content
+    yield (0, fixtures_1.expect)(backdropDriver.getBackdrop()).toBeVisible();
+}));
+(0, fixtures_1.test)("component works correctly in different layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver, }) {
+    yield initTestBed(`
+    <HStack>
+      <Text>Before</Text>
+      <Backdrop backgroundColor="blue" opacity="0.3">Backdrop Content</Backdrop>
+      <Text>After</Text>
+    </HStack>
+  `, {});
+    const backdropDriver = yield createBackdropDriver();
+    // Test that backdrop is rendered over the content
+    yield (0, fixtures_1.expect)(backdropDriver.getBackdrop()).toBeVisible();
+}));