#424

frontend/src/mdx-components.test.tsx

@@ -0,0 +1,77 @@
+import { fireEvent, screen, within } from '@testing-library/react'
+import { afterAll, describe, expect, it, vi } from 'vitest'
+import { Route, Routes } from 'react-router-dom'
+
+import HelpDetailPage from '@/pages/help/HelpDetailPage'
+import { compileMdx, transformMdx } from '@/test/compileMdx'
+import { helpFixture } from '@/test/helpFixtures'
+import { renderWithProviders } from '@/test/render'
+
+const prefetch = vi.hoisted (() => vi.fn (async () => {}))
+vi.hoisted (() => {
+  vi.stubGlobal ('Uint8Array', Object.getPrototypeOf (new TextEncoder ().encode ('')).constructor)
+})
+afterAll (() => vi.unstubAllGlobals ())
+vi.mock ('@/lib/prefetchers', () => ({ prefetchForURL: prefetch }))
+vi.mock ('@/lib/help', async () => (await import ('@/test/helpFixtures')).helpFixture.api)
+
+const tableSource = [
+    '# 表のある記事', '', '| 項目 | 説明 |', '| --- | --- |',
+    '| [ヘルプ](/help/guide) | **強調** |', '| 通常 | 本文 |'].join ('\n')
+
+
+describe ('Help MDX with the application compiler', () => {
+  it ('compiles GFM table structure, links and emphasis', async () => {
+    const Content = await compileMdx (tableSource)
+    renderWithProviders (<Content/>)
+    const table = screen.getByRole ('table')
+    expect (table.querySelector ('thead')).not.toBeNull ()
+    expect (table.querySelector ('tbody')).not.toBeNull ()
+    expect (within (table).getAllByRole ('columnheader')).toHaveLength (2)
+    expect (within (table).getAllByRole ('cell')).toHaveLength (4)
+    expect (within (table).getByRole ('link', { name: 'ヘルプ' }))
+	.toHaveAttribute ('href', '/help/guide')
+    expect (table.querySelector ('strong')).toHaveTextContent ('強調')
+  })
+
+  it ('retains headings, paragraphs and lists', async () => {
+    const Content = await compileMdx ('# 見出し\n\n本文\n\n- 第一\n- 第二')
+    renderWithProviders (<Content/>)
+    expect (screen.getByRole ('heading', { level: 1 })).toHaveTextContent ('見出し')
+    expect (screen.getByText ('本文').tagName).toBe ('P')
+    expect (screen.getAllByRole ('listitem')).toHaveLength (2)
+  })
+
+  it ('keeps tables inside the Help dark-mode typography container', async () => {
+    const Content = await compileMdx (tableSource)
+    vi.spyOn (helpFixture.api, 'getHelpEdition').mockResolvedValue (Content)
+    renderWithProviders (
+	<Routes><Route path="/help/:identifier" element={<HelpDetailPage/>}/></Routes>,
+	{ route: '/help/guide' })
+    const table = await screen.findByRole ('table')
+    expect (table.closest ('article')).toHaveClass ('prose', 'dark:prose-invert')
+  })
+
+  it ('contains wide tables in a horizontal scroll area', async () => {
+    const Content = await compileMdx (tableSource.replace ('通常', 'W'.repeat (200)))
+    vi.spyOn (helpFixture.api, 'getHelpEdition').mockResolvedValue (Content)
+    renderWithProviders (
+	<Routes><Route path="/help/:identifier" element={<HelpDetailPage/>}/></Routes>,
+	{ route: '/help/guide' })
+    const table = await screen.findByRole ('table')
+    expect (table.closest ('.overflow-x-auto, .overflow-x-scroll')).not.toBeNull ()
+  })
+
+  it.each (['.mdx?raw', '.mdx?url']) ('preserves the %s transform bypass', async suffix => {
+    expect (await transformMdx (tableSource, suffix)).toBeNull ()
+  })
+
+  it ('uses the common PrefetchLink interaction for internal MDX links', async () => {
+    prefetch.mockClear ()
+    const Content = await compileMdx ('[内部リンク](/help/guide)')
+    renderWithProviders (<Content/>)
+    fireEvent.mouseEnter (screen.getByRole ('link', { name: '内部リンク' }))
+    expect (prefetch).toHaveBeenCalledWith (expect.anything (),
+	new URL ('/help/guide', window.location.origin).href)
+  })
+})