Add latest changes from gitlab-org/gitlab@master

2 files changed, 42 insertions, 0 deletions

diff --git a/spec/frontend/projects/commit_box/info/init_details_button_spec.js b/spec/frontend/projects/commit_box/info/init_details_button_spec.js
new file mode 100644
index 00000000000..8aaba31e23e
--- /dev/null
+++ b/spec/frontend/projects/commit_box/info/init_details_button_spec.js
@@ -0,0 +1,32 @@
+import { setHTMLFixture } from 'helpers/fixtures';
+import { initDetailsButton } from '~/projects/commit_box/info/init_details_button';
+
+const htmlFixture = `
+    <span>
+      <a href="#" class="js-details-expand">Expand</a>
+      <span class="js-details-content hide">Some branch</span>
+    </span>`;
+
+describe('~/projects/commit_box/info/init_details_button', () => {
+  const findExpandButton = () => document.querySelector('.js-details-expand');
+  const findContent = () => document.querySelector('.js-details-content');
+
+  beforeEach(() => {
+    setHTMLFixture(htmlFixture);
+    initDetailsButton();
+  });
+
+  describe('when clicking the expand button', () => {
+    it('renders the content by removing the `hide` class', () => {
+      expect(findContent().classList).toContain('hide');
+      findExpandButton().click();
+      expect(findContent().classList).not.toContain('hide');
+    });
+
+    it('hides the expand button by adding the `gl-display-none` class', () => {
+      expect(findExpandButton().classList).not.toContain('gl-display-none');
+      findExpandButton().click();
+      expect(findExpandButton().classList).toContain('gl-display-none');
+    });
+  });
+});
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 e49d92188ed..b00a6378e07 100644
--- a/spec/frontend/projects/commit_box/info/load_branches_spec.js
+++ b/spec/frontend/projects/commit_box/info/load_branches_spec.js
@@ -4,6 +4,9 @@ import { setHTMLFixture } from 'helpers/fixtures';
 import waitForPromises from 'helpers/wait_for_promises';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { loadBranches } from '~/projects/commit_box/info/load_branches';
+import { initDetailsButton } from '~/projects/commit_box/info/init_details_button';
+
+jest.mock('~/projects/commit_box/info/init_details_button');
 
 const mockCommitPath = '/commit/abcd/branches';
 const mockBranchesRes =
@@ -26,6 +29,13 @@ describe('~/projects/commit_box/info/load_branches', () => {
     mock.onGet(mockCommitPath).reply(HTTP_STATUS_OK, mockBranchesRes);
   });
 
+  it('initializes the details button', async () => {
+    loadBranches();
+    await waitForPromises();
+
+    expect(initDetailsButton).toHaveBeenCalled();
+  });
+
   it('loads and renders branches info', async () => {
     loadBranches();
     await waitForPromises();