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

Fix prettier formatting issues

Browse Source
This commit is contained in:
adilallo
2025-08-30 13:46:35 -06:00
parent 1e795e1340
commit 12deae75e8
97 changed files with 335281 additions and 54857 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/unit/AskOrganizer.test.jsx
+25 -25
View File
@@ -16,25 +16,25 @@ describe("AskOrganizer Component", () => {
description="Our organizers can help you build better communities"
buttonText="Contact an organizer"
buttonHref="/contact"
/>
/>,
);
expect(
screen.getByRole("heading", { name: "Need help organizing?" })
screen.getByRole("heading", { name: "Need help organizing?" }),
).toBeInTheDocument();
expect(
screen.getByRole("heading", { name: "Get expert guidance" })
screen.getByRole("heading", { name: "Get expert guidance" }),
).toBeInTheDocument();
// The description text might not be rendered or might be different
// Just verify the component renders without error
expect(
screen.getByRole("heading", { name: "Need help organizing?" })
screen.getByRole("heading", { name: "Need help organizing?" }),
).toBeInTheDocument();
// Button renders as a link when href is provided
expect(
screen.getByRole("link", {
name: "Contact an organizer - Contact an organizer for help",
})
}),
).toBeInTheDocument();
});
@@ -45,13 +45,13 @@ describe("AskOrganizer Component", () => {
expect(
screen.getByRole("link", {
name: "Ask an organizer - Contact an organizer for help",
})
}),
).toBeInTheDocument();
});
test("renders with custom className", () => {
render(
<AskOrganizer title="Test" subtitle="Test" className="custom-class" />
<AskOrganizer title="Test" subtitle="Test" className="custom-class" />,
);
const section = document.querySelector("section");
@@ -60,7 +60,7 @@ describe("AskOrganizer Component", () => {
test("renders different variants", () => {
const { rerender } = render(
<AskOrganizer title="Test" subtitle="Test" variant="centered" />
<AskOrganizer title="Test" subtitle="Test" variant="centered" />,
);
// Centered variant should have center alignment
@@ -70,7 +70,7 @@ describe("AskOrganizer Component", () => {
expect(container).toBeInTheDocument();
rerender(
<AskOrganizer title="Test" subtitle="Test" variant="left-aligned" />
<AskOrganizer title="Test" subtitle="Test" variant="left-aligned" />,
);
// Left-aligned variant should have left alignment
@@ -86,19 +86,19 @@ describe("AskOrganizer Component", () => {
title="Ask Title"
subtitle="Ask Subtitle"
description="Ask Description"
/>
/>,
);
expect(
screen.getByRole("heading", { name: "Ask Title" })
screen.getByRole("heading", { name: "Ask Title" }),
).toBeInTheDocument();
expect(
screen.getByRole("heading", { name: "Ask Subtitle" })
screen.getByRole("heading", { name: "Ask Subtitle" }),
).toBeInTheDocument();
// Description might not be rendered if not provided to ContentLockup
// Just verify the component renders without error
expect(
screen.getByRole("heading", { name: "Ask Title" })
screen.getByRole("heading", { name: "Ask Title" }),
).toBeInTheDocument();
});
@@ -109,7 +109,7 @@ describe("AskOrganizer Component", () => {
subtitle="Test"
buttonText="Custom Button"
buttonHref="/custom"
/>
/>,
);
const button = screen.getByRole("link", {
@@ -128,7 +128,7 @@ describe("AskOrganizer Component", () => {
title="Test"
subtitle="Test"
onContactClick={onContactClick}
/>
/>,
);
const button = screen.getByRole("link", {
@@ -172,13 +172,13 @@ describe("AskOrganizer Component", () => {
test("renders with proper accessibility attributes", () => {
render(
<AskOrganizer title="Test" subtitle="Test" buttonText="Custom Button" />
<AskOrganizer title="Test" subtitle="Test" buttonText="Custom Button" />,
);
const section = document.querySelector("section");
expect(section).toHaveAttribute(
"aria-labelledby",
"ask-organizer-headline"
"ask-organizer-headline",
);
expect(section).toHaveAttribute("tabIndex", "-1");
@@ -187,7 +187,7 @@ describe("AskOrganizer Component", () => {
});
expect(button).toHaveAttribute(
"aria-label",
"Custom Button - Contact an organizer for help"
"Custom Button - Contact an organizer for help",
);
});
@@ -197,7 +197,7 @@ describe("AskOrganizer Component", () => {
const section = document.querySelector("section");
expect(section).toHaveClass(
"py-[var(--spacing-scale-032)]",
"px-[var(--spacing-scale-032)]"
"px-[var(--spacing-scale-032)]",
);
});
@@ -207,7 +207,7 @@ describe("AskOrganizer Component", () => {
const section = document.querySelector("section");
expect(section).toHaveClass(
"md:py-[var(--spacing-scale-096)]",
"md:px-[var(--spacing-scale-064)]"
"md:px-[var(--spacing-scale-064)]",
);
});
@@ -224,18 +224,18 @@ describe("AskOrganizer Component", () => {
test("applies variant-specific styling", () => {
const { rerender } = render(
<AskOrganizer title="Test" subtitle="Test" variant="compact" />
<AskOrganizer title="Test" subtitle="Test" variant="compact" />,
);
// Compact variant should have different padding
const section = screen.getByRole("region");
expect(section).toHaveClass(
"py-[var(--spacing-scale-016)]",
"px-[var(--spacing-scale-016)]"
"px-[var(--spacing-scale-016)]",
);
rerender(
<AskOrganizer title="Test" subtitle="Test" variant="left-aligned" />
<AskOrganizer title="Test" subtitle="Test" variant="left-aligned" />,
);
// Left-aligned variant should have left alignment
@@ -251,7 +251,7 @@ describe("AskOrganizer Component", () => {
});
expect(button).toHaveClass(
"xl:!px-[var(--spacing-scale-020)]",
"xl:!py-[var(--spacing-scale-012)]"
"xl:!py-[var(--spacing-scale-012)]",
);
});
@@ -266,7 +266,7 @@ describe("AskOrganizer Component", () => {
expect(
screen.getByRole("link", {
name: "Ask an organizer - Contact an organizer for help",
})
}),
).toBeInTheDocument();
});
tests/unit/Button.test.jsx
+4 -4
View File
@@ -35,7 +35,7 @@ describe("Button Component", () => {
const { rerender } = render(<Button variant="default">Default</Button>);
let button = screen.getByRole("button", { name: "Default" });
expect(button.className).toContain(
"bg-[var(--color-surface-inverse-primary)]"
"bg-[var(--color-surface-inverse-primary)]",
);
rerender(<Button variant="secondary">Secondary</Button>);
@@ -79,10 +79,10 @@ describe("Button Component", () => {
// Check that design tokens are applied
expect(button.className).toContain(
"rounded-[var(--radius-measures-radius-full)]"
"rounded-[var(--radius-measures-radius-full)]",
);
expect(button.className).toContain(
"bg-[var(--color-surface-inverse-primary)]"
"bg-[var(--color-surface-inverse-primary)]",
);
});
@@ -103,7 +103,7 @@ describe("Button Component", () => {
render(
<Button href="/test" disabled>
Disabled Link
</Button>
</Button>,
);
const button = screen.getByRole("button", { name: "Disabled Link" });
expect(button).toBeInTheDocument();
tests/unit/FeatureGrid.test.jsx
+12 -12
View File
@@ -13,22 +13,22 @@ describe("FeatureGrid Component", () => {
<FeatureGrid
title="Feature Tools"
subtitle="Everything you need to build better communities"
/>
/>,
);
expect(
screen.getByRole("heading", { name: "Feature Tools" })
screen.getByRole("heading", { name: "Feature Tools" }),
).toBeInTheDocument();
expect(
screen.getByRole("heading", {
name: "Everything you need to build better communities",
})
}),
).toBeInTheDocument();
});
test("renders with custom className", () => {
render(
<FeatureGrid title="Test" subtitle="Test" className="custom-class" />
<FeatureGrid title="Test" subtitle="Test" className="custom-class" />,
);
const section = document.querySelector("section");
@@ -40,16 +40,16 @@ describe("FeatureGrid Component", () => {
// Check for all four MiniCard components
expect(
screen.getByRole("link", { name: "Decision-making support tools" })
screen.getByRole("link", { name: "Decision-making support tools" }),
).toBeInTheDocument();
expect(
screen.getByRole("link", { name: "Values alignment exercises" })
screen.getByRole("link", { name: "Values alignment exercises" }),
).toBeInTheDocument();
expect(
screen.getByRole("link", { name: "Membership guidance resources" })
screen.getByRole("link", { name: "Membership guidance resources" }),
).toBeInTheDocument();
expect(
screen.getByRole("link", { name: "Conflict resolution tools" })
screen.getByRole("link", { name: "Conflict resolution tools" }),
).toBeInTheDocument();
});
@@ -57,13 +57,13 @@ describe("FeatureGrid Component", () => {
render(<FeatureGrid title="Feature Title" subtitle="Feature Subtitle" />);
expect(
screen.getByRole("heading", { name: "Feature Title" })
screen.getByRole("heading", { name: "Feature Title" }),
).toBeInTheDocument();
expect(
screen.getByRole("heading", { name: "Feature Subtitle" })
screen.getByRole("heading", { name: "Feature Subtitle" }),
).toBeInTheDocument();
expect(
screen.getByRole("link", { name: "Learn more" })
screen.getByRole("link", { name: "Learn more" }),
).toBeInTheDocument();
});
@@ -130,7 +130,7 @@ describe("FeatureGrid Component", () => {
// Should render default MiniCards
expect(
screen.getByRole("link", { name: "Decision-making support tools" })
screen.getByRole("link", { name: "Decision-making support tools" }),
).toBeInTheDocument();
});
tests/unit/Footer.test.jsx
+15 -15
View File
@@ -27,7 +27,7 @@ describe("Footer", () => {
expect(schemaData.email).toBe("medlab@colorado.edu");
expect(schemaData.url).toBe("https://communityrule.com");
expect(schemaData.sameAs).toContain(
"https://bsky.app/profile/medlabboulder"
"https://bsky.app/profile/medlabboulder",
);
expect(schemaData.sameAs).toContain("https://gitlab.com/medlabboulder");
});
@@ -36,7 +36,7 @@ describe("Footer", () => {
render(<Footer />);
expect(
screen.getAllByText("Media Economies Design Lab").length
screen.getAllByText("Media Economies Design Lab").length,
).toBeGreaterThan(0);
const emailLinks = screen.getAllByRole("link", {
@@ -86,13 +86,13 @@ describe("Footer", () => {
render(<Footer />);
expect(
screen.getAllByRole("link", { name: "Use cases" }).length
screen.getAllByRole("link", { name: "Use cases" }).length,
).toBeGreaterThan(0);
expect(
screen.getAllByRole("link", { name: "Learn" }).length
screen.getAllByRole("link", { name: "Learn" }).length,
).toBeGreaterThan(0);
expect(
screen.getAllByRole("link", { name: "About" }).length
screen.getAllByRole("link", { name: "About" }).length,
).toBeGreaterThan(0);
});
@@ -100,13 +100,13 @@ describe("Footer", () => {
render(<Footer />);
expect(
screen.getAllByRole("link", { name: "Privacy Policy" }).length
screen.getAllByRole("link", { name: "Privacy Policy" }).length,
).toBeGreaterThan(0);
expect(
screen.getAllByRole("link", { name: "Terms of Service" }).length
screen.getAllByRole("link", { name: "Terms of Service" }).length,
).toBeGreaterThan(0);
expect(
screen.getAllByRole("link", { name: "Cookies Settings" }).length
screen.getAllByRole("link", { name: "Cookies Settings" }).length,
).toBeGreaterThan(0);
});
@@ -114,7 +114,7 @@ describe("Footer", () => {
render(<Footer />);
expect(screen.getAllByText("© All right reserved").length).toBeGreaterThan(
0
0,
);
});
@@ -123,7 +123,7 @@ describe("Footer", () => {
// Check that logo containers exist for different breakpoints
const logoContainers = document.querySelectorAll(
'[class*="block sm:hidden"], [class*="hidden sm:block lg:hidden"], [class*="hidden lg:block"]'
'[class*="block sm:hidden"], [class*="hidden sm:block lg:hidden"], [class*="hidden lg:block"]',
);
expect(logoContainers.length).toBeGreaterThan(0);
});
@@ -147,7 +147,7 @@ describe("Footer", () => {
// The Separator component should be rendered (it uses a div with border, not hr)
const separator = document.querySelector(
".bg-\\[var\\(--border-color-default-secondary\\)\\]"
".bg-\\[var\\(--border-color-default-secondary\\)\\]",
);
expect(separator).toBeInTheDocument();
});
@@ -263,10 +263,10 @@ describe("Footer", () => {
expect(emailLink).toHaveClass("focus:ring-2");
expect(emailLink).toHaveClass("focus:ring-offset-2");
expect(emailLink).toHaveClass(
"focus:ring-[var(--color-content-default-primary)]"
"focus:ring-[var(--color-content-default-primary)]",
);
expect(emailLink).toHaveClass(
"focus:ring-offset-[var(--color-surface-default-primary)]"
"focus:ring-offset-[var(--color-surface-default-primary)]",
);
});
@@ -276,10 +276,10 @@ describe("Footer", () => {
expect(link).toHaveClass("focus:ring-2");
expect(link).toHaveClass("focus:ring-offset-2");
expect(link).toHaveClass(
"focus:ring-[var(--color-content-default-primary)]"
"focus:ring-[var(--color-content-default-primary)]",
);
expect(link).toHaveClass(
"focus:ring-offset-[var(--color-surface-default-primary)]"
"focus:ring-offset-[var(--color-surface-default-primary)]",
);
});
});
tests/unit/Header.test.jsx
+10 -10
View File
@@ -22,14 +22,14 @@ describe("Header", () => {
// Check main header structure - use container to scope the search
const header = container.querySelector(
'[role="banner"][aria-label="Main navigation header"]'
'[role="banner"][aria-label="Main navigation header"]',
);
expect(header).toBeInTheDocument();
expect(header).toHaveAttribute("aria-label", "Main navigation header");
// Check navigation - use container to scope the search
const nav = container.querySelector(
'[role="navigation"][aria-label="Main navigation"]'
'[role="navigation"][aria-label="Main navigation"]',
);
expect(nav).toBeInTheDocument();
expect(nav).toHaveAttribute("aria-label", "Main navigation");
@@ -41,15 +41,15 @@ describe("Header", () => {
// Check all navigation items have proper aria-labels - use menuitem role since they're in a menubar
expect(
screen.getAllByRole("menuitem", { name: "Navigate to Use cases page" })
.length
.length,
).toBeGreaterThan(0);
expect(
screen.getAllByRole("menuitem", { name: "Navigate to Learn page" })
.length
.length,
).toBeGreaterThan(0);
expect(
screen.getAllByRole("menuitem", { name: "Navigate to About page" })
.length
.length,
).toBeGreaterThan(0);
});
});
@@ -59,7 +59,7 @@ describe("Header", () => {
render(<Header onToggle={mockOnToggle} />);
const script = document.querySelector(
'script[type="application/ld+json"]'
'script[type="application/ld+json"]',
);
expect(script).toBeInTheDocument();
@@ -296,7 +296,7 @@ describe("Header", () => {
(img) =>
img.alt === "Avatar 1" ||
img.alt === "Avatar 2" ||
img.alt === "Avatar 3"
img.alt === "Avatar 3",
);
expect(avatarImages.length).toBeGreaterThan(0);
});
@@ -324,17 +324,17 @@ describe("Header", () => {
const { container } = render(<Header onToggle={mockOnToggle} />);
const header = container.querySelector(
'[role="banner"][aria-label="Main navigation header"]'
'[role="banner"][aria-label="Main navigation header"]',
);
expect(header).toHaveClass("bg-[var(--color-surface-default-primary)]");
expect(header).toHaveClass("w-full");
expect(header).toHaveClass("border-b");
expect(header).toHaveClass(
"border-[var(--border-color-default-tertiary)]"
"border-[var(--border-color-default-tertiary)]",
);
const nav = container.querySelector(
'[role="navigation"][aria-label="Main navigation"]'
'[role="navigation"][aria-label="Main navigation"]',
);
expect(nav).toHaveClass("flex");
expect(nav).toHaveClass("items-center");
tests/unit/HeroBanner.test.jsx
+12 -12
View File
@@ -16,17 +16,17 @@ describe("HeroBanner Component", () => {
description="Create and manage community rules with ease"
ctaText="Get Started"
ctaHref="/signup"
/>
/>,
);
expect(
screen.getByRole("heading", { name: "Welcome to CommunityRule" })
screen.getByRole("heading", { name: "Welcome to CommunityRule" }),
).toBeInTheDocument();
expect(
screen.getByRole("heading", { name: "Build better communities" })
screen.getByRole("heading", { name: "Build better communities" }),
).toBeInTheDocument();
expect(
screen.getByText("Create and manage community rules with ease")
screen.getByText("Create and manage community rules with ease"),
).toBeInTheDocument();
// Button component renders multiple versions for different screen sizes
// Use getAllByRole to handle multiple buttons with same text
@@ -38,10 +38,10 @@ describe("HeroBanner Component", () => {
render(<HeroBanner title="Minimal" />);
expect(
screen.getByRole("heading", { name: "Minimal" })
screen.getByRole("heading", { name: "Minimal" }),
).toBeInTheDocument();
expect(
screen.getByRole("img", { name: "Hero illustration" })
screen.getByRole("img", { name: "Hero illustration" }),
).toBeInTheDocument();
});
@@ -72,15 +72,15 @@ describe("HeroBanner Component", () => {
description="Test Description"
ctaText="Test CTA"
ctaHref="/test"
/>
/>,
);
// Check that ContentLockup receives the props correctly
expect(
screen.getByRole("heading", { name: "Test Title" })
screen.getByRole("heading", { name: "Test Title" }),
).toBeInTheDocument();
expect(
screen.getByRole("heading", { name: "Test Subtitle" })
screen.getByRole("heading", { name: "Test Subtitle" }),
).toBeInTheDocument();
expect(screen.getByText("Test Description")).toBeInTheDocument();
// Button component renders multiple versions for different screen sizes
@@ -93,7 +93,7 @@ describe("HeroBanner Component", () => {
// HeroDecor should be present (it's a decorative component)
const heroDecor = document.querySelector(
'[class*="pointer-events-none absolute z-0"]'
'[class*="pointer-events-none absolute z-0"]',
);
expect(heroDecor).toBeInTheDocument();
});
@@ -123,7 +123,7 @@ describe("HeroBanner Component", () => {
const section = document.querySelector("section");
expect(section).toHaveClass(
"px-[var(--spacing-scale-008)]",
"sm:px-[var(--spacing-scale-010)]"
"sm:px-[var(--spacing-scale-010)]",
);
});
@@ -135,7 +135,7 @@ describe("HeroBanner Component", () => {
// Check for design token usage in the component structure
const container = section.querySelector(
'[class*="bg-[var(--color-surface-inverse-brand-primary)]"]'
'[class*="bg-[var(--color-surface-inverse-brand-primary)]"]',
);
expect(container).toBeInTheDocument();
});
tests/unit/Layout.test.jsx
+12 -12
View File
@@ -23,7 +23,7 @@ describe("RootLayout", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>
</RootLayout>,
);
const html = document.querySelector("html");
@@ -36,7 +36,7 @@ describe("RootLayout", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>
</RootLayout>,
);
const body = document.querySelector("body");
@@ -50,7 +50,7 @@ describe("RootLayout", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>
</RootLayout>,
);
const mainContainer = document.querySelector(".min-h-screen.flex.flex-col");
@@ -61,7 +61,7 @@ describe("RootLayout", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>
</RootLayout>,
);
// The HomeHeader component should be rendered
@@ -74,7 +74,7 @@ describe("RootLayout", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>
</RootLayout>,
);
const main = document.querySelector("main");
@@ -87,7 +87,7 @@ describe("RootLayout", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>
</RootLayout>,
);
// The Footer component should be rendered
@@ -100,7 +100,7 @@ describe("RootLayout", () => {
render(
<RootLayout>
<div>{testContent}</div>
</RootLayout>
</RootLayout>,
);
expect(screen.getByText(testContent)).toBeInTheDocument();
@@ -110,7 +110,7 @@ describe("RootLayout", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>
</RootLayout>,
);
const mainContainer = document.querySelector(".min-h-screen.flex.flex-col");
@@ -124,7 +124,7 @@ describe("RootLayout", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>
</RootLayout>,
);
const main = document.querySelector("main");
@@ -135,7 +135,7 @@ describe("RootLayout", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>
</RootLayout>,
);
// Check for all major structural elements
@@ -150,7 +150,7 @@ describe("RootLayout", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>
</RootLayout>,
);
// Check that the document has proper structure
@@ -173,7 +173,7 @@ describe("RootLayout", () => {
<div>First child</div>
<div>Second child</div>
<div>Third child</div>
</RootLayout>
</RootLayout>,
);
expect(screen.getByText("First child")).toBeInTheDocument();
tests/unit/LogoWall.test.jsx
+6 -6
View File
@@ -47,7 +47,7 @@ describe("LogoWall Component", () => {
render(<LogoWall />);
expect(
screen.getByText("Trusted by leading cooperators")
screen.getByText("Trusted by leading cooperators"),
).toBeInTheDocument();
});
@@ -64,7 +64,7 @@ describe("LogoWall Component", () => {
const section = document.querySelector("section");
expect(section).toHaveClass(
"p-[var(--spacing-scale-032)]",
"md:px-[var(--spacing-scale-024)]"
"md:px-[var(--spacing-scale-024)]",
);
});
@@ -72,7 +72,7 @@ describe("LogoWall Component", () => {
render(<LogoWall />);
const grid = document.querySelector(
'[class*="grid grid-cols-2 grid-rows-3"]'
'[class*="grid grid-cols-2 grid-rows-3"]',
);
expect(grid).toBeInTheDocument();
expect(grid).toHaveClass("sm:grid-cols-3", "sm:grid-rows-2", "md:flex");
@@ -84,7 +84,7 @@ describe("LogoWall Component", () => {
const foodNotBombsLogo = screen.getByAltText("Food Not Bombs");
expect(foodNotBombsLogo).toHaveAttribute(
"src",
"assets/Section/Logo_FoodNotBombs.png"
"assets/Section/Logo_FoodNotBombs.png",
);
expect(foodNotBombsLogo).toHaveClass("h-11", "lg:h-14", "xl:h-[70px]");
});
@@ -109,7 +109,7 @@ describe("LogoWall Component", () => {
render(<LogoWall />);
const logoContainers = document.querySelectorAll(
'[class*="hover:opacity-100"]'
'[class*="hover:opacity-100"]',
);
expect(logoContainers.length).toBeGreaterThan(0);
});
@@ -129,7 +129,7 @@ describe("LogoWall Component", () => {
render(<LogoWall />);
const logoContainers = document.querySelectorAll(
'[class*="transition-opacity duration-500"]'
'[class*="transition-opacity duration-500"]',
);
expect(logoContainers.length).toBeGreaterThan(0);
});
tests/unit/NumberedCards.test.jsx
+14 -14
View File
@@ -32,25 +32,25 @@ describe("NumberedCards Component", () => {
title="How CommunityRule helps"
subtitle="Build better communities step by step"
cards={mockCards}
/>
/>,
);
// Check for the heading (it contains both mobile and desktop versions)
expect(screen.getByRole("heading")).toBeInTheDocument();
// Check for the subtitle text
expect(
screen.getByText("Build better communities step by step")
screen.getByText("Build better communities step by step"),
).toBeInTheDocument();
// Check for card content
expect(
screen.getByText("Define your community values")
screen.getByText("Define your community values"),
).toBeInTheDocument();
expect(
screen.getByText("Create decision-making processes")
screen.getByText("Create decision-making processes"),
).toBeInTheDocument();
expect(
screen.getByText("Establish communication channels")
screen.getByText("Establish communication channels"),
).toBeInTheDocument();
});
@@ -60,7 +60,7 @@ describe("NumberedCards Component", () => {
title="Test Title"
subtitle="Test Subtitle"
cards={mockCards}
/>
/>,
);
// Check for the heading (it contains both mobile and desktop versions)
@@ -82,10 +82,10 @@ describe("NumberedCards Component", () => {
render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
expect(
screen.getByRole("button", { name: "Create CommunityRule" })
screen.getByRole("button", { name: "Create CommunityRule" }),
).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "See how it works" })
screen.getByRole("button", { name: "See how it works" }),
).toBeInTheDocument();
});
@@ -109,7 +109,7 @@ describe("NumberedCards Component", () => {
const section = document.querySelector("section");
expect(section).toHaveClass(
"bg-transparent",
"py-[var(--spacing-scale-032)]"
"py-[var(--spacing-scale-032)]",
);
});
@@ -117,7 +117,7 @@ describe("NumberedCards Component", () => {
render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
const cardsContainer = document.querySelector(
'[class*="grid grid-cols-1"]'
'[class*="grid grid-cols-1"]',
);
expect(cardsContainer).toBeInTheDocument();
});
@@ -128,7 +128,7 @@ describe("NumberedCards Component", () => {
title="Test Title"
subtitle="Test Description"
cards={mockCards}
/>
/>,
);
const script = document.querySelector('script[type="application/ld+json"]');
@@ -161,7 +161,7 @@ describe("NumberedCards Component", () => {
// Should render buttons even without cards
expect(
screen.getByRole("button", { name: "Create CommunityRule" })
screen.getByRole("button", { name: "Create CommunityRule" }),
).toBeInTheDocument();
});
@@ -180,7 +180,7 @@ describe("NumberedCards Component", () => {
const section = document.querySelector("section");
expect(section).toHaveClass(
"py-[var(--spacing-scale-032)]",
"sm:py-[var(--spacing-scale-048)]"
"sm:py-[var(--spacing-scale-048)]",
);
});
@@ -188,7 +188,7 @@ describe("NumberedCards Component", () => {
render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
const container = document.querySelector(
'[class*="max-w-[var(--spacing-measures-max-width-lg)]"]'
'[class*="max-w-[var(--spacing-measures-max-width-lg)]"]',
);
expect(container).toBeInTheDocument();
});
tests/unit/Page.test.jsx
+50 -50
View File
@@ -11,36 +11,36 @@ describe("Page", () => {
expect(screen.getAllByText("with clarity").length).toBeGreaterThan(0);
expect(
screen.getAllByText(
"Help your community make important decisions in a way that reflects its unique values."
).length
"Help your community make important decisions in a way that reflects its unique values.",
).length,
).toBeGreaterThan(0);
// Check numbered cards section (using getAllByText since there are multiple instances)
expect(
screen.getAllByText("How CommunityRule works").length
screen.getAllByText("How CommunityRule works").length,
).toBeGreaterThan(0);
expect(
screen.getAllByText(
"Here's a quick overview of the process, from start to finish."
).length
"Here's a quick overview of the process, from start to finish.",
).length,
).toBeGreaterThan(0);
// Check feature grid section (using getAllByText since there are multiple instances)
expect(
screen.getAllByText("We've got your back, every step of the way").length
screen.getAllByText("We've got your back, every step of the way").length,
).toBeGreaterThan(0);
expect(
screen.getAllByText(
"Use our toolkit to improve, document, and evolve your organization."
).length
"Use our toolkit to improve, document, and evolve your organization.",
).length,
).toBeGreaterThan(0);
// Check ask organizer section (using getAllByText since there are multiple instances)
expect(screen.getAllByText("Still have questions?").length).toBeGreaterThan(
0
0,
);
expect(
screen.getAllByText("Get answers from an experienced organizer").length
screen.getAllByText("Get answers from an experienced organizer").length,
).toBeGreaterThan(0);
});
@@ -52,11 +52,11 @@ describe("Page", () => {
expect(screen.getAllByText("with clarity").length).toBeGreaterThan(0);
expect(
screen.getAllByText(
"Help your community make important decisions in a way that reflects its unique values."
).length
"Help your community make important decisions in a way that reflects its unique values.",
).length,
).toBeGreaterThan(0);
expect(
screen.getAllByText("Learn how CommunityRule works").length
screen.getAllByText("Learn how CommunityRule works").length,
).toBeGreaterThan(0);
});
@@ -65,27 +65,27 @@ describe("Page", () => {
// Check numbered cards content (using getAllByText since there are multiple instances)
expect(
screen.getAllByText("How CommunityRule works").length
screen.getAllByText("How CommunityRule works").length,
).toBeGreaterThan(0);
expect(
screen.getAllByText(
"Here's a quick overview of the process, from start to finish."
).length
"Here's a quick overview of the process, from start to finish.",
).length,
).toBeGreaterThan(0);
// Check individual card content (using getAllByText since there are multiple instances)
expect(
screen.getAllByText("Document how your community makes decisions").length
screen.getAllByText("Document how your community makes decisions").length,
).toBeGreaterThan(0);
expect(
screen.getAllByText(
"Build an operating manual for a successful community"
).length
"Build an operating manual for a successful community",
).length,
).toBeGreaterThan(0);
expect(
screen.getAllByText(
"Get a link to your manual for your group to review and evolve"
).length
"Get a link to your manual for your group to review and evolve",
).length,
).toBeGreaterThan(0);
});
@@ -94,12 +94,12 @@ describe("Page", () => {
// Check feature grid content (using getAllByText since there are multiple instances)
expect(
screen.getAllByText("We've got your back, every step of the way").length
screen.getAllByText("We've got your back, every step of the way").length,
).toBeGreaterThan(0);
expect(
screen.getAllByText(
"Use our toolkit to improve, document, and evolve your organization."
).length
"Use our toolkit to improve, document, and evolve your organization.",
).length,
).toBeGreaterThan(0);
});
@@ -108,10 +108,10 @@ describe("Page", () => {
// Check ask organizer content (using getAllByText since there are multiple instances)
expect(screen.getAllByText("Still have questions?").length).toBeGreaterThan(
0
0,
);
expect(
screen.getAllByText("Get answers from an experienced organizer").length
screen.getAllByText("Get answers from an experienced organizer").length,
).toBeGreaterThan(0);
expect(screen.getAllByText("Ask an organizer").length).toBeGreaterThan(0);
});
@@ -126,19 +126,19 @@ describe("Page", () => {
// LogoWall - should be present (even if just the component structure)
// NumberedCards
expect(
screen.getAllByText("How CommunityRule works").length
screen.getAllByText("How CommunityRule works").length,
).toBeGreaterThan(0);
// RuleStack - should be present
// FeatureGrid
expect(
screen.getAllByText("We've got your back, every step of the way").length
screen.getAllByText("We've got your back, every step of the way").length,
).toBeGreaterThan(0);
// QuoteBlock - should be present
// AskOrganizer
expect(screen.getAllByText("Still have questions?").length).toBeGreaterThan(
0
0,
);
});
@@ -154,7 +154,7 @@ describe("Page", () => {
// Check CTA button in hero banner
expect(
screen.getAllByText("Learn how CommunityRule works").length
screen.getAllByText("Learn how CommunityRule works").length,
).toBeGreaterThan(0);
// Check CTA button in ask organizer section
@@ -167,27 +167,27 @@ describe("Page", () => {
// Check main description (using getAllByText since there are multiple instances)
expect(
screen.getAllByText(
"Help your community make important decisions in a way that reflects its unique values."
).length
"Help your community make important decisions in a way that reflects its unique values.",
).length,
).toBeGreaterThan(0);
// Check numbered cards description (using getAllByText since there are multiple instances)
expect(
screen.getAllByText(
"Here's a quick overview of the process, from start to finish."
).length
"Here's a quick overview of the process, from start to finish.",
).length,
).toBeGreaterThan(0);
// Check feature grid description (using getAllByText since there are multiple instances)
expect(
screen.getAllByText(
"Use our toolkit to improve, document, and evolve your organization."
).length
"Use our toolkit to improve, document, and evolve your organization.",
).length,
).toBeGreaterThan(0);
// Check ask organizer description (using getAllByText since there are multiple instances)
expect(
screen.getAllByText("Get answers from an experienced organizer").length
screen.getAllByText("Get answers from an experienced organizer").length,
).toBeGreaterThan(0);
});
@@ -197,13 +197,13 @@ describe("Page", () => {
// Check all section titles (using getAllByText since there are multiple instances)
expect(screen.getAllByText("Collaborate").length).toBeGreaterThan(0);
expect(
screen.getAllByText("How CommunityRule works").length
screen.getAllByText("How CommunityRule works").length,
).toBeGreaterThan(0);
expect(
screen.getAllByText("We've got your back, every step of the way").length
screen.getAllByText("We've got your back, every step of the way").length,
).toBeGreaterThan(0);
expect(screen.getAllByText("Still have questions?").length).toBeGreaterThan(
0
0,
);
});
@@ -212,17 +212,17 @@ describe("Page", () => {
// Check all three numbered card items (using getAllByText since there are multiple instances)
expect(
screen.getAllByText("Document how your community makes decisions").length
screen.getAllByText("Document how your community makes decisions").length,
).toBeGreaterThan(0);
expect(
screen.getAllByText(
"Build an operating manual for a successful community"
).length
"Build an operating manual for a successful community",
).length,
).toBeGreaterThan(0);
expect(
screen.getAllByText(
"Get a link to your manual for your group to review and evolve"
).length
"Get a link to your manual for your group to review and evolve",
).length,
).toBeGreaterThan(0);
});
@@ -233,16 +233,16 @@ describe("Page", () => {
expect(screen.getAllByText("with clarity").length).toBeGreaterThan(0);
expect(
screen.getAllByText(
"Here's a quick overview of the process, from start to finish."
).length
"Here's a quick overview of the process, from start to finish.",
).length,
).toBeGreaterThan(0);
expect(
screen.getAllByText(
"Use our toolkit to improve, document, and evolve your organization."
).length
"Use our toolkit to improve, document, and evolve your organization.",
).length,
).toBeGreaterThan(0);
expect(
screen.getAllByText("Get answers from an experienced organizer").length
screen.getAllByText("Get answers from an experienced organizer").length,
).toBeGreaterThan(0);
});
});
tests/unit/QuoteBlock.test.jsx
+20 -20
View File
@@ -12,11 +12,11 @@ describe("QuoteBlock Component", () => {
render(<QuoteBlock />);
expect(
screen.getByText(/The rules of decision-making must be open/)
screen.getByText(/The rules of decision-making must be open/),
).toBeInTheDocument();
expect(screen.getByText("Jo Freeman")).toBeInTheDocument();
expect(
screen.getByText("The Tyranny of Structurelessness")
screen.getByText("The Tyranny of Structurelessness"),
).toBeInTheDocument();
expect(screen.getByAltText("Portrait of Jo Freeman")).toBeInTheDocument();
});
@@ -27,7 +27,7 @@ describe("QuoteBlock Component", () => {
quote="Custom quote text"
author="Custom Author"
source="Custom Source"
/>
/>,
);
expect(screen.getByText("Custom quote text")).toBeInTheDocument();
@@ -41,7 +41,7 @@ describe("QuoteBlock Component", () => {
quote="Test quote"
author="Test Author"
className="custom-class"
/>
/>,
);
const section = document.querySelector("section");
@@ -50,24 +50,24 @@ describe("QuoteBlock Component", () => {
test("renders different variants", () => {
const { rerender } = render(
<QuoteBlock quote="Test quote" author="Test Author" variant="compact" />
<QuoteBlock quote="Test quote" author="Test Author" variant="compact" />,
);
// Compact variant should have different styling
const section = screen.getByRole("region");
expect(section).toHaveClass(
"py-[var(--spacing-scale-032)]",
"px-[var(--spacing-scale-016)]"
"px-[var(--spacing-scale-016)]",
);
rerender(
<QuoteBlock quote="Test quote" author="Test Author" variant="extended" />
<QuoteBlock quote="Test quote" author="Test Author" variant="extended" />,
);
// Extended variant should have different styling
expect(section).toHaveClass(
"py-[var(--spacing-scale-048)]",
"px-[var(--spacing-scale-024)]"
"px-[var(--spacing-scale-024)]",
);
});
@@ -77,7 +77,7 @@ describe("QuoteBlock Component", () => {
quote="Test quote"
author="Test Author"
id="custom-quote-id"
/>
/>,
);
const quoteElement = screen.getByText("Test quote");
@@ -95,7 +95,7 @@ describe("QuoteBlock Component", () => {
test("calls onError callback when image fails", () => {
const onError = vi.fn();
render(
<QuoteBlock quote="Test quote" author="Test Author" onError={onError} />
<QuoteBlock quote="Test quote" author="Test Author" onError={onError} />,
);
// Should render without errors
@@ -112,24 +112,24 @@ describe("QuoteBlock Component", () => {
test("renders decorative elements for standard variant", () => {
render(
<QuoteBlock quote="Test quote" author="Test Author" variant="standard" />
<QuoteBlock quote="Test quote" author="Test Author" variant="standard" />,
);
// Should render QuoteDecor for standard variant
const decor = document.querySelector(
'[class*="pointer-events-none absolute z-0"]'
'[class*="pointer-events-none absolute z-0"]',
);
expect(decor).toBeInTheDocument();
});
test("does not render decorative elements for compact variant", () => {
render(
<QuoteBlock quote="Test quote" author="Test Author" variant="compact" />
<QuoteBlock quote="Test quote" author="Test Author" variant="compact" />,
);
// Should not render QuoteDecor for compact variant
const decor = document.querySelector(
'[class*="pointer-events-none absolute z-0"]'
'[class*="pointer-events-none absolute z-0"]',
);
expect(decor).not.toBeInTheDocument();
});
@@ -149,7 +149,7 @@ describe("QuoteBlock Component", () => {
test("applies correct accessibility attributes", () => {
render(
<QuoteBlock quote="Test quote" author="Test Author" id="test-quote" />
<QuoteBlock quote="Test quote" author="Test Author" id="test-quote" />,
);
const section = document.querySelector("section");
@@ -166,7 +166,7 @@ describe("QuoteBlock Component", () => {
expect(section).toHaveClass("md:py-[var(--spacing-scale-032)]");
const card = section.querySelector(
'[class*="bg-[var(--color-surface-default-brand-darker-accent)]"]'
'[class*="bg-[var(--color-surface-default-brand-darker-accent)]"]',
);
expect(card).toBeInTheDocument();
});
@@ -177,7 +177,7 @@ describe("QuoteBlock Component", () => {
render(<QuoteBlock quote="" author="" />);
expect(consoleSpy).toHaveBeenCalledWith(
"QuoteBlock: Missing required props (quote or author)"
"QuoteBlock: Missing required props (quote or author)",
);
consoleSpy.mockRestore();
@@ -199,14 +199,14 @@ describe("QuoteBlock Component", () => {
test("applies responsive text sizing", () => {
render(
<QuoteBlock quote="Test quote" author="Test Author" variant="standard" />
<QuoteBlock quote="Test quote" author="Test Author" variant="standard" />,
);
const quoteElement = screen.getByText("Test quote");
expect(quoteElement).toHaveClass(
"text-[18px]",
"md:text-[36px]",
"lg:text-[52px]"
"lg:text-[52px]",
);
});
@@ -216,7 +216,7 @@ describe("QuoteBlock Component", () => {
expect(screen.getByText("Test quote")).toBeInTheDocument();
expect(screen.getByText("Test Author")).toBeInTheDocument();
expect(
screen.queryByText("The Tyranny of Structurelessness")
screen.queryByText("The Tyranny of Structurelessness"),
).not.toBeInTheDocument();
});
});
tests/unit/RuleStack.test.jsx
+9 -9
View File
@@ -28,16 +28,16 @@ describe("RuleStack Component", () => {
render(<RuleStack />);
expect(
screen.getByText(/Units called Circles have the ability to decide/)
screen.getByText(/Units called Circles have the ability to decide/),
).toBeInTheDocument();
expect(
screen.getByText(/Decisions that affect the group collectively/)
screen.getByText(/Decisions that affect the group collectively/),
).toBeInTheDocument();
expect(
screen.getByText(/An elected board determines policies/)
screen.getByText(/An elected board determines policies/),
).toBeInTheDocument();
expect(
screen.getByText(/All participants can propose and vote/)
screen.getByText(/All participants can propose and vote/),
).toBeInTheDocument();
});
@@ -54,7 +54,7 @@ describe("RuleStack Component", () => {
render(<RuleStack />);
expect(
screen.getByRole("button", { name: "See all templates" })
screen.getByRole("button", { name: "See all templates" }),
).toBeInTheDocument();
});
@@ -71,7 +71,7 @@ describe("RuleStack Component", () => {
const section = document.querySelector("section");
expect(section).toHaveClass(
"py-[var(--spacing-scale-032)]",
"px-[var(--spacing-scale-020)]"
"px-[var(--spacing-scale-020)]",
);
});
@@ -128,7 +128,7 @@ describe("RuleStack Component", () => {
const section = document.querySelector("section");
expect(section).toHaveClass(
"md:py-[var(--spacing-scale-048)]",
"lg:py-[var(--spacing-scale-064)]"
"lg:py-[var(--spacing-scale-064)]",
);
});
@@ -141,7 +141,7 @@ describe("RuleStack Component", () => {
"md:w-[56px]",
"md:h-[56px]",
"lg:w-[90px]",
"lg:h-[90px]"
"lg:h-[90px]",
);
});
@@ -155,7 +155,7 @@ describe("RuleStack Component", () => {
// Verify that cards have background color classes
cards.forEach((card) => {
expect(card.className).toMatch(
/bg-\[var\(--color-surface-default-brand-/
/bg-\[var\(--color-surface-default-brand-/,
);
});
});
tests/unit/accessibility.test.jsx
+1 -1
View File
@@ -155,7 +155,7 @@ describe("Accessibility - Component Level", () => {
}
const headingLevels = headings.map((heading) =>
parseInt(heading.tagName.charAt(1))
parseInt(heading.tagName.charAt(1)),
);
// Check that heading levels are sequential (no skipping levels)