koguma 0.6.6 → 2.0.0

package/src/react/RichText.test.tsx

@@ -1,535 +0,0 @@
-/**
- * RichText.test.tsx — component rendering tests
- *
- * Tests the <RichText> component using @testing-library/react.
- * Environment: happy-dom (configured in bunfig.toml)
- */
-import { describe, test, expect, afterEach } from 'bun:test';
-import { cleanup, render, screen } from '@testing-library/react';
-import { RichText } from './RichText.tsx';
-import type { KogumaDocument } from '../config/types.ts';
-
-afterEach(() => cleanup());
-
-// ── Helpers ───────────────────────────────────────────────────────────
-
-function doc(nodes: KogumaDocument['nodes']): KogumaDocument {
-  return { nodes };
-}
-
-// ── null / empty ──────────────────────────────────────────────────────
-
-describe('<RichText> — null/empty', () => {
-  test('renders nothing for null doc', () => {
-    const { container } = render(<RichText doc={null} />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  test('renders nothing for empty nodes', () => {
-    const { container } = render(<RichText doc={doc([])} />);
-    expect(container.firstChild).toBeNull();
-  });
-});
-
-// ── Wrapper ───────────────────────────────────────────────────────────
-
-describe('<RichText> — className', () => {
-  test('applies className to wrapper div', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          { type: 'paragraph', children: [{ type: 'text', text: 'Hi' }] }
-        ])}
-        className='prose'
-      />
-    );
-    expect(container.querySelector('.prose')).not.toBeNull();
-  });
-});
-
-// ── Paragraph ─────────────────────────────────────────────────────────
-
-describe('<RichText> — paragraph', () => {
-  test('renders a <p>', () => {
-    render(
-      <RichText
-        doc={doc([
-          {
-            type: 'paragraph',
-            children: [{ type: 'text', text: 'Hello world' }]
-          }
-        ])}
-      />
-    );
-    expect(screen.getByText('Hello world').tagName).toBe('P');
-  });
-
-  test('applies text-align style from align prop', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'paragraph',
-            align: 'center',
-            children: [{ type: 'text', text: 'Centered' }]
-          }
-        ])}
-      />
-    );
-    const p = container.querySelector('p');
-    expect(p?.style.textAlign).toBe('center');
-  });
-
-  test('paragraph override renders custom element', () => {
-    render(
-      <RichText
-        doc={doc([
-          { type: 'paragraph', children: [{ type: 'text', text: 'Override' }] }
-        ])}
-        components={{
-          paragraph: ({ children }) => (
-            <div data-testid='custom-p'>{children}</div>
-          )
-        }}
-      />
-    );
-    expect(screen.getByTestId('custom-p')).not.toBeNull();
-  });
-});
-
-// ── Headings ──────────────────────────────────────────────────────────
-
-describe('<RichText> — headings', () => {
-  ([1, 2, 3, 4, 5, 6] as const).forEach(level => {
-    test(`renders h${level}`, () => {
-      const { container } = render(
-        <RichText
-          doc={doc([
-            {
-              type: 'heading',
-              level,
-              children: [{ type: 'text', text: `Heading ${level}` }]
-            }
-          ])}
-        />
-      );
-      expect(container.querySelector(`h${level}`)).not.toBeNull();
-    });
-  });
-});
-
-// ── Text marks ────────────────────────────────────────────────────────
-
-describe('<RichText> — text marks', () => {
-  test('bold renders <strong>', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'paragraph',
-            children: [{ type: 'text', text: 'Bold', bold: true }]
-          }
-        ])}
-      />
-    );
-    expect(container.querySelector('strong')).not.toBeNull();
-  });
-
-  test('italic renders <em>', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'paragraph',
-            children: [{ type: 'text', text: 'Italic', italic: true }]
-          }
-        ])}
-      />
-    );
-    expect(container.querySelector('em')).not.toBeNull();
-  });
-
-  test('code renders <code>', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'paragraph',
-            children: [{ type: 'text', text: 'code', code: true }]
-          }
-        ])}
-      />
-    );
-    expect(container.querySelector('code')).not.toBeNull();
-  });
-
-  test('stacked marks — bold+italic nests both', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'paragraph',
-            children: [
-              { type: 'text', text: 'BoldItalic', bold: true, italic: true }
-            ]
-          }
-        ])}
-      />
-    );
-    expect(container.querySelector('strong')).not.toBeNull();
-    expect(container.querySelector('em')).not.toBeNull();
-  });
-});
-
-// ── Lists ─────────────────────────────────────────────────────────────
-
-describe('<RichText> — lists', () => {
-  test('unordered list renders <ul>', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'list',
-            ordered: false,
-            items: [{ children: [{ type: 'text', text: 'Item' }] }]
-          }
-        ])}
-      />
-    );
-    expect(container.querySelector('ul')).not.toBeNull();
-    expect(container.querySelector('li')).not.toBeNull();
-  });
-
-  test('ordered list renders <ol>', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'list',
-            ordered: true,
-            items: [{ children: [{ type: 'text', text: 'First' }] }]
-          }
-        ])}
-      />
-    );
-    expect(container.querySelector('ol')).not.toBeNull();
-  });
-
-  test('checklist item renders checkbox', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'list',
-            ordered: false,
-            items: [
-              { checked: true, children: [{ type: 'text', text: 'Done' }] }
-            ]
-          }
-        ])}
-      />
-    );
-    const checkbox = container.querySelector(
-      'input[type="checkbox"]'
-    ) as HTMLInputElement;
-    expect(checkbox).not.toBeNull();
-    expect(checkbox.checked).toBe(true);
-  });
-
-  test('nested list renders nested <ul> inside <li>', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'list',
-            ordered: false,
-            items: [
-              {
-                children: [{ type: 'text', text: 'Parent' }],
-                nestedList: {
-                  ordered: false,
-                  items: [{ children: [{ type: 'text', text: 'Child' }] }]
-                }
-              }
-            ]
-          }
-        ])}
-      />
-    );
-    expect(container.querySelectorAll('li').length).toBe(2);
-    expect(container.querySelector('ul ul')).not.toBeNull();
-  });
-});
-
-// ── Blockquote ────────────────────────────────────────────────────────
-
-describe('<RichText> — quote', () => {
-  test('renders <blockquote>', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'quote',
-            children: [{ type: 'text', text: 'A wise quote' }]
-          }
-        ])}
-      />
-    );
-    expect(container.querySelector('blockquote')).not.toBeNull();
-  });
-});
-
-// ── Code block ────────────────────────────────────────────────────────
-
-describe('<RichText> — code block', () => {
-  test('renders <pre><code> with language class', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'code',
-            language: 'typescript',
-            text: 'const x = 1'
-          }
-        ])}
-      />
-    );
-    expect(container.querySelector('pre')).not.toBeNull();
-    const code = container.querySelector('code');
-    expect(code?.className).toContain('language-typescript');
-    expect(code?.textContent).toBe('const x = 1');
-  });
-
-  test('code block override receives node', () => {
-    let receivedLang: string | undefined;
-    render(
-      <RichText
-        doc={doc([{ type: 'code', language: 'ts', text: 'x' }])}
-        components={{
-          code: ({ node }) => {
-            receivedLang = node.language;
-            return null;
-          }
-        }}
-      />
-    );
-    expect(receivedLang).toBe('ts');
-  });
-});
-
-// ── Link ──────────────────────────────────────────────────────────────
-
-describe('<RichText> — link', () => {
-  test('renders <a> with href and text', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'paragraph',
-            children: [
-              {
-                type: 'link',
-                url: 'https://example.com',
-                children: [{ type: 'text', text: 'Example' }]
-              }
-            ]
-          }
-        ])}
-      />
-    );
-    const link = container.querySelector('a');
-    expect(link?.getAttribute('href')).toBe('https://example.com');
-    expect(link?.textContent).toBe('Example');
-  });
-
-  test('newTab link adds target=_blank and rel=noopener', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'paragraph',
-            children: [
-              {
-                type: 'link',
-                url: 'https://x.com',
-                newTab: true,
-                children: [{ type: 'text', text: 'X' }]
-              }
-            ]
-          }
-        ])}
-      />
-    );
-    const a = container.querySelector('a');
-    expect(a?.getAttribute('target')).toBe('_blank');
-    expect(a?.getAttribute('rel')).toContain('noopener');
-  });
-});
-
-// ── HR ────────────────────────────────────────────────────────────────
-
-describe('<RichText> — hr', () => {
-  test('renders <hr>', () => {
-    const { container } = render(<RichText doc={doc([{ type: 'hr' }])} />);
-    expect(container.querySelector('hr')).not.toBeNull();
-  });
-});
-
-// ── Line break ────────────────────────────────────────────────────────
-
-describe('<RichText> — line-break', () => {
-  test('renders <br>', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'paragraph',
-            children: [
-              { type: 'text', text: 'line1' },
-              { type: 'line-break' },
-              { type: 'text', text: 'line2' }
-            ]
-          }
-        ])}
-      />
-    );
-    expect(container.querySelector('br')).not.toBeNull();
-  });
-});
-
-// ── Table ─────────────────────────────────────────────────────────────
-
-describe('<RichText> — table', () => {
-  test('renders table with thead and tbody', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'table',
-            rows: [
-              {
-                isHeader: true,
-                cells: [{ children: [{ type: 'text', text: 'Name' }] }]
-              },
-              { cells: [{ children: [{ type: 'text', text: 'Alice' }] }] }
-            ]
-          }
-        ])}
-      />
-    );
-    expect(container.querySelector('table')).not.toBeNull();
-    expect(container.querySelector('thead')).not.toBeNull();
-    expect(container.querySelector('tbody')).not.toBeNull();
-    expect(container.querySelector('th')?.textContent).toBe('Name');
-    expect(container.querySelector('td')?.textContent).toBe('Alice');
-  });
-});
-
-// ── Layout ────────────────────────────────────────────────────────────
-
-describe('<RichText> — layout', () => {
-  test('renders columns in a flex container', () => {
-    render(
-      <RichText
-        doc={doc([
-          {
-            type: 'layout',
-            columns: [
-              [
-                {
-                  type: 'paragraph',
-                  children: [{ type: 'text', text: 'Col 1' }]
-                }
-              ],
-              [
-                {
-                  type: 'paragraph',
-                  children: [{ type: 'text', text: 'Col 2' }]
-                }
-              ]
-            ]
-          }
-        ])}
-      />
-    );
-    expect(screen.getByText('Col 1')).not.toBeNull();
-    expect(screen.getByText('Col 2')).not.toBeNull();
-  });
-});
-
-// ── Custom blocks ─────────────────────────────────────────────────────
-
-describe('<RichText> — custom nodes', () => {
-  test('custom block renders null by default (no crash)', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'custom',
-            name: 'tweet',
-            data: { id: '123' }
-          }
-        ])}
-      />
-    );
-    expect(container.querySelector('div')?.children.length).toBe(0);
-  });
-
-  test('customBlock override renders element', () => {
-    render(
-      <RichText
-        doc={doc([{ type: 'custom', name: 'tweet', data: { id: '999' } }])}
-        components={{
-          customBlock: ({ data }) => (
-            <div data-testid='tweet'>{data.id as string}</div>
-          )
-        }}
-      />
-    );
-    expect(screen.getByTestId('tweet').textContent).toBe('999');
-  });
-
-  test('customInline override renders for hashtag', () => {
-    render(
-      <RichText
-        doc={doc([
-          {
-            type: 'paragraph',
-            children: [
-              { type: 'custom', name: 'hashtag', data: { tag: 'react' } }
-            ]
-          }
-        ])}
-        components={{
-          customInline: ({ data }) => (
-            <span data-testid='hashtag'>#{data.tag as string}</span>
-          )
-        }}
-      />
-    );
-    expect(screen.getByTestId('hashtag').textContent).toBe('#react');
-  });
-});
-
-// ── Image ─────────────────────────────────────────────────────────────
-
-describe('<RichText> — image', () => {
-  test('renders <img> with src and alt', () => {
-    const { container } = render(
-      <RichText
-        doc={doc([
-          {
-            type: 'image',
-            url: 'https://example.com/cat.jpg',
-            alt: 'A cat',
-            width: 400,
-            height: 300
-          }
-        ])}
-      />
-    );
-    const img = container.querySelector('img');
-    expect(img?.getAttribute('src')).toBe('https://example.com/cat.jpg');
-    expect(img?.getAttribute('alt')).toBe('A cat');
-  });
-});