Add table tests

This commit is contained in:
ginnyTheCat 2022-10-02 22:59:27 +02:00
parent 1bdda9112a
commit 2f46f45bdb
No known key found for this signature in database
GPG key ID: 6B7EF3FED72A0D97
2 changed files with 60 additions and 6 deletions

View file

@ -199,7 +199,7 @@ const markdownRules = {
return s; return s;
})); }));
function pad(s, i) { const pad = (s, i) => {
switch (node.align[i]) { switch (node.align[i]) {
case 'right': case 'right':
return s.padStart(colWidth[i]); return s.padStart(colWidth[i]);
@ -210,7 +210,7 @@ const markdownRules = {
default: default:
return s.padEnd(colWidth[i]); return s.padEnd(colWidth[i]);
} }
} };
const line = colWidth.map((len, i) => { const line = colWidth.map((len, i) => {
switch (node.align[i]) { switch (node.align[i]) {
@ -232,6 +232,31 @@ const markdownRules = {
return table.map((row) => `| ${row.join(' | ')} |\n`).join(''); return table.map((row) => `| ${row.join(' | ')} |\n`).join('');
}, },
html: (node, output, state) => {
const header = node.header
.map((content, i) => htmlTag('th', output(content, state), {
scope: 'col',
align: node.align[i] || undefined,
}))
.join('');
const rows = node.cells
.map((row) => {
const cols = row
.map((content, i) => htmlTag('td', output(content, state), {
align: node.align[i] || undefined,
}))
.join('');
return htmlTag('tr', cols);
})
.join('');
const thead = htmlTag('thead', htmlTag('tr', header));
const tbody = htmlTag('tbody', rows);
return htmlTag('table', thead + tbody);
},
}, },
displayMath: { displayMath: {
order: defaultRules.table.order + 0.1, order: defaultRules.table.order + 0.1,
@ -383,14 +408,16 @@ function mapElement(el) {
items: Array.from(el.childNodes).map(mapNode), items: Array.from(el.childNodes).map(mapNode),
}]; }];
case 'TABLE': { case 'TABLE': {
const parseAlign = (s) => (['left', 'right', 'center'].includes(s) ? s : null);
const headerEl = Array.from(el.querySelector('thead > tr').childNodes); const headerEl = Array.from(el.querySelector('thead > tr').childNodes);
const align = headerEl.map((childE) => childE.style['text-align']); const align = headerEl.map((childE) => parseAlign(childE.align));
return [{ return [{
type: 'table', type: 'table',
header: headerEl.map(mapChildren), header: headerEl.map(mapChildren),
align, align,
cells: Array.from(el.querySelectorAll('tbody > tr')).map((rowEl) => Array.from(rowEl.childNodes).map((childEl, i) => { cells: Array.from(el.querySelectorAll('tbody > tr')).map((rowEl) => Array.from(rowEl.childNodes).map((childEl, i) => {
if (align[i] === undefined) align[i] = childEl.style['text-align']; if (align[i] === undefined) align[i] = parseAlign(childEl.align);
return mapChildren(childEl); return mapChildren(childEl);
})), })),
}]; }];

View file

@ -89,7 +89,11 @@ describe('link', () => {
// mdTest('>quote', '> quote', '<blockquote>quote</blockquote>'); // mdTest('>quote', '> quote', '<blockquote>quote</blockquote>');
// mdTest('> quote', '> quote', '<blockquote>quote</blockquote>'); // mdTest('> quote', '> quote', '<blockquote>quote</blockquote>');
// mdTest('> multiline\nquote', '> multiline\n> quote', '<blockquote>multiline<br>quote</blockquote>'); // mdTest(
// '> multiline\nquote',
// '> multiline\n> quote',
// '<blockquote>multiline<br>quote</blockquote>',
// );
// mdTest('> quote\n\ntext after', '<blockquote>quote</blockquote>text after'); // mdTest('> quote\n\ntext after', '<blockquote>quote</blockquote>text after');
// }); // });
@ -101,7 +105,10 @@ describe('list', () => {
mdTest('1. item1\n2. item2', '<ol><li>item1</li><li>item2</li></ol>'); mdTest('1. item1\n2. item2', '<ol><li>item1</li><li>item2</li></ol>');
mdTest('2. item2\n3. item3', '<ol start="2"><li>item2</li><li>item3</li></ol>'); mdTest('2. item2\n3. item3', '<ol start="2"><li>item2</li><li>item3</li></ol>');
// mdTest('* item1\n * subitem1\n * subitem2\n* item2', '<ul><li>item1<ul><li>subitem1</li><li>subitem2</li></ul></li><li>item2</li></ul>'); // mdTest(
// '* item1\n * subitem1\n * subitem2\n* item2',
// '<ul><li>item1<ul><li>subitem1</li><li>subitem2</li></ul></li><li>item2</li></ul>',
// );
const elementHtml = '<ul><li>item1<ul><li>subitem1</li><li>subitem2</li></ul></li><li>item2</li></ul>'; const elementHtml = '<ul><li>item1<ul><li>subitem1</li><li>subitem2</li></ul></li><li>item2</li></ul>';
test(elementHtml, () => { test(elementHtml, () => {
@ -109,3 +116,23 @@ describe('list', () => {
expect(content.plain).toBe('* item1\n * subitem1\n * subitem2\n* item2'); expect(content.plain).toBe('* item1\n * subitem1\n * subitem2\n* item2');
}); });
}); });
describe('table', () => {
mdTest(
'|head1|head2|\n|-|-|\n|cell1|cell2|\n|cell3|cell4|',
'| head1 | head2 |\n| ----- | ----- |\n| cell1 | cell2 |\n| cell3 | cell4 |',
'<table><thead><tr><th scope="col">head1</th><th scope="col">head2</th></tr></thead><tbody><tr><td>cell1</td><td>cell2</td></tr><tr><td>cell3</td><td>cell4</td></tr></tbody></table>',
);
mdTest(
'| left | center | right |\n| :--- | :----: | ----: |\n| l | c | r |',
'<table><thead><tr><th scope="col" align="left">left</th><th scope="col" align="center">center</th><th scope="col" align="right">right</th></tr></thead><tbody><tr><td align="left">l</td><td align="center">c</td><td align="right">r</td></tr></tbody></table>',
);
const unknownAlignHtml = '<table><thead><tr><th align="unknown">head</th></tr></thead><tbody><tr><td>cell</td></tr></tbody></table>';
test(unknownAlignHtml, () => {
const content = html(unknownAlignHtml, { kind: 'edit' });
expect(content.plain).toBe('| head |\n| ---- |\n| cell |');
expect(content.html).toBe('<table><thead><tr><th scope="col">head</th></tr></thead><tbody><tr><td>cell</td></tr></tbody></table>');
});
});