diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-10-31 12:09:32 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-10-31 12:09:32 +0300 |
commit | 5025412fc4ab16cc7049a38d43fdc2e4095a1f87 (patch) | |
tree | ecec75618d069e02ba0ebcf36db6630150a9d073 /spec/frontend/behaviors | |
parent | 853c0c530b624a2f94ce85acbbdffc70510bdba3 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/behaviors')
-rw-r--r-- | spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js | 145 |
1 files changed, 26 insertions, 119 deletions
diff --git a/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js b/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js index de0e5063e49..2b9442162aa 100644 --- a/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js +++ b/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js @@ -1,127 +1,34 @@ -import { createWrapper } from '@vue/test-utils'; -import { __ } from '~/locale'; +import $ from 'jquery'; import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; -import renderMermaid, { - MAX_CHAR_LIMIT, - MAX_MERMAID_BLOCK_LIMIT, - LAZY_ALERT_SHOWN_CLASS, -} from '~/behaviors/markdown/render_sandboxed_mermaid'; +import renderMermaid from '~/behaviors/markdown/render_sandboxed_mermaid'; -describe('Mermaid diagrams renderer', () => { - // Finders - const findMermaidIframes = () => document.querySelectorAll('iframe[src="/-/sandbox/mermaid"]'); - const findDangerousMermaidAlert = () => - createWrapper(document.querySelector('[data-testid="alert-warning"]')); +describe('Render mermaid diagrams for Gitlab Flavoured Markdown', () => { + it('Does something', () => { + document.body.dataset.page = ''; + setHTMLFixture(` + <div class="gl-relative markdown-code-block js-markdown-code"> + <pre data-sourcepos="1:1-7:3" class="code highlight js-syntax-highlight language-mermaid white" lang="mermaid" id="code-4"> + <code class="js-render-mermaid"> + <span id="LC1" class="line" lang="mermaid">graph TD;</span> + <span id="LC2" class="line" lang="mermaid">A-->B</span> + <span id="LC3" class="line" lang="mermaid">A-->C</span> + <span id="LC4" class="line" lang="mermaid">B-->D</span> + <span id="LC5" class="line" lang="mermaid">C-->D</span> + </code> + </pre> + <copy-code> + <button type="button" class="btn btn-default btn-md gl-button btn-icon has-tooltip" data-title="Copy to clipboard" data-clipboard-target="pre#code-4"> + <svg><use xlink:href="/assets/icons-7f1680a3670112fe4c8ef57b9dfb93f0f61b43a2a479d7abd6c83bcb724b9201.svg#copy-to-clipboard"></use></svg> + </button> + </copy-code> + </div>`); + const els = $('pre.js-syntax-highlight').find('.js-render-mermaid'); + + renderMermaid(els); - // Helpers - const renderDiagrams = () => { - renderMermaid([...document.querySelectorAll('.js-render-mermaid')]); jest.runAllTimers(); - }; - - beforeEach(() => { - document.body.dataset.page = ''; - }); + expect(document.querySelector('pre.js-syntax-highlight').classList).toContain('gl-sr-only'); - afterEach(() => { resetHTMLFixture(); }); - - it('renders a mermaid diagram', () => { - setHTMLFixture('<pre><code class="js-render-mermaid"></code></pre>'); - - expect(findMermaidIframes()).toHaveLength(0); - - renderDiagrams(); - - expect(document.querySelector('pre').classList).toContain('gl-sr-only'); - expect(findMermaidIframes()).toHaveLength(1); - }); - - describe('within a details element', () => { - beforeEach(() => { - setHTMLFixture('<details><pre><code class="js-render-mermaid"></code></pre></details>'); - renderDiagrams(); - }); - - it('does not render the diagram on load', () => { - expect(findMermaidIframes()).toHaveLength(0); - }); - - it('render the diagram when the details element is opened', () => { - document.querySelector('details').setAttribute('open', true); - document.querySelector('details').dispatchEvent(new Event('toggle')); - jest.runAllTimers(); - - expect(findMermaidIframes()).toHaveLength(1); - }); - }); - - describe('dangerous diagrams', () => { - describe(`when the diagram's source exceeds ${MAX_CHAR_LIMIT} characters`, () => { - beforeEach(() => { - setHTMLFixture( - `<pre> - <code class="js-render-mermaid">${Array(MAX_CHAR_LIMIT + 1) - .fill('a') - .join('')}</code> - </pre>`, - ); - renderDiagrams(); - }); - it('does not render the diagram on load', () => { - expect(findMermaidIframes()).toHaveLength(0); - }); - - it('shows a warning about performance impact when rendering the diagram', () => { - expect(document.querySelector('pre').classList).toContain(LAZY_ALERT_SHOWN_CLASS); - expect(findDangerousMermaidAlert().exists()).toBe(true); - expect(findDangerousMermaidAlert().text()).toContain( - __('Warning: Displaying this diagram might cause performance issues on this page.'), - ); - }); - - it("renders the diagram when clicking on the alert's button", () => { - findDangerousMermaidAlert().find('button').trigger('click'); - jest.runAllTimers(); - - expect(findMermaidIframes()).toHaveLength(1); - }); - }); - - it(`stops rendering diagrams once the total rendered source exceeds ${MAX_CHAR_LIMIT} characters`, () => { - setHTMLFixture( - `<pre> - <code class="js-render-mermaid">${Array(MAX_CHAR_LIMIT - 1) - .fill('a') - .join('')}</code> - <code class="js-render-mermaid">2</code> - <code class="js-render-mermaid">3</code> - <code class="js-render-mermaid">4</code> - </pre>`, - ); - renderDiagrams(); - - expect(findMermaidIframes()).toHaveLength(3); - }); - - // Note: The test case below is provided for convenience but should remain skipped as the DOM - // operations it requires are too expensive and would significantly slow down the test suite. - // eslint-disable-next-line jest/no-disabled-tests - it.skip(`stops rendering diagrams when the rendered diagrams count exceeds ${MAX_MERMAID_BLOCK_LIMIT}`, () => { - setHTMLFixture( - `<pre> - ${Array(MAX_MERMAID_BLOCK_LIMIT + 1) - .fill('<code class="js-render-mermaid"></code>') - .join('')} - </pre>`, - ); - renderDiagrams(); - - expect([...document.querySelectorAll('.js-render-mermaid')]).toHaveLength( - MAX_MERMAID_BLOCK_LIMIT + 1, - ); - expect(findMermaidIframes()).toHaveLength(MAX_MERMAID_BLOCK_LIMIT); - }); - }); }); |