xmlui 0.10.12 → 0.10.14

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

@@ -0,0 +1,991 @@
+"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
+// =============================================================================
+(0, fixtures_1.test)("component renders with basic content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<App>
+        <Footer>
+          <Text testId="footer-text">© 2025 Company Name</Text>
+        </Footer>
+      </App>`);
+    yield (0, fixtures_1.expect)(page.getByTestId("footer-text")).toHaveText("© 2025 Company Name");
+}));
+(0, fixtures_1.test)("component renders multiple items correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`
+    <App>
+      <Footer>
+        <Text testId="footer-1">© 2025 Company Name</Text>
+        <Text testId="footer-2">Terms of Service</Text>
+        <Text testId="footer-3">Privacy Policy</Text>
+      </Footer>
+    </App>
+  `);
+    yield (0, fixtures_1.expect)(page.getByTestId("footer-1")).toHaveText("© 2025 Company Name");
+    yield (0, fixtures_1.expect)(page.getByTestId("footer-2")).toHaveText("Terms of Service");
+    yield (0, fixtures_1.expect)(page.getByTestId("footer-3")).toHaveText("Privacy Policy");
+}));
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+(0, fixtures_1.test)("component has correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    // TODO: review these Copilot-created tests
+    yield initTestBed(`
+    <App>
+      <Footer testId="footer">
+        <Text>© 2025 Company Name</Text>
+      </Footer>
+    </App>
+  `, {});
+    // Check that the component has the correct role
+    yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveAttribute("role", "contentinfo");
+}));
+(0, fixtures_1.test)("component allows interactive elements within it to be focusable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
+    yield initTestBed(`
+    <App>
+      <Footer>
+        <Text>© 2025 Company Name</Text>
+        <Button testId="button">Contact Us</Button>
+      </Footer>
+    </App>
+  `, {});
+    // Button within Footer should be focusable
+    const button = page.getByTestId("button");
+    yield button.focus();
+    yield (0, fixtures_1.expect)(button).toBeFocused();
+    // Should be able to activate with keyboard
+    yield button.press("Enter");
+    yield (0, fixtures_1.expect)(button).toBeVisible(); // Button should still be visible after activation
+}));
+// =============================================================================
+// EDGE CASE TESTS
+// =============================================================================
+(0, fixtures_1.test)("component handles empty content gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<App><Footer testId="footer"></Footer></App>`, {});
+    // Component should still render even without children
+    yield (0, fixtures_1.expect)(page.getByTestId("footer")).toBeVisible();
+}));
+(0, fixtures_1.test)("component handles long content correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const LONG_TEXT = "This is a very long text content that might cause overflow issues if not handled correctly by the footer component. The component should handle this gracefully.";
+    yield initTestBed(`
+    <App>
+      <Footer>
+        <Text testId="footer-text">${LONG_TEXT}</Text>
+      </Footer>
+    </App>
+  `);
+    const textElement = page.getByTestId("footer-text");
+    yield (0, fixtures_1.expect)(textElement).toBeVisible();
+    yield (0, fixtures_1.expect)(textElement).toHaveText(LONG_TEXT);
+}));
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+fixtures_1.test.describe("Visual State", () => {
+    (0, fixtures_1.test)("component applies theme variables correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        // TODO: review these Copilot-created tests
+        yield initTestBed(`
+      <App>
+        <Footer testId="footer">
+          <Text>© 2025 Company Name</Text>
+        </Footer>
+      </App>
+  `, {
+            testThemeVars: {
+                "backgroundColor-Footer": "rgb(80, 80, 80)",
+                "textColor-Footer": "rgb(255, 0, 0)",
+                "borderTop-Footer": "2px solid rgb(200, 200, 200)",
+            },
+        });
+        // Check that theme variables are applied
+        const footer = page.getByTestId("footer");
+        yield (0, fixtures_1.expect)(footer).toHaveCSS("background-color", "rgb(80, 80, 80)");
+        yield (0, fixtures_1.expect)(footer).toHaveCSS("border-top", "2px solid rgb(200, 200, 200)");
+        yield (0, fixtures_1.expect)(footer).toHaveCSS("color", "rgb(255, 0, 0)");
+    }));
+    const FOOTER_ID = "footer";
+    const FOOTER_CODE = `<Footer testId="${FOOTER_ID}">"This is a footer."</Footer>`;
+    (0, fixtures_1.test)(`height`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const expectedHeightPx = 100;
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "height-Footer": expectedHeightPx + "px",
+            },
+        });
+        const { height } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId(FOOTER_ID));
+        (0, fixtures_1.expect)(height).toEqualWithTolerance(expectedHeightPx);
+    }));
+    (0, fixtures_1.test)(`padding`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const expectedPadding = "10px";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "padding-Footer": expectedPadding,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId(FOOTER_ID).locator("> div")).toHaveCSS("padding", expectedPadding);
+    }));
+    (0, fixtures_1.test)("paddingHorizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const expectedPadding = "10px";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "paddingHorizontal-Footer": expectedPadding,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId(FOOTER_ID).locator("> div")).toHaveCSS("padding-left", expectedPadding);
+        yield (0, fixtures_1.expect)(page.getByTestId(FOOTER_ID).locator("> div")).toHaveCSS("padding-right", expectedPadding);
+    }));
+    (0, fixtures_1.test)("paddingVertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const expectedPadding = "10px";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "paddingVertical-Footer": expectedPadding,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId(FOOTER_ID).locator("> div")).toHaveCSS("padding-top", expectedPadding);
+        yield (0, fixtures_1.expect)(page.getByTestId(FOOTER_ID).locator("> div")).toHaveCSS("padding-bottom", expectedPadding);
+    }));
+    (0, fixtures_1.test)(`bg-color`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const expectedBackgroundColor = "rgb(255, 0, 0)";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "backgroundColor-Footer": expectedBackgroundColor,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId(FOOTER_ID)).toHaveCSS("background-color", expectedBackgroundColor);
+    }));
+    (0, fixtures_1.test)(`fontSize`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const expectedFontSizePx = "20px";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "fontSize-Footer": expectedFontSizePx,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId(FOOTER_ID).locator("> div")).toHaveCSS("font-size", expectedFontSizePx);
+    }));
+    (0, fixtures_1.test)(`vertical-alignment`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const expectedAlignment = "center";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "vertical-alignment-Footer": expectedAlignment,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId(FOOTER_ID).locator("> div")).toHaveCSS("align-items", expectedAlignment);
+    }));
+    (0, fixtures_1.test)("border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderLeft-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderRight", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderRight-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderHorizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderHorizontal-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderHorizontal and borderLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderHorizontal-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+                "borderLeft-Footer": "8px double rgb(0, 128, 0)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", "rgb(0, 128, 0)");
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", "8px");
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", "double");
+    }));
+    (0, fixtures_1.test)("borderHorizontal and borderRight", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderHorizontal-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+                "borderRight-Footer": "8px double rgb(0, 128, 0)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", "rgb(0, 128, 0)");
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", "8px");
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", "double");
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderTop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderTop-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderBottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderBottom-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderVertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderVertical-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderVertical and borderTop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderVertical-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+                "borderTop-Footer": "8px double rgb(0, 128, 0)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", "rgb(0, 128, 0)");
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", "8px");
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", "double");
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("borderVertical and borderBottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderVertical-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+                "borderBottom-Footer": "8px double rgb(0, 128, 0)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", "rgb(0, 128, 0)");
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", "8px");
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", "double");
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border-color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderColor-Footer": EXPECTED_COLOR,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderColor-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-horizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderHorizontalColor-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderLeftColor-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderRightColor-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-vertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderVerticalColor-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderTopColor-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-color-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "rgb(0, 128, 0)";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderBottomColor-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border-style", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderStyle-Footer": EXPECTED_STYLE,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-style", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderStyle-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", UPDATED);
+    }));
+    (0, fixtures_1.test)("border, border-style-horizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderHorizontalStyle-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", UPDATED);
+    }));
+    (0, fixtures_1.test)("border, border-style-left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderLeftStyle-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", UPDATED);
+    }));
+    (0, fixtures_1.test)("border, border-style-right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderRightStyle-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-style-vertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderVerticalStyle-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-style-top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderTopStyle-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-style-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(0, 128, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "double";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderBottomStyle-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border-thickness", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_WIDTH = "8px";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderWidth-Footer": EXPECTED_WIDTH,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", "0px");
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", "0px");
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", "0px");
+    }));
+    (0, fixtures_1.test)("border, border-thickness", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderWidth-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-horizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderHorizontalWidth-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderLeftWidth-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderRightWidth-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-vertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderVerticalWidth-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderTopWidth-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+    (0, fixtures_1.test)("border, border-thickness-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        const EXPECTED_WIDTH = "5px";
+        const EXPECTED_STYLE = "dotted";
+        const UPDATED = "12px";
+        yield initTestBed(FOOTER_CODE, {
+            testThemeVars: {
+                "borderBottomWidth-Footer": UPDATED,
+                "border-Footer": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-top-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-right-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-width", UPDATED);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-color", EXPECTED_COLOR);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+        yield (0, fixtures_1.expect)(page.getByTestId("footer")).toHaveCSS("border-left-style", EXPECTED_STYLE);
+    }));
+});