1 files changed, 60 insertions, 61 deletions

diff --git a/spec/frontend/issue_spec.js b/spec/frontend/issue_spec.js
index fb6caef41e2..952ef54d286 100644
--- a/spec/frontend/issue_spec.js
+++ b/spec/frontend/issue_spec.js
@@ -1,91 +1,90 @@
+import { getByText } from '@testing-library/dom';
 import MockAdapter from 'axios-mock-adapter';
-import $ from 'jquery';
+import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
 import Issue from '~/issue';
 import axios from '~/lib/utils/axios_utils';
-import '~/lib/utils/text_utility';
 
 describe('Issue', () => {
-  let $boxClosed;
-  let $boxOpen;
   let testContext;
+  let mock;
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+    mock.onGet(/(.*)\/related_branches$/).reply(200, {});
+
     testContext = {};
+    testContext.issue = new Issue();
   });
 
-  preloadFixtures('issues/closed-issue.html');
-  preloadFixtures('issues/open-issue.html');
-
-  function expectVisibility($element, shouldBeVisible) {
-    if (shouldBeVisible) {
-      expect($element).not.toHaveClass('hidden');
-    } else {
-      expect($element).toHaveClass('hidden');
-    }
-  }
-
-  function expectIssueState(isIssueOpen) {
-    expectVisibility($boxClosed, !isIssueOpen);
-    expectVisibility($boxOpen, isIssueOpen);
-  }
-
-  function findElements() {
-    $boxClosed = $('div.status-box-issue-closed');
-
-    expect($boxClosed).toExist();
-    expect($boxClosed).toHaveText('Closed');
+  afterEach(() => {
+    mock.restore();
+    testContext.issue.dispose();
+  });
 
-    $boxOpen = $('div.status-box-open');
+  const getIssueCounter = () => document.querySelector('.issue_counter');
+  const getOpenStatusBox = () =>
+    getByText(document, (_, el) => el.textContent.match(/Open/), {
+      selector: '.status-box-open',
+    });
+  const getClosedStatusBox = () =>
+    getByText(document, (_, el) => el.textContent.match(/Closed/), {
+      selector: '.status-box-issue-closed',
+    });
 
-    expect($boxOpen).toExist();
-    expect($boxOpen).toHaveText('Open');
-  }
+  describe.each`
+    desc                                | isIssueInitiallyOpen | expectedCounterText
+    ${'with an initially open issue'}   | ${true}              | ${'1,000'}
+    ${'with an initially closed issue'} | ${false}             | ${'1,002'}
+  `('$desc', ({ isIssueInitiallyOpen, expectedCounterText }) => {
+    beforeEach(() => {
+      if (isIssueInitiallyOpen) {
+        loadFixtures('issues/open-issue.html');
+      } else {
+        loadFixtures('issues/closed-issue.html');
+      }
 
-  [true, false].forEach((isIssueInitiallyOpen) => {
-    describe(`with ${isIssueInitiallyOpen ? 'open' : 'closed'} issue`, () => {
-      const action = isIssueInitiallyOpen ? 'close' : 'reopen';
-      let mock;
+      testContext.issueCounter = getIssueCounter();
+      testContext.statusBoxClosed = getClosedStatusBox();
+      testContext.statusBoxOpen = getOpenStatusBox();
 
-      function setup() {
-        testContext.issue = new Issue();
-        expectIssueState(isIssueInitiallyOpen);
+      testContext.issueCounter.textContent = '1,001';
+    });
 
-        testContext.$projectIssuesCounter = $('.issue_counter').first();
-        testContext.$projectIssuesCounter.text('1,001');
+    it(`has the proper visible status box when ${isIssueInitiallyOpen ? 'open' : 'closed'}`, () => {
+      if (isIssueInitiallyOpen) {
+        expect(testContext.statusBoxClosed).toHaveClass('hidden');
+        expect(testContext.statusBoxOpen).not.toHaveClass('hidden');
+      } else {
+        expect(testContext.statusBoxClosed).not.toHaveClass('hidden');
+        expect(testContext.statusBoxOpen).toHaveClass('hidden');
       }
+    });
 
+    describe('when vue app triggers change', () => {
       beforeEach(() => {
-        if (isIssueInitiallyOpen) {
-          loadFixtures('issues/open-issue.html');
-        } else {
-          loadFixtures('issues/closed-issue.html');
-        }
-
-        mock = new MockAdapter(axios);
-        mock.onGet(/(.*)\/related_branches$/).reply(200, {});
-        jest.spyOn(axios, 'get');
-
-        findElements(isIssueInitiallyOpen);
-      });
-
-      afterEach(() => {
-        mock.restore();
-        $('div.flash-alert').remove();
-      });
-
-      it(`${action}s the issue on dispatch of issuable_vue_app:change event`, () => {
-        setup();
-
         document.dispatchEvent(
-          new CustomEvent('issuable_vue_app:change', {
+          new CustomEvent(EVENT_ISSUABLE_VUE_APP_CHANGE, {
             detail: {
               data: { id: 1 },
               isClosed: isIssueInitiallyOpen,
             },
           }),
         );
+      });
+
+      it('displays correct status box', () => {
+        if (isIssueInitiallyOpen) {
+          expect(testContext.statusBoxClosed).not.toHaveClass('hidden');
+          expect(testContext.statusBoxOpen).toHaveClass('hidden');
+        } else {
+          expect(testContext.statusBoxClosed).toHaveClass('hidden');
+          expect(testContext.statusBoxOpen).not.toHaveClass('hidden');
+        }
+      });
 
-        expectIssueState(!isIssueInitiallyOpen);
+      it('updates issueCounter text', () => {
+        expect(testContext.issueCounter).toBeVisible();
+        expect(testContext.issueCounter).toHaveText(expectedCounterText);
       });
     });
   });