Add missing layer 4 e2e markdown plugin tests

Author: webstackdev

src/lib/config/markdown.ts

@@ -19,15 +19,15 @@ Object.defineProperty(rehypeAutolinkHeadings, 'name', { value: 'rehypeAutolinkHe
 
 /** Remark plugins */
 import remarkBreaks from 'remark-breaks'
+Object.defineProperty(remarkBreaks, 'name', { value: 'remarkBreaks' })
+
 import remarkEmoji from 'remark-emoji'
+Object.defineProperty(remarkEmoji, 'name', { value: 'remarkEmoji' })
+
 import remarkLinkifyRegex from 'remark-linkify-regex'
+
 import type { Options as RemarkTocOptions } from 'remark-toc'
 import remarkToc from 'remark-toc'
-
-// Override function names for better debugging
-Object.defineProperty(remarkBreaks, 'name', { value: 'remarkBreaks' })
-Object.defineProperty(remarkEmoji, 'name', { value: 'remarkEmoji' })
-Object.defineProperty(remarkLinkifyRegex, 'name', { value: 'remarkLinkifyRegex' })
 Object.defineProperty(remarkToc, 'name', { value: 'remarkToc' })
 
 // Create a named instance of remarkLinkifyRegex for URL auto-linking
@@ -36,18 +36,19 @@ Object.defineProperty(remarkLinkifyRegexUrls, 'name', { value: 'remarkLinkifyReg
 
 // Use our TypeScript implementations (modern Remark API)
 import remarkAbbreviations from '../markdown/plugins/remark-abbr/index'
+Object.defineProperty(remarkAbbreviations, 'name', { value: 'remarkAbbreviations' })
+
 import remarkAttributes from '../markdown/plugins/remark-attr/index'
+Object.defineProperty(remarkAttributes, 'name', { value: 'remarkAttributes' })
+
 import remarkAttribution from '../markdown/plugins/remark-attribution/index'
+Object.defineProperty(remarkAttribution, 'name', { value: 'remarkAttribution' })
+
 import remarkReplacements from '../markdown/plugins/remark-replacements/index'
+Object.defineProperty(remarkReplacements, 'name', { value: 'remarkReplacements' })
 
 /** Add custom CSS classes to Markdown-generated elements in this file */
 import { rehypeTailwindClasses } from '../markdown/plugins/rehype-tailwind'
-
-// Override function names for better debugging
-Object.defineProperty(remarkAbbreviations, 'name', { value: 'remarkAbbreviations' })
-Object.defineProperty(remarkAttributes, 'name', { value: 'remarkAttributes' })
-Object.defineProperty(remarkAttribution, 'name', { value: 'remarkAttribution' })
-Object.defineProperty(remarkReplacements, 'name', { value: 'remarkReplacements' })
 Object.defineProperty(rehypeTailwindClasses, 'name', { value: 'rehypeTailwindClasses' })
 
 /** Configuration for remark-attr plugin */

src/lib/markdown/__tests__/layer_4_e2e/unifiedPlugins/rehypeAutolinkHeadings.spec.tsx

@@ -0,0 +1,69 @@
+/**
+ * Layer 4: E2E Tests - rehypeAutolinkHeadings
+ *
+ * Tests for the rehypeAutolinkHeadings plugin which adds anchor links
+ * to heading elements for easy section linking.
+ */
+
+import { describe, it, expect, beforeAll } from 'vitest'
+import { renderMarkdown } from '../../../helpers/markdownLoader'
+
+let html: string
+
+beforeAll(async () => {
+  const markdown = `
+# Main Title
+
+## Section One
+
+Content here.
+
+## Section Two
+
+More content.
+
+### Subsection
+
+Details.
+`
+  html = await renderMarkdown(markdown)
+})
+
+describe('Layer 4: E2E - rehypeAutolinkHeadings', () => {
+  it('should add IDs to headings', () => {
+    // Headings should have id attributes
+    expect(html).toMatch(/<h[1-6][^>]*id=["'][^"']+["']/)
+  })
+
+  it('should add anchor links to headings', () => {
+    // Plugin should wrap or add links within headings
+    expect(html).toMatch(/<h[1-6][^>]*>.*<a/)
+  })
+
+  it('should generate slugified IDs from heading text', () => {
+    // IDs should be based on heading text
+    expect(html).toMatch(/id=["']main-title["']|id=["']section-one["']|id=["']section-two["']/)
+  })
+
+  it('should handle multiple heading levels', () => {
+    const h1Count = (html.match(/<h1/g) || []).length
+    const h2Count = (html.match(/<h2/g) || []).length
+    const h3Count = (html.match(/<h3/g) || []).length
+    
+    expect(h1Count).toBeGreaterThanOrEqual(1)
+    expect(h2Count).toBeGreaterThanOrEqual(2)
+    expect(h3Count).toBeGreaterThanOrEqual(1)
+  })
+
+  it('should preserve heading text content', () => {
+    expect(html).toContain('Main Title')
+    expect(html).toContain('Section One')
+    expect(html).toContain('Section Two')
+    expect(html).toContain('Subsection')
+  })
+
+  it('should add accessible attributes to anchor links', () => {
+    // Anchor links should have aria-hidden or similar for accessibility
+    expect(html).toMatch(/aria-hidden=["']true["']/)
+  })
+})

src/lib/markdown/__tests__/layer_4_e2e/unifiedPlugins/rehypeTailwindClasses.spec.tsx

@@ -0,0 +1,89 @@
+/**
+ * Layer 4: E2E Tests - rehypeTailwindClasses
+ *
+ * Tests for the rehypeTailwindClasses plugin which adds Tailwind CSS
+ * utility classes to HTML elements for consistent styling.
+ */
+
+import { describe, it, expect, beforeAll } from "vitest";
+import { renderMarkdown } from "../../../helpers/markdownLoader";
+
+let html: string
+
+beforeAll(async () => {
+  const markdown = `
+# Heading
+
+This is a paragraph with some text.
+
+## Lists
+
+- List item one
+- List item two
+- List item three
+
+## Code
+
+Here is some \`inline code\`.
+
+\`\`\`typescript
+const example = "code block"
+\`\`\`
+
+## Links
+
+Check out [this link](https://example.com).
+`
+  html = await renderMarkdown(markdown)
+})
+
+describe('Layer 4: E2E - rehypeTailwindClasses', () => {
+  it('should add Tailwind classes to headings', () => {
+    // h2-h6 headings should have Tailwind typography classes
+    // h1 may not have classes but h2 and below should
+    expect(html).toMatch(/<h[2-6][^>]*class=["'][^"']*/)
+  })
+
+  it('should add Tailwind classes to paragraphs', () => {
+    // Paragraphs should have spacing and text classes
+    expect(html).toMatch(/<p[^>]*class=["'][^"']*mb-/)
+  })
+
+  it('should add Tailwind classes to lists', () => {
+    // Lists should have list styling classes
+    expect(html).toMatch(/<ul[^>]*class=["'][^"']*list-/)
+  })
+
+  it('should add Tailwind classes to list items', () => {
+    // List items should have margin classes
+    expect(html).toMatch(/<li[^>]*class=["'][^"']*mb-/)
+  })
+
+  it('should add Tailwind classes to code elements', () => {
+    // Code should have background and padding classes
+    expect(html).toMatch(/<code[^>]*class=["'][^"']*bg-/)
+  })
+
+  it('should add Tailwind classes to links', () => {
+    // Links should have color and hover classes
+    expect(html).toMatch(/<a[^>]*class=["'][^"']*/)
+  })
+
+  it('should preserve content structure', () => {
+    expect(html).toContain('This is a paragraph')
+    expect(html).toContain('List item one')
+    expect(html).toContain('inline code')
+    expect(html).toContain('this link')
+  })
+
+  it('should maintain semantic HTML structure', () => {
+    // Elements should still be semantically correct
+    expect(html).toContain('<h1')
+    expect(html).toContain('<h2')
+    expect(html).toContain('<p')
+    expect(html).toContain('<ul')
+    expect(html).toContain('<li')
+    expect(html).toContain('<code')
+    expect(html).toContain('<a')
+  })
+})

src/lib/markdown/__tests__/layer_4_e2e/unifiedPlugins/remarkBreaks.spec.tsx

@@ -0,0 +1,40 @@
+/**
+ * Layer 4: E2E Tests - remarkBreaks
+ *
+ * Tests for the remarkBreaks plugin which adds support for hard line breaks
+ * without requiring double spaces or backslashes.
+ */
+
+import { describe, it, expect, beforeAll } from 'vitest'
+import { renderMarkdown } from '../../../helpers/markdownLoader'
+
+let html: string
+
+beforeAll(async () => {
+  const markdown = `Line one
+Line two
+Line three
+
+New paragraph`
+  html = await renderMarkdown(markdown)
+})
+
+describe('Layer 4: E2E - remarkBreaks', () => {
+  it('should convert single newlines to hard line breaks', () => {
+    // The plugin should convert single newlines to <br> tags
+    expect(html).toContain('<br>')
+  })
+
+  it('should preserve paragraph breaks for double newlines', () => {
+    // Double newlines should create separate paragraphs
+    const paragraphCount = (html.match(/<p/g) || []).length
+    expect(paragraphCount).toBeGreaterThanOrEqual(2)
+  })
+
+  it('should maintain text content', () => {
+    expect(html).toContain('Line one')
+    expect(html).toContain('Line two')
+    expect(html).toContain('Line three')
+    expect(html).toContain('New paragraph')
+  })
+})

src/lib/markdown/__tests__/layer_4_e2e/unifiedPlugins/remarkLinkifyRegex.spec.tsx

@@ -0,0 +1,39 @@
+/**
+ * Layer 4: E2E Tests - remarkLinkifyRegex
+ *
+ * Tests for the remarkLinkifyRegex plugin which automatically converts
+ * URLs in text to clickable links.
+ */
+
+import { describe, it, expect, beforeAll } from "vitest";
+import { renderMarkdown } from "../../../helpers/markdownLoader";
+
+let html: string
+
+beforeAll(async () => {
+  const markdown = `
+Visit https://example.com for more info.
+Check out http://test.org as well.
+Email me at user@example.com
+`
+  html = await renderMarkdown(markdown)
+})
+
+describe('Layer 4: E2E - remarkLinkifyRegex', () => {
+  it('should convert URLs to links', () => {
+    expect(html).toContain('<a')
+    expect(html).toContain('https://example.com')
+    expect(html).toContain('http://test.org')
+  })
+
+  it('should handle multiple URLs in the same content', () => {
+    const linkCount = (html.match(/<a/g) || []).length
+    expect(linkCount).toBeGreaterThanOrEqual(2)
+  })
+
+  it('should maintain text content around URLs', () => {
+    expect(html).toContain('Visit')
+    expect(html).toContain('for more info')
+    expect(html).toContain('Check out')
+  })
+})

src/lib/markdown/__tests__/layer_4_e2e/unifiedPlugins/remarkReplacements.spec.tsx

@@ -0,0 +1,55 @@
+/**
+ * Layer 4: E2E Tests - remarkReplacements
+ *
+ * Tests for the remarkReplacements plugin which handles typographic
+ * replacements like arrows, fractions, and multiplication signs.
+ * Note: Smart quotes, em dashes, and copyright symbols are handled by Astro's smartypants.
+ */
+
+import { describe, it, expect, beforeAll } from 'vitest'
+import { renderMarkdown } from '../../../helpers/markdownLoader'
+
+let html: string
+
+beforeAll(async () => {
+  const markdown = `
+Arrow right --> and left <--
+Double arrow <==>
+Plus-minus +- symbol
+Fractions: 1/2, 1/4, 3/4
+Multiplication: 2 x 4 equals 8
+`
+  html = await renderMarkdown(markdown)
+})
+
+describe('Layer 4: E2E - remarkReplacements', () => {
+  it('should convert arrow symbols', () => {
+    // Plugin should convert --> to → and <-- to ←
+    expect(html).toMatch(/→|&rarr;/)
+    expect(html).toMatch(/←|&larr;/)
+  })
+
+  it('should convert double arrows', () => {
+    // Should convert <==> to ⇔
+    expect(html).toMatch(/⇔|&hArr;/)
+  })
+
+  it('should convert plus-minus', () => {
+    expect(html).toMatch(/±|&plusmn;/)
+  })
+
+  it('should convert fractions', () => {
+    expect(html).toMatch(/½|&frac12;/)
+    expect(html).toMatch(/¼|&frac14;/)
+    expect(html).toMatch(/¾|&frac34;/)
+  })
+
+  it('should convert multiplication sign', () => {
+    expect(html).toMatch(/×|&times;/)
+  })
+
+  it('should maintain text content', () => {
+    expect(html).toContain('equals')
+    expect(html).toContain('symbol')
+  })
+})