{post.frontmatter.description}
+{subtitle}
+ +This is the article content with bold text and italic text.
", +}; + +const mockRelatedPosts = [ + { + slug: "related-1", + frontmatter: { + title: "Related Article 1", + description: "First related article", + author: "Test Author", + date: "2025-04-10", + }, + }, + { + slug: "related-2", + frontmatter: { + title: "Related Article 2", + description: "Second related article", + author: "Test Author", + date: "2025-04-12", + }, + }, +]; + +describe("BlogPostPage", () => { + beforeEach(() => { + // Reset mocks + vi.clearAllMocks(); + + // Mock the content functions + const { getBlogPostBySlug, getAllBlogPosts } = require("../../lib/content"); + getBlogPostBySlug.mockResolvedValue(mockPost); + getAllBlogPosts.mockResolvedValue([mockPost, ...mockRelatedPosts]); + }); + + it("renders the blog post page with correct structure", async () => { + const BlogPostPageComponent = await BlogPostPage({ + params: { slug: "test-article" }, + }); + render(BlogPostPageComponent); + + // Check main container + const mainContainer = document.querySelector("main"); + expect(mainContainer).toBeInTheDocument(); + expect(mainContainer).toHaveClass( + "min-h-screen", + "bg-[#F4F3F1]", + "relative", + "overflow-hidden" + ); + }); + + it("renders the content banner", async () => { + const BlogPostPageComponent = await BlogPostPage({ + params: { slug: "test-article" }, + }); + render(BlogPostPageComponent); + + expect(screen.getByTestId("content-banner")).toBeInTheDocument(); + expect(screen.getByText("Test Article Title")).toBeInTheDocument(); + expect( + screen.getByText("This is a test article description") + ).toBeInTheDocument(); + }); + + it("renders the article content", async () => { + const BlogPostPageComponent = await BlogPostPage({ + params: { slug: "test-article" }, + }); + render(BlogPostPageComponent); + + const article = document.querySelector("article"); + expect(article).toBeInTheDocument(); + expect(article).toHaveClass( + "p-[var(--spacing-scale-024)]", + "sm:py-[var(--spacing-scale-032)]" + ); + + // Check content is rendered + expect(screen.getByText(/This is the article content/)).toBeInTheDocument(); + expect(screen.getByText("bold text")).toBeInTheDocument(); + expect(screen.getByText("italic text")).toBeInTheDocument(); + }); + + it("renders the related articles section", async () => { + const BlogPostPageComponent = await BlogPostPage({ + params: { slug: "test-article" }, + }); + render(BlogPostPageComponent); + + expect(screen.getByTestId("related-articles")).toBeInTheDocument(); + expect(screen.getByText("Related Articles")).toBeInTheDocument(); + expect(screen.getByTestId("related-related-1")).toBeInTheDocument(); + expect(screen.getByTestId("related-related-2")).toBeInTheDocument(); + }); + + it("renders the ask organizer section", async () => { + const BlogPostPageComponent = await BlogPostPage({ + params: { slug: "test-article" }, + }); + render(BlogPostPageComponent); + + expect(screen.getByTestId("ask-organizer")).toBeInTheDocument(); + expect(screen.getByText("Still have questions?")).toBeInTheDocument(); + expect( + screen.getByText("Get answers from an experienced organizer") + ).toBeInTheDocument(); + expect(screen.getByText("Ask an organizer")).toBeInTheDocument(); + }); + + it("renders decorative shapes", async () => { + const BlogPostPageComponent = await BlogPostPage({ + params: { slug: "test-article" }, + }); + render(BlogPostPageComponent); + + // Check for decorative shapes + const shapes = screen.getAllByAltText(""); + expect(shapes).toHaveLength(2); + + // Check shape sources + expect(shapes[0]).toHaveAttribute("src", "/assets/Content_Shape_1.svg"); + expect(shapes[1]).toHaveAttribute("src", "/assets/Content_Shape_2.svg"); + }); + + it("applies correct styling to article content", async () => { + const BlogPostPageComponent = await BlogPostPage({ + params: { slug: "test-article" }, + }); + render(BlogPostPageComponent); + + const contentDiv = screen + .getByText(/This is the article content/) + .closest("div"); + expect(contentDiv).toHaveClass( + "post-body", + "-mt-[var(--spacing-scale-048)]", + "text-[var(--color-content-inverse-primary)]", + "text-[16px]", + "leading-[24px]" + ); + }); + + it("applies responsive text sizing", async () => { + const BlogPostPageComponent = await BlogPostPage({ + params: { slug: "test-article" }, + }); + render(BlogPostPageComponent); + + const contentDiv = screen + .getByText(/This is the article content/) + .closest("div"); + expect(contentDiv).toHaveClass( + "sm:text-[18px]", + "sm:leading-[130%]", + "lg:text-[24px]", + "lg:leading-[32px]", + "xl:text-[32px]", + "xl:leading-[40px]" + ); + }); + + it("applies responsive max-width constraints", async () => { + const BlogPostPageComponent = await BlogPostPage({ + params: { slug: "test-article" }, + }); + render(BlogPostPageComponent); + + const contentDiv = screen + .getByText(/This is the article content/) + .closest("div"); + expect(contentDiv).toHaveClass( + "sm:mx-auto", + "sm:max-w-[390px]", + "md:max-w-[472px]", + "lg:max-w-[700px]", + "xl:max-w-[904px]" + ); + }); + + it("includes structured data scripts", async () => { + const BlogPostPageComponent = await BlogPostPage({ + params: { slug: "test-article" }, + }); + render(BlogPostPageComponent); + + const scripts = screen.getAllByRole("script"); + expect(scripts).toHaveLength(2); + + // Check that scripts have the correct type + scripts.forEach((script) => { + expect(script).toHaveAttribute("type", "application/ld+json"); + }); + }); + + it("handles missing post gracefully", async () => { + const { getBlogPostBySlug } = require("../../lib/content"); + getBlogPostBySlug.mockResolvedValue(null); + + const { notFound } = require("next/navigation"); + + await BlogPostPage({ params: { slug: "non-existent" } }); + + expect(notFound).toHaveBeenCalled(); + }); + + it("filters out current post from related articles", async () => { + const BlogPostPageComponent = await BlogPostPage({ + params: { slug: "test-article" }, + }); + render(BlogPostPageComponent); + + // Current post should not appear in related articles + expect( + screen.queryByTestId("related-test-article") + ).not.toBeInTheDocument(); + + // Other related posts should appear + expect(screen.getByTestId("related-related-1")).toBeInTheDocument(); + expect(screen.getByTestId("related-related-2")).toBeInTheDocument(); + }); + + it("applies correct positioning to decorative shapes", async () => { + const BlogPostPageComponent = await BlogPostPage({ + params: { slug: "test-article" }, + }); + render(BlogPostPageComponent); + + const shapes = screen.getAllByAltText(""); + + // First shape (right side) + const rightShape = shapes[0].closest("div"); + expect(rightShape).toHaveClass( + "hidden", + "md:block", + "absolute", + "top-1/4", + "right-0", + "pointer-events-none", + "z-10" + ); + + // Second shape (left side) + const leftShape = shapes[1].closest("div"); + expect(leftShape).toHaveClass( + "hidden", + "md:block", + "absolute", + "top-1/2", + "left-0", + "pointer-events-none", + "z-10" + ); + }); + + it("handles malformed post data gracefully", async () => { + const malformedPost = { + slug: "malformed", + frontmatter: { + title: "Malformed Post", + // Missing other fields + }, + htmlContent: "Content
", + }; + + const { getBlogPostBySlug } = require("../../lib/content"); + getBlogPostBySlug.mockResolvedValue(malformedPost); + + const BlogPostPageComponent = await BlogPostPage({ + params: { slug: "malformed" }, + }); + render(BlogPostPageComponent); + + expect(screen.getByText("Malformed Post")).toBeInTheDocument(); + expect(screen.getByText("Content")).toBeInTheDocument(); + }); +}); diff --git a/tests/unit/ContentBanner.test.jsx b/tests/unit/ContentBanner.test.jsx new file mode 100644 index 0000000..fc34f63 --- /dev/null +++ b/tests/unit/ContentBanner.test.jsx @@ -0,0 +1,242 @@ +import { describe, it, expect, vi } from "vitest"; +import { render, screen } from "@testing-library/react"; +import ContentBanner from "../../app/components/ContentBanner"; + +// Mock Next.js components +vi.mock("next/link", () => { + return { + default: ({ children, href, ...props }) => ( + + {children} + + ), + }; +}); + +// Mock asset utils +vi.mock("../../lib/assetUtils", () => ({ + getAssetPath: vi.fn((asset) => `/assets/${asset}`), + ASSETS: { + CONTENT_BANNER_1: "Content_Banner_1.svg", + CONTENT_BANNER_2: "Content_Banner_2.svg", + }, +})); + +// Mock blog post data +const mockPost = { + slug: "test-article", + frontmatter: { + title: "Test Article Title", + description: "This is a test article description", + author: "Test Author", + date: "2025-04-15", + }, +}; + +describe("ContentBanner", () => { + it("renders the banner with correct structure", () => { + render(This is a paragraph.
"); + }); + + it("converts bold text", () => { + const markdown = "This is **bold** text."; + const result = markdownToHtml(markdown); + + expect(result).toContain("bold"); + }); + + it("converts italic text", () => { + const markdown = "This is *italic* text."; + const result = markdownToHtml(markdown); + + expect(result).toContain("italic"); + }); + + it("converts links", () => { + const markdown = "Visit [Google](https://google.com) for search."; + const result = markdownToHtml(markdown); + + expect(result).toContain('Google'); + }); + + it("converts line breaks toParagraph 1
"); + expect(result).toContain("Paragraph 2
"); + expect(result).toContain("Paragraph 3
"); + }); + + it("adds md-gap class to paragraphs", () => { + const markdown = "Paragraph 1\n\nParagraph 2"; + const result = markdownToHtml(markdown); + + expect(result).toContain('Paragraph 1
'); + expect(result).toContain('Paragraph 2
'); + }); + + it("converts unordered lists", () => { + const markdown = "- Item 1\n- Item 2\n- Item 3"; + const result = markdownToHtml(markdown); + + expect(result).toContain("");
+ expect(result).toContain("");
+ expect(result).toContain("const x = 1;");
+ });
+
+ it("converts inline code", () => {
+ const markdown = "Use `console.log()` to debug.";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("console.log()");
+ });
+
+ it("converts blockquotes", () => {
+ const markdown = "> This is a quote\n> with multiple lines";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("");
+ expect(result).toContain("This is a quote");
+ expect(result).toContain("with multiple lines");
+ expect(result).toContain("
");
+ });
+
+ it("converts horizontal rules", () => {
+ const markdown = "Text above\n\n---\n\nText below";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("
");
+ });
+
+ it("handles mixed content", () => {
+ const markdown =
+ "# Title\n\nThis is a **bold** paragraph with a [link](https://example.com).\n\n- List item 1\n- List item 2\n\nAnother paragraph with `code`.";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("Title
");
+ expect(result).toContain("bold");
+ expect(result).toContain('link');
+ expect(result).toContain("");
+ expect(result).toContain("- List item 1
");
+ expect(result).toContain("- List item 2
");
+ expect(result).toContain("code");
+ });
+
+ it("handles empty input", () => {
+ const result = markdownToHtml("");
+ expect(result).toBe("");
+ });
+
+ it("handles whitespace-only input", () => {
+ const result = markdownToHtml(" \n\n ");
+ expect(result).toBe("");
+ });
+
+ it("preserves HTML entities", () => {
+ const markdown = "Use < and > for HTML tags.";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("<");
+ expect(result).toContain(">");
+ });
+
+ it("handles complex nested structures", () => {
+ const markdown =
+ "# Main Title\n\n## Subtitle\n\nThis is a paragraph with **bold** and *italic* text.\n\n1. First item with `code`\n2. Second item with [link](https://example.com)\n\n> This is a quote\n> with **bold** text\n\n```javascript\nconst example = 'test';\n```";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("Main Title
");
+ expect(result).toContain("Subtitle
");
+ expect(result).toContain("bold");
+ expect(result).toContain("italic");
+ expect(result).toContain("");
+ expect(result).toContain("code");
+ expect(result).toContain('link');
+ expect(result).toContain("");
+ expect(result).toContain("");
+ });
+
+ it("handles malformed markdown gracefully", () => {
+ const markdown = "**Unclosed bold\n\n*Unclosed italic\n\n[Unclosed link";
+ const result = markdownToHtml(markdown);
+
+ // Should not throw an error and should handle gracefully
+ expect(typeof result).toBe("string");
+ expect(result.length).toBeGreaterThan(0);
+ });
+
+ it("converts headings of different levels", () => {
+ const markdown = "# H1\n## H2\n### H3\n#### H4\n##### H5\n###### H6";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("H1
");
+ expect(result).toContain("H2
");
+ expect(result).toContain("H3
");
+ expect(result).toContain("H4
");
+ expect(result).toContain("H5
");
+ expect(result).toContain("H6
");
+ });
+
+ it("handles tables", () => {
+ const markdown =
+ "| Header 1 | Header 2 |\n|----------|----------|\n| Cell 1 | Cell 2 |";
+ const result = markdownToHtml(markdown);
+
+ expect(result).toContain("");
+ expect(result).toContain("");
+ expect(result).toContain("Header 1 ");
+ expect(result).toContain("Header 2 ");
+ expect(result).toContain("");
+ expect(result).toContain("Cell 1 ");
+ expect(result).toContain("Cell 2 ");
+ });
+ });
+});
diff --git a/tests/unit/RelatedArticles.test.jsx b/tests/unit/RelatedArticles.test.jsx
new file mode 100644
index 0000000..1fe2951
--- /dev/null
+++ b/tests/unit/RelatedArticles.test.jsx
@@ -0,0 +1,395 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import RelatedArticles from "../../app/components/RelatedArticles";
+
+// Mock Next.js components
+vi.mock("next/link", () => {
+ return {
+ default: ({ children, href, ...props }) => (
+
+ {children}
+
+ ),
+ };
+});
+
+// Mock ContentThumbnailTemplate
+vi.mock("../../app/components/ContentThumbnailTemplate", () => {
+ return {
+ default: ({ post }) => (
+
+ ),
+ };
+});
+
+// Mock blog post data
+const mockRelatedPosts = [
+ {
+ slug: "related-article-1",
+ frontmatter: {
+ title: "Related Article 1",
+ description: "This is the first related article",
+ author: "Test Author",
+ date: "2025-04-10",
+ },
+ },
+ {
+ slug: "related-article-2",
+ frontmatter: {
+ title: "Related Article 2",
+ description: "This is the second related article",
+ author: "Test Author",
+ date: "2025-04-12",
+ },
+ },
+ {
+ slug: "related-article-3",
+ frontmatter: {
+ title: "Related Article 3",
+ description: "This is the third related article",
+ author: "Test Author",
+ date: "2025-04-14",
+ },
+ },
+];
+
+describe("RelatedArticles", () => {
+ beforeEach(() => {
+ // Mock window.innerWidth for responsive tests
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ configurable: true,
+ value: 1024, // Desktop width
+ });
+ });
+
+ it("renders the section with correct structure", () => {
+ render(
+