>");'],
- };
-
- const { container } = render({'console.log("hi");'});
- const btn = screen.getByRole('button');
+ describe('mdx', () => {
+ it('renders a fenced code block', () => {
+ const md = '```js\nconst x = 1;\n```';
+ const Content = execute(md);
+ const { container } = render();
- expect(btn.parentNode?.nodeName.toLowerCase()).not.toBe('code');
+ expect(container.querySelector('code')).toBeInTheDocument();
+ expect(container.textContent).toContain('const x = 1;');
+ });
});
- it.skip('allows undefined children?!', () => {
- const { container } = render({'console.log("hi");'});
+ expect(container.querySelector('code.rdmd-code')).toBeInTheDocument();
+ });
+
+ it('renders children as code content', () => {
+ const { container } = render({'console.log("hi");'});
+ expect(container).toHaveTextContent('console.log("hi");');
+ });
+
+ it('handles undefined children', () => {
+ const { container } = render({'console.log("hello");'}
+ ,
+ );
+ expect(container.querySelector('.CodeTabs')).toBeInTheDocument();
+ });
+
+ it('renders toolbar buttons for each tab', () => {
+ const { container } = render(
+
+ {'const a = 1;'}
+ {'a = 1'}
+ ,
+ );
+ const buttons = container.querySelectorAll('.CodeTabs-toolbar button');
+ expect(buttons).toHaveLength(2);
+ });
- expect(container).toHaveTextContent("assert('theme', 'dark')");
- expect(container).toHaveTextContent("assert('theme', 'light')");
+ it('renders code content in CodeTabs-inner', () => {
+ const { container } = render(
+
+ {'const a = 1;'}
+ ,
+ );
+ expect(container.querySelector('.CodeTabs-inner')).toBeInTheDocument();
+ expect(container).toHaveTextContent('const a = 1;');
+ });
});
});
diff --git a/__tests__/components/Columns.test.tsx b/__tests__/components/Columns.test.tsx
new file mode 100644
index 000000000..a88d7e82c
--- /dev/null
+++ b/__tests__/components/Columns.test.tsx
@@ -0,0 +1,127 @@
+import type { Element } from 'hast';
+
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import Columns, { Column } from '../../components/Columns';
+import { mdxish, renderMdxish } from '../../lib';
+import { execute } from '../helpers';
+
+describe('Columns', () => {
+ describe('mdxish', () => {
+ describe('given Columns with two Column children', () => {
+ const md = `
+
+ Col 1
+ Col 2
+
+`;
+ const mod = renderMdxish(mdxish(md));
+
+ it('should render a Columns wrapper with grid style', () => {
+ const { container } = render();
+ const columns = container.querySelector('.Columns');
+ expect(columns).toBeInTheDocument();
+ expect(columns).toHaveStyle({ gridTemplateColumns: 'repeat(2, auto)' });
+ });
+
+ it('should render Column children', () => {
+ const { container } = render();
+ const cols = container.querySelectorAll('.Column');
+ expect(cols).toHaveLength(2);
+ expect(cols[0]).toHaveTextContent('Col 1');
+ expect(cols[1]).toHaveTextContent('Col 2');
+ });
+ });
+
+ describe('given Columns with three children', () => {
+ const md = `
+
+ A
+ B
+ C
+
+`;
+ const mod = renderMdxish(mdxish(md));
+
+ it('should set grid columns based on child count', () => {
+ const { container } = render();
+ const columns = container.querySelector('.Columns');
+ expect(columns).toHaveStyle({ gridTemplateColumns: 'repeat(3, auto)' });
+ });
+ });
+
+ describe('given Columns with the HAST tree', () => {
+ const md = `
+
+ Col 1
+ Col 2
+
+`;
+
+ it('should produce Column children in the tree', () => {
+ const tree = mdxish(md);
+ const columnsNode = tree.children[0] as Element;
+ expect(columnsNode.tagName).toBe('Columns');
+
+ const columnChildren = columnsNode.children.filter(
+ (child): child is Element => child.type === 'element' && child.tagName === 'Column',
+ );
+ expect(columnChildren).toHaveLength(2);
+ });
+ });
+ });
+
+ describe('mdx', () => {
+ it('renders Columns with Column children', () => {
+ const md = 'Col 1Col 2';
+ const Content = execute(md);
+ const { container } = render();
+
+ expect(container.querySelector('.Columns')).toBeInTheDocument();
+ const cols = container.querySelectorAll('.Column');
+ expect(cols).toHaveLength(2);
+ expect(cols[0]).toHaveTextContent('Col 1');
+ expect(cols[1]).toHaveTextContent('Col 2');
+ });
+ });
+
+ describe('render', () => {
+ it('renders a Columns wrapper with grid style', () => {
+ const { container } = render(
+
+ A
+ B
+ ,
+ );
+ const columns = container.querySelector('.Columns');
+ expect(columns).toBeInTheDocument();
+ expect(columns).toHaveStyle({ gridTemplateColumns: 'repeat(2, auto)' });
+ });
+
+ it('renders Column children', () => {
+ const { container } = render(
+
+ Col 1
+ Col 2
+ ,
+ );
+ const cols = container.querySelectorAll('.Column');
+ expect(cols).toHaveLength(2);
+ expect(cols[0]).toHaveTextContent('Col 1');
+ expect(cols[1]).toHaveTextContent('Col 2');
+ });
+
+ it('adjusts grid columns based on child count', () => {
+ const { container } = render(
+
+ A
+ B
+ C
+ ,
+ );
+ expect(container.querySelector('.Columns')).toHaveStyle({ gridTemplateColumns: 'repeat(3, auto)' });
+ });
+ });
+});
diff --git a/__tests__/components/Embed.test.tsx b/__tests__/components/Embed.test.tsx
new file mode 100644
index 000000000..17437fcf3
--- /dev/null
+++ b/__tests__/components/Embed.test.tsx
@@ -0,0 +1,173 @@
+import type { Element } from 'hast';
+
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import Embed from '../../components/Embed';
+import { mdast, mdx, mdxish, renderMdxish } from '../../lib';
+import { execute } from '../helpers';
+
+describe('Embed', () => {
+ describe('mdxish', () => {
+ describe('given an Embed in link mode', () => {
+ const md = `
+
+`;
+ const mod = renderMdxish(mdxish(md));
+
+ it('should render an embed wrapper', () => {
+ const { container } = render();
+ expect(container.querySelector('.embed')).toBeInTheDocument();
+ });
+
+ it('should render an embed-link anchor', () => {
+ const { container } = render();
+ const link = container.querySelector('a.embed-link');
+ expect(link).toBeInTheDocument();
+ expect(link).toHaveAttribute('href', 'https://example.com');
+ });
+
+ it('should render the embed title', () => {
+ const { container } = render();
+ const title = container.querySelector('.embed-title');
+ expect(title).toBeInTheDocument();
+ expect(title).toHaveTextContent('Example');
+ });
+ });
+
+ describe('given an Embed in iframe mode', () => {
+ const md = `
+
+`;
+ const mod = renderMdxish(mdxish(md));
+
+ it('should render an iframe element', () => {
+ const { container } = render();
+ const iframe = container.querySelector('iframe');
+ expect(iframe).toBeInTheDocument();
+ expect(iframe).toHaveAttribute('src', 'https://example.com');
+ expect(iframe).toHaveAttribute('title', 'Example');
+ });
+ });
+
+ describe('given an @embed link', () => {
+ it('should convert an @embed link to an embed HAST node', () => {
+ const txt = '[Embedded meta links.](https://nyti.me/s/gzoa2xb2v3 "@embed")';
+ const hast = mdxish(txt);
+ const embed = hast.children[0] as Element;
+
+ expect(embed.type).toBe('element');
+ expect(embed.tagName).toBe('embed');
+ expect(embed.properties.url).toBe('https://nyti.me/s/gzoa2xb2v3');
+ expect(embed.properties.title).toBe('Embedded meta links.');
+ });
+ });
+
+ describe('given the HAST tree', () => {
+ const md = `
+
+`;
+
+ it('should pass props through the HAST tree', () => {
+ const tree = mdxish(md);
+ const node = tree.children[0] as Element;
+ expect(node.tagName).toBe('embed');
+ expect(node.properties?.url).toBe('https://example.com');
+ expect(node.properties?.title).toBe('Example');
+ });
+ });
+ });
+
+ describe('mdx', () => {
+ it('renders an embed in link mode', () => {
+ const md = '';
+ const Content = execute(md);
+ const { container } = render();
+
+ expect(container.querySelector('.embed')).toBeInTheDocument();
+ const link = container.querySelector('a.embed-link');
+ expect(link).toHaveAttribute('href', 'https://example.com');
+ });
+
+ it('renders an embed in iframe mode', () => {
+ const md = '';
+ const Content = execute(md);
+ const { container } = render();
+
+ const iframe = container.querySelector('iframe');
+ expect(iframe).toBeInTheDocument();
+ expect(iframe).toHaveAttribute('src', 'https://example.com');
+ });
+
+ it('renders an embed with html content', () => {
+ const md = ``;
+ const Content = execute(md);
+ const { container } = render();
+
+ expect(container.innerHTML).toMatchSnapshot();
+ });
+
+ it('renders an embed with meta content', () => {
+ const md = ``;
+ const Content = execute(md);
+ const { container } = render();
+
+ expect(container.innerHTML).toMatchSnapshot();
+ });
+
+ it('renders an @embed link as an embed', () => {
+ const txt = '[Embedded meta links.](https://nyti.me/s/gzoa2xb2v3 "@embed")';
+ const ast = mdast(txt);
+ const out = mdx(ast);
+ expect(out).toMatchSnapshot();
+ });
+
+ it('renders an rdmd embed link', () => {
+ const md = '[rdmd](https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html "@embed")';
+ const Content = execute(md);
+ const { container } = render();
+
+ expect(container.innerHTML).toMatchSnapshot();
+ });
+ });
+
+ describe('render', () => {
+ it('renders in link mode with title', () => {
+ const { container } = render();
+ expect(container.querySelector('.embed')).toBeInTheDocument();
+ const link = container.querySelector('a.embed-link');
+ expect(link).toHaveAttribute('href', 'https://example.com');
+ expect(container.querySelector('.embed-title')).toHaveTextContent('Example');
+ });
+
+ it('renders in iframe mode', () => {
+ const { container } = render();
+ const iframe = container.querySelector('iframe');
+ expect(iframe).toHaveAttribute('src', 'https://example.com');
+ expect(iframe).toHaveAttribute('title', 'Example');
+ });
+
+ it('renders html content when html prop is provided', () => {
+ const { container } = render();
+ expect(container.querySelector('.embed-media')).toBeInTheDocument();
+ });
+
+ it('derives provider from url', () => {
+ const { container } = render();
+ expect(container.querySelector('.embed-provider')).toHaveTextContent('example.com');
+ });
+ });
+});
diff --git a/__tests__/components/Glossary.test.tsx b/__tests__/components/Glossary.test.tsx
index f190f6539..0c1c35f53 100644
--- a/__tests__/components/Glossary.test.tsx
+++ b/__tests__/components/Glossary.test.tsx
@@ -1,14 +1,74 @@
-import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
+import { Glossary } from '../../components/Glossary';
+import { mdxish, renderMdxish } from '../../lib';
import { execute } from '../helpers';
describe('Glossary', () => {
- it('renders a glossary item', () => {
- const md = 'parliament';
- const Content = execute(md);
- render();
+ describe('mdxish', () => {
+ it('renders a glossary item without errors', () => {
+ const md = 'The term exogenous should render.';
+ const mod = renderMdxish(mdxish(md));
+ render();
- expect(screen.getByText('parliament')).toBeVisible();
+ expect(screen.getByText('exogenous')).toBeVisible();
+ });
+ });
+
+ describe('mdx', () => {
+ it('renders a glossary item', () => {
+ const md = 'parliament';
+ const Content = execute(md);
+ render();
+
+ expect(screen.getByText('parliament')).toBeVisible();
+ });
+ });
+
+ describe('render', () => {
+ it('renders the term when found in glossary', () => {
+ const terms = [{ term: 'API', definition: 'Application Programming Interface' }];
+ render(API);
+ expect(screen.getByText('API')).toBeInTheDocument();
+ });
+
+ it('renders a tooltip trigger when term is found', () => {
+ const terms = [{ term: 'API', definition: 'Application Programming Interface' }];
+ const { container } = render(API);
+ expect(container.querySelector('.GlossaryItem-trigger')).toBeInTheDocument();
+ });
+
+ it('renders a plain span when term is not found', () => {
+ const terms = [{ term: 'API', definition: 'Application Programming Interface' }];
+ const { container } = render(unknown);
+ expect(container.querySelector('.GlossaryItem-trigger')).not.toBeInTheDocument();
+ expect(screen.getByText('unknown')).toBeInTheDocument();
+ });
+
+ it('shows tooltip with definition on hover', () => {
+ const terms = [{ term: 'acme', definition: 'This is a definition' }];
+ const { container } = render(acme);
+
+ const trigger = container.querySelector('.GlossaryItem-trigger');
+ expect(trigger).toHaveTextContent('acme');
+ fireEvent.mouseEnter(trigger!);
+ expect(screen.getByText('This is a definition', { exact: false })).toHaveTextContent(
+ 'acme - This is a definition',
+ );
+ });
+
+ it('matches terms case-insensitively and shows tooltip', () => {
+ const terms = [{ term: 'aCme', definition: 'This is a definition' }];
+ const { container } = render(acme);
+
+ const trigger = container.querySelector('.GlossaryItem-trigger');
+ expect(trigger).toHaveTextContent('acme');
+ fireEvent.mouseEnter(trigger!);
+ expect(screen.getByText('This is a definition', { exact: false })).toHaveTextContent(
+ 'aCme - This is a definition',
+ );
+ });
});
});
diff --git a/__tests__/components/HTMLBlock.test.tsx b/__tests__/components/HTMLBlock.test.tsx
index b080762e8..5a982d448 100644
--- a/__tests__/components/HTMLBlock.test.tsx
+++ b/__tests__/components/HTMLBlock.test.tsx
@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
import { render, screen, cleanup } from '@testing-library/react';
import React from 'react';
import { renderToStaticMarkup, renderToString } from 'react-dom/server';
@@ -5,60 +6,86 @@ import { renderToStaticMarkup, renderToString } from 'react-dom/server';
import { vi } from 'vitest';
import HTMLBlock from '../../components/HTMLBlock';
+import { mdxish, renderMdxish } from '../../lib';
import { execute } from '../helpers';
describe('HTML Block', () => {
- beforeEach(() => {
- global.mockFn = vi.fn();
- });
+ describe('mdxish', () => {
+ it('renders an HTML block from markdown', () => {
+ const md = ``;
+ const mod = renderMdxish(mdxish(md));
+ const { container } = render();
- afterEach(() => {
- cleanup();
- vi.restoreAllMocks();
- });
+ expect(container.querySelector('.custom-block')).toBeInTheDocument();
+ expect(container.textContent).toContain('Hello from HTML');
+ });
- it('runs user scripts in compat mode', () => {
- render({''});
- expect(global.mockFn).toHaveBeenCalledTimes(1);
- });
+ it('renders a simple HTML element', () => {
+ const md = '
';
+ const mod = renderMdxish(mdxish(md));
+ const { container } = render();
- it("doesn't run user scripts by default", () => {
- render({''});
- expect(global.mockFn).toHaveBeenCalledTimes(0);
+ expect(container.querySelector('hr')).toBeInTheDocument();
+ });
});
- it("doesn't render user scripts by default", () => {
- render({''});
- expect(screen.queryByText('mockFn()')).not.toBeInTheDocument();
+ describe('mdx', () => {
+ it('renders the html in a `` tag if safeMode={true}', () => {
+ const md = '{``}';
+ const Component = execute(md);
+ expect(renderToStaticMarkup()).toMatchInlineSnapshot(
+ '"<button onload="alert('gotcha!')"/>
"',
+ );
+ });
});
- it("doesn't render user scripts with weird endings", () => {
- render({""});
- expect(screen.queryByText('mockFn()')).not.toBeInTheDocument();
- });
+ describe('render', () => {
+ beforeEach(() => {
+ global.mockFn = vi.fn();
+ });
- it("doesn't render user scripts with a malicious string", () => {
- render({'t>mockFn()cript>'});
- expect(screen.queryByText('mockFn()')).not.toBeInTheDocument();
- });
+ afterEach(() => {
+ cleanup();
+ vi.restoreAllMocks();
+ });
+
+ it('runs user scripts in compat mode', () => {
+ render({''});
+ expect(global.mockFn).toHaveBeenCalledTimes(1);
+ });
- it("doesn't run scripts on the server (even in compat mode)", () => {
- const html = `
+ it("doesn't run user scripts by default", () => {
+ render({''});
+ expect(global.mockFn).toHaveBeenCalledTimes(0);
+ });
+
+ it("doesn't render user scripts by default", () => {
+ render({''});
+ expect(screen.queryByText('mockFn()')).not.toBeInTheDocument();
+ });
+
+ it("doesn't render user scripts with weird endings", () => {
+ render({""});
+ expect(screen.queryByText('mockFn()')).not.toBeInTheDocument();
+ });
+
+ it("doesn't render user scripts with a malicious string", () => {
+ render({'t>mockFn()cript>'});
+ expect(screen.queryByText('mockFn()')).not.toBeInTheDocument();
+ });
+
+ it("doesn't run scripts on the server (even in compat mode)", () => {
+ const html = `
Hello World
`;
- const elem = {html};
- const view = renderToString(elem);
- expect(elem.props.runScripts).toBe(true);
- expect(view.indexOf('![\\":joy:\\"](\\"/public/img/emojis/joy.png\\" "\\\":joy:\\\"")
"`;
-
-exports[`list items 1`] = `
-"