Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

9 files changed, 81 insertions, 67 deletions

diff --git a/spec/frontend/behaviors/autosize_spec.js b/spec/frontend/behaviors/autosize_spec.js
index a9dbee7fd08..7008b7b2eb6 100644
--- a/spec/frontend/behaviors/autosize_spec.js
+++ b/spec/frontend/behaviors/autosize_spec.js
@@ -1,4 +1,5 @@
 import '~/behaviors/autosize';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 
 jest.mock('~/helpers/startup_css_helper', () => {
   return {
@@ -20,19 +21,22 @@ jest.mock('~/helpers/startup_css_helper', () => {
 
 describe('Autosize behavior', () => {
   beforeEach(() => {
-    setFixtures('<textarea class="js-autosize"></textarea>');
+    setHTMLFixture('<textarea class="js-autosize"></textarea>');
+  });
+
+  afterEach(() => {
+    resetHTMLFixture();
   });
 
   it('is applied to the textarea', () => {
     // This is the second part of the Hack:
     // Because we are forcing the mock for WaitForCSSLoaded and the very end of our callstack
     // to call its callback. This querySelector needs to go to the very end of our callstack
-    // as well, if we would not have this setTimeout Function here, the querySelector
-    // would run before the mockImplementation called its callBack Function
-    // the DOM Manipulation didn't happen yet and the test would fail.
-    setTimeout(() => {
-      const textarea = document.querySelector('textarea');
-      expect(textarea.classList).toContain('js-autosize-initialized');
-    }, 0);
+    // as well, if we would not have this jest.runOnlyPendingTimers here, the querySelector
+    // would not run and the test would fail.
+    jest.runOnlyPendingTimers();
+
+    const textarea = document.querySelector('textarea');
+    expect(textarea.classList).toContain('js-autosize-initialized');
   });
 });
diff --git a/spec/frontend/behaviors/copy_as_gfm_spec.js b/spec/frontend/behaviors/copy_as_gfm_spec.js
index c96db09cc76..2032faa1c33 100644
--- a/spec/frontend/behaviors/copy_as_gfm_spec.js
+++ b/spec/frontend/behaviors/copy_as_gfm_spec.js
@@ -8,6 +8,9 @@ describe('CopyAsGFM', () => {
     beforeEach(() => {
       target = document.createElement('input');
       target.value = 'This is code: ';
+
+      // needed for the underlying insertText to work
+      document.execCommand = jest.fn(() => false);
     });
 
     // When GFM code is copied, we put the regular plain text
diff --git a/spec/frontend/behaviors/date_picker_spec.js b/spec/frontend/behaviors/date_picker_spec.js
index 9f7701a0366..363052ad7fb 100644
--- a/spec/frontend/behaviors/date_picker_spec.js
+++ b/spec/frontend/behaviors/date_picker_spec.js
@@ -1,4 +1,5 @@
 import * as Pikaday from 'pikaday';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import initDatePickers from '~/behaviors/date_picker';
 import * as utils from '~/lib/utils/datetime_utility';
 
@@ -12,7 +13,7 @@ describe('date_picker behavior', () => {
   beforeEach(() => {
     pikadayMock = jest.spyOn(Pikaday, 'default');
     parseMock = jest.spyOn(utils, 'parsePikadayDate');
-    setFixtures(`
+    setHTMLFixture(`
       <div>
         <input class="datepicker" value="2020-10-01" />
       </div>
@@ -21,6 +22,10 @@ describe('date_picker behavior', () => {
       </div>`);
   });
 
+  afterEach(() => {
+    resetHTMLFixture();
+  });
+
   it('Instantiates Pickaday for every instance of a .datepicker class', () => {
     initDatePickers();
 
diff --git a/spec/frontend/behaviors/load_startup_css_spec.js b/spec/frontend/behaviors/load_startup_css_spec.js
index 59f49585645..e9e4c06732f 100644
--- a/spec/frontend/behaviors/load_startup_css_spec.js
+++ b/spec/frontend/behaviors/load_startup_css_spec.js
@@ -1,4 +1,4 @@
-import { setHTMLFixture } from 'helpers/fixtures';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import { loadStartupCSS } from '~/behaviors/load_startup_css';
 
 describe('behaviors/load_startup_css', () => {
@@ -25,6 +25,10 @@ describe('behaviors/load_startup_css', () => {
     loadStartupCSS();
   });
 
+  afterEach(() => {
+    resetHTMLFixture();
+  });
+
   it('does nothing at first', () => {
     expect(loadListener).not.toHaveBeenCalled();
   });
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();
+  });
+});
diff --git a/spec/frontend/behaviors/quick_submit_spec.js b/spec/frontend/behaviors/quick_submit_spec.js
index 86a85831c6b..317c671cd2b 100644
--- a/spec/frontend/behaviors/quick_submit_spec.js
+++ b/spec/frontend/behaviors/quick_submit_spec.js
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import '~/behaviors/quick_submit';
 
 describe('Quick Submit behavior', () => {
@@ -7,7 +8,7 @@ describe('Quick Submit behavior', () => {
   const keydownEvent = (options = { keyCode: 13, metaKey: true }) => $.Event('keydown', options);
 
   beforeEach(() => {
-    loadFixtures('snippets/show.html');
+    loadHTMLFixture('snippets/show.html');
 
     testContext = {};
 
@@ -24,6 +25,10 @@ describe('Quick Submit behavior', () => {
     testContext.textarea = $('.js-quick-submit textarea').first();
   });
 
+  afterEach(() => {
+    resetHTMLFixture();
+  });
+
   it('does not respond to other keyCodes', () => {
     testContext.textarea.trigger(
       keydownEvent({
diff --git a/spec/frontend/behaviors/requires_input_spec.js b/spec/frontend/behaviors/requires_input_spec.js
index bb22133ae44..f2f68f17d1c 100644
--- a/spec/frontend/behaviors/requires_input_spec.js
+++ b/spec/frontend/behaviors/requires_input_spec.js
@@ -1,14 +1,19 @@
 import $ from 'jquery';
+import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import '~/behaviors/requires_input';
 
 describe('requiresInput', () => {
   let submitButton;
 
   beforeEach(() => {
-    loadFixtures('branches/new_branch.html');
+    loadHTMLFixture('branches/new_branch.html');
     submitButton = $('button[type="submit"]');
   });
 
+  afterEach(() => {
+    resetHTMLFixture();
+  });
+
   it('disables submit when any field is required', () => {
     $('.js-requires-input').requiresInput();
 
diff --git a/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js b/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js
index e1811247124..e6e587ff44b 100644
--- a/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js
+++ b/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import Mousetrap from 'mousetrap';
+import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import waitForPromises from 'helpers/wait_for_promises';
 import initCopyAsGFM, { CopyAsGFM } from '~/behaviors/markdown/copy_as_gfm';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
@@ -12,7 +12,6 @@ jest.mock('~/lib/utils/common_utils', () => ({
 
 describe('ShortcutsIssuable', () => {
   const snippetShowFixtureName = 'snippets/show.html';
-  const mrShowFixtureName = 'merge_requests/merge_request_of_current_user.html';
 
   beforeAll(() => {
     initCopyAsGFM();
@@ -25,7 +24,7 @@ describe('ShortcutsIssuable', () => {
     const FORM_SELECTOR = '.js-main-target-form .js-vue-comment-form';
 
     beforeEach(() => {
-      loadFixtures(snippetShowFixtureName);
+      loadHTMLFixture(snippetShowFixtureName);
       $('body').append(
         `<div class="js-main-target-form">
           <textarea class="js-vue-comment-form"></textarea>
@@ -40,6 +39,7 @@ describe('ShortcutsIssuable', () => {
       $(FORM_SELECTOR).remove();
 
       delete window.shortcut;
+      resetHTMLFixture();
     });
 
     // Stub getSelectedFragment to return a node with the provided HTML.
@@ -280,55 +280,4 @@ describe('ShortcutsIssuable', () => {
       });
     });
   });
-
-  describe('copyBranchName', () => {
-    let sidebarCollapsedBtn;
-    let sidebarExpandedBtn;
-
-    beforeEach(() => {
-      loadFixtures(mrShowFixtureName);
-
-      window.shortcut = new ShortcutsIssuable();
-
-      [sidebarCollapsedBtn, sidebarExpandedBtn] = document.querySelectorAll(
-        '.js-sidebar-source-branch button',
-      );
-
-      [sidebarCollapsedBtn, sidebarExpandedBtn].forEach((btn) => jest.spyOn(btn, 'click'));
-    });
-
-    afterEach(() => {
-      delete window.shortcut;
-    });
-
-    describe('when the sidebar is expanded', () => {
-      beforeEach(() => {
-        // simulate the applied CSS styles when the
-        // sidebar is expanded
-        sidebarCollapsedBtn.style.display = 'none';
-
-        Mousetrap.trigger('b');
-      });
-
-      it('clicks the "expanded" version of the copy source branch button', () => {
-        expect(sidebarExpandedBtn.click).toHaveBeenCalled();
-        expect(sidebarCollapsedBtn.click).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('when the sidebar is collapsed', () => {
-      beforeEach(() => {
-        // simulate the applied CSS styles when the
-        // sidebar is collapsed
-        sidebarExpandedBtn.style.display = 'none';
-
-        Mousetrap.trigger('b');
-      });
-
-      it('clicks the "collapsed" version of the copy source branch button', () => {
-        expect(sidebarCollapsedBtn.click).toHaveBeenCalled();
-        expect(sidebarExpandedBtn.click).not.toHaveBeenCalled();
-      });
-    });
-  });
 });