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

Right rail template

Browse Source
This commit is contained in:
adilallo
2026-02-28 23:16:10 -07:00
parent f5bfb25f5e
commit 0799636c78
60 changed files with 1255 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/components/ContentBanner.test.tsx
+9 -1
View File
@@ -5,7 +5,15 @@ import ContentBanner from "../../app/components/sections/ContentBanner";
import type { BlogPost } from "../../lib/content";
vi.mock("next/link", () => ({
default: ({ children, href, ...props }: any) => (
default: ({
children,
href,
...props
}: {
children?: React.ReactNode;
href?: string;
[key: string]: unknown;
}) => (
<a href={href} {...props}>
{children}
</a>
tests/components/CreateFlowFooter.test.tsx
+3 -1
View File
@@ -44,7 +44,9 @@ describe("CreateFlowFooter (behavioral tests)", () => {
it("renders progress bar when progressBar is true", () => {
render(<CreateFlowFooter progressBar={true} />);
const footer = screen.getByRole("contentinfo", { name: "Create Flow Footer" });
const footer = screen.getByRole("contentinfo", {
name: "Create Flow Footer",
});
expect(footer).toBeInTheDocument();
});
tests/components/CreateFlowTopNav.test.tsx
+3 -1
View File
@@ -80,7 +80,9 @@ describe("CreateFlowTopNav (behavioral tests)", () => {
it("does not render Share button when hasShare is false", () => {
render(<CreateFlowTopNav hasShare={false} />);
expect(screen.queryByRole("button", { name: "Share" })).not.toBeInTheDocument();
expect(
screen.queryByRole("button", { name: "Share" }),
).not.toBeInTheDocument();
});
it("renders Export button when hasExport is true", () => {
tests/components/HeaderLockup.test.tsx
+2 -10
View File
@@ -45,9 +45,7 @@ describe("HeaderLockup (behavioral tests)", () => {
});
it("renders description when provided", () => {
render(
<HeaderLockup title="Test Title" description="Test description" />,
);
render(<HeaderLockup title="Test Title" description="Test description" />);
expect(screen.getByText("Test description")).toBeInTheDocument();
});
@@ -71,13 +69,7 @@ describe("HeaderLockup (behavioral tests)", () => {
});
it("accepts PascalCase props", () => {
render(
<HeaderLockup
title="Test Title"
justification="Left"
size="L"
/>,
);
render(<HeaderLockup title="Test Title" justification="Left" size="L" />);
expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
});
});
tests/components/Logo.test.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ describe("Logo (behavioral tests)", () => {
it("hides text when showText is false", () => {
const { container } = render(<Logo showText={false} />);
const textElement = container.querySelector('.hidden');
const textElement = container.querySelector(".hidden");
expect(textElement).toBeInTheDocument();
expect(screen.getByAltText("CommunityRule Logo Icon")).toBeInTheDocument();
});
tests/components/MultiSelect.test.tsx
+6 -12
View File
@@ -135,13 +135,10 @@ describe("MultiSelect – behaviour specifics", () => {
});
it("does not render add button when addButton is false", () => {
render(
<MultiSelect
options={defaultChipOptions}
addButton={false}
/>,
);
expect(screen.queryByRole("button", { name: /add/i })).not.toBeInTheDocument();
render(<MultiSelect options={defaultChipOptions} addButton={false} />);
expect(
screen.queryByRole("button", { name: /add/i }),
).not.toBeInTheDocument();
});
it("handles custom chip confirm", async () => {
@@ -163,7 +160,7 @@ describe("MultiSelect – behaviour specifics", () => {
// Now the check button should be enabled
const checkButton = screen.getByRole("button", { name: "Confirm" });
expect(checkButton).not.toBeDisabled();
await userEvent.click(checkButton);
expect(handleConfirm).toHaveBeenCalledWith("custom-1", "NewOption");
@@ -175,10 +172,7 @@ describe("MultiSelect – behaviour specifics", () => {
{ id: "custom-1", label: "", state: "Custom" as const },
];
render(
<MultiSelect
options={customOptions}
onCustomChipClose={handleClose}
/>,
<MultiSelect options={customOptions} onCustomChipClose={handleClose} />,
);
const closeButton = screen.getByRole("button", { name: "Close" });
tests/components/RelatedArticles.test.tsx
+9 -1
View File
@@ -5,7 +5,15 @@ import RelatedArticles from "../../app/components/sections/RelatedArticles";
import type { BlogPost } from "../../lib/content";
vi.mock("next/link", () => ({
default: ({ children, href, ...props }: any) => (
default: ({
children,
href,
...props
}: {
children?: React.ReactNode;
href?: string;
[key: string]: unknown;
}) => (
<a href={href} {...props}>
{children}
</a>
tests/components/ReviewPage.test.tsx
+6 -2
View File
@@ -13,7 +13,9 @@ describe("ReviewPage", () => {
it("renders HeaderLockup with expected title", () => {
render(<ReviewPage />);
expect(
screen.getByRole("heading", { name: "Your community is added - congrats!" }),
screen.getByRole("heading", {
name: "Your community is added - congrats!",
}),
).toBeInTheDocument();
});
@@ -44,6 +46,8 @@ describe("ReviewPage", () => {
render(<ReviewPage />);
const buttons = screen.getAllByRole("button");
expect(buttons.length).toBeGreaterThanOrEqual(1);
expect(buttons.some((el) => el.textContent?.includes("Mutual Aid Mondays"))).toBe(true);
expect(
buttons.some((el) => el.textContent?.includes("Mutual Aid Mondays")),
).toBe(true);
});
});
tests/components/TextInput.test.tsx
+2 -4
View File
@@ -1,6 +1,6 @@
import React from "react";
import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom/vitest";
import TextInput from "../../app/components/controls/TextInput";
import { componentTestSuite } from "../utils/componentTestSuite";
@@ -34,9 +34,7 @@ componentTestSuite<TextInputProps>({
describe("TextInput (size tests)", () => {
it("renders with medium size by default", () => {
const { container } = render(
<TextInput label="Test" inputSize="medium" />,
);
const { container } = render(<TextInput label="Test" inputSize="medium" />);
const input = container.querySelector("input");
expect(input).toHaveClass("h-[40px]");
});
tests/components/Upload.test.tsx
+21 -7
View File
@@ -33,13 +33,17 @@ describe("Upload (behavioral tests)", () => {
it("renders with active state by default", () => {
render(<Upload label="Upload" />);
const button = screen.getByRole("button", { name: /upload/i });
expect(button).toHaveClass("bg-[var(--color-surface-invert-primary,white)]");
expect(button).toHaveClass(
"bg-[var(--color-surface-invert-primary,white)]",
);
});
it("renders with inactive state when active is false", () => {
render(<Upload label="Upload" active={false} />);
const button = screen.getByRole("button", { name: /upload/i });
expect(button).toHaveClass("bg-[var(--color-surface-default-secondary,#141414)]");
expect(button).toHaveClass(
"bg-[var(--color-surface-default-secondary,#141414)]",
);
});
it("displays label when provided", () => {
@@ -76,20 +80,30 @@ describe("Upload (behavioral tests)", () => {
it("displays description text", () => {
render(<Upload label="Upload" />);
expect(screen.getByText(/Add images, PDFs, and other files to the policy/i)).toBeInTheDocument();
expect(
screen.getByText(/Add images, PDFs, and other files to the policy/i),
).toBeInTheDocument();
});
it("applies active state styles correctly", () => {
render(<Upload label="Upload" active={true} />);
const descriptionText = screen.getByText(/Add images, PDFs, and other files to the policy/i);
const descriptionText = screen.getByText(
/Add images, PDFs, and other files to the policy/i,
);
const descriptionContainer = descriptionText.parentElement;
expect(descriptionContainer).toHaveClass("text-[color:var(--color-content-default-primary,white)]");
expect(descriptionContainer).toHaveClass(
"text-[color:var(--color-content-default-primary,white)]",
);
});
it("applies inactive state styles correctly", () => {
render(<Upload label="Upload" active={false} />);
const descriptionText = screen.getByText(/Add images, PDFs, and other files to the policy/i);
const descriptionText = screen.getByText(
/Add images, PDFs, and other files to the policy/i,
);
const descriptionContainer = descriptionText.parentElement;
expect(descriptionContainer).toHaveClass("text-[color:var(--color-content-default-tertiary,#b4b4b4)]");
expect(descriptionContainer).toHaveClass(
"text-[color:var(--color-content-default-tertiary,#b4b4b4)]",
);
});
});