Add latest changes from gitlab-org/gitlab@master

1 files changed, 21 insertions, 14 deletions

diff --git a/spec/frontend/projects/commit_box/info/load_branches_spec.js b/spec/frontend/projects/commit_box/info/load_branches_spec.js
index 8100200cbdd..184be09383c 100644
--- a/spec/frontend/projects/commit_box/info/load_branches_spec.js
+++ b/spec/frontend/projects/commit_box/info/load_branches_spec.js
@@ -1,5 +1,6 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
+import { setHTMLFixture } from 'helpers/fixtures';
 import waitForPromises from 'helpers/wait_for_promises';
 import { loadBranches } from '~/projects/commit_box/info/load_branches';
 
@@ -9,32 +10,38 @@ const mockBranchesRes =
 
 describe('~/projects/commit_box/info/load_branches', () => {
   let mock;
-  let el;
+
+  const getElInnerHtml = () => document.querySelector('.js-commit-box-info').innerHTML;
 
   beforeEach(() => {
+    setHTMLFixture(`
+      <div class="js-commit-box-info" data-commit-path="${mockCommitPath}">
+        <div class="commit-info branches">
+          <span class="spinner"/>
+        </div>
+      </div>`);
+
     mock = new MockAdapter(axios);
     mock.onGet(mockCommitPath).reply(200, mockBranchesRes);
-
-    el = document.createElement('div');
-    el.dataset.commitPath = mockCommitPath;
-    el.innerHTML = '<div class="commit-info branches"><span class="spinner"/></div>';
   });
 
   it('loads and renders branches info', async () => {
-    loadBranches(el);
+    loadBranches();
     await waitForPromises();
 
-    expect(el.innerHTML).toBe(`<div class="commit-info branches">${mockBranchesRes}</div>`);
+    expect(getElInnerHtml()).toMatchInterpolatedText(
+      `<div class="commit-info branches">${mockBranchesRes}</div>`,
+    );
   });
 
   it('does not load when no container is provided', async () => {
-    loadBranches(null);
+    loadBranches('.js-another-class');
     await waitForPromises();
 
     expect(mock.history.get).toHaveLength(0);
   });
 
-  describe('when braches request returns unsafe content', () => {
+  describe('when branches request returns unsafe content', () => {
     beforeEach(() => {
       mock
         .onGet(mockCommitPath)
@@ -42,25 +49,25 @@ describe('~/projects/commit_box/info/load_branches', () => {
     });
 
     it('displays sanitized html', async () => {
-      loadBranches(el);
+      loadBranches();
       await waitForPromises();
 
-      expect(el.innerHTML).toBe(
+      expect(getElInnerHtml()).toMatchInterpolatedText(
         '<div class="commit-info branches"><a href="/-/commits/master">master</a></div>',
       );
     });
   });
 
-  describe('when braches request fails', () => {
+  describe('when branches request fails', () => {
     beforeEach(() => {
       mock.onGet(mockCommitPath).reply(500, 'Error!');
     });
 
     it('attempts to load and renders an error', async () => {
-      loadBranches(el);
+      loadBranches();
       await waitForPromises();
 
-      expect(el.innerHTML).toBe(
+      expect(getElInnerHtml()).toMatchInterpolatedText(
         '<div class="commit-info branches">Failed to load branches. Please try again.</div>',
       );
     });