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

Update Rule Stack component and tests

Browse Source
This commit is contained in:
adilallo
2026-02-05 16:58:15 -07:00
parent 7e2348048a
commit b012c73e65
6 changed files with 245 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/unit/RuleCard.test.jsx
+3 -1
View File
@@ -147,7 +147,9 @@ describe("RuleCard Component", () => {
render(<RuleCard {...defaultProps} size="L" />);
const heading = screen.getByRole("heading", { level: 3 });
expect(heading).toHaveClass("font-bricolage-grotesque", "font-extrabold");
// Check for responsive font classes - at 1440px+ it should have font-bricolage-grotesque and font-extrabold
expect(heading?.className).toMatch(/min-\[1440px\]:font-bricolage-grotesque/);
expect(heading?.className).toMatch(/min-\[1440px\]:font-extrabold/);
});
it("renders expanded state with categories", () => {
tests/unit/RuleStack.test.jsx
+18 -18
View File
@@ -74,17 +74,17 @@ describe("RuleStack Component", () => {
render(<RuleStack />);
const section = document.querySelector("section");
expect(section).toHaveClass(
"py-[var(--spacing-scale-032)]",
"px-[var(--spacing-scale-020)]",
);
// Check for responsive padding classes
expect(section).toHaveClass("px-[20px]", "py-[32px]");
expect(section?.className).toMatch(/min-\[640px\]:px-\[32px\]/);
expect(section?.className).toMatch(/min-\[640px\]:py-\[48px\]/);
});
test("applies responsive grid layout", () => {
render(<RuleStack />);
const grid = document.querySelector('[class*="flex flex-col gap-[18px]"]');
expect(grid).toHaveClass("xmd:grid", "xmd:grid-cols-2");
expect(grid).toHaveClass("min-[768px]:grid", "min-[768px]:grid-cols-2");
});
test("renders RuleCard components with correct props", () => {
@@ -124,19 +124,18 @@ describe("RuleStack Component", () => {
const section = document.querySelector("section");
expect(section).toBeInTheDocument();
// Check for proper heading structure in cards
// Check for proper heading structure: 1 from SectionHeader + 4 from RuleCards
const headings = screen.getAllByRole("heading");
expect(headings).toHaveLength(4); // Four rule cards
expect(headings).toHaveLength(5); // One section header + four rule cards
});
test("applies responsive spacing", () => {
render(<RuleStack />);
const section = document.querySelector("section");
expect(section).toHaveClass(
"md:py-[var(--spacing-scale-048)]",
"lg:py-[var(--spacing-scale-064)]",
);
// Check for responsive padding classes
expect(section?.className).toMatch(/min-\[640px\]:py-\[48px\]/);
expect(section?.className).toMatch(/min-\[1024px\]:py-\[64px\]/);
});
test("renders icons with correct attributes", () => {
@@ -147,12 +146,11 @@ describe("RuleStack Component", () => {
"src",
"/assets/Icon_Sociocracy.svg",
);
expect(sociocracyIcon).toHaveClass(
"md:w-[56px]",
"md:h-[56px]",
"lg:w-[90px]",
"lg:h-[90px]",
);
// Check for responsive icon size classes
expect(sociocracyIcon?.className).toMatch(/min-\[640px\]:max-\[1023px\]:w-\[56px\]/);
expect(sociocracyIcon?.className).toMatch(/min-\[640px\]:max-\[1023px\]:h-\[56px\]/);
expect(sociocracyIcon?.className).toMatch(/min-\[1440px\]:w-\[90px\]/);
expect(sociocracyIcon?.className).toMatch(/min-\[1440px\]:h-\[90px\]/);
});
test("applies different background colors to cards", () => {
@@ -174,7 +172,9 @@ describe("RuleStack Component", () => {
render(<RuleStack />);
const button = screen.getByRole("button", { name: "See all templates" });
expect(button).toHaveClass("bg-transparent", "border-[1.5px]");
// Button component uses outline variant which has bg-transparent and border
expect(button?.className).toMatch(/bg-transparent/);
expect(button?.className).toMatch(/border/);
});
test("applies flex layout for button container", () => {