CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix failing tests
CI Pipeline / test (20) (pull_request) Successful in 2m30s
Details
CI Pipeline / test (18) (pull_request) Successful in 3m51s
Details
CI Pipeline / e2e (firefox) (pull_request) Successful in 3m22s
Details
CI Pipeline / e2e (webkit) (pull_request) Successful in 3m45s
Details
CI Pipeline / e2e (chromium) (pull_request) Successful in 11m49s
Details
CI Pipeline / visual-regression (pull_request) Successful in 6m48s
Details
CI Pipeline / storybook (pull_request) Successful in 1m35s
Details
CI Pipeline / lint (pull_request) Successful in 1m12s
Details
CI Pipeline / build (pull_request) Successful in 1m54s
Details
CI Pipeline / performance (pull_request) Successful in 4m6s
Details

Browse Source
This commit is contained in:
adilallo
2025-10-14 20:47:34 -06:00
parent c4a631a5d8
commit fa5a190416
20 changed files with 4638 additions and 1242 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/e2e/ContextMenu.storybook.test.ts
-302
View File
@@ -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();
}
});
});
tests/e2e/Input.storybook.test.ts
-308
View File
@@ -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");
});
});
tests/e2e/Select.storybook.test.ts
-280
View File
@@ -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");
});
});