- ),
+ );
+ },
play: StandardInteraction.play,
};
export const Inverse = {
- render: () => (
-
-
-
Inverse Mode
-
{}}
- />
+ render: () => {
+ const [value, setValue] = React.useState("option1");
+
+ return (
+
+
+
Inverse Mode
+ setValue(newValue)}
+ />
+
- ),
+ );
+ },
play: InverseInteraction.play,
};
diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index 5a26926..6d5a814 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -35,11 +35,16 @@ export default {
const Template = (args) => {
const [value, setValue] = useState("");
return (
-
+
);
};
diff --git a/tests/accessibility/Select.a11y.test.jsx b/tests/accessibility/Select.a11y.test.jsx
index 8bfd6d2..2f73cd6 100644
--- a/tests/accessibility/Select.a11y.test.jsx
+++ b/tests/accessibility/Select.a11y.test.jsx
@@ -47,8 +47,8 @@ describe("Select Component Accessibility", () => {
await user.click(selectButton);
await waitFor(() => {
- const menu = screen.getByRole("menu");
- expect(menu).toBeInTheDocument();
+ const listbox = screen.getByRole("listbox");
+ expect(listbox).toBeInTheDocument();
});
});
@@ -60,7 +60,7 @@ describe("Select Component Accessibility", () => {
await user.click(selectButton);
await waitFor(() => {
- const options = screen.getAllByRole("menuitem");
+ const options = screen.getAllByRole("option");
expect(options).toHaveLength(3);
expect(options[0]).toHaveTextContent("Option 1");
expect(options[1]).toHaveTextContent("Option 2");
@@ -79,7 +79,7 @@ describe("Select Component Accessibility", () => {
await user.keyboard("{Enter}");
await waitFor(() => {
- expect(screen.getByRole("menu")).toBeInTheDocument();
+ expect(screen.getByRole("listbox")).toBeInTheDocument();
});
});
@@ -92,7 +92,7 @@ describe("Select Component Accessibility", () => {
await user.keyboard(" ");
await waitFor(() => {
- expect(screen.getByRole("menu")).toBeInTheDocument();
+ expect(screen.getByRole("listbox")).toBeInTheDocument();
});
});
@@ -104,7 +104,7 @@ describe("Select Component Accessibility", () => {
await user.click(selectButton);
await waitFor(() => {
- expect(screen.getByRole("menu")).toBeInTheDocument();
+ expect(screen.getByRole("listbox")).toBeInTheDocument();
});
await user.keyboard("{Escape}");
@@ -123,7 +123,7 @@ describe("Select Component Accessibility", () => {
await user.click(selectButton);
await waitFor(() => {
- expect(screen.getByRole("menu")).toBeInTheDocument();
+ expect(screen.getByRole("listbox")).toBeInTheDocument();
});
await user.click(screen.getByText("Option 1"));
@@ -179,7 +179,7 @@ describe("Select Component Accessibility", () => {
await user.click(selectButton);
await waitFor(() => {
- expect(screen.getByRole("menu")).toBeInTheDocument();
+ expect(screen.getByRole("listbox")).toBeInTheDocument();
});
await user.click(screen.getByText("Option 1"));
@@ -216,7 +216,7 @@ describe("Select Component Accessibility", () => {
const selectButton = screen.getByRole("button");
expect(selectButton).toHaveClass(
- "border-[var(--color-border-default-utility-negative)]"
+ "border-[var(--color-border-default-utility-negative)]",
);
});
});
@@ -230,7 +230,7 @@ describe("Select Component Accessibility", () => {
it("meets WCAG standards in disabled state", async () => {
const { container } = render(
-
+
,
);
const results = await axe(container);
expect(results).toHaveNoViolations();
@@ -250,7 +250,7 @@ describe("Select Component Accessibility", () => {
await user.click(selectButton);
await waitFor(() => {
- expect(screen.getByRole("menu")).toBeInTheDocument();
+ expect(screen.getByRole("listbox")).toBeInTheDocument();
});
const results = await axe(container);
@@ -264,7 +264,7 @@ describe("Select Component Accessibility", () => {
const selectButton = screen.getByRole("button");
expect(selectButton).toHaveClass(
- "text-[var(--color-content-default-primary)]"
+ "text-[var(--color-content-default-primary)]",
);
});
@@ -273,7 +273,7 @@ describe("Select Component Accessibility", () => {
const label = screen.getByText("Test Select");
expect(label).toHaveClass(
- "text-[var(--color-content-default-secondary)]"
+ "text-[var(--color-content-default-secondary)]",
);
});
});
@@ -284,10 +284,10 @@ describe("Select Component Accessibility", () => {
const selectButton = screen.getByRole("button");
expect(selectButton).toHaveClass(
- "focus-visible:border-[var(--color-border-default-utility-info)]"
+ "focus-visible:border-[var(--color-border-default-utility-info)]",
);
expect(selectButton).toHaveClass(
- "focus-visible:shadow-[0_0_5px_3px_#3281F8]"
+ "focus-visible:shadow-[0_0_5px_3px_#3281F8]",
);
});
@@ -297,10 +297,10 @@ describe("Select Component Accessibility", () => {
const selectButton = screen.getByRole("button");
// Focus state should be different from hover state
expect(selectButton).toHaveClass(
- "focus-visible:border-[var(--color-border-default-utility-info)]"
+ "focus-visible:border-[var(--color-border-default-utility-info)]",
);
expect(selectButton).toHaveClass(
- "hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+ "hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
);
});
});
diff --git a/tests/e2e/ContextMenu.storybook.test.ts b/tests/e2e/ContextMenu.storybook.test.ts
deleted file mode 100644
index 85d20e6..0000000
--- a/tests/e2e/ContextMenu.storybook.test.ts
+++ /dev/null
@@ -1,302 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test.describe("ContextMenu Components Storybook Tests", () => {
- test.beforeEach(async ({ page }) => {
- await page.goto(
- "http://localhost:6006/?path=/story/forms-contextmenu--default",
- );
- });
-
- test("renders default context menu", async ({ page }) => {
- const menu = page.getByRole("listbox");
- await expect(menu).toBeVisible();
-
- const items = page.getByRole("option");
- const count = await items.count();
- expect(count).toBeGreaterThan(0);
- });
-
- test("renders menu items correctly", async ({ page }) => {
- const menuItems = page.getByRole("option");
- const count = await menuItems.count();
-
- for (let i = 0; i < count; i++) {
- await expect(menuItems.nth(i)).toBeVisible();
- }
- });
-
- test("handles menu item clicks", async ({ page }) => {
- const menuItems = page.getByRole("option");
- const firstItem = menuItems.first();
-
- await firstItem.click();
-
- // Check that click was handled (no error should occur)
- await expect(firstItem).toBeVisible();
- });
-
- test("shows selected state correctly", async ({ page }) => {
- // Navigate to MenuItem story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-contextmenu--menu-item",
- );
-
- const menuItems = page.getByRole("option");
- const count = await menuItems.count();
-
- // Check that at least one item has selected state
- let hasSelected = false;
- for (let i = 0; i < count; i++) {
- const isSelected = await menuItems.nth(i).getAttribute("aria-selected");
- if (isSelected === "true") {
- hasSelected = true;
- break;
- }
- }
-
- expect(hasSelected).toBe(true);
- });
-
- test("shows submenu indicators", async ({ page }) => {
- // Navigate to MenuItem story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-contextmenu--menu-item",
- );
-
- const submenuArrows = page.getByTestId("submenu-arrow");
- const count = await submenuArrows.count();
-
- if (count > 0) {
- await expect(submenuArrows.first()).toBeVisible();
- }
- });
-
- test("shows checkmarks for selected items", async ({ page }) => {
- // Navigate to MenuItem story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-contextmenu--menu-item",
- );
-
- const checkmarks = page.getByTestId("checkmark");
- const count = await checkmarks.count();
-
- if (count > 0) {
- await expect(checkmarks.first()).toBeVisible();
- }
- });
-
- test("renders menu sections correctly", async ({ page }) => {
- // Navigate to MenuSection story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-contextmenu--menu-section",
- );
-
- const sectionTitles = page.getByText(/Section/);
- const count = await sectionTitles.count();
-
- expect(count).toBeGreaterThan(0);
-
- for (let i = 0; i < count; i++) {
- await expect(sectionTitles.nth(i)).toBeVisible();
- }
- });
-
- test("renders menu dividers correctly", async ({ page }) => {
- // Navigate to MenuDivider story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-contextmenu--menu-divider",
- );
-
- const dividers = page.getByTestId("context-menu-divider");
- const count = await dividers.count();
-
- expect(count).toBeGreaterThan(0);
-
- for (let i = 0; i < count; i++) {
- await expect(dividers.nth(i)).toBeVisible();
- }
- });
-
- test("shows all variants correctly", async ({ page }) => {
- // Navigate to All Variants story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-contextmenu--all-variants",
- );
-
- const menu = page.getByRole("listbox");
- await expect(menu).toBeVisible();
-
- const menuItems = page.getByRole("option");
- const count = await menuItems.count();
- expect(count).toBeGreaterThan(0);
-
- // Check for sections
- const sectionTitles = page.getByText(/Section/);
- const sectionCount = await sectionTitles.count();
- expect(sectionCount).toBeGreaterThan(0);
-
- // Check for dividers
- const dividers = page.getByTestId("context-menu-divider");
- const dividerCount = await dividers.count();
- expect(dividerCount).toBeGreaterThan(0);
- });
-
- test("handles keyboard navigation", async ({ page }) => {
- const menuItems = page.getByRole("option");
- const firstItem = menuItems.first();
-
- await firstItem.focus();
- await expect(firstItem).toBeFocused();
-
- // Navigate with arrow keys
- await page.keyboard.press("ArrowDown");
- const secondItem = menuItems.nth(1);
- await expect(secondItem).toBeFocused();
- });
-
- test("handles Enter key selection", async ({ page }) => {
- const menuItems = page.getByRole("option");
- const firstItem = menuItems.first();
-
- await firstItem.focus();
- await page.keyboard.press("Enter");
-
- // Should handle the selection without error
- await expect(firstItem).toBeVisible();
- });
-
- test("handles Space key selection", async ({ page }) => {
- const menuItems = page.getByRole("option");
- const firstItem = menuItems.first();
-
- await firstItem.focus();
- await page.keyboard.press(" ");
-
- // Should handle the selection without error
- await expect(firstItem).toBeVisible();
- });
-
- test("shows hover effects", async ({ page }) => {
- const menuItems = page.getByRole("option");
- const firstItem = menuItems.first();
-
- await firstItem.hover();
-
- // Check that hover styles are applied
- const backgroundColor = await firstItem.evaluate((el) => {
- const styles = window.getComputedStyle(el);
- return styles.backgroundColor;
- });
-
- // Should have some background color change on hover
- expect(backgroundColor).toBeDefined();
- });
-
- test("has correct styling for different sizes", async ({ page }) => {
- // Navigate to All Variants story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-contextmenu--all-variants",
- );
-
- const menuItems = page.getByRole("option");
- const count = await menuItems.count();
-
- for (let i = 0; i < count; i++) {
- const item = menuItems.nth(i);
- await expect(item).toBeVisible();
-
- // Check that items have proper text styling
- const fontSize = await item.evaluate((el) => {
- const styles = window.getComputedStyle(el);
- return styles.fontSize;
- });
-
- expect(fontSize).toBeDefined();
- }
- });
-
- test("has proper ARIA attributes", async ({ page }) => {
- const menu = page.getByRole("listbox");
- await expect(menu).toBeVisible();
-
- const menuItems = page.getByRole("option");
- const count = await menuItems.count();
-
- for (let i = 0; i < count; i++) {
- const item = menuItems.nth(i);
- const ariaSelected = await item.getAttribute("aria-selected");
- expect(ariaSelected).toBeDefined();
- }
- });
-
- test("handles disabled items correctly", async ({ page }) => {
- // Navigate to All Variants story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-contextmenu--all-variants",
- );
-
- const menuItems = page.getByRole("option");
- const count = await menuItems.count();
-
- // Check for disabled items
- for (let i = 0; i < count; i++) {
- const item = menuItems.nth(i);
- const isDisabled = await item.isDisabled();
-
- if (isDisabled) {
- // Disabled items should not respond to clicks
- await item.click();
- // Should not cause any errors
- await expect(item).toBeVisible();
- }
- }
- });
-
- test("has proper color contrast", async ({ page }) => {
- const menuItems = page.getByRole("option");
- const firstItem = menuItems.first();
-
- const color = await firstItem.evaluate((el) => {
- const styles = window.getComputedStyle(el);
- return styles.color;
- });
-
- expect(color).toBeDefined();
- expect(color).not.toBe("rgba(0, 0, 0, 0)"); // Should not be transparent
- });
-
- test("renders with custom styling", async ({ page }) => {
- // Navigate to With Custom Styling story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-contextmenu--with-custom-styling",
- );
-
- const menu = page.getByRole("listbox");
- await expect(menu).toBeVisible();
-
- // Check that custom styling is applied
- const customClass = await menu.getAttribute("class");
- expect(customClass).toContain("custom-menu");
- });
-
- test("handles interactive story correctly", async ({ page }) => {
- // Navigate to Interactive story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-contextmenu--interactive",
- );
-
- const menuItems = page.getByRole("option");
- const count = await menuItems.count();
-
- expect(count).toBeGreaterThan(0);
-
- // Test interaction with different items
- for (let i = 0; i < Math.min(count, 3); i++) {
- const item = menuItems.nth(i);
- await item.click();
-
- // Should handle click without error
- await expect(item).toBeVisible();
- }
- });
-});
diff --git a/tests/e2e/Input.storybook.test.ts b/tests/e2e/Input.storybook.test.ts
deleted file mode 100644
index 23fdfc8..0000000
--- a/tests/e2e/Input.storybook.test.ts
+++ /dev/null
@@ -1,308 +0,0 @@
-import { expect, test } from "@playwright/test";
-
-test.describe("Input Component Storybook", () => {
- test.beforeEach(async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--default");
- });
-
- test("renders default input correctly", async ({ page }) => {
- const input = page.getByRole("textbox");
- await expect(input).toBeVisible();
- await expect(input).toHaveAttribute("type", "text");
- });
-
- test("renders with label", async ({ page }) => {
- const label = page.getByText("Default Input");
- await expect(label).toBeVisible();
- });
-
- test("renders with placeholder", async ({ page }) => {
- const input = page.getByPlaceholder("Enter text...");
- await expect(input).toBeVisible();
- });
-
- test("handles text input", async ({ page }) => {
- const input = page.getByRole("textbox");
- await input.fill("test input");
- await expect(input).toHaveValue("test input");
- });
-
- test("handles focus and blur", async ({ page }) => {
- const input = page.getByRole("textbox");
-
- await input.focus();
- await expect(input).toBeFocused();
-
- await input.blur();
- await expect(input).not.toBeFocused();
- });
-
- test("handles keyboard navigation", async ({ page }) => {
- const input = page.getByRole("textbox");
-
- await input.focus();
- await expect(input).toBeFocused();
-
- await input.press("Tab");
- // Input should lose focus when tabbing away
- });
-
- test("handles different input types", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--interactive");
-
- const input = page.getByRole("textbox");
- await expect(input).toBeVisible();
-
- // Test typing
- await input.fill("test@example.com");
- await expect(input).toHaveValue("test@example.com");
- });
-});
-
-test.describe("Input Component - Size Variants", () => {
- test("renders small size correctly", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--small");
-
- const input = page.getByRole("textbox");
- await expect(input).toBeVisible();
-
- const label = page.getByText("Small Input");
- await expect(label).toBeVisible();
- });
-
- test("renders medium size correctly", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--medium");
-
- const input = page.getByRole("textbox");
- await expect(input).toBeVisible();
-
- const label = page.getByText("Medium Input");
- await expect(label).toBeVisible();
- });
-
- test("renders large size correctly", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--large");
-
- const input = page.getByRole("textbox");
- await expect(input).toBeVisible();
-
- const label = page.getByText("Large Input");
- await expect(label).toBeVisible();
- });
-});
-
-test.describe("Input Component - Label Variants", () => {
- test("renders default label variant", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--default-label");
-
- const input = page.getByRole("textbox");
- await expect(input).toBeVisible();
-
- const inputId = await input.getAttribute("id");
- const label = page.locator(`label[for="${inputId}"]`);
- await expect(label).toBeVisible();
- });
-
- test("renders horizontal label variant", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--horizontal-label");
-
- const input = page.getByRole("textbox");
- await expect(input).toBeVisible();
-
- const inputId = await input.getAttribute("id");
- const label = page.locator(`label[for="${inputId}"]`);
- await expect(label).toBeVisible();
- });
-});
-
-test.describe("Input Component - States", () => {
- test("renders active state", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--active");
-
- const input = page.getByRole("textbox");
- await expect(input).toBeVisible();
-
- const label = page.getByText("Active State");
- await expect(label).toBeVisible();
- });
-
- test("renders hover state", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--hover");
-
- const input = page.getByRole("textbox");
- await expect(input).toBeVisible();
-
- const label = page.getByText("Hover State");
- await expect(label).toBeVisible();
- });
-
- test("renders focus state", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--focus");
-
- const input = page.getByRole("textbox");
- await expect(input).toBeVisible();
-
- const label = page.getByText("Focus State");
- await expect(label).toBeVisible();
- });
-
- test("renders error state", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--error");
-
- const input = page.getByRole("textbox");
- await expect(input).toBeVisible();
-
- const label = page.getByText("Error State");
- await expect(label).toBeVisible();
- });
-
- test("renders disabled state", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--disabled");
-
- const input = page.getByRole("textbox");
- await expect(input).toBeVisible();
- await expect(input).toBeDisabled();
-
- const label = page.getByText("Disabled State");
- await expect(label).toBeVisible();
- });
-});
-
-test.describe("Input Component - Comparison Stories", () => {
- test("renders all sizes comparison", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--all-sizes");
-
- // Check that all size variants are present
- await expect(page.getByText("Small Size")).toBeVisible();
- await expect(page.getByText("Medium Size")).toBeVisible();
- await expect(page.getByText("Large Size")).toBeVisible();
-
- // Check that inputs are present
- const inputs = page.getByRole("textbox");
- // Small horizontal story was removed; expect 5 inputs now
- await expect(inputs).toHaveCount(5);
- });
-
- test("renders all states comparison", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--all-states");
-
- // Check that all state variants are present
- await expect(page.getByText("Default State")).toBeVisible();
- await expect(page.getByText("Active State")).toBeVisible();
- await expect(page.getByText("Hover State")).toBeVisible();
- await expect(page.getByText("Focus State")).toBeVisible();
- await expect(page.getByText("Error State")).toBeVisible();
- await expect(page.getByText("Disabled State")).toBeVisible();
-
- // Check that inputs are present
- const inputs = page.getByRole("textbox");
- await expect(inputs).toHaveCount(6);
- });
-});
-
-test.describe("Input Component - Interactive Story", () => {
- test("handles interactive input changes", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--interactive");
-
- const input = page.getByRole("textbox");
- await expect(input).toBeVisible();
-
- // Test typing
- await input.fill("Hello World");
- await expect(input).toHaveValue("Hello World");
-
- // Test clearing
- await input.fill("");
- await expect(input).toHaveValue("");
-
- // Test typing again
- await input.fill("New text");
- await expect(input).toHaveValue("New text");
- });
-
- test("handles focus and blur in interactive story", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--interactive");
-
- const input = page.getByRole("textbox");
-
- await input.focus();
- await expect(input).toBeFocused();
-
- await input.blur();
- await expect(input).not.toBeFocused();
- });
-});
-
-test.describe("Input Component - Accessibility", () => {
- test("has proper label association", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--default");
-
- const input = page.getByRole("textbox");
- const label = page.getByText("Default Input");
-
- await expect(input).toBeVisible();
- await expect(label).toBeVisible();
-
- // Check that label is properly associated
- const labelFor = await label.getAttribute("for");
- const inputId = await input.getAttribute("id");
- expect(labelFor).toBe(inputId);
- });
-
- test("supports keyboard navigation", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--interactive");
-
- const input = page.getByRole("textbox");
-
- // Focus with keyboard
- await input.focus();
- await expect(input).toBeFocused();
-
- // Type with keyboard
- await input.press("a");
- await expect(input).toHaveValue("a");
-
- await input.press("b");
- await expect(input).toHaveValue("ab");
- });
-
- test("handles disabled state accessibility", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--disabled");
-
- const input = page.getByRole("textbox");
- await expect(input).toBeDisabled();
-
- // Verify that filling is not allowed by asserting it remains empty without attempting to fill
- await expect(input).toHaveValue("");
- });
-});
-
-test.describe("Input Component - Form Integration", () => {
- test("works within form context", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--interactive");
-
- const input = page.getByRole("textbox");
-
- // Test form-like behavior
- await input.fill("form value");
- await expect(input).toHaveValue("form value");
-
- // Test clearing
- await input.clear();
- await expect(input).toHaveValue("");
- });
-
- test("handles different input types", async ({ page }) => {
- await page.goto("/iframe.html?id=forms-input--interactive");
-
- const input = page.getByRole("textbox");
-
- // Test different input patterns
- await input.fill("test@example.com");
- await expect(input).toHaveValue("test@example.com");
-
- await input.clear();
- await input.fill("12345");
- await expect(input).toHaveValue("12345");
- });
-});
diff --git a/tests/e2e/Select.storybook.test.ts b/tests/e2e/Select.storybook.test.ts
deleted file mode 100644
index b2d25ee..0000000
--- a/tests/e2e/Select.storybook.test.ts
+++ /dev/null
@@ -1,280 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test.describe("Select Component Storybook Tests", () => {
- test.beforeEach(async ({ page }) => {
- await page.goto("http://localhost:6006/?path=/story/forms-select--default");
- });
-
- test("renders default select component", async ({ page }) => {
- const selectButton = page.getByRole("button", { name: /select/i });
- await expect(selectButton).toBeVisible();
-
- const label = page.getByText("Test Select");
- await expect(label).toBeVisible();
- });
-
- test("opens dropdown when clicked", async ({ page }) => {
- const selectButton = page.getByRole("button", { name: /select/i });
- await selectButton.click();
-
- // Wait for dropdown to appear
- await expect(page.getByRole("listbox")).toBeVisible();
- await expect(page.getByText("Option 1")).toBeVisible();
- await expect(page.getByText("Option 2")).toBeVisible();
- await expect(page.getByText("Option 3")).toBeVisible();
- });
-
- test("selects option when clicked", async ({ page }) => {
- const selectButton = page.getByRole("button", { name: /select/i });
- await selectButton.click();
-
- await expect(page.getByRole("listbox")).toBeVisible();
-
- await page.getByText("Option 1").click();
-
- // Check that the selected value is displayed
- await expect(selectButton).toContainText("Option 1");
-
- // Check that dropdown is closed
- await expect(page.getByRole("listbox")).not.toBeVisible();
- });
-
- test("closes dropdown when clicking outside", async ({ page }) => {
- const selectButton = page.getByRole("button", { name: /select/i });
- await selectButton.click();
-
- await expect(page.getByRole("listbox")).toBeVisible();
-
- // Click outside the dropdown
- await page.click("body", { position: { x: 10, y: 10 } });
-
- await expect(page.getByRole("listbox")).not.toBeVisible();
- });
-
- test("handles keyboard navigation", async ({ page }) => {
- const selectButton = page.getByRole("button", { name: /select/i });
- await selectButton.focus();
-
- // Open with Enter key
- await page.keyboard.press("Enter");
- await expect(page.getByRole("listbox")).toBeVisible();
-
- // Close with Escape key
- await page.keyboard.press("Escape");
- await expect(page.getByRole("listbox")).not.toBeVisible();
-
- // Open with Space key
- await page.keyboard.press(" ");
- await expect(page.getByRole("listbox")).toBeVisible();
- });
-
- test("shows different sizes correctly", async ({ page }) => {
- // Navigate to All Sizes story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-select--all-sizes",
- );
-
- const selectButtons = page.getByRole("button");
- const count = await selectButtons.count();
-
- // Should have multiple select components
- expect(count).toBeGreaterThan(1);
-
- // Test that all sizes are visible
- for (let i = 0; i < count; i++) {
- await expect(selectButtons.nth(i)).toBeVisible();
- }
- });
-
- test("shows different states correctly", async ({ page }) => {
- // Navigate to All States story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-select--all-states",
- );
-
- const selectButtons = page.getByRole("button");
- const count = await selectButtons.count();
-
- // Should have multiple select components in different states
- expect(count).toBeGreaterThan(1);
-
- // Test that all states are visible
- for (let i = 0; i < count; i++) {
- await expect(selectButtons.nth(i)).toBeVisible();
- }
- });
-
- test("hover state shows correct styling", async ({ page }) => {
- // Navigate to Hover story
- await page.goto("http://localhost:6006/?path=/story/forms-select--hover");
-
- const selectButton = page.getByRole("button");
- await expect(selectButton).toBeVisible();
-
- // Check that hover state is applied (shadow effect)
- const boxShadow = await selectButton.evaluate((el) => {
- const styles = window.getComputedStyle(el);
- return styles.boxShadow;
- });
-
- expect(boxShadow).toContain("2px");
- });
-
- test("focus state shows correct styling", async ({ page }) => {
- // Navigate to Focus story
- await page.goto("http://localhost:6006/?path=/story/forms-select--focus");
-
- const selectButton = page.getByRole("button");
- await expect(selectButton).toBeVisible();
-
- // Check that focus state is applied (blue border and shadow)
- const borderColor = await selectButton.evaluate((el) => {
- const styles = window.getComputedStyle(el);
- return styles.borderColor;
- });
-
- const boxShadow = await selectButton.evaluate((el) => {
- const styles = window.getComputedStyle(el);
- return styles.boxShadow;
- });
-
- expect(boxShadow).toContain("3px");
- });
-
- test("error state shows correct styling", async ({ page }) => {
- // Navigate to Error story
- await page.goto("http://localhost:6006/?path=/story/forms-select--error");
-
- const selectButton = page.getByRole("button");
- await expect(selectButton).toBeVisible();
-
- // Check that error state is applied (red border)
- const borderColor = await selectButton.evaluate((el) => {
- const styles = window.getComputedStyle(el);
- return styles.borderColor;
- });
-
- expect(borderColor).toContain("rgb");
- });
-
- test("disabled state prevents interaction", async ({ page }) => {
- // Navigate to Disabled story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-select--disabled",
- );
-
- const selectButton = page.getByRole("button");
- await expect(selectButton).toBeVisible();
- await expect(selectButton).toBeDisabled();
-
- // Try to click disabled select
- await selectButton.click();
-
- // Dropdown should not open
- await expect(page.getByRole("listbox")).not.toBeVisible();
- });
-
- test("interactive story allows selection", async ({ page }) => {
- // Navigate to Interactive story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-select--interactive",
- );
-
- const selectButton = page.getByRole("button");
- await selectButton.click();
-
- await expect(page.getByRole("listbox")).toBeVisible();
-
- // Select an option
- await page.getByText("Option 1").click();
-
- // Check that selection is reflected
- await expect(selectButton).toContainText("Option 1");
- });
-
- test("horizontal label variant displays correctly", async ({ page }) => {
- // Navigate to Horizontal Label story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-select--horizontal-label",
- );
-
- const selectButton = page.getByRole("button");
- await expect(selectButton).toBeVisible();
-
- const label = page.getByText("Test Select");
- await expect(label).toBeVisible();
-
- // Check that label and select are in horizontal layout
- const labelBox = await label.boundingBox();
- const selectBox = await selectButton.boundingBox();
-
- expect(labelBox?.y).toBeCloseTo(selectBox?.y || 0, 5);
- });
-
- test("small size has correct height", async ({ page }) => {
- // Navigate to Small story
- await page.goto("http://localhost:6006/?path=/story/forms-select--small");
-
- const selectButton = page.getByRole("button");
- await expect(selectButton).toBeVisible();
-
- const height = await selectButton.evaluate((el) => {
- const styles = window.getComputedStyle(el);
- return styles.height;
- });
-
- expect(height).toBe("30px");
- });
-
- test("medium size has correct height", async ({ page }) => {
- // Navigate to Medium story
- await page.goto("http://localhost:6006/?path=/story/forms-select--medium");
-
- const selectButton = page.getByRole("button");
- await expect(selectButton).toBeVisible();
-
- const height = await selectButton.evaluate((el) => {
- const styles = window.getComputedStyle(el);
- return styles.height;
- });
-
- expect(height).toBe("36px");
- });
-
- test("large size has correct height", async ({ page }) => {
- // Navigate to Large story
- await page.goto("http://localhost:6006/?path=/story/forms-select--large");
-
- const selectButton = page.getByRole("button");
- await expect(selectButton).toBeVisible();
-
- const height = await selectButton.evaluate((el) => {
- const styles = window.getComputedStyle(el);
- return styles.height;
- });
-
- expect(height).toBe("40px");
- });
-
- test("focus behavior works correctly", async ({ page }) => {
- // Navigate to Interactive story
- await page.goto(
- "http://localhost:6006/?path=/story/forms-select--interactive",
- );
-
- const selectButton = page.getByRole("button");
-
- // Tab to focus the select
- await page.keyboard.press("Tab");
- await expect(selectButton).toBeFocused();
-
- // Check that focus-visible styles are applied
- const boxShadow = await selectButton.evaluate((el) => {
- const styles = window.getComputedStyle(el);
- return styles.boxShadow;
- });
-
- // Should have focus indicator
- expect(boxShadow).toContain("3px");
- });
-});
diff --git a/tests/storybook/RadioButton.interactions.test.js b/tests/storybook/RadioButton.interactions.test.js
index 5673906..e1f8670 100644
--- a/tests/storybook/RadioButton.interactions.test.js
+++ b/tests/storybook/RadioButton.interactions.test.js
@@ -13,9 +13,10 @@ export const DefaultInteraction = {
await userEvent.click(radioButton);
await expect(radioButton).toHaveAttribute("aria-checked", "true");
- // Click to uncheck
+ // Radio buttons can't be unchecked by clicking them again
+ // They stay checked until another radio button in the same group is selected
await userEvent.click(radioButton);
- await expect(radioButton).toHaveAttribute("aria-checked", "false");
+ await expect(radioButton).toHaveAttribute("aria-checked", "true");
},
};
@@ -27,11 +28,8 @@ export const CheckedInteraction = {
// Should be checked initially
await expect(radioButton).toHaveAttribute("aria-checked", "true");
- // Click to uncheck
- await userEvent.click(radioButton);
- await expect(radioButton).toHaveAttribute("aria-checked", "false");
-
- // Click to check again
+ // Radio buttons can't be unchecked by clicking them again
+ // They stay checked until another radio button in the same group is selected
await userEvent.click(radioButton);
await expect(radioButton).toHaveAttribute("aria-checked", "true");
},
diff --git a/tests/storybook/RadioGroup.interactions.test.js b/tests/storybook/RadioGroup.interactions.test.js
index 280422c..d8a0520 100644
--- a/tests/storybook/RadioGroup.interactions.test.js
+++ b/tests/storybook/RadioGroup.interactions.test.js
@@ -71,18 +71,18 @@ export const InteractiveInteraction = {
const radioButtons = canvas.getAllByRole("radio");
// Should have radiogroup role
- expect(radioGroup).toBeInTheDocument();
+ await expect(radioGroup).toBeInTheDocument();
// Should show initial state
- expect(canvas.getByText("Selected: option1")).toBeVisible();
+ await expect(canvas.getByText("Selected: option1")).toBeVisible();
// Click second option
- userEvent.click(radioButtons[1]);
- expect(canvas.getByText("Selected: option2")).toBeVisible();
+ await userEvent.click(radioButtons[1]);
+ await expect(canvas.getByText("Selected: option2")).toBeVisible();
// Click third option
- userEvent.click(radioButtons[2]);
- expect(canvas.getByText("Selected: option3")).toBeVisible();
+ await userEvent.click(radioButtons[2]);
+ await expect(canvas.getByText("Selected: option3")).toBeVisible();
},
};
diff --git a/tests/unit/Input.test.jsx b/tests/unit/Input.test.jsx
index ce9d4ac..c316ada 100644
--- a/tests/unit/Input.test.jsx
+++ b/tests/unit/Input.test.jsx
@@ -123,7 +123,7 @@ describe("Input Component", () => {
render(
);
const input = screen.getByRole("textbox");
expect(input).toHaveClass(
- "border-[var(--color-border-default-utility-negative)]"
+ "border-[var(--color-border-default-utility-negative)]",
);
});
@@ -138,7 +138,7 @@ describe("Input Component", () => {
render(
);
const input = screen.getByRole("textbox");
expect(input).toHaveClass(
- "border-[var(--color-border-default-utility-info)]"
+ "border-[var(--color-border-default-utility-info)]",
);
expect(input).toHaveClass("shadow-[0_0_5px_3px_#3281F8]");
});
@@ -148,7 +148,7 @@ describe("Input Component", () => {
const input = screen.getByRole("textbox");
expect(input).toHaveClass("border-[var(--color-border-default-tertiary)]");
expect(input).toHaveClass(
- "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+ "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
);
});
@@ -163,7 +163,7 @@ describe("Input Component", () => {
const input = screen.getByRole("textbox");
expect(input).toHaveClass("border-[var(--color-border-default-tertiary)]");
expect(input).toHaveClass(
- "hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+ "hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
);
});