2 files changed, 40 insertions, 1 deletions
diff --git a/spec/frontend/behaviors/markdown/highlight_current_user_spec.js b/spec/frontend/behaviors/markdown/highlight_current_user_spec.js
index 3305ddc412d..38d19ac3808 100644
--- a/spec/frontend/behaviors/markdown/highlight_current_user_spec.js
+++ b/spec/frontend/behaviors/markdown/highlight_current_user_spec.js
@@ -1,3 +1,4 @@
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';
 
 describe('highlightCurrentUser', () => {
@@ -5,7 +6,7 @@ describe('highlightCurrentUser', () => {
   let elements;
 
   beforeEach(() => {
-    setFixtures(`
+    setHTMLFixture(`
       <div id="dummy-root-element">
         <div data-user="1">@first</div>
         <div data-user="2">@second</div>
@@ -15,6 +16,10 @@ describe('highlightCurrentUser', () => {
     elements = rootElement.querySelectorAll('[data-user]');
   });
 
+  afterEach(() => {
+    resetHTMLFixture();
+  });
+
   describe('without current user', () => {
     beforeEach(() => {
       window.gon = window.gon || {};
diff --git a/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js b/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js
new file mode 100644
index 00000000000..2b9442162aa
--- /dev/null
+++ b/spec/frontend/behaviors/markdown/render_sandboxed_mermaid_spec.js
@@ -0,0 +1,34 @@
+import $ from 'jquery';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+import renderMermaid 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);
+
+    jest.runAllTimers();
+    expect(document.querySelector('pre.js-syntax-highlight').classList).toContain('gl-sr-only');
+
+    resetHTMLFixture();
+  });
+});