Add latest changes from gitlab-org/gitlab@master

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--&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);
 
-  // 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);
-    });
-  });
 });