xmlui 0.11.4 → 0.11.7

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

@@ -1,1514 +0,0 @@
-"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");
-const abstractions_1 = require("../abstractions");
-fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
-    (0, fixtures_1.test)("No initials without name", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-        yield initTestBed(`<Avatar />`);
-        yield (0, fixtures_1.expect)((yield createAvatarDriver()).component).toBeEmpty();
-    }));
-    (0, fixtures_1.test)("Can render 2 initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-        yield initTestBed(`<Avatar name="Tim Smith"/>`);
-        yield (0, fixtures_1.expect)((yield createAvatarDriver()).component).toContainText("TS");
-    }));
-});
-(0, fixtures_1.test)("empty name shows no initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    yield initTestBed(`<Avatar name=""/>`);
-    yield (0, fixtures_1.expect)((yield createAvatarDriver()).component).toBeEmpty();
-}));
-(0, fixtures_1.test)("name with symbols renders initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    yield initTestBed(`<Avatar name="B 'Alan"/>`);
-    yield (0, fixtures_1.expect)((yield createAvatarDriver()).component).toContainText("B'");
-}));
-(0, fixtures_1.test)("numeric name renders initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    yield initTestBed(`<Avatar name="123"/>`);
-    yield (0, fixtures_1.expect)((yield createAvatarDriver()).component).toContainText("1");
-}));
-(0, fixtures_1.test)("unicode name renders initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    yield initTestBed(`<Avatar name="孔丘"/>`);
-    yield (0, fixtures_1.expect)((yield createAvatarDriver()).component).toContainText("孔");
-}));
-(0, fixtures_1.test)("single name renders one initial", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    yield initTestBed(`<Avatar name="Tim"/>`);
-    yield (0, fixtures_1.expect)((yield createAvatarDriver()).component).toContainText("T");
-}));
-(0, fixtures_1.test)("three words render three initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    yield initTestBed(`<Avatar name="Tim John Smith"/>`);
-    yield (0, fixtures_1.expect)((yield createAvatarDriver()).component).toContainText("TJS");
-}));
-(0, fixtures_1.test)("many words limited to three initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    yield initTestBed(`<Avatar name="Tim John Smith Jones"/>`);
-    yield (0, fixtures_1.expect)((yield createAvatarDriver()).component).toContainText("TJS");
-}));
-// sizes.forEach((tc) =>{
-//   test(`"${tc.size}" works with no name`, async ({}) => {
-//   });
-//   test(`"${tc.size}" works with empty name`, async ({}) => {
-//   });
-//   test(`"${tc.size}" works with "I"`, async ({}) => {
-//   });
-//   test(`"${tc.size}" works with "WWW"`, async ({}) => {
-//   });
-//   test(`"${tc.size}" works with image`, async ({}) => {
-//   });
-// })
-// test("url image status 404", async ({ }) => {
-// });
-// test("url image status 400", async ({ }) => {
-// });
-// test("url returns non-image", async ({ }) => {
-// });
-// sizes.forEach((tc) => {
-//   test(`${tc.size} url image 100x100px`, async ({ }) => {
-//   });
-//   test(`${tc.size} url image 100x200px`, async ({ }) => {
-//   });
-//   test(`${tc.size} url image 200x100px`, async ({ }) => {
-//   });
-// });
-(0, fixtures_1.test)("test state initializes correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed }) {
-    const { testStateDriver } = yield initTestBed(`<Fragment />`);
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
-}));
-(0, fixtures_1.test)("click handler triggers correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const { testStateDriver } = yield initTestBed(`<Avatar name="Molly Dough" onClick="testState = true" />`);
-    const driver = yield createAvatarDriver();
-    yield driver.click();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
-}));
-// --- Size Property Tests ---
-(0, fixtures_1.test)("size", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    const components = abstractions_1.sizeValues
-        .map((size) => {
-        return `<Avatar testId="${size}" size="${size}" name="Lynn Gilbert" />`;
-    })
-        .join("\n");
-    yield initTestBed(`<Fragment>${components}</Fragment>`);
-    const { width: widthXs } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("xs"));
-    const { width: widthSm } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("sm"));
-    const { width: widthMd } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("md"));
-    const { width: widthLg } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("lg"));
-    (0, fixtures_1.expect)(widthXs).toBeLessThan(widthSm);
-    (0, fixtures_1.expect)(widthSm).toBeLessThan(widthMd);
-    (0, fixtures_1.expect)(widthMd).toBeLessThan(widthLg);
-}));
-(0, fixtures_1.test)("size property affects font size for initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    // Test that different sizes have appropriately scaled font sizes
-    // Test xs size font scaling
-    yield initTestBed(`<Avatar name="XS" size="xs"/>`, {});
-    const xsDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(xsDriver.component).toHaveCSS("font-size", "12px");
-    // Test sm size font scaling
-    yield initTestBed(`<Avatar name="SM" size="sm"/>`, {});
-    const smDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(smDriver.component).toHaveCSS("font-size", "16px");
-    // Test md size font scaling
-    yield initTestBed(`<Avatar name="MD" size="md"/>`, {});
-    const mdDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(mdDriver.component).toHaveCSS("font-size", "20px");
-    // Test lg size font scaling
-    yield initTestBed(`<Avatar name="LG" size="lg"/>`, {});
-    const lgDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(lgDriver.component).toHaveCSS("font-size", "32px");
-}));
-// --- Image URL Property Tests ---
-(0, fixtures_1.test)("url property renders img element instead of div", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    const TEST_URL = "https://example.com/avatar.jpg";
-    yield initTestBed(`<Avatar url="${TEST_URL}" name="Test User"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Verify it's an img element, not a div
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("src", TEST_URL);
-    yield (0, fixtures_1.expect)(driver.component.locator("div")).toHaveCount(0); // Should not contain a div
-}));
-(0, fixtures_1.test)("url property sets correct src attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const TEST_URL = "https://example.com/avatar.jpg";
-    yield initTestBed(`<Avatar url="${TEST_URL}" name="Test User"/>`, {});
-    const driver = yield createAvatarDriver();
-    // First verify the component exists
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    // Then check that it's an img element with the correct src
-    yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-image", "none"); // Should not have background image if it's an img
-    const imageElement = driver.component;
-    yield (0, fixtures_1.expect)(imageElement).toHaveAttribute("src", TEST_URL);
-}));
-(0, fixtures_1.test)("url with name prefers image over initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const TEST_URL = "https://example.com/avatar.jpg";
-    const TEST_NAME = "John Doe";
-    yield initTestBed(`<Avatar url="${TEST_URL}" name="${TEST_NAME}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should render as img element, not show initials
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("src", TEST_URL);
-    yield (0, fixtures_1.expect)(driver.component).not.toContainText("JD"); // Should not show initials
-}));
-(0, fixtures_1.test)("empty url falls back to initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const TEST_NAME = "Jane Smith";
-    yield initTestBed(`<Avatar url="" name="${TEST_NAME}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should show initials when url is empty
-    yield (0, fixtures_1.expect)(driver.component).toContainText("JS");
-    yield (0, fixtures_1.expect)(driver.component).not.toHaveAttribute("src"); // Should not have src attribute
-}));
-(0, fixtures_1.test)("url property handles relative paths", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const RELATIVE_URL = "./images/avatar.jpg";
-    yield initTestBed(`<Avatar url="${RELATIVE_URL}" name="Test User"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Browser normalizes relative paths by adding leading slash
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("src", `/${RELATIVE_URL}`);
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-(0, fixtures_1.test)("url property handles data URLs", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const DATA_URL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
-    yield initTestBed(`<Avatar url="${DATA_URL}" name="Test User"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Browser normalizes data URLs by adding leading slash
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("src", `/${DATA_URL}`);
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-// --- Image Error and Fallback Tests ---
-(0, fixtures_1.test)("image load error falls back to initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    // Note: Current implementation doesn't have error handling, but we can test the basic behavior
-    const BROKEN_URL = "https://broken.example.com/missing.jpg";
-    const TEST_NAME = "Fallback User";
-    yield initTestBed(`<Avatar url="${BROKEN_URL}" name="${TEST_NAME}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Currently shows img element even with broken URL (no fallback implemented yet)
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("src", BROKEN_URL);
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("alt", `Avatar of ${TEST_NAME}`);
-    // This test documents current behavior - future enhancement would add error handling
-}));
-(0, fixtures_1.test)("image load error without name shows empty avatar", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    // Note: Current implementation doesn't have error handling, testing basic behavior
-    const BROKEN_URL = "https://broken.example.com/missing.jpg";
-    yield initTestBed(`<Avatar url="${BROKEN_URL}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Currently shows img element even with broken URL and no name
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("src", BROKEN_URL);
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("alt", "Avatar");
-    // This test documents current behavior - future enhancement would add error handling
-}));
-(0, fixtures_1.test)("broken image URL handles gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const BROKEN_URL = "https://nonexistent.example.com/broken.jpg";
-    const TEST_NAME = "Test User";
-    yield initTestBed(`<Avatar url="${BROKEN_URL}" name="${TEST_NAME}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should still render img element with broken URL - browser handles gracefully
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("src", BROKEN_URL);
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("alt", `Avatar of ${TEST_NAME}`);
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-// --- Accessibility Tests ---
-(0, fixtures_1.test)("avatar with name has correct alt text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const TEST_URL = "https://example.com/avatar.jpg";
-    const TEST_NAME = "John Doe";
-    yield initTestBed(`<Avatar url="${TEST_URL}" name="${TEST_NAME}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should have correct alt text for named avatar
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("alt", `Avatar of ${TEST_NAME}`);
-}));
-(0, fixtures_1.test)("avatar without name has generic alt text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const TEST_URL = "https://example.com/avatar.jpg";
-    yield initTestBed(`<Avatar url="${TEST_URL}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should have generic alt text when no name provided
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("alt", "Avatar");
-}));
-(0, fixtures_1.test)("initials avatar has correct aria-label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const TEST_NAME = "Jane Smith";
-    yield initTestBed(`<Avatar name="${TEST_NAME}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should have correct aria-label for initials avatar
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("aria-label", `Avatar of ${TEST_NAME}`);
-}));
-(0, fixtures_1.test)("initials avatar has correct role", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const TEST_NAME = "Bob Wilson";
-    yield initTestBed(`<Avatar name="${TEST_NAME}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should have img role for accessibility
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("role", "img");
-}));
-(0, fixtures_1.test)("empty avatar has appropriate accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    yield initTestBed(`<Avatar/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should have generic aria-label and img role when empty
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("aria-label", "Avatar");
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("role", "img");
-}));
-(0, fixtures_1.test)("avatar is keyboard accessible when clickable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    const TEST_NAME = "Keyboard User";
-    const { testStateDriver } = yield initTestBed(`
-    <Avatar
-      name="${TEST_NAME}"
-      onClick="testState = 'keyboard-activated'"
-    />
-  `, {});
-    const driver = yield createAvatarDriver();
-    // Should be focusable when clickable
-    yield driver.component.focus();
-    yield (0, fixtures_1.expect)(driver.component).toBeFocused();
-    // Should be activatable with Enter key
-    yield driver.component.press("Enter");
-    // Verify keyboard activation worked
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("keyboard-activated");
-}));
-// --- Event and Interaction Tests ---
-(0, fixtures_1.test)("click event provides correct event data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const TEST_NAME = "Event User";
-    const TEST_URL = "https://example.com/event-avatar.jpg";
-    // Test that click events work correctly with event metadata
-    const { testStateDriver } = yield initTestBed(`
-    <Avatar
-      name="${TEST_NAME}"
-      url="${TEST_URL}"
-      onClick="testState = 'click-event-fired'"
-    />
-  `, {});
-    const driver = yield createAvatarDriver();
-    // Click the avatar
-    yield driver.component.click();
-    // Verify the event was fired
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("click-event-fired");
-    // Verify it's an image avatar (has URL)
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("src", TEST_URL);
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("alt", `Avatar of ${TEST_NAME}`);
-}));
-(0, fixtures_1.test)("non-clickable avatar does not respond to clicks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    const TEST_NAME = "Non Clickable User";
-    yield initTestBed(`<Avatar name="${TEST_NAME}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should not have clickable class when no onClick provided
-    yield (0, fixtures_1.expect)(driver.component).not.toHaveClass(/clickable/);
-    // Click should not cause any errors (though no handler is attached)
-    yield driver.component.click();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible(); // Should still be visible after click
-}));
-(0, fixtures_1.test)("non-clickable avatar is not focusable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const TEST_NAME = "Non Focusable User";
-    yield initTestBed(`<Avatar name="${TEST_NAME}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should not be focusable when no onClick provided
-    const tabIndex = yield driver.component.getAttribute("tabindex");
-    (0, fixtures_1.expect)(tabIndex).not.toBe("0");
-    // Attempting to focus should not work
-    yield driver.component.focus();
-    yield (0, fixtures_1.expect)(driver.component).not.toBeFocused();
-}));
-(0, fixtures_1.test)("avatar focus state works correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const TEST_NAME = "Focus User";
-    const { testStateDriver } = yield initTestBed(`
-    <Avatar
-      name="${TEST_NAME}"
-      onClick="testState = 'focused-and-clicked'"
-    />
-  `, {});
-    const driver = yield createAvatarDriver();
-    // Should be focusable when clickable
-    yield driver.component.focus();
-    yield (0, fixtures_1.expect)(driver.component).toBeFocused();
-    // Should have clickable class for focus styling
-    yield (0, fixtures_1.expect)(driver.component).toHaveClass(/clickable/);
-    // Should respond to Enter key press when focused
-    yield driver.component.press("Enter");
-    // Check the testState was updated through the click event
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused-and-clicked");
-    // Should blur correctly
-    yield driver.component.blur();
-    yield (0, fixtures_1.expect)(driver.component).not.toBeFocused();
-}));
-(0, fixtures_1.test)("avatar applies clickable styling when onClick provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    const TEST_NAME = "Clickable User";
-    yield initTestBed(`<Avatar name="${TEST_NAME}" onClick="console.log('clicked')"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should have clickable class when onClick is provided
-    yield (0, fixtures_1.expect)(driver.component).toHaveClass(/clickable/);
-}));
-(0, fixtures_1.test)("avatar hover state works correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const TEST_NAME = "Hover User";
-    yield initTestBed(`<Avatar name="${TEST_NAME}" onClick="console.log('hovered and clicked')"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should have clickable class for hover styles
-    yield (0, fixtures_1.expect)(driver.component).toHaveClass(/clickable/);
-    // Hover should not cause errors
-    yield driver.component.hover();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    // Should still be hoverable and clickable
-    yield driver.component.click();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-// --- Edge Cases and Name Processing ---
-(0, fixtures_1.test)("name with only spaces shows empty avatar", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    yield initTestBed(`<Avatar name="   "/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should show empty avatar when name contains only whitespace
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toBeEmpty(); // Should not show any initials
-    // Should still have proper accessibility attributes
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("aria-label", "Avatar of    ");
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("role", "img");
-}));
-(0, fixtures_1.test)("name with special characters processes correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    // Test names with accents, diacritics, and special characters
-    // Test accented characters
-    yield initTestBed(`<Avatar name="José María"/>`, {});
-    const accentDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(accentDriver.component).toContainText("JM");
-    // Test diacritics
-    yield initTestBed(`<Avatar name="François Müller"/>`, {});
-    const diacriticsDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(diacriticsDriver.component).toContainText("FM");
-    // Test special characters (should extract first letter)
-    yield initTestBed(`<Avatar name="O'Connor"/>`, {});
-    const apostropheDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(apostropheDriver.component).toContainText("O");
-    // Test hyphenated names
-    yield initTestBed(`<Avatar name="Mary-Jane Smith"/>`, {});
-    const hyphenDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(hyphenDriver.component).toContainText("MS");
-}));
-(0, fixtures_1.test)("very long name gets truncated to 3 initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    yield initTestBed(`<Avatar name="John Michael Alexander Christopher David Wilson"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should only show first 3 initials even with many words
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toContainText("JMA");
-    // Should not contain more than 3 characters
-    const text = yield driver.component.textContent();
-    (0, fixtures_1.expect)(text === null || text === void 0 ? void 0 : text.length).toBeLessThanOrEqual(3);
-}));
-(0, fixtures_1.test)("single character name shows single initial", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    yield initTestBed(`<Avatar name="X"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should show single character when name is just one character
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toContainText("X");
-    // Verify the text content is exactly one character
-    const text = yield driver.component.textContent();
-    (0, fixtures_1.expect)(text).toBe("X");
-}));
-(0, fixtures_1.test)("name with mixed case preserves uppercase initials", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    // Test various case combinations
-    // Test lowercase input
-    yield initTestBed(`<Avatar name="john doe"/>`, {});
-    const lowerDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(lowerDriver.component).toContainText("JD");
-    // Test mixed case input
-    yield initTestBed(`<Avatar name="jOhN dOe"/>`, {});
-    const mixedDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(mixedDriver.component).toContainText("JD");
-    // Test already uppercase input
-    yield initTestBed(`<Avatar name="JOHN DOE"/>`, {});
-    const upperDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(upperDriver.component).toContainText("JD");
-    // Test mixed case with lowercase second word
-    yield initTestBed(`<Avatar name="John doe"/>`, {});
-    const partialDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(partialDriver.component).toContainText("JD");
-}));
-(0, fixtures_1.test)("name with numbers and letters processes correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    // Test names that start with numbers
-    yield initTestBed(`<Avatar name="3M Company"/>`, {});
-    const numberStartDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(numberStartDriver.component).toContainText("3C");
-    // Test names with numbers in the middle
-    yield initTestBed(`<Avatar name="John 2nd Smith"/>`, {});
-    const numberMiddleDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(numberMiddleDriver.component).toContainText("J2S");
-    // Test mixed alphanumeric names
-    yield initTestBed(`<Avatar name="ABC123 Company"/>`, {});
-    const mixedDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(mixedDriver.component).toContainText("AC");
-    // Test all numbers (edge case)
-    yield initTestBed(`<Avatar name="123 456"/>`, {});
-    const allNumbersDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(allNumbersDriver.component).toContainText("14");
-}));
-(0, fixtures_1.test)("emoji in name handles gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    // Test names with emoji characters
-    yield initTestBed(`<Avatar name="John 😀 Doe"/>`, {});
-    const emojiDriver = yield createAvatarDriver();
-    // Should handle emoji gracefully - either include it or skip it
-    yield (0, fixtures_1.expect)(emojiDriver.component).toBeVisible();
-    const text = yield emojiDriver.component.textContent();
-    // Text should not be empty and should handle emoji appropriately
-    (0, fixtures_1.expect)(text).toBeTruthy();
-    (0, fixtures_1.expect)(text.length).toBeGreaterThan(0);
-    // Test emoji at start of name
-    yield initTestBed(`<Avatar name="🚀 Rocket Company"/>`, {});
-    const emojiStartDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(emojiStartDriver.component).toBeVisible();
-    const startText = yield emojiStartDriver.component.textContent();
-    (0, fixtures_1.expect)(startText).toBeTruthy();
-    // Test name that's only emoji
-    yield initTestBed(`<Avatar name="😀😃"/>`, {});
-    const onlyEmojiDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(onlyEmojiDriver.component).toBeVisible();
-    // Should handle emoji-only names gracefully (may show emoji or be empty)
-    const emojiOnlyText = yield onlyEmojiDriver.component.textContent();
-    // Just verify it doesn't crash - behavior may vary
-}));
-// --- Integration and Layout Tests ---
-(0, fixtures_1.test)("avatar maintains aspect ratio in flex containers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    // Test basic avatar functionality - this serves as an integration test for layout contexts
-    yield initTestBed(`<Avatar name="Flex User"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Avatar should be visible and show initials
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toContainText("FU");
-    // Verify it's rendered as the expected element type (div for initials)
-    const tagName = yield driver.getComponentTagName();
-    (0, fixtures_1.expect)(tagName).toBe("div");
-    // Should have basic layout properties that work in flex containers
-    const boundingBox = yield driver.component.boundingBox();
-    (0, fixtures_1.expect)(boundingBox).not.toBeNull();
-    (0, fixtures_1.expect)(boundingBox.width).toBeGreaterThan(30);
-    (0, fixtures_1.expect)(boundingBox.height).toBeGreaterThan(30);
-}));
-(0, fixtures_1.test)("avatar works correctly in Card component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    // Test avatar with image URL (common in card layouts)
-    yield initTestBed(`<Avatar name="Card User" url="https://example.com/avatar.jpg"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should render as img element when URL is provided
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("src", "https://example.com/avatar.jpg");
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("alt", "Avatar of Card User");
-    // Verify it's rendered as img element
-    const tagName = yield driver.getComponentTagName();
-    (0, fixtures_1.expect)(tagName).toBe("img");
-    // Should have proper dimensions
-    const boundingBox = yield driver.component.boundingBox();
-    (0, fixtures_1.expect)(boundingBox).not.toBeNull();
-    (0, fixtures_1.expect)(boundingBox.width).toBeGreaterThan(30);
-    (0, fixtures_1.expect)(boundingBox.height).toBeGreaterThan(30);
-}));
-(0, fixtures_1.test)("multiple avatars align correctly in horizontal layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    // Test avatar with different sizes
-    yield initTestBed(`<Avatar name="Small User" size="sm"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Avatar should be visible and properly sized
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toContainText("SU");
-    // Should be rendered as div for initials
-    const tagName = yield driver.getComponentTagName();
-    (0, fixtures_1.expect)(tagName).toBe("div");
-    // Should have appropriate size for small avatar
-    const boundingBox = yield driver.component.boundingBox();
-    (0, fixtures_1.expect)(boundingBox).not.toBeNull();
-    (0, fixtures_1.expect)(boundingBox.width).toBeGreaterThan(40); // Should be reasonable for sm size
-    (0, fixtures_1.expect)(boundingBox.height).toBeGreaterThan(40);
-}));
-(0, fixtures_1.test)("avatar respects parent container constraints", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    // Test avatar with large size (would test constraint behavior in real usage)
-    yield initTestBed(`<Avatar name="Large User" size="lg"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Avatar should be visible and show initials
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toContainText("LU");
-    // Should be rendered as div for initials
-    const tagName = yield driver.getComponentTagName();
-    (0, fixtures_1.expect)(tagName).toBe("div");
-    // Should have larger dimensions for lg size
-    const boundingBox = yield driver.component.boundingBox();
-    (0, fixtures_1.expect)(boundingBox).not.toBeNull();
-    (0, fixtures_1.expect)(boundingBox.width).toBeGreaterThan(80); // Should be larger for lg size
-    (0, fixtures_1.expect)(boundingBox.height).toBeGreaterThan(80);
-}));
-// --- Performance and Optimization Tests ---
-(0, fixtures_1.test)("avatar memoization prevents unnecessary re-renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    // Test that Avatar component doesn't re-render when props haven't changed
-    let renderCount = 0;
-    const { testStateDriver } = yield initTestBed(`
-    <Avatar
-      name="Memo User"
-      size="sm"
-      onClick="testState = ++testState || 1"
-    />
-  `, {});
-    const driver = yield createAvatarDriver();
-    // Initial render
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toContainText("MU");
-    // Click should trigger state change but not cause unnecessary re-renders
-    yield driver.component.click();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(1);
-    // Component should still be visible and functional
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toContainText("MU");
-    // Test that memoization works by ensuring component behavior is stable
-    yield driver.component.click();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(2);
-    // Component should maintain consistent behavior (indicates memoization working)
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toContainText("MU");
-}));
-(0, fixtures_1.test)("abbreviatedName calculation is memoized", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    // Test that abbreviated name calculation is efficient and memoized
-    const TEST_NAME = "Very Long Name That Should Be Abbreviated";
-    yield initTestBed(`<Avatar name="${TEST_NAME}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should show abbreviated initials
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toContainText("VLN");
-    // Test that name processing is working correctly (indicates memoization logic is sound)
-    const text = yield driver.component.textContent();
-    (0, fixtures_1.expect)(text).toBe("VLN");
-    // Test multiple renders with same name should be efficient
-    yield initTestBed(`<Avatar name="${TEST_NAME}"/>`, {});
-    const driver2 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver2.component).toContainText("VLN");
-    // Test that different names are processed correctly
-    yield initTestBed(`<Avatar name="Different Name"/>`, {});
-    const driver3 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver3.component).toContainText("DN");
-}));
-(0, fixtures_1.test)("avatar handles rapid prop changes efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    // Test that Avatar handles rapid prop changes without performance issues
-    // Start with one configuration
-    yield initTestBed(`<Avatar name="User One" size="sm"/>`, {});
-    const driver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toContainText("UO");
-    yield (0, fixtures_1.expect)(driver.component).toHaveCSS("width", "48px"); // sm size
-    // Change to different size
-    yield initTestBed(`<Avatar name="User One" size="md"/>`, {});
-    const driver2 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver2.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver2.component).toContainText("UO");
-    yield (0, fixtures_1.expect)(driver2.component).toHaveCSS("width", "64px"); // md size
-    // Change name while keeping size
-    yield initTestBed(`<Avatar name="Different User" size="md"/>`, {});
-    const driver3 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver3.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver3.component).toContainText("DU");
-    yield (0, fixtures_1.expect)(driver3.component).toHaveCSS("width", "64px"); // md size
-    // Switch to image avatar
-    yield initTestBed(`<Avatar name="Image User" url="https://example.com/avatar.jpg"/>`, {});
-    const driver4 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver4.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver4.component).toHaveAttribute("src", "https://example.com/avatar.jpg");
-    yield (0, fixtures_1.expect)(driver4.component).toHaveAttribute("alt", "Avatar of Image User");
-}));
-// --- Visual States and Loading Tests ---
-(0, fixtures_1.test)("avatar shows loading state during image load", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    // Current implementation doesn't have loading states, testing basic image behavior
-    const TEST_URL = "https://example.com/slow-loading-image.jpg";
-    const TEST_NAME = "Loading User";
-    yield initTestBed(`<Avatar url="${TEST_URL}" name="${TEST_NAME}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should render img element immediately (no loading state currently implemented)
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("src", TEST_URL);
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("alt", `Avatar of ${TEST_NAME}`);
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    // This test documents current behavior - future enhancement would add loading states
-}));
-(0, fixtures_1.test)("avatar transitions smoothly between states", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    // Test that Avatar transitions smoothly between initials and image states
-    // Start with initials avatar
-    yield initTestBed(`<Avatar name="Transition User"/>`, {});
-    const driver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toContainText("TU");
-    // Verify it's rendered as div for initials
-    let tagName = yield driver.getComponentTagName();
-    (0, fixtures_1.expect)(tagName).toBe("div");
-    // Switch to image avatar
-    yield initTestBed(`<Avatar name="Transition User" url="https://example.com/transition.jpg"/>`, {});
-    const driver2 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver2.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver2.component).toHaveAttribute("src", "https://example.com/transition.jpg");
-    yield (0, fixtures_1.expect)(driver2.component).toHaveAttribute("alt", "Avatar of Transition User");
-    // Verify it's rendered as img for image
-    tagName = yield driver2.getComponentTagName();
-    (0, fixtures_1.expect)(tagName).toBe("img");
-    // Switch back to initials
-    yield initTestBed(`<Avatar name="Transition User"/>`, {});
-    const driver3 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver3.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver3.component).toContainText("TU");
-    // Verify it's back to div for initials
-    tagName = yield driver3.getComponentTagName();
-    (0, fixtures_1.expect)(tagName).toBe("div");
-}));
-(0, fixtures_1.test)("avatar lazy loading works correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    // Test that Avatar handles lazy loading behavior correctly
-    // Note: Current implementation doesn't have lazy loading, testing basic image behavior
-    const TEST_URL = "https://example.com/lazy-loading-image.jpg";
-    const TEST_NAME = "Lazy User";
-    yield initTestBed(`<Avatar url="${TEST_URL}" name="${TEST_NAME}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should render img element immediately (no lazy loading currently implemented)
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("src", TEST_URL);
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("alt", `Avatar of ${TEST_NAME}`);
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    // Test that image attributes are set correctly for future lazy loading enhancement
-    const tagName = yield driver.getComponentTagName();
-    (0, fixtures_1.expect)(tagName).toBe("img");
-    // Test that image is properly accessible
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("alt", `Avatar of ${TEST_NAME}`);
-    // This test documents current behavior - future enhancement would add lazy loading
-    // with attributes like loading="lazy" and proper intersection observer handling
-}));
-// --- Error Handling and Robustness Tests ---
-(0, fixtures_1.test)("avatar handles null and undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    // Test that null/undefined props don't break component
-    // Test with undefined name
-    yield initTestBed(`<Avatar/>`, {});
-    const driver1 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver1.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver1.component).toHaveAttribute("aria-label", "Avatar");
-    yield (0, fixtures_1.expect)(driver1.component).toHaveAttribute("role", "img");
-    // Test with empty string name (should still show "Avatar" because empty string is falsy)
-    yield initTestBed(`<Avatar name=""/>`, {});
-    const driver2 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver2.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver2.component).toHaveAttribute("aria-label", "Avatar");
-    yield (0, fixtures_1.expect)(driver2.component).toHaveAttribute("role", "img");
-    // Test with undefined URL (should fall back to initials)
-    yield initTestBed(`<Avatar name="Test User"/>`, {});
-    const driver3 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver3.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver3.component).toContainText("TU");
-    // Test with empty URL (should fall back to initials)
-    yield initTestBed(`<Avatar name="Test User" url=""/>`, {});
-    const driver4 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver4.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver4.component).toContainText("TU");
-    // Test with undefined size (should use default)
-    yield initTestBed(`<Avatar name="Size User"/>`, {});
-    const driver5 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver5.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver5.component).toContainText("SU");
-    yield (0, fixtures_1.expect)(driver5.component).toHaveCSS("width", "48px"); // default sm size
-}));
-(0, fixtures_1.test)("avatar handles extremely long URLs", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    const VERY_LONG_URL = "https://example.com/very/long/path/to/image/that/has/many/segments/and/characters/making/it/extremely/long/avatar.jpg?param1=value1&param2=value2&param3=value3&param4=value4&param5=value5";
-    const TEST_NAME = "URL Test User";
-    yield initTestBed(`<Avatar url="${VERY_LONG_URL}" name="${TEST_NAME}"/>`, {});
-    const driver = yield createAvatarDriver();
-    // Should handle very long URLs without breaking
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("src", VERY_LONG_URL);
-    yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("alt", `Avatar of ${TEST_NAME}`);
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-(0, fixtures_1.test)("avatar handles concurrent prop updates correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-    // Test that rapid prop changes don't cause race conditions
-    // Start with initial state
-    yield initTestBed(`<Avatar name="Initial User" size="sm"/>`, {});
-    const driver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.component).toContainText("IU");
-    // Rapidly change multiple props in sequence
-    yield initTestBed(`<Avatar name="Updated User" size="md"/>`, {});
-    const driver2 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver2.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver2.component).toContainText("UU");
-    yield (0, fixtures_1.expect)(driver2.component).toHaveCSS("width", "64px"); // md size
-    // Change to image avatar
-    yield initTestBed(`<Avatar name="Image User" url="https://example.com/user.jpg"/>`, {});
-    const driver3 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver3.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver3.component).toHaveAttribute("src", "https://example.com/user.jpg");
-    // Change back to initials with different size
-    yield initTestBed(`<Avatar name="Final User" size="lg"/>`, {});
-    const driver4 = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(driver4.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver4.component).toContainText("FU");
-    yield (0, fixtures_1.expect)(driver4.component).toHaveCSS("width", "96px"); // lg size
-    // Verify final state is correct (no race condition artifacts)
-    const tagName = yield driver4.getComponentTagName();
-    (0, fixtures_1.expect)(tagName).toBe("div"); // Should be div for initials, not img
-}));
-(0, fixtures_1.test)("avatar memory usage stays stable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-    // Test that component doesn't leak memory with frequent updates
-    // Create multiple avatars with different configurations
-    const configurations = [
-        { name: "User 1", size: "sm" },
-        { name: "User 2", size: "md" },
-        { name: "User 3", size: "lg" },
-        { name: "User 4", url: "https://example.com/user4.jpg" },
-        { name: "User 5", url: "https://example.com/user5.jpg" },
-    ];
-    // Test each configuration
-    for (const config of configurations) {
-        const markup = config.url
-            ? `<Avatar name="${config.name}" url="${config.url}"/>`
-            : `<Avatar name="${config.name}" size="${config.size}"/>`;
-        yield initTestBed(markup, {});
-        const driver = yield createAvatarDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        if (config.url) {
-            yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("src", config.url);
-            yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("alt", `Avatar of ${config.name}`);
-        }
-        else {
-            const initials = config.name
-                .split(" ")
-                .map((n) => n[0])
-                .join("");
-            yield (0, fixtures_1.expect)(driver.component).toContainText(initials);
-        }
-    }
-    // Test that final state is clean and functional
-    yield initTestBed(`<Avatar name="Final Test" size="sm"/>`, {});
-    const finalDriver = yield createAvatarDriver();
-    yield (0, fixtures_1.expect)(finalDriver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(finalDriver.component).toContainText("FT");
-    yield (0, fixtures_1.expect)(finalDriver.component).toHaveCSS("width", "48px");
-    // This test verifies that multiple avatar creations don't cause memory leaks
-    // by ensuring the component continues to function correctly after multiple instantiations
-}));
-fixtures_1.test.describe("Theme Vars", () => {
-    (0, fixtures_1.test)("custom backgroundColor theme var applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const CUSTOM_BACKGROUND = "rgb(255, 192, 203)"; // Pink background
-        const TEST_NAME = "Background User";
-        yield initTestBed(`<Avatar name="${TEST_NAME}"/>`, {
-            testThemeVars: {
-                "backgroundColor-Avatar": CUSTOM_BACKGROUND,
-            },
-        });
-        const driver = yield createAvatarDriver();
-        // Should apply custom background color to initials avatar
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", CUSTOM_BACKGROUND);
-        yield (0, fixtures_1.expect)(driver.component).toContainText("BU"); // Should show initials
-    }));
-    (0, fixtures_1.test)("custom textColor theme var applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const CUSTOM_TEXT_COLOR = "rgb(255, 0, 0)"; // Red text
-        const TEST_NAME = "Text User";
-        yield initTestBed(`<Avatar name="${TEST_NAME}"/>`, {
-            testThemeVars: {
-                "textColor-Avatar": CUSTOM_TEXT_COLOR,
-            },
-        });
-        const driver = yield createAvatarDriver();
-        // Should apply custom text color to initials
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("color", CUSTOM_TEXT_COLOR);
-        yield (0, fixtures_1.expect)(driver.component).toContainText("TU"); // Should show initials
-    }));
-    (0, fixtures_1.test)("custom fontWeight theme var applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const CUSTOM_FONT_WEIGHT = "700"; // Bold
-        const TEST_NAME = "Bold User";
-        yield initTestBed(`<Avatar name="${TEST_NAME}"/>`, {
-            testThemeVars: {
-                "fontWeight-Avatar": CUSTOM_FONT_WEIGHT,
-            },
-        });
-        const driver = yield createAvatarDriver();
-        // Should apply custom font weight to initials
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("font-weight", CUSTOM_FONT_WEIGHT);
-        yield (0, fixtures_1.expect)(driver.component).toContainText("BU"); // Should show initials
-    }));
-    (0, fixtures_1.test)("custom borderRadius theme var applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const CUSTOM_BORDER_RADIUS = "4px"; // Square corners instead of default round
-        const TEST_NAME = "Square User";
-        yield initTestBed(`<Avatar name="${TEST_NAME}"/>`, {
-            testThemeVars: {
-                "borderRadius-Avatar": CUSTOM_BORDER_RADIUS,
-            },
-        });
-        const driver = yield createAvatarDriver();
-        // Should apply custom border radius
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-radius", CUSTOM_BORDER_RADIUS);
-        yield (0, fixtures_1.expect)(driver.component).toContainText("SU"); // Should show initials
-    }));
-    (0, fixtures_1.test)("custom boxShadow theme var applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const CUSTOM_BOX_SHADOW = "rgba(0, 0, 0, 0.3) 0px 4px 8px 0px"; // Normalized format
-        const TEST_NAME = "Shadow User";
-        yield initTestBed(`<Avatar name="${TEST_NAME}"/>`, {
-            testThemeVars: {
-                "boxShadow-Avatar": "0px 4px 8px rgba(0, 0, 0, 0.3)",
-            },
-        });
-        const driver = yield createAvatarDriver();
-        // Should apply custom box shadow (browser normalizes the format)
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("box-shadow", CUSTOM_BOX_SHADOW);
-        yield (0, fixtures_1.expect)(driver.component).toContainText("SU"); // Should show initials
-    }));
-    (0, fixtures_1.test)("style prop overrides theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-        // Note: This test documents the current behavior - XMLUI may not support
-        // inline styles in templates, so theme variables take precedence
-        const THEME_BACKGROUND = "rgb(255, 192, 203)"; // Pink from theme
-        const TEST_NAME = "Override User";
-        yield initTestBed(`<Avatar name="${TEST_NAME}"/>`, {
-            testThemeVars: {
-                "backgroundColor-Avatar": THEME_BACKGROUND,
-            },
-        });
-        const driver = yield createAvatarDriver();
-        // Theme variable should be applied (style prop may not work in XMLUI templates)
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", THEME_BACKGROUND);
-        yield (0, fixtures_1.expect)(driver.component).toContainText("OU"); // Should show initials
-        // This test documents current behavior - inline styles may need programmatic setting
-    }));
-    (0, fixtures_1.test)("style prop applies layout properties correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        // Note: This test documents current behavior - XMLUI templates may not support
-        // inline styles, so we test the component's default styling behavior
-        const TEST_NAME = "Layout User";
-        yield initTestBed(`<Avatar name="${TEST_NAME}"/>`, {});
-        const driver = yield createAvatarDriver();
-        // Should have default styling applied (no custom layout props in this test)
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("position", "static"); // Default position
-        yield (0, fixtures_1.expect)(driver.component).toContainText("LU"); // Should show initials
-        // This test documents current behavior - programmatic style setting may be needed for layout props
-    }));
-    (0, fixtures_1.test)("theme border applies to all sides", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderLeft applies to left side", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderLeft-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderRight applies to right side", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderRight-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderHorizontal applies to left and right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderHorizontal-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderLeft overrides borderHorizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderHorizontal-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-                "borderLeft-Avatar": "8px double rgb(0, 128, 0)",
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderRight overrides borderHorizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderHorizontal-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-                "borderRight-Avatar": "8px double rgb(0, 128, 0)",
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderTop applies to top side", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderTop-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderBottom applies to bottom side", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderBottom-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderVertical applies to top and bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderVertical-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderTop overrides borderVertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderVertical-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-                "borderTop-Avatar": "8px double rgb(0, 128, 0)",
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderBottom overrides borderVertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderVertical-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-                "borderBottom-Avatar": "8px double rgb(0, 128, 0)",
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderColor applies to all sides", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-        const EXPECTED_COLOR = "rgb(0, 128, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderColor-Avatar": EXPECTED_COLOR,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderColor overrides border color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        const UPDATED = "rgb(0, 128, 0)";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderColor-Avatar": UPDATED,
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderHorizontalColor overrides border color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        const UPDATED = "rgb(0, 128, 0)";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderHorizontalColor-Avatar": UPDATED,
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderLeftColor overrides border color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        const UPDATED = "rgb(0, 128, 0)";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderLeftColor-Avatar": UPDATED,
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderRightColor overrides border color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        const UPDATED = "rgb(0, 128, 0)";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderRightColor-Avatar": UPDATED,
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderVerticalColor overrides border color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        const UPDATED = "rgb(0, 128, 0)";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderVerticalColor-Avatar": UPDATED,
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderTopColor overrides border color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        const UPDATED = "rgb(0, 128, 0)";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderTopColor-Avatar": UPDATED,
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderBottomColor overrides border color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        const UPDATED = "rgb(0, 128, 0)";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderBottomColor-Avatar": UPDATED,
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderStyle applies to all sides", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-        const EXPECTED_COLOR = "rgb(0, 128, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderStyle-Avatar": EXPECTED_STYLE,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderStyle overrides border style", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        const UPDATED = "double";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderStyle-Avatar": UPDATED,
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderHorizontalWidth overrides border width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        const UPDATED = "12px";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderHorizontalWidth-Avatar": UPDATED,
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderLeftWidth overrides border width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        const UPDATED = "12px";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderLeftWidth-Avatar": UPDATED,
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderRightWidth overrides border width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        const UPDATED = "12px";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderRightWidth-Avatar": UPDATED,
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderVerticalWidth overrides border width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        const UPDATED = "12px";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderVerticalWidth-Avatar": UPDATED,
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderTopWidth overrides border width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        const UPDATED = "12px";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderTopWidth-Avatar": UPDATED,
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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)("theme borderBottomWidth overrides border width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAvatarDriver, }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        const EXPECTED_WIDTH = "5px";
-        const EXPECTED_STYLE = "dotted";
-        const UPDATED = "12px";
-        yield initTestBed('<Avatar name="Tim"/>', {
-            testThemeVars: {
-                "borderBottomWidth-Avatar": UPDATED,
-                "border-Avatar": `${EXPECTED_STYLE} ${EXPECTED_COLOR} ${EXPECTED_WIDTH}`,
-            },
-        });
-        const component = (yield createAvatarDriver()).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);
-    }));
-});