Add latest changes from gitlab-org/gitlab@master

1 files changed, 119 insertions, 26 deletions

diff --git a/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js b/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js
index 2b9442162aa..de0e5063e49 100644
--- a/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js
+++ b/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js
@@ -1,34 +1,127 @@
-import $ from 'jquery';
+import { createWrapper } from '@vue/test-utils';
+import { __ } from '~/locale';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import renderMermaid from '~/behaviors/markdown/render_sandboxed_mermaid';
+import renderMermaid, {
+  MAX_CHAR_LIMIT,
+  MAX_MERMAID_BLOCK_LIMIT,
+  LAZY_ALERT_SHOWN_CLASS,
+} from '~/behaviors/markdown/render_sandboxed_mermaid';
 
-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--&gt;B</span>
-            <span id="LC3" class="line" lang="mermaid">A--&gt;C</span>
-            <span id="LC4" class="line" lang="mermaid">B--&gt;D</span>
-            <span id="LC5" class="line" lang="mermaid">C--&gt;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);
+describe('Mermaid diagrams renderer', () => {
+  // Finders
+  const findMermaidIframes = () => document.querySelectorAll('iframe[src="/-/sandbox/mermaid"]');
+  const findDangerousMermaidAlert = () =>
+    createWrapper(document.querySelector('[data-testid="alert-warning"]'));
 
+  // Helpers
+  const renderDiagrams = () => {
+    renderMermaid([...document.querySelectorAll('.js-render-mermaid')]);
     jest.runAllTimers();
-    expect(document.querySelector('pre.js-syntax-highlight').classList).toContain('gl-sr-only');
+  };
+
+  beforeEach(() => {
+    document.body.dataset.page = '';
+  });
 
+  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);
+    });
+  });
 });