debian-mirror-gitlab/spec/frontend/lib/gfm/index_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

262 lines
6.9 KiB
JavaScript
Raw Normal View History

2022-06-21 17:19:12 +05:30
import { render } from '~/lib/gfm';
describe('gfm', () => {
2022-08-13 15:12:31 +05:30
const markdownToAST = async (markdown, skipRendering = []) => {
2022-07-23 23:45:48 +05:30
let result;
await render({
markdown,
2022-08-13 15:12:31 +05:30
skipRendering,
2022-07-23 23:45:48 +05:30
renderer: (tree) => {
result = tree;
},
});
return result;
};
const expectInRoot = (result, ...nodes) => {
expect(result).toEqual(
expect.objectContaining({
children: expect.arrayContaining(nodes),
}),
);
};
2022-06-21 17:19:12 +05:30
describe('render', () => {
it('processes Commonmark and provides an ast to the renderer function', async () => {
2022-07-23 23:45:48 +05:30
const result = await markdownToAST('This is text');
2022-06-21 17:19:12 +05:30
expect(result.type).toBe('root');
});
it('transforms raw HTML into individual nodes in the AST', async () => {
2022-07-23 23:45:48 +05:30
const result = await markdownToAST('<strong>This is bold text</strong>');
2022-06-21 17:19:12 +05:30
2022-07-23 23:45:48 +05:30
expectInRoot(
result,
expect.objectContaining({
children: expect.arrayContaining([
expect.objectContaining({
type: 'element',
tagName: 'strong',
}),
]),
}),
);
2022-06-21 17:19:12 +05:30
});
it('returns the result of executing the renderer function', async () => {
2022-07-16 23:28:13 +05:30
const rendered = { value: 'rendered tree' };
2022-06-21 17:19:12 +05:30
const result = await render({
markdown: '<strong>This is bold text</strong>',
renderer: () => {
2022-07-16 23:28:13 +05:30
return rendered;
2022-06-21 17:19:12 +05:30
},
});
2022-07-16 23:28:13 +05:30
expect(result).toEqual(rendered);
2022-06-21 17:19:12 +05:30
});
2022-07-23 23:45:48 +05:30
2022-08-13 15:12:31 +05:30
describe('when skipping the rendering of footnote reference and definition nodes', () => {
it('transforms footnotes into footnotedefinition and footnotereference tags', async () => {
const result = await markdownToAST(
`footnote reference [^footnote]
2022-07-23 23:45:48 +05:30
[^footnote]: Footnote definition`,
2022-08-13 15:12:31 +05:30
['footnoteReference', 'footnoteDefinition'],
);
2022-07-23 23:45:48 +05:30
2022-08-13 15:12:31 +05:30
expectInRoot(
result,
expect.objectContaining({
children: expect.arrayContaining([
expect.objectContaining({
type: 'element',
tagName: 'footnotereference',
properties: {
identifier: 'footnote',
label: 'footnote',
},
}),
]),
}),
);
expectInRoot(
result,
expect.objectContaining({
tagName: 'footnotedefinition',
properties: {
identifier: 'footnote',
label: 'footnote',
},
}),
);
});
});
2022-08-27 11:52:29 +05:30
describe('when skipping the rendering of code blocks', () => {
it('transforms code nodes into codeblock html tags', async () => {
const result = await markdownToAST(
`
2022-08-13 15:12:31 +05:30
\`\`\`javascript
console.log('Hola');
\`\`\`\
`,
2022-08-27 11:52:29 +05:30
['code'],
);
expectInRoot(
result,
expect.objectContaining({
tagName: 'codeblock',
properties: {
language: 'javascript',
},
}),
);
});
});
describe('when skipping the rendering of reference definitions', () => {
it('transforms code nodes into codeblock html tags', async () => {
const result = await markdownToAST(
`
[gitlab][gitlab]
[gitlab]: https://gitlab.com "GitLab"
`,
['definition'],
);
expectInRoot(
result,
expect.objectContaining({
type: 'element',
tagName: 'referencedefinition',
properties: {
identifier: 'gitlab',
title: 'GitLab',
url: 'https://gitlab.com',
},
children: [
{
type: 'text',
value: '[gitlab]: https://gitlab.com "GitLab"',
},
],
}),
);
});
});
describe('when skipping the rendering of link and image references', () => {
it('transforms linkReference and imageReference nodes into html tags', async () => {
const result = await markdownToAST(
`
[gitlab][gitlab] and ![GitLab Logo][gitlab-logo]
[gitlab]: https://gitlab.com "GitLab"
[gitlab-logo]: https://gitlab.com/gitlab-logo.png "GitLab Logo"
`,
['linkReference', 'imageReference'],
);
expectInRoot(
result,
expect.objectContaining({
tagName: 'p',
children: expect.arrayContaining([
expect.objectContaining({
type: 'element',
tagName: 'a',
properties: expect.objectContaining({
href: 'https://gitlab.com',
isReference: 'true',
identifier: 'gitlab',
title: 'GitLab',
}),
}),
expect.objectContaining({
type: 'element',
tagName: 'img',
properties: expect.objectContaining({
src: 'https://gitlab.com/gitlab-logo.png',
isReference: 'true',
identifier: 'gitlab-logo',
title: 'GitLab Logo',
alt: 'GitLab Logo',
}),
}),
]),
}),
);
});
it('normalizes the urls extracted from the reference definitions', async () => {
const result = await markdownToAST(
`
[gitlab][gitlab] and ![GitLab Logo][gitlab]
[gitlab]: /url\\bar*baz
`,
['linkReference', 'imageReference'],
);
expectInRoot(
result,
expect.objectContaining({
tagName: 'p',
children: expect.arrayContaining([
expect.objectContaining({
type: 'element',
tagName: 'a',
properties: expect.objectContaining({
href: '/url%5Cbar*baz',
}),
}),
expect.objectContaining({
type: 'element',
tagName: 'img',
properties: expect.objectContaining({
src: '/url%5Cbar*baz',
}),
}),
]),
}),
);
});
});
});
describe('when skipping the rendering of frontmatter types', () => {
it.each`
type | input
${'yaml'} | ${'---\ntitle: page\n---'}
${'toml'} | ${'+++\ntitle: page\n+++'}
${'json'} | ${';;;\ntitle: page\n;;;'}
`('transforms $type nodes into frontmatter html tags', async ({ input, type }) => {
const result = await markdownToAST(input, [type]);
2022-07-23 23:45:48 +05:30
expectInRoot(
result,
expect.objectContaining({
2022-08-27 11:52:29 +05:30
type: 'element',
tagName: 'frontmatter',
2022-07-23 23:45:48 +05:30
properties: {
2022-08-27 11:52:29 +05:30
language: type,
2022-07-23 23:45:48 +05:30
},
2022-08-27 11:52:29 +05:30
children: [
{
type: 'text',
value: 'title: page',
},
],
2022-07-23 23:45:48 +05:30
}),
);
});
2022-06-21 17:19:12 +05:30
});
});