78 行
3.5 KiB
TypeScript
78 行
3.5 KiB
TypeScript
import { fireEvent, screen, within } from '@testing-library/react'
|
|
import { afterAll, beforeEach, 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', () => {
|
|
beforeEach (() => helpFixture.reset ())
|
|
|
|
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)
|
|
helpFixture.modules['../../help/guide/editions/ja/2026-10-02.10.mdx']
|
|
.mockResolvedValue ({ default: 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 ('preserves long cell contents when rendering a wide table', async () => {
|
|
const cell = 'wide'.repeat (100)
|
|
const Content = await compileMdx (`| 項目 |\n| --- |\n| ${ cell } |`)
|
|
renderWithProviders (<Content/>)
|
|
expect (screen.getByRole ('cell')).toHaveTextContent (cell)
|
|
})
|
|
|
|
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)
|
|
})
|
|
})
|