xmlui 0.10.13 → 0.10.14

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

@@ -0,0 +1,864 @@
+"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");
+const CODE = `<NavPanel><NavLink to="/">Hello</NavLink></NavPanel>`;
+(0, fixtures_1.test)("border", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("borderLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderLeft-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("borderRight", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderRight-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("borderHorizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderHorizontal-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("borderHorizontal and borderLeft", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderHorizontal-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            "borderLeft-NavPanel": "8px double rgb(0, 128, 0)",
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", "rgb(0, 128, 0)");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", "8px");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", "double");
+}));
+(0, fixtures_1.test)("borderHorizontal and borderRight", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderHorizontal-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            "borderRight-NavPanel": "8px double rgb(0, 128, 0)",
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", "rgb(0, 128, 0)");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", "8px");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", "double");
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("borderTop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderTop-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("borderBottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderBottom-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("borderVertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderVertical-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("borderVertical and borderTop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderVertical-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            "borderTop-NavPanel": "8px double rgb(0, 128, 0)",
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", "rgb(0, 128, 0)");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", "8px");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", "double");
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("borderVertical and border-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderVertical-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+            "borderBottom-NavPanel": "8px double rgb(0, 128, 0)",
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", "rgb(0, 128, 0)");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", "8px");
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", "double");
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border-color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderColor-NavPanel": EXPECTED_COLOR,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "rgb(0, 128, 0)";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderColor-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-color-horizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "rgb(0, 128, 0)";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderHorizontalColor-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-color-left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "rgb(0, 128, 0)";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderLeftColor-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-color-right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "rgb(0, 128, 0)";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderRightColor-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-color-vertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "rgb(0, 128, 0)";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderVerticalColor-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-color-top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "rgb(0, 128, 0)";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderTopColor-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-color-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "rgb(0, 128, 0)";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderBottomColor-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border-style", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderStyle-NavPanel": EXPECTED_STYLE,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-style", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "double";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderStyle-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", UPDATED);
+}));
+(0, fixtures_1.test)("border, border-style-horizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "double";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderHorizontalStyle-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", UPDATED);
+}));
+(0, fixtures_1.test)("border, border-style-left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "double";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderLeftStyle-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", UPDATED);
+}));
+(0, fixtures_1.test)("border, border-style-right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "double";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderRightStyle-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-style-vertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "double";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderVerticalStyle-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-style-top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "double";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderTopStyle-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-style-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "double";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderBottomStyle-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border-thickness", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(0, 128, 0)";
+    const EXPECTED_WIDTH = "8px";
+    const EXPECTED_STYLE = "dotted";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderWidth-NavPanel": EXPECTED_WIDTH,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).not.toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-thickness", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "12px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderWidth-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-thickness-horizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "12px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderHorizontalWidth-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-thickness-left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "12px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderLeftWidth-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-thickness-right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "12px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderRightWidth-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-thickness-vertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "12px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderVerticalWidth-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-thickness-top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "12px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderTopWidth-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));
+(0, fixtures_1.test)("border, border-thickness-bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNavPanelDriver }) {
+    const EXPECTED_COLOR = "rgb(255, 0, 0)";
+    const EXPECTED_WIDTH = "5px";
+    const EXPECTED_STYLE = "dotted";
+    const UPDATED = "12px";
+    yield initTestBed(CODE, {
+        testThemeVars: {
+            "borderBottomWidth-NavPanel": UPDATED,
+            "border-NavPanel": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
+        },
+    });
+    const component = (yield createNavPanelDriver()).component;
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-top-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-right-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-width", UPDATED);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-bottom-style", EXPECTED_STYLE);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-color", EXPECTED_COLOR);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-width", EXPECTED_WIDTH);
+    yield (0, fixtures_1.expect)(component).toHaveCSS("border-left-style", EXPECTED_STYLE);
+}));