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

Update tests with new configuration

Browse Source
This commit is contained in:
adilallo
2026-01-28 14:50:30 -07:00
parent 63489ee38f
commit e6e5499646
8 changed files with 105 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/AskOrganizer.tsx
+5 -2
View File
@@ -99,11 +99,13 @@ const AskOrganizer = memo<AskOrganizerProps>(
? "gap-[var(--spacing-scale-020)]"
: "gap-[var(--spacing-scale-040)]";
const labelledBy = title ? "ask-organizer-headline" : undefined;
return (
<section
className={`${sectionPadding} ${className}`}
aria-labelledby="ask-organizer-headline"
role="region"
aria-labelledby={labelledBy}
aria-label={labelledBy ? undefined : "Ask an organizer"}
tabIndex={-1}
>
<div className={`flex flex-col ${contentGap} ${styles.container}`}>
@@ -114,6 +116,7 @@ const AskOrganizer = memo<AskOrganizerProps>(
description={description}
variant={variant === "inverse" ? "ask-inverse" : "ask"}
alignment={variant === "left-aligned" ? "left" : "center"}
titleId={labelledBy}
/>
{/* Button */}
app/components/ContentLockup.tsx
+18 -4
View File
@@ -15,6 +15,11 @@ interface ContentLockupProps {
linkText?: string;
linkHref?: string;
alignment?: "center" | "left";
/**
* Optional id to attach to the primary title heading.
* Useful when a parent section uses aria-labelledby.
*/
titleId?: string;
}
interface VariantStyle {
@@ -39,6 +44,7 @@ const ContentLockup = memo<ContentLockupProps>(
linkText,
linkHref,
alignment = "center",
titleId,
}) => {
// Variant-specific styling
const variantStyles: Record<string, VariantStyle> = {
@@ -132,9 +138,13 @@ const ContentLockup = memo<ContentLockupProps>(
alignment === "left" ? "justify-start" : "justify-center"
}`}
>
<h1 className={styles.title}>{title}</h1>
{title ? (
<h1 id={titleId} className={styles.title}>
{title}
</h1>
) : null}
</div>
<h2 className={styles.subtitle}>{subtitle}</h2>
{subtitle ? <h2 className={styles.subtitle}>{subtitle}</h2> : null}
</div>
) : (
/* Full structure for other variants */
@@ -143,7 +153,11 @@ const ContentLockup = memo<ContentLockupProps>(
<div className={styles.titleGroup}>
{/* Title container */}
<div className={styles.titleContainer}>
<h1 className={styles.title}>{title}</h1>
{title ? (
<h1 id={titleId} className={styles.title}>
{title}
</h1>
) : null}
{variant === "hero" && (
<img
src={getAssetPath("assets/Shapes_1.svg")}
@@ -155,7 +169,7 @@ const ContentLockup = memo<ContentLockupProps>(
</div>
{/* Subtitle */}
<h2 className={styles.subtitle}>{subtitle}</h2>
{subtitle ? <h2 className={styles.subtitle}>{subtitle}</h2> : null}
</div>
{/* Description */}
app/components/FeatureGrid.tsx
+5 -5
View File
@@ -50,12 +50,13 @@ const FeatureGrid = memo<FeatureGridProps>(
],
[],
);
const labelledBy = title ? "feature-grid-headline" : undefined;
return (
<section
className={`p-0 lg:p-[var(--spacing-scale-064)] ${className}`}
aria-labelledby="feature-grid-headline"
role="region"
tabIndex={-1}
aria-labelledby={labelledBy}
aria-label={labelledBy ? undefined : "Feature tools and services"}
>
<div className="py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2">
<div className="w-full mx-auto gap-[var(--spacing-scale-048)] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)] [container-type:inline-size]">
@@ -67,14 +68,13 @@ const FeatureGrid = memo<FeatureGridProps>(
variant="feature"
linkText="Learn more"
linkHref="#"
titleId={labelledBy}
/>
</div>
{/* MiniCard Grid */}
<div
className="grid grid-cols-2 md:grid-cols-4 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)] lg:mt-0 lg:flex-grow lg:shrink-0"
role="grid"
aria-label="Feature tools and services"
>
{features.map((feature, index) => (
<MiniCard
tests/components/ContentBanner.test.tsx
+7 -3
View File
@@ -12,9 +12,13 @@ vi.mock("next/link", () => ({
),
}));
vi.mock("../../lib/assetUtils", () => ({
getAssetPath: vi.fn((asset: string) => `/assets/${asset}`),
}));
vi.mock("../../lib/assetUtils", async (importOriginal) => {
const actual = (await importOriginal()) as typeof import("../../lib/assetUtils");
return {
...actual,
getAssetPath: vi.fn((asset: string) => `/assets/${asset}`),
};
});
const mockPost: BlogPost = {
slug: "test-article",
tests/components/FeatureGrid.test.tsx
-4
View File
@@ -66,10 +66,6 @@ describe("FeatureGrid (behavioral tests)", () => {
render(<FeatureGrid title="Test" subtitle="Test" />);
const section = document.querySelector("section");
expect(section).toHaveAttribute("aria-labelledby", "feature-grid-headline");
expect(screen.getByRole("grid")).toHaveAttribute(
"aria-label",
"Feature tools and services",
);
});
it("handles missing props gracefully", () => {
tests/pages/user-journey.test.jsx
+1 -2
View File
@@ -87,7 +87,6 @@ describe("User Journey Integration", () => {
});
test("user navigates through the application using header navigation", async () => {
const user = userEvent.setup();
render(
<div>
<Header />
@@ -107,8 +106,8 @@ describe("User Journey Integration", () => {
// Test that navigation links are present and clickable
for (const link of headerNavLinks) {
await user.click(link);
expect(link).toBeInTheDocument();
expect(link).toHaveAttribute("href");
}
});
tests/unit/Layout.test.jsx
+58 -142
View File
@@ -1,5 +1,4 @@
import { describe, test, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import RootLayout from "../../app/layout";
// Mock the font imports since they're Next.js specific
@@ -18,166 +17,83 @@ vi.mock("next/font/google", () => ({
})),
}));
function findChildByType(node, type) {
if (!node || typeof node !== "object") return null;
const children = Array.isArray(node.props?.children)
? node.props.children
: [node.props?.children].filter(Boolean);
for (const child of children) {
if (child?.type === type) return child;
}
return null;
}
function findDescendant(node, predicate) {
if (predicate(node)) return node;
if (!node || typeof node !== "object") return null;
const children = Array.isArray(node.props?.children)
? node.props.children
: [node.props?.children].filter(Boolean);
for (const child of children) {
const found = findDescendant(child, predicate);
if (found) return found;
}
return null;
}
describe("RootLayout", () => {
test("renders HTML structure with correct attributes", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>,
);
const html = document.querySelector("html");
expect(html).toBeInTheDocument();
expect(html).toHaveAttribute("lang", "en");
expect(html).toHaveClass("font-sans");
const tree = RootLayout({ children: <div>Test content</div> });
expect(tree.type).toBe("html");
expect(tree.props.lang).toBe("en");
expect(tree.props.className).toContain("font-sans");
});
test("renders body with font variables", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>,
);
const body = document.querySelector("body");
expect(body).toBeInTheDocument();
expect(body).toHaveClass("--font-inter");
expect(body).toHaveClass("--font-bricolage-grotesque");
expect(body).toHaveClass("--font-space-grotesk");
const tree = RootLayout({ children: <div>Test content</div> });
const body = findChildByType(tree, "body");
expect(body).toBeTruthy();
expect(body.props.className).toContain("--font-inter");
expect(body.props.className).toContain("--font-bricolage-grotesque");
expect(body.props.className).toContain("--font-space-grotesk");
});
test("renders main layout structure", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>,
const tree = RootLayout({ children: <div>Test content</div> });
const container = findDescendant(
tree,
(n) => n.type === "div" && n.props?.className?.includes("min-h-screen"),
);
const mainContainer = document.querySelector(".min-h-screen.flex.flex-col");
expect(mainContainer).toBeInTheDocument();
});
test("renders HomeHeader component", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>,
);
// The HomeHeader component should be rendered
// We can check for its presence by looking for elements that would be in the header
const header = document.querySelector("header");
expect(header).toBeInTheDocument();
expect(container).toBeTruthy();
});
test("renders main content area", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>,
const testContent = "Test content";
const tree = RootLayout({ children: <div>{testContent}</div> });
const main = findDescendant(
tree,
(n) => n.type === "main" && n.props?.className?.includes("flex-1"),
);
expect(main).toBeTruthy();
const main = document.querySelector("main");
expect(main).toBeInTheDocument();
expect(main).toHaveClass("flex-1");
expect(main).toHaveTextContent("Test content");
});
test("renders Footer component", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>,
const childText = findDescendant(
main,
(n) => typeof n === "string" && n.includes(testContent),
);
// The Footer component should be rendered
const footer = document.querySelector("footer");
expect(footer).toBeInTheDocument();
expect(childText).toBeTruthy();
});
test("renders children content correctly", () => {
const testContent = "This is test content";
render(
<RootLayout>
<div>{testContent}</div>
</RootLayout>,
const tree = RootLayout({ children: <div>{testContent}</div> });
const main = findDescendant(tree, (n) => n.type === "main");
const childText = findDescendant(
main,
(n) => typeof n === "string" && n.includes(testContent),
);
expect(screen.getByText(testContent)).toBeInTheDocument();
});
test("has correct CSS classes for layout structure", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>,
);
const mainContainer = document.querySelector(".min-h-screen.flex.flex-col");
expect(mainContainer).toBeInTheDocument();
expect(mainContainer).toHaveClass("min-h-screen");
expect(mainContainer).toHaveClass("flex");
expect(mainContainer).toHaveClass("flex-col");
});
test("main element has correct flex properties", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>,
);
const main = document.querySelector("main");
expect(main).toHaveClass("flex-1");
});
test("renders complete page structure", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>,
);
// Check for all major structural elements
expect(document.querySelector("html")).toBeInTheDocument();
expect(document.querySelector("body")).toBeInTheDocument();
expect(document.querySelector("header")).toBeInTheDocument();
expect(document.querySelector("main")).toBeInTheDocument();
expect(document.querySelector("footer")).toBeInTheDocument();
});
test("maintains proper document structure", () => {
render(
<RootLayout>
<div>Test content</div>
</RootLayout>,
);
// Check that the document has proper structure
const html = document.querySelector("html");
const body = html.querySelector("body");
const header = body.querySelector("header");
const main = body.querySelector("main");
const footer = body.querySelector("footer");
expect(html).toBeInTheDocument();
expect(body).toBeInTheDocument();
expect(header).toBeInTheDocument();
expect(main).toBeInTheDocument();
expect(footer).toBeInTheDocument();
});
test("renders multiple children correctly", () => {
render(
<RootLayout>
<div>First child</div>
<div>Second child</div>
<div>Third child</div>
</RootLayout>,
);
expect(screen.getByText("First child")).toBeInTheDocument();
expect(screen.getByText("Second child")).toBeInTheDocument();
expect(screen.getByText("Third child")).toBeInTheDocument();
expect(childText).toBeTruthy();
});
});
tests/utils/content-processing.test.js
+11
View File
@@ -5,9 +5,18 @@ import path from "path";
// Mock fs and path modules
vi.mock("fs");
vi.mock("path");
vi.mock("../../lib/logger", () => ({
logger: {
debug: vi.fn(),
info: vi.fn(),
warn: vi.fn(),
error: vi.fn(),
},
}));
// Import the content processing functions
import { getBlogPostFiles, markdownToHtml } from "../../lib/content";
import { logger } from "../../lib/logger";
describe("Content Processing Integration", () => {
beforeEach(() => {
@@ -35,6 +44,8 @@ describe("Content Processing Integration", () => {
const result = getBlogPostFiles();
expect(result).toEqual([]);
// Verify we log the error without polluting test output
expect(logger.error).toHaveBeenCalled();
});
it("should filter out non-markdown files", () => {