Run lint and prettier
CI Pipeline / test (20) (pull_request) Successful in 7m32s
CI Pipeline / test (18) (pull_request) Successful in 7m34s
CI Pipeline / e2e (chromium) (pull_request) Successful in 3m13s
CI Pipeline / e2e (firefox) (pull_request) Successful in 3m46s
CI Pipeline / e2e (webkit) (pull_request) Successful in 3m57s
CI Pipeline / performance (pull_request) Successful in 3m41s
CI Pipeline / visual-regression (pull_request) Failing after 8m6s
CI Pipeline / storybook (pull_request) Successful in 1m31s
CI Pipeline / lint (pull_request) Successful in 1m6s
CI Pipeline / build (pull_request) Successful in 1m24s
CI Pipeline / test (20) (pull_request) Successful in 7m32s
CI Pipeline / test (18) (pull_request) Successful in 7m34s
CI Pipeline / e2e (chromium) (pull_request) Successful in 3m13s
CI Pipeline / e2e (firefox) (pull_request) Successful in 3m46s
CI Pipeline / e2e (webkit) (pull_request) Successful in 3m57s
CI Pipeline / performance (pull_request) Successful in 3m41s
CI Pipeline / visual-regression (pull_request) Failing after 8m6s
CI Pipeline / storybook (pull_request) Successful in 1m31s
CI Pipeline / lint (pull_request) Successful in 1m6s
CI Pipeline / build (pull_request) Successful in 1m24s
This commit is contained in:
@@ -191,7 +191,7 @@ test("components work together", () => {
|
|||||||
<Header />
|
<Header />
|
||||||
<MainContent />
|
<MainContent />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Test that components complement each other
|
// Test that components complement each other
|
||||||
|
|||||||
@@ -155,7 +155,7 @@ describe("Accessibility - Component Level", () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const headingLevels = headings.map((heading) =>
|
const headingLevels = headings.map((heading) =>
|
||||||
parseInt(heading.tagName.charAt(1))
|
parseInt(heading.tagName.charAt(1)),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Check that heading levels are sequential (no skipping levels)
|
// Check that heading levels are sequential (no skipping levels)
|
||||||
|
|||||||
@@ -413,7 +413,7 @@ test.describe("Visual Regression Tests", () => {
|
|||||||
await page.evaluate(() => {
|
await page.evaluate(() => {
|
||||||
document.documentElement.style.setProperty(
|
document.documentElement.style.setProperty(
|
||||||
"--prefers-reduced-motion",
|
"--prefers-reduced-motion",
|
||||||
"reduce"
|
"reduce",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -81,7 +81,7 @@ describe("Button Component", () => {
|
|||||||
expect(button).toBeDisabled();
|
expect(button).toBeDisabled();
|
||||||
expect(button).toHaveClass(
|
expect(button).toHaveClass(
|
||||||
"disabled:opacity-50",
|
"disabled:opacity-50",
|
||||||
"disabled:cursor-not-allowed"
|
"disabled:cursor-not-allowed",
|
||||||
);
|
);
|
||||||
expect(button).toHaveAttribute("aria-disabled", "true");
|
expect(button).toHaveAttribute("aria-disabled", "true");
|
||||||
expect(button).toHaveAttribute("tabIndex", "-1");
|
expect(button).toHaveAttribute("tabIndex", "-1");
|
||||||
@@ -119,7 +119,7 @@ describe("Button Component", () => {
|
|||||||
render(
|
render(
|
||||||
<Button href="/test" target="_blank" rel="noopener">
|
<Button href="/test" target="_blank" rel="noopener">
|
||||||
External Link
|
External Link
|
||||||
</Button>
|
</Button>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const link = screen.getByRole("link");
|
const link = screen.getByRole("link");
|
||||||
|
|||||||
@@ -52,13 +52,13 @@ describe("Logo Component", () => {
|
|||||||
const { rerender } = render(<Logo size="homeHeaderMd" />);
|
const { rerender } = render(<Logo size="homeHeaderMd" />);
|
||||||
let textElement = screen.getByText("CommunityRule");
|
let textElement = screen.getByText("CommunityRule");
|
||||||
expect(textElement).toHaveClass(
|
expect(textElement).toHaveClass(
|
||||||
"text-[var(--color-content-inverse-primary)]"
|
"text-[var(--color-content-inverse-primary)]",
|
||||||
);
|
);
|
||||||
|
|
||||||
rerender(<Logo size="header" />);
|
rerender(<Logo size="header" />);
|
||||||
textElement = screen.getByText("CommunityRule");
|
textElement = screen.getByText("CommunityRule");
|
||||||
expect(textElement).toHaveClass(
|
expect(textElement).toHaveClass(
|
||||||
"text-[var(--color-content-default-primary)]"
|
"text-[var(--color-content-default-primary)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ describe("NumberedCard Component", () => {
|
|||||||
|
|
||||||
it("renders with different text content", () => {
|
it("renders with different text content", () => {
|
||||||
const { rerender } = render(
|
const { rerender } = render(
|
||||||
<NumberedCard {...defaultProps} text="Different Text" />
|
<NumberedCard {...defaultProps} text="Different Text" />,
|
||||||
);
|
);
|
||||||
expect(screen.getByText("Different Text")).toBeInTheDocument();
|
expect(screen.getByText("Different Text")).toBeInTheDocument();
|
||||||
|
|
||||||
@@ -77,7 +77,7 @@ describe("NumberedCard Component", () => {
|
|||||||
.closest("div").parentElement;
|
.closest("div").parentElement;
|
||||||
expect(card).toHaveClass(
|
expect(card).toHaveClass(
|
||||||
"bg-[var(--color-surface-inverse-primary)]",
|
"bg-[var(--color-surface-inverse-primary)]",
|
||||||
"shadow-lg"
|
"shadow-lg",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -103,7 +103,7 @@ describe("NumberedCard Component", () => {
|
|||||||
"inset-0",
|
"inset-0",
|
||||||
"flex",
|
"flex",
|
||||||
"items-center",
|
"items-center",
|
||||||
"justify-center"
|
"justify-center",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -120,7 +120,7 @@ describe("NumberedCard Component", () => {
|
|||||||
"lg:absolute",
|
"lg:absolute",
|
||||||
"lg:bottom-8",
|
"lg:bottom-8",
|
||||||
"lg:left-8",
|
"lg:left-8",
|
||||||
"lg:right-16"
|
"lg:right-16",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -139,7 +139,7 @@ describe("NumberedCard Component", () => {
|
|||||||
"text-[24px]",
|
"text-[24px]",
|
||||||
"sm:text-[24px]",
|
"sm:text-[24px]",
|
||||||
"lg:text-[24px]",
|
"lg:text-[24px]",
|
||||||
"xl:text-[32px]"
|
"xl:text-[32px]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -173,7 +173,7 @@ describe("NumberedCard Component", () => {
|
|||||||
"sm:flex-row",
|
"sm:flex-row",
|
||||||
"sm:gap-8",
|
"sm:gap-8",
|
||||||
"sm:p-8",
|
"sm:p-8",
|
||||||
"sm:items-center"
|
"sm:items-center",
|
||||||
);
|
);
|
||||||
|
|
||||||
// Large breakpoint
|
// Large breakpoint
|
||||||
@@ -182,7 +182,7 @@ describe("NumberedCard Component", () => {
|
|||||||
"lg:gap-0",
|
"lg:gap-0",
|
||||||
"lg:p-8",
|
"lg:p-8",
|
||||||
"lg:items-stretch",
|
"lg:items-stretch",
|
||||||
"lg:relative"
|
"lg:relative",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ describe("RuleCard Component", () => {
|
|||||||
|
|
||||||
expect(screen.getByText("Test Rule")).toBeInTheDocument();
|
expect(screen.getByText("Test Rule")).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("This is a test rule description")
|
screen.getByText("This is a test rule description"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -79,7 +79,7 @@ describe("RuleCard Component", () => {
|
|||||||
expect(card).toHaveClass(
|
expect(card).toHaveClass(
|
||||||
"hover:shadow-xl",
|
"hover:shadow-xl",
|
||||||
"hover:scale-[1.02]",
|
"hover:scale-[1.02]",
|
||||||
"transition-all"
|
"transition-all",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -89,7 +89,7 @@ describe("RuleCard Component", () => {
|
|||||||
const card = screen.getByRole("button");
|
const card = screen.getByRole("button");
|
||||||
expect(card).toHaveAttribute(
|
expect(card).toHaveAttribute(
|
||||||
"aria-label",
|
"aria-label",
|
||||||
"Learn more about Test Rule governance pattern"
|
"Learn more about Test Rule governance pattern",
|
||||||
);
|
);
|
||||||
expect(card).toHaveAttribute("tabIndex", "0");
|
expect(card).toHaveAttribute("tabIndex", "0");
|
||||||
});
|
});
|
||||||
@@ -99,7 +99,7 @@ describe("RuleCard Component", () => {
|
|||||||
|
|
||||||
expect(screen.getByText("Test Rule")).toBeInTheDocument();
|
expect(screen.getByText("Test Rule")).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.queryByText("This is a test rule description")
|
screen.queryByText("This is a test rule description"),
|
||||||
).not.toBeInTheDocument();
|
).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -29,21 +29,21 @@ describe("SectionHeader Component", () => {
|
|||||||
|
|
||||||
it("applies variant classes correctly", () => {
|
it("applies variant classes correctly", () => {
|
||||||
const { rerender } = render(
|
const { rerender } = render(
|
||||||
<SectionHeader title="Default Header" variant="default" />
|
<SectionHeader title="Default Header" variant="default" />,
|
||||||
);
|
);
|
||||||
let titleContainer = screen
|
let titleContainer = screen
|
||||||
.getByRole("heading", { level: 2 })
|
.getByRole("heading", { level: 2 })
|
||||||
.closest("div");
|
.closest("div");
|
||||||
expect(titleContainer).toHaveClass(
|
expect(titleContainer).toHaveClass(
|
||||||
"lg:w-[369px]",
|
"lg:w-[369px]",
|
||||||
"lg:h-[var(--spacing-scale-120)]"
|
"lg:h-[var(--spacing-scale-120)]",
|
||||||
);
|
);
|
||||||
|
|
||||||
rerender(<SectionHeader title="Multi-line Header" variant="multi-line" />);
|
rerender(<SectionHeader title="Multi-line Header" variant="multi-line" />);
|
||||||
titleContainer = screen.getByRole("heading", { level: 2 }).closest("div");
|
titleContainer = screen.getByRole("heading", { level: 2 }).closest("div");
|
||||||
expect(titleContainer).toHaveClass(
|
expect(titleContainer).toHaveClass(
|
||||||
"lg:w-[50%]",
|
"lg:w-[50%]",
|
||||||
"lg:h-[var(--spacing-scale-120)]"
|
"lg:h-[var(--spacing-scale-120)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -100,7 +100,7 @@ describe("SectionHeader Component", () => {
|
|||||||
"flex",
|
"flex",
|
||||||
"flex-col",
|
"flex-col",
|
||||||
"lg:flex-row",
|
"lg:flex-row",
|
||||||
"lg:justify-between"
|
"lg:justify-between",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -139,7 +139,7 @@ describe("SectionHeader Component", () => {
|
|||||||
"text-[28px]",
|
"text-[28px]",
|
||||||
"sm:text-[32px]",
|
"sm:text-[32px]",
|
||||||
"lg:text-[32px]",
|
"lg:text-[32px]",
|
||||||
"xl:text-[40px]"
|
"xl:text-[40px]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -151,7 +151,7 @@ describe("SectionHeader Component", () => {
|
|||||||
"leading-[36px]",
|
"leading-[36px]",
|
||||||
"sm:leading-[40px]",
|
"sm:leading-[40px]",
|
||||||
"lg:leading-[40px]",
|
"lg:leading-[40px]",
|
||||||
"xl:leading-[52px]"
|
"xl:leading-[52px]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -179,7 +179,7 @@ describe("SectionHeader Component", () => {
|
|||||||
"text-[18px]",
|
"text-[18px]",
|
||||||
"sm:text-[18px]",
|
"sm:text-[18px]",
|
||||||
"lg:text-[24px]",
|
"lg:text-[24px]",
|
||||||
"xl:text-[32px]"
|
"xl:text-[32px]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -192,7 +192,7 @@ describe("SectionHeader Component", () => {
|
|||||||
"text-[#484848]",
|
"text-[#484848]",
|
||||||
"sm:text-[var(--color-content-default-tertiary)]",
|
"sm:text-[var(--color-content-default-tertiary)]",
|
||||||
"lg:text-[var(--color-content-default-tertiary)]",
|
"lg:text-[var(--color-content-default-tertiary)]",
|
||||||
"xl:text-[var(--color-content-default-tertiary)]"
|
"xl:text-[var(--color-content-default-tertiary)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user