@aleph-alpha/chat-kit 0.9.0 → 1.1.0

package/src/components/base/CkMarkdownRenderer/CkMarkdownRenderer.spec.ts

@@ -0,0 +1,348 @@
+import { render, screen } from '@testing-library/vue';
+import { h } from 'vue';
+import CkMarkdownRenderer from './CkMarkdownRenderer.vue';
+import { defaultMarkdownClasses } from './defaultMarkdownClasses';
+import { createTextPlugin } from '../../../test-utils/createTextPlugin';
+
+describe('CkMarkdownRenderer', () => {
+  it('renders a plain text paragraph', () => {
+    render(CkMarkdownRenderer, { props: { content: 'Hello world' } });
+
+    expect(screen.getByText('Hello world')).toBeInTheDocument();
+    expect(screen.getByText('Hello world').tagName).toBe('P');
+  });
+
+  it('renders headings at the correct level', () => {
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: '# Title\n\n## Subtitle' },
+    });
+
+    const h1 = container.querySelector('h1');
+    const h2 = container.querySelector('h2');
+    expect(h1?.textContent).toBe('Title');
+    expect(h2?.textContent).toBe('Subtitle');
+  });
+
+  it('renders bold and italic text', () => {
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: '**bold** and *italic*' },
+    });
+
+    expect(container.querySelector('strong')?.textContent).toBe('bold');
+    expect(container.querySelector('em')?.textContent).toBe('italic');
+  });
+
+  it('renders unordered lists', () => {
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: '- item one\n- item two\n- item three' },
+    });
+
+    const items = container.querySelectorAll('li');
+    expect(items).toHaveLength(3);
+    expect(items[0].textContent).toBe('item one');
+  });
+
+  it('renders inline code without triggering the code-block slot', () => {
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: 'Use `console.log` for debugging' },
+      slots: {
+        'code-block': () =>
+          h('div', { class: 'custom-block' }, 'SHOULD NOT APPEAR'),
+      },
+    });
+
+    expect(container.querySelector('.custom-block')).toBeNull();
+    const inlineCode = container.querySelector('p > code');
+    expect(inlineCode?.textContent).toBe('console.log');
+  });
+
+  it('renders a code block with default pre/code when no slot is provided', () => {
+    const markdown = '```javascript\nconsole.log("hi");\n```';
+
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: markdown },
+    });
+
+    const codeEl = container.querySelector('pre > code');
+    expect(codeEl).not.toBeNull();
+    expect(codeEl?.textContent).toContain('console.log("hi");');
+    expect(codeEl?.classList.contains('language-javascript')).toBe(true);
+  });
+
+  it('renders a code block without a language class when none is specified', () => {
+    const markdown = '```\nplain code\n```';
+
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: markdown },
+    });
+
+    const codeEl = container.querySelector('pre > code');
+    expect(codeEl).not.toBeNull();
+    expect(codeEl?.textContent).toContain('plain code');
+  });
+
+  it('delegates code blocks to the code-block scoped slot', () => {
+    const markdown = '```python\nprint("hello")\n```';
+
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: markdown },
+      slots: {
+        'code-block': (props: { code: string; language: string }) =>
+          h(
+            'div',
+            { class: 'custom-code', 'data-lang': props.language },
+            props.code,
+          ),
+      },
+    });
+
+    const custom = container.querySelector('.custom-code');
+    expect(custom).not.toBeNull();
+    expect(custom?.textContent).toContain('print("hello")');
+    expect(custom?.getAttribute('data-lang')).toBe('python');
+    expect(container.querySelector('pre > code')).toBeNull();
+  });
+
+  it('preserves order of mixed prose and code blocks', () => {
+    const markdown = 'Before\n\n```ts\nconst x = 1;\n```\n\nAfter';
+
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: markdown },
+    });
+
+    const root = container.querySelector('.markdown-renderer');
+    expect(root).not.toBeNull();
+
+    const text = root!.textContent!;
+    expect(text.indexOf('Before')).toBeLessThan(text.indexOf('const x = 1;'));
+    expect(text.indexOf('const x = 1;')).toBeLessThan(text.indexOf('After'));
+  });
+
+  it('renders nothing for empty content', () => {
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: '' },
+    });
+
+    const root = container.querySelector('.markdown-renderer');
+    expect(root).not.toBeNull();
+    expect(root?.children.length).toBe(0);
+  });
+
+  it('renders a table from GFM syntax', () => {
+    const markdown =
+      '| Name | Age |\n| --- | --- |\n| Alice | 30 |\n| Bob | 25 |';
+
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: markdown },
+    });
+
+    const table = container.querySelector('table');
+    expect(table).not.toBeNull();
+    const headerCells = table!.querySelectorAll('thead th');
+    expect(headerCells).toHaveLength(2);
+    expect(headerCells[0].textContent).toBe('Name');
+    expect(headerCells[1].textContent).toBe('Age');
+    const rows = table!.querySelectorAll('tbody tr');
+    expect(rows).toHaveLength(2);
+    expect(rows[0].querySelectorAll('td')[0].textContent).toBe('Alice');
+  });
+
+  it('renders strikethrough text', () => {
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: '~~deleted~~' },
+    });
+
+    const del = container.querySelector('del');
+    expect(del).not.toBeNull();
+    expect(del?.textContent).toBe('deleted');
+  });
+
+  it('renders task list checkboxes', () => {
+    const markdown = '- [x] done\n- [ ] pending';
+
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: markdown },
+    });
+
+    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+    expect(checkboxes).toHaveLength(2);
+    expect((checkboxes[0] as HTMLInputElement).checked).toBe(true);
+    expect((checkboxes[1] as HTMLInputElement).checked).toBe(false);
+  });
+
+  it('auto-links bare URLs', () => {
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: 'Visit https://example.com for details' },
+    });
+
+    const link = container.querySelector('a');
+    expect(link).not.toBeNull();
+    expect(link?.getAttribute('href')).toBe('https://example.com');
+    expect(link?.textContent).toBe('https://example.com');
+  });
+
+  describe('classes prop', () => {
+    it('applies custom classes to matching elements', () => {
+      const { container } = render(CkMarkdownRenderer, {
+        props: {
+          content:
+            '# Hello\n\nA **bold** paragraph with a [link](https://example.com)',
+          classes: {
+            h1: 'my-heading',
+            p: 'my-paragraph',
+            strong: 'my-bold',
+            a: 'my-link',
+          },
+        },
+      });
+
+      expect(
+        container.querySelector('h1')?.classList.contains('my-heading'),
+      ).toBe(true);
+      expect(
+        container.querySelector('p')?.classList.contains('my-paragraph'),
+      ).toBe(true);
+      expect(
+        container.querySelector('strong')?.classList.contains('my-bold'),
+      ).toBe(true);
+      expect(container.querySelector('a')?.classList.contains('my-link')).toBe(
+        true,
+      );
+    });
+
+    it('applies custom classes to table elements', () => {
+      const markdown = '| A | B |\n| --- | --- |\n| 1 | 2 |';
+
+      const { container } = render(CkMarkdownRenderer, {
+        props: {
+          content: markdown,
+          classes: {
+            table: 'tbl',
+            th: 'tbl-header',
+            td: 'tbl-cell',
+            tr: 'tbl-row',
+          },
+        },
+      });
+
+      expect(container.querySelector('table')?.classList.contains('tbl')).toBe(
+        true,
+      );
+      expect(
+        container.querySelector('th')?.classList.contains('tbl-header'),
+      ).toBe(true);
+      expect(
+        container.querySelector('td')?.classList.contains('tbl-cell'),
+      ).toBe(true);
+      expect(container.querySelector('tr')?.classList.contains('tbl-row')).toBe(
+        true,
+      );
+    });
+
+    it('merges custom classes with existing attributes', () => {
+      const markdown = '```javascript\ncode\n```';
+
+      const { container } = render(CkMarkdownRenderer, {
+        props: { content: markdown, classes: { code: 'my-code' } },
+      });
+
+      const codeEl = container.querySelector('pre > code');
+      expect(codeEl?.classList.contains('language-javascript')).toBe(true);
+      expect(codeEl?.classList.contains('my-code')).toBe(true);
+    });
+
+    it('applies default classes to elements not overridden in the map', () => {
+      const { container } = render(CkMarkdownRenderer, {
+        props: {
+          content: '# Title\n\nParagraph',
+          classes: { h1: 'styled' },
+        },
+      });
+
+      expect(container.querySelector('h1')?.classList.contains('styled')).toBe(
+        true,
+      );
+      expect(container.querySelector('p')?.className).toContain(
+        defaultMarkdownClasses.p,
+      );
+    });
+
+    it('applies default classes when classes prop is not provided', () => {
+      const { container } = render(CkMarkdownRenderer, {
+        props: { content: '# Title' },
+      });
+
+      expect(container.querySelector('h1')?.className).toContain(
+        defaultMarkdownClasses.h1,
+      );
+    });
+
+    it('applies no classes for an element when classes prop explicitly sets it to empty string', () => {
+      const { container } = render(CkMarkdownRenderer, {
+        props: { content: '# Title', classes: { h1: '' } },
+      });
+
+      expect(container.querySelector('h1')?.hasAttribute('class')).toBe(false);
+    });
+  });
+
+  it('sanitizes dangerous HTML in markdown', () => {
+    const markdown =
+      'Safe text\n\n<script>alert("xss")</script>\n\n<img src=x onerror=alert(1)>';
+
+    const { container } = render(CkMarkdownRenderer, {
+      props: { content: markdown },
+    });
+
+    expect(container.querySelector('script')).toBeNull();
+    const img = container.querySelector('img');
+    if (img) {
+      expect(img.hasAttribute('onerror')).toBe(false);
+    }
+  });
+
+  describe('plugins prop', () => {
+    it('applies a custom remark plugin that transforms text', () => {
+      const uppercasePlugin = createTextPlugin((t) => t.toUpperCase());
+
+      const { container } = render(CkMarkdownRenderer, {
+        props: {
+          content: 'hello world',
+          plugins: [uppercasePlugin],
+        },
+      });
+
+      expect(container.querySelector('p')?.textContent).toBe('HELLO WORLD');
+    });
+
+    it('renders default output when plugins is undefined', () => {
+      render(CkMarkdownRenderer, {
+        props: { content: 'Hello world', plugins: undefined },
+      });
+
+      expect(screen.getByText('Hello world')).toBeInTheDocument();
+    });
+
+    it('renders default output when plugins is an empty array', () => {
+      render(CkMarkdownRenderer, {
+        props: { content: 'Hello world', plugins: [] },
+      });
+
+      expect(screen.getByText('Hello world')).toBeInTheDocument();
+    });
+
+    it('supports multiple plugins applied in order', () => {
+      const addPrefix = createTextPlugin((t) => `prefix:${t}`);
+      const uppercasePlugin = createTextPlugin((t) => t.toUpperCase());
+
+      const { container } = render(CkMarkdownRenderer, {
+        props: {
+          content: 'hello',
+          plugins: [addPrefix, uppercasePlugin],
+        },
+      });
+
+      expect(container.querySelector('p')?.textContent).toBe('PREFIX:HELLO');
+    });
+  });
+});