234 lines
9.5 KiB
TypeScript
234 lines
9.5 KiB
TypeScript
import { expect, test, suite, describe } from 'vitest'
|
|
|
|
import { HopDown } from '../dist/lib';
|
|
|
|
const hopdown = new HopDown();
|
|
|
|
|
|
suite('Markdown to HTML Round-Trips', () => {
|
|
|
|
function assert(name: string, input: string, output: string, expected: string | undefined = undefined) {
|
|
return test(name, () => {
|
|
const html = hopdown.toHTML(input);
|
|
expect(html.toLowerCase()).toBe(output.toLowerCase());
|
|
expect(hopdown.toMarkdown(html)).toBe(expected !== undefined ? expected : input);
|
|
});
|
|
}
|
|
|
|
describe('inline', () => {
|
|
assert('italic *', '*italic*', '<p><em>italic</em></p>');
|
|
assert('italic _', '_italic_', '<p><em>italic</em></p>', '*italic*');
|
|
assert('bold *', '**bold**', '<p><strong>bold</strong></p>');
|
|
assert('bold _', '__bold__', '<p><strong>bold</strong></p>', '**bold**');
|
|
assert('strikethrough', '~~strike~~', '<p><del>strike</del></p>');
|
|
assert('inline code', '`code`', '<p><code>code</code></p>');
|
|
assert('bold+italic', '***bi***', '<p><strong><em>bi</em></strong></p>');
|
|
assert('link', '[t](http://x)', '<p><a href="http://x">t</a></p>');
|
|
assert('mixed', 'a **b** *c* `d`', '<p>a <strong>b</strong> <em>c</em> <code>d</code></p>');
|
|
assert('code then bold', '`a` **b**', '<p><code>a</code> <strong>b</strong></p>');
|
|
assert('nested, ummatched italic', '**i* b**', '<p><strong>i* b</strong></p>');
|
|
assert('nested, ummatched bold', '*b** i*', '<p><em>b** i</em></p>');
|
|
});
|
|
|
|
describe('block', () => {
|
|
assert('HR ***', '***', '<hr>');
|
|
assert('HR ******', '******', '<hr>', '***');
|
|
assert('HR ---', '---', '<hr>', '***');
|
|
assert('HR ___', '___', '<hr>', '***');
|
|
assert('H1', '# h', "<h1 id='h'>h</h1>");
|
|
assert('H2', '## h', "<h2 id='h'>h</h2>");
|
|
assert('H3', '### h', "<h3 id='h'>h</h3>");
|
|
assert('H4', '#### h', "<h4 id='h'>h</h4>");
|
|
assert('H5', '##### h', "<h5 id='h'>h</h5>");
|
|
assert('H6', '###### h', "<h6 id='h'>h</h6>");
|
|
assert('H1 with nested', '# h **bold**', "<h1 id='h_bold'>h <strong>bold</strong></h1>");
|
|
assert('Blockquote', '> foo\n> bar', "<blockquote>foo<br>bar</blockquote>");
|
|
assert('Blockquote+break', '> foo\n>\n> bar', "<blockquote>foo<p>bar</p></blockquote>");
|
|
assert('Blockquote+Bold`', '> **foo**\n> bar', "<blockquote><strong>foo</strong><br>bar</blockquote>");
|
|
assert('fenced code', '```\none\ntwo\n```', '<pre>one\ntwo</pre>');
|
|
assert('fenced code+lang', '```ts\nconst foo = "";\n```', '<pre class="language-ts">const foo = "";</pre>');
|
|
assert('fenced code ~~~', '~~~\none\ntwo\n~~~', '<pre>one\ntwo</pre>', '```\none\ntwo\n```');
|
|
assert('UL *', '* foo\n* bar', '<ul><li>foo</li><li>bar</li></ul>');
|
|
assert('UL -', '- foo\n- bar', '<ul><li>foo</li><li>bar</li></ul>', '* foo\n* bar');
|
|
assert('OL 1. 2.', '1. foo\n2. bar', '<ol><li>foo</li><li>bar</li></ol>');
|
|
assert('OL 1. 1.', '1. foo\n1. bar', '<ol><li>foo</li><li>bar</li></ol>', '1. foo\n2. bar');
|
|
assert('UL Nested', '* foo\n * bar', '<ul><li>foo<ul><li>bar</li></ul></li></ul>');
|
|
assert('OL in UL', '* foo\n 1. bar\n 2. baz', '<ul><li>foo<ol><li>bar</li><li>baz</li></ol></li></ul>');
|
|
});
|
|
|
|
describe('links and anchors', () => {
|
|
assert('link', '[foo](http://x)', '<p><a href="http://x">foo</a></p>');
|
|
assert('link with title', '[foo](http://x "bar")', '<p><a href="http://x" title="bar">foo</a></p>');
|
|
assert('anchor', '[foo](#anchor)', '<p><a href="#anchor">foo</a></p>');
|
|
|
|
var reflinks = (
|
|
'\n\n' +
|
|
'[foo]: http://foo\n' +
|
|
'[bar]: http://bar "Bar"\n'
|
|
);
|
|
assert(
|
|
'reference link',
|
|
'[text][foo]' + reflinks,
|
|
'<p><a href="http://foo">text</a></p>',
|
|
'[text](http://foo)'
|
|
);
|
|
assert(
|
|
'shortcut link',
|
|
'[foo][]\n\n' + reflinks,
|
|
'<p><a href="http://foo">foo</a></p>',
|
|
'[foo](http://foo)'
|
|
);
|
|
assert(
|
|
'reference with title',
|
|
'[text][bar]' + reflinks,
|
|
'<p><a href="http://bar" title="Bar">text</a></p>',
|
|
'[text](http://bar "Bar")'
|
|
);
|
|
assert(
|
|
'autolink',
|
|
'foo http://x bar',
|
|
'<p>foo <a href="http://x">http://x</a> bar</p>',
|
|
'foo [http://x](http://x) bar',
|
|
);
|
|
assert(
|
|
'anchor wrapped with bold',
|
|
'**[bold](http://x)**',
|
|
'<p><strong><a href="http://x">bold</a></strong></p>',
|
|
);
|
|
});
|
|
|
|
describe('tables', () => {
|
|
|
|
// basic table
|
|
var md = (
|
|
'| Header 1 | Header 2 |\n' +
|
|
'| --- | --- |\n' +
|
|
'| Cell 1 | Cell 2 |'
|
|
);
|
|
|
|
var html = (
|
|
'<table><thead>' +
|
|
'<tr><th>Header 1</th><th>Header 2</th></tr>' +
|
|
'</thead><tbody>' +
|
|
'<tr><td>Cell 1</td><td>Cell 2</td></tr>' +
|
|
'</tbody></table>'
|
|
);
|
|
assert('Table', md, html);
|
|
|
|
// table with inline formatting
|
|
var md = (
|
|
'| Header 1 | Header 2 |\n' +
|
|
'| --- | --- |\n' +
|
|
'| *italic* | **bold** |\n' +
|
|
'| `code` | |'
|
|
);
|
|
var html = (
|
|
'<table><thead>' +
|
|
'<tr><th>Header 1</th><th>Header 2</th></tr>' +
|
|
'</thead><tbody>' +
|
|
'<tr><td><em>italic</em></td><td><strong>bold</strong></td></tr>' +
|
|
'<tr><td><code>code</code></td><td></td></tr>' +
|
|
'</tbody></table>'
|
|
);
|
|
assert('Table + inline', md, html);
|
|
|
|
// normalized markdown and cell alignment
|
|
var expected = (
|
|
'| Header 1 | Header 2 | Header 3 |\n' +
|
|
'| :---: | --- | ---: |\n' +
|
|
'| Cell 1 | Cell 2 | Cell 3 |'
|
|
);
|
|
|
|
var md = (
|
|
'| Header 1 | Header 2 |Header 3 |\n' +
|
|
'| :---: | :--- | ----------: |\n' +
|
|
'| Cell 1 | Cell 2 |Cell 3 |'
|
|
)
|
|
|
|
var html = (
|
|
'<table><thead><tr>' +
|
|
'<th class="align-center">Header 1</th>' +
|
|
'<th>Header 2</th>' +
|
|
'<th class="align-right">Header 3</th>' +
|
|
'</tr></thead><tbody><tr>' +
|
|
'<td class="align-center">Cell 1</td>' +
|
|
'<td>Cell 2</td>' +
|
|
'<td class="align-right">Cell 3</td>' +
|
|
'</tr></tbody></table>'
|
|
);
|
|
assert('Table alignment', md, html, expected);
|
|
|
|
});
|
|
|
|
describe('Edge Cases', () => {
|
|
var html = 'a <span>SPAN</span>';
|
|
assert('HTML is stripped', html, '<p>' + html + '</p>', 'a SPAN')
|
|
assert('Bare brackets', '< foo', '<p>< foo</p>', '< foo');
|
|
assert(
|
|
'HTML Entities',
|
|
'< > & { { &unknown; foo',
|
|
'<p>< > & { { &unknown; foo</p>',
|
|
'< > & { { &unknown; foo'
|
|
);
|
|
assert('Escape sequence \\*', '\\*not italic\\*', '<p>\\*not italic\\*</p>');
|
|
assert('Escape sequence \\`', '\\`not code\\`', '<p>\\`not code\\`</p>');
|
|
});
|
|
|
|
});
|
|
|
|
|
|
suite('Markdown to Editor Nodes Round-Trips', () => {
|
|
|
|
function span(name: string, delim: string) {
|
|
const s = document.createElement('span');
|
|
s.className = `delim ${name.toLowerCase()}`;
|
|
s.textContent = delim;
|
|
return s;
|
|
}
|
|
|
|
function assertInline(name: string, delim: string) {
|
|
return test(name, () => {
|
|
|
|
const input = delim + name + delim;
|
|
|
|
const expected = document.createDocumentFragment();
|
|
expected.appendChild(document.createElement('div'));;
|
|
expected.childNodes[0].appendChild(span(name, delim));
|
|
expected.childNodes[0].appendChild(document.createTextNode(name));
|
|
expected.childNodes[0].appendChild(span(name, delim));
|
|
|
|
const node = hopdown.toEditorNode(input);
|
|
expect(node).toStrictEqual(expected);
|
|
expect(hopdown.toMarkdown(node)).toBe(input);
|
|
});
|
|
}
|
|
|
|
function assertBlock(name: string, input: string, output: string) {
|
|
return test(name, () => {
|
|
const div = document.createElement('div');
|
|
div.appendChild(hopdown.toEditorNode(input));
|
|
expect(div.innerHTML).toStrictEqual(output);
|
|
});
|
|
}
|
|
|
|
|
|
describe('inline', () => {
|
|
assertInline('strong', '**');
|
|
assertInline('em', '*');
|
|
});
|
|
|
|
describe('block', () => {
|
|
assertBlock(
|
|
'Fenced Code',
|
|
'```\nfoo\n```',
|
|
(
|
|
'<div>' +
|
|
'<span class="delim pre">```</span>\n' +
|
|
'foo\n' +
|
|
'<span class="delim pre">```</span>' +
|
|
'</div>'
|
|
)
|
|
);
|
|
});
|
|
});
|