diff options
Diffstat (limited to 'spec/frontend/lib/gfm/index_spec.js')
| -rw-r--r-- | spec/frontend/lib/gfm/index_spec.js | 376 |
1 files changed, 212 insertions, 164 deletions
diff --git a/spec/frontend/lib/gfm/index_spec.js b/spec/frontend/lib/gfm/index_spec.js index f53f809b799..7c383ae68a4 100644 --- a/spec/frontend/lib/gfm/index_spec.js +++ b/spec/frontend/lib/gfm/index_spec.js @@ -24,12 +24,6 @@ describe('gfm', () => { }; describe('render', () => { - it('processes Commonmark and provides an ast to the renderer function', async () => { - const result = await markdownToAST('This is text'); - - expect(result.type).toBe('root'); - }); - it('transforms raw HTML into individual nodes in the AST', async () => { const result = await markdownToAST('<strong>This is bold text</strong>'); @@ -46,216 +40,270 @@ describe('gfm', () => { ); }); - it('returns the result of executing the renderer function', async () => { - const rendered = { value: 'rendered tree' }; + describe('with custom renderer', () => { + it('processes Commonmark and provides an ast to the renderer function', async () => { + const result = await markdownToAST('This is text'); - const result = await render({ - markdown: '<strong>This is bold text</strong>', - renderer: () => { - return rendered; - }, + expect(result.type).toBe('root'); }); - expect(result).toEqual(rendered); + it('returns the result of executing the renderer function', async () => { + const rendered = { value: 'rendered tree' }; + + const result = await render({ + markdown: '<strong>This is bold text</strong>', + renderer: () => { + return rendered; + }, + }); + + expect(result).toEqual(rendered); + }); }); - 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] + describe('footnote references and footnote definitions', () => { + 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] [^footnote]: Footnote definition`, - ['footnoteReference', 'footnoteDefinition'], - ); + ['footnoteReference', 'footnoteDefinition'], + ); - expectInRoot( - result, - expect.objectContaining({ - children: expect.arrayContaining([ - expect.objectContaining({ - type: 'element', - tagName: 'footnotereference', - properties: { - identifier: 'footnote', - label: 'footnote', - }, - }), - ]), - }), - ); + 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', - }, - }), - ); + expectInRoot( + result, + expect.objectContaining({ + tagName: 'footnotedefinition', + properties: { + identifier: 'footnote', + label: 'footnote', + }, + }), + ); + }); }); }); - describe('when skipping the rendering of code blocks', () => { - it('transforms code nodes into codeblock html tags', async () => { - const result = await markdownToAST( - ` + describe('code blocks', () => { + describe('when skipping the rendering of code blocks', () => { + it('transforms code nodes into codeblock html tags', async () => { + const result = await markdownToAST( + ` \`\`\`javascript console.log('Hola'); \`\`\`\ `, - ['code'], - ); + ['code'], + ); - expectInRoot( - result, - expect.objectContaining({ - tagName: 'codeblock', - properties: { - language: 'javascript', - }, - }), - ); + 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( - ` + describe('reference definitions', () => { + 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'], - ); + ['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"', + 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( - ` + describe('link and image references', () => { + 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'], - ); + ['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', + 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', + 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( - ` + 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'], - ); + ['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('frontmatter', () => { + 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]); + + expectInRoot( + result, + expect.objectContaining({ + type: 'element', + tagName: 'frontmatter', + properties: { + language: type, + }, + children: [ + { + type: 'text', + value: 'title: page', + }, + ], + }), + ); + }); + }); + }); + + describe('table of contents', () => { + it.each` + markdown + ${'[[_TOC_]]'} + ${' [[_TOC_]]'} + ${'[[_TOC_]] '} + ${'[TOC]'} + ${' [TOC]'} + ${'[TOC] '} + `('parses $markdown and produces a table of contents section', async ({ markdown }) => { + const result = await markdownToAST(markdown); 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', - }), - }), - ]), + type: 'element', + tagName: 'nav', }), ); }); }); - }); - 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]); + describe('when skipping the rendering of table of contents', () => { + it('transforms table of contents nodes into html tableofcontents tags', async () => { + const result = await markdownToAST('[[_TOC_]]', ['tableOfContents']); - expectInRoot( - result, - expect.objectContaining({ - type: 'element', - tagName: 'frontmatter', - properties: { - language: type, - }, - children: [ - { - type: 'text', - value: 'title: page', - }, - ], - }), - ); + expectInRoot( + result, + expect.objectContaining({ + type: 'element', + tagName: 'tableofcontents', + }), + ); + }); }); }); }); |