refactor(issue): Refactored issue tests from Karma to Jest

re #58827

Added changelog

Added sync false, and removed unneeded destroyers

4 files changed, 0 insertions, 597 deletions

diff --git a/spec/javascripts/vue_shared/components/issue/issue_assignees_spec.js b/spec/javascripts/vue_shared/components/issue/issue_assignees_spec.js
deleted file mode 100644
index 9eac75fac96..00000000000
--- a/spec/javascripts/vue_shared/components/issue/issue_assignees_spec.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import Vue from 'vue';
-
-import IssueAssignees from '~/vue_shared/components/issue/issue_assignees.vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockAssigneesList } from 'spec/boards/mock_data';
-
-const createComponent = (assignees = mockAssigneesList, cssClass = '') => {
-  const Component = Vue.extend(IssueAssignees);
-
-  return mountComponent(Component, {
-    assignees,
-    cssClass,
-  });
-};
-
-describe('IssueAssigneesComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('data', () => {
-    it('returns default data props', () => {
-      expect(vm.maxVisibleAssignees).toBe(2);
-      expect(vm.maxAssigneeAvatars).toBe(3);
-      expect(vm.maxAssignees).toBe(99);
-    });
-  });
-
-  describe('computed', () => {
-    describe('countOverLimit', () => {
-      it('should return difference between assignees count and maxVisibleAssignees', () => {
-        expect(vm.countOverLimit).toBe(mockAssigneesList.length - vm.maxVisibleAssignees);
-      });
-    });
-
-    describe('assigneesToShow', () => {
-      it('should return assignees containing only 2 items when count more than maxAssigneeAvatars', () => {
-        expect(vm.assigneesToShow.length).toBe(2);
-      });
-
-      it('should return all assignees as it is when count less than maxAssigneeAvatars', () => {
-        vm.assignees = mockAssigneesList.slice(0, 3); // Set 3 Assignees
-
-        expect(vm.assigneesToShow.length).toBe(3);
-      });
-    });
-
-    describe('assigneesCounterTooltip', () => {
-      it('should return string containing count of remaining assignees when count more than maxAssigneeAvatars', () => {
-        expect(vm.assigneesCounterTooltip).toBe('3 more assignees');
-      });
-    });
-
-    describe('shouldRenderAssigneesCounter', () => {
-      it('should return `false` when assignees count less than maxAssigneeAvatars', () => {
-        vm.assignees = mockAssigneesList.slice(0, 3); // Set 3 Assignees
-
-        expect(vm.shouldRenderAssigneesCounter).toBe(false);
-      });
-
-      it('should return `true` when assignees count more than maxAssigneeAvatars', () => {
-        expect(vm.shouldRenderAssigneesCounter).toBe(true);
-      });
-    });
-
-    describe('assigneeCounterLabel', () => {
-      it('should return count of additional assignees total assignees count more than maxAssigneeAvatars', () => {
-        expect(vm.assigneeCounterLabel).toBe('+3');
-      });
-    });
-  });
-
-  describe('methods', () => {
-    describe('avatarUrlTitle', () => {
-      it('returns string containing alt text for assignee avatar', () => {
-        expect(vm.avatarUrlTitle(mockAssigneesList[0])).toBe('Avatar for Terrell Graham');
-      });
-    });
-  });
-
-  describe('template', () => {
-    it('renders component root element with class `issue-assignees`', () => {
-      expect(vm.$el.classList.contains('issue-assignees')).toBe(true);
-    });
-
-    it('renders assignee avatars', () => {
-      expect(vm.$el.querySelectorAll('.user-avatar-link').length).toBe(2);
-    });
-
-    it('renders assignee tooltips', () => {
-      const tooltipText = vm.$el
-        .querySelectorAll('.user-avatar-link')[0]
-        .querySelector('.js-assignee-tooltip').innerText;
-
-      expect(tooltipText).toContain('Assignee');
-      expect(tooltipText).toContain('Terrell Graham');
-      expect(tooltipText).toContain('@monserrate.gleichner');
-    });
-
-    it('renders additional assignees count', () => {
-      const avatarCounterEl = vm.$el.querySelector('.avatar-counter');
-
-      expect(avatarCounterEl.innerText.trim()).toBe('+3');
-      expect(avatarCounterEl.getAttribute('data-original-title')).toBe('3 more assignees');
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/issue/issue_milestone_spec.js b/spec/javascripts/vue_shared/components/issue/issue_milestone_spec.js
deleted file mode 100644
index 8fca2637326..00000000000
--- a/spec/javascripts/vue_shared/components/issue/issue_milestone_spec.js
+++ /dev/null
@@ -1,234 +0,0 @@
-import Vue from 'vue';
-
-import IssueMilestone from '~/vue_shared/components/issue/issue_milestone.vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockMilestone } from 'spec/boards/mock_data';
-
-const createComponent = (milestone = mockMilestone) => {
-  const Component = Vue.extend(IssueMilestone);
-
-  return mountComponent(Component, {
-    milestone,
-  });
-};
-
-describe('IssueMilestoneComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('computed', () => {
-    describe('isMilestoneStarted', () => {
-      it('should return `false` when milestoneStart prop is not defined', done => {
-        const vmStartUndefined = createComponent(
-          Object.assign({}, mockMilestone, {
-            start_date: '',
-          }),
-        );
-
-        Vue.nextTick()
-          .then(() => {
-            expect(vmStartUndefined.isMilestoneStarted).toBe(false);
-          })
-          .then(done)
-          .catch(done.fail);
-
-        vmStartUndefined.$destroy();
-      });
-
-      it('should return `true` when milestone start date is past current date', done => {
-        const vmStarted = createComponent(
-          Object.assign({}, mockMilestone, {
-            start_date: '1990-07-22',
-          }),
-        );
-
-        Vue.nextTick()
-          .then(() => {
-            expect(vmStarted.isMilestoneStarted).toBe(true);
-          })
-          .then(done)
-          .catch(done.fail);
-
-        vmStarted.$destroy();
-      });
-    });
-
-    describe('isMilestonePastDue', () => {
-      it('should return `false` when milestoneDue prop is not defined', done => {
-        const vmDueUndefined = createComponent(
-          Object.assign({}, mockMilestone, {
-            due_date: '',
-          }),
-        );
-
-        Vue.nextTick()
-          .then(() => {
-            expect(vmDueUndefined.isMilestonePastDue).toBe(false);
-          })
-          .then(done)
-          .catch(done.fail);
-
-        vmDueUndefined.$destroy();
-      });
-
-      it('should return `true` when milestone due is past current date', done => {
-        const vmPastDue = createComponent(
-          Object.assign({}, mockMilestone, {
-            due_date: '1990-07-22',
-          }),
-        );
-
-        Vue.nextTick()
-          .then(() => {
-            expect(vmPastDue.isMilestonePastDue).toBe(true);
-          })
-          .then(done)
-          .catch(done.fail);
-
-        vmPastDue.$destroy();
-      });
-    });
-
-    describe('milestoneDatesAbsolute', () => {
-      it('returns string containing absolute milestone due date', () => {
-        expect(vm.milestoneDatesAbsolute).toBe('(December 31, 2019)');
-      });
-
-      it('returns string containing absolute milestone start date when due date is not present', done => {
-        const vmDueUndefined = createComponent(
-          Object.assign({}, mockMilestone, {
-            due_date: '',
-          }),
-        );
-
-        Vue.nextTick()
-          .then(() => {
-            expect(vmDueUndefined.milestoneDatesAbsolute).toBe('(January 1, 2018)');
-          })
-          .then(done)
-          .catch(done.fail);
-
-        vmDueUndefined.$destroy();
-      });
-
-      it('returns empty string when both milestone start and due dates are not present', done => {
-        const vmDatesUndefined = createComponent(
-          Object.assign({}, mockMilestone, {
-            start_date: '',
-            due_date: '',
-          }),
-        );
-
-        Vue.nextTick()
-          .then(() => {
-            expect(vmDatesUndefined.milestoneDatesAbsolute).toBe('');
-          })
-          .then(done)
-          .catch(done.fail);
-
-        vmDatesUndefined.$destroy();
-      });
-    });
-
-    describe('milestoneDatesHuman', () => {
-      it('returns string containing milestone due date when date is yet to be due', done => {
-        const vmFuture = createComponent(
-          Object.assign({}, mockMilestone, {
-            due_date: `${new Date().getFullYear() + 10}-01-01`,
-          }),
-        );
-
-        Vue.nextTick()
-          .then(() => {
-            expect(vmFuture.milestoneDatesHuman).toContain('years remaining');
-          })
-          .then(done)
-          .catch(done.fail);
-
-        vmFuture.$destroy();
-      });
-
-      it('returns string containing milestone start date when date has already started and due date is not present', done => {
-        const vmStarted = createComponent(
-          Object.assign({}, mockMilestone, {
-            start_date: '1990-07-22',
-            due_date: '',
-          }),
-        );
-
-        Vue.nextTick()
-          .then(() => {
-            expect(vmStarted.milestoneDatesHuman).toContain('Started');
-          })
-          .then(done)
-          .catch(done.fail);
-
-        vmStarted.$destroy();
-      });
-
-      it('returns string containing milestone start date when date is yet to start and due date is not present', done => {
-        const vmStarts = createComponent(
-          Object.assign({}, mockMilestone, {
-            start_date: `${new Date().getFullYear() + 10}-01-01`,
-            due_date: '',
-          }),
-        );
-
-        Vue.nextTick()
-          .then(() => {
-            expect(vmStarts.milestoneDatesHuman).toContain('Starts');
-          })
-          .then(done)
-          .catch(done.fail);
-
-        vmStarts.$destroy();
-      });
-
-      it('returns empty string when milestone start and due dates are not present', done => {
-        const vmDatesUndefined = createComponent(
-          Object.assign({}, mockMilestone, {
-            start_date: '',
-            due_date: '',
-          }),
-        );
-
-        Vue.nextTick()
-          .then(() => {
-            expect(vmDatesUndefined.milestoneDatesHuman).toBe('');
-          })
-          .then(done)
-          .catch(done.fail);
-
-        vmDatesUndefined.$destroy();
-      });
-    });
-  });
-
-  describe('template', () => {
-    it('renders component root element with class `issue-milestone-details`', () => {
-      expect(vm.$el.classList.contains('issue-milestone-details')).toBe(true);
-    });
-
-    it('renders milestone icon', () => {
-      expect(vm.$el.querySelector('svg use').getAttribute('xlink:href')).toContain('clock');
-    });
-
-    it('renders milestone title', () => {
-      expect(vm.$el.querySelector('.milestone-title').innerText.trim()).toBe(mockMilestone.title);
-    });
-
-    it('renders milestone tooltip', () => {
-      expect(vm.$el.querySelector('.js-item-milestone').innerText.trim()).toContain(
-        mockMilestone.title,
-      );
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js b/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js
deleted file mode 100644
index aa7d6ea2e34..00000000000
--- a/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import Vue from 'vue';
-import issueWarning from '~/vue_shared/components/issue/issue_warning.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-const IssueWarning = Vue.extend(issueWarning);
-
-function formatWarning(string) {
-  // Replace newlines with a space then replace multiple spaces with one space
-  return string
-    .trim()
-    .replace(/\n/g, ' ')
-    .replace(/\s\s+/g, ' ');
-}
-
-describe('Issue Warning Component', () => {
-  describe('isLocked', () => {
-    it('should render locked issue warning information', () => {
-      const vm = mountComponent(IssueWarning, {
-        isLocked: true,
-      });
-
-      expect(vm.$el.querySelector('.icon use').href.baseVal).toMatch(/lock$/);
-      expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual(
-        'This issue is locked. Only project members can comment.',
-      );
-    });
-  });
-
-  describe('isConfidential', () => {
-    it('should render confidential issue warning information', () => {
-      const vm = mountComponent(IssueWarning, {
-        isConfidential: true,
-      });
-
-      expect(vm.$el.querySelector('.icon use').href.baseVal).toMatch(/eye-slash$/);
-      expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual(
-        'This is a confidential issue. Your comment will not be visible to the public.',
-      );
-    });
-  });
-
-  describe('isLocked and isConfidential', () => {
-    it('should render locked and confidential issue warning information', () => {
-      const vm = mountComponent(IssueWarning, {
-        isLocked: true,
-        isConfidential: true,
-      });
-
-      expect(vm.$el.querySelector('.icon')).toBeFalsy();
-      expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual(
-        "This issue is confidential and locked. People without permission will never get a notification and won't be able to comment.",
-      );
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/issue/related_issuable_item_spec.js b/spec/javascripts/vue_shared/components/issue/related_issuable_item_spec.js
deleted file mode 100644
index 42198e92eea..00000000000
--- a/spec/javascripts/vue_shared/components/issue/related_issuable_item_spec.js
+++ /dev/null
@@ -1,194 +0,0 @@
-import Vue from 'vue';
-import { mount, createLocalVue } from '@vue/test-utils';
-import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue';
-import { defaultMilestone, defaultAssignees } from './related_issuable_mock_data';
-
-describe('RelatedIssuableItem', () => {
-  let wrapper;
-  const props = {
-    idKey: 1,
-    displayReference: 'gitlab-org/gitlab-test#1',
-    pathIdSeparator: '#',
-    path: `${gl.TEST_HOST}/path`,
-    title: 'title',
-    confidential: true,
-    dueDate: '1990-12-31',
-    weight: 10,
-    createdAt: '2018-12-01T00:00:00.00Z',
-    milestone: defaultMilestone,
-    assignees: defaultAssignees,
-    eventNamespace: 'relatedIssue',
-  };
-  const slots = {
-    dueDate: '<div class="js-due-date-slot"></div>',
-    weight: '<div class="js-weight-slot"></div>',
-  };
-
-  beforeEach(() => {
-    const localVue = createLocalVue();
-
-    wrapper = mount(localVue.extend(RelatedIssuableItem), {
-      localVue,
-      slots,
-      sync: false,
-      propsData: props,
-    });
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('contains issuable-info-container class when canReorder is false', () => {
-    expect(wrapper.props('canReorder')).toBe(false);
-    expect(wrapper.find('.issuable-info-container').exists()).toBe(true);
-  });
-
-  it('does not render token state', () => {
-    expect(wrapper.find('.text-secondary svg').exists()).toBe(false);
-  });
-
-  it('does not render remove button', () => {
-    expect(wrapper.find({ ref: 'removeButton' }).exists()).toBe(false);
-  });
-
-  describe('token title', () => {
-    it('links to computedPath', () => {
-      expect(wrapper.find('.item-title a').attributes('href')).toEqual(wrapper.props('path'));
-    });
-
-    it('renders confidential icon', () => {
-      expect(wrapper.find('.confidential-icon').exists()).toBe(true);
-    });
-
-    it('renders title', () => {
-      expect(wrapper.find('.item-title a').text()).toEqual(props.title);
-    });
-  });
-
-  describe('token state', () => {
-    let tokenState;
-
-    beforeEach(done => {
-      wrapper.setProps({ state: 'opened' });
-
-      Vue.nextTick(() => {
-        tokenState = wrapper.find('.issue-token-state-icon-open');
-
-        done();
-      });
-    });
-
-    it('renders if hasState', () => {
-      expect(tokenState.exists()).toBe(true);
-    });
-
-    it('renders state title', () => {
-      const stateTitle = tokenState.attributes('data-original-title');
-
-      expect(stateTitle).toContain('<span class="bold">Opened</span>');
-      expect(stateTitle).toContain(
-        '<span class="text-tertiary">Dec 1, 2018 12:00am GMT+0000</span>',
-      );
-    });
-
-    it('renders aria label', () => {
-      expect(tokenState.attributes('aria-label')).toEqual('opened');
-    });
-
-    it('renders open icon when open state', () => {
-      expect(tokenState.classes('issue-token-state-icon-open')).toBe(true);
-    });
-
-    it('renders close icon when close state', done => {
-      wrapper.setProps({
-        state: 'closed',
-        closedAt: '2018-12-01T00:00:00.00Z',
-      });
-
-      Vue.nextTick(() => {
-        expect(tokenState.classes('issue-token-state-icon-closed')).toBe(true);
-
-        done();
-      });
-    });
-  });
-
-  describe('token metadata', () => {
-    let tokenMetadata;
-
-    beforeEach(done => {
-      Vue.nextTick(() => {
-        tokenMetadata = wrapper.find('.item-meta');
-
-        done();
-      });
-    });
-
-    it('renders item path and ID', () => {
-      const pathAndID = tokenMetadata.find('.item-path-id').text();
-
-      expect(pathAndID).toContain('gitlab-org/gitlab-test');
-      expect(pathAndID).toContain('#1');
-    });
-
-    it('renders milestone icon and name', () => {
-      const milestoneIcon = tokenMetadata.find('.item-milestone svg use');
-      const milestoneTitle = tokenMetadata.find('.item-milestone .milestone-title');
-
-      expect(milestoneIcon.attributes('href')).toContain('clock');
-      expect(milestoneTitle.text()).toContain('Milestone title');
-    });
-
-    it('renders due date component', () => {
-      expect(tokenMetadata.find('.js-due-date-slot').exists()).toBe(true);
-    });
-
-    it('renders weight component', () => {
-      expect(tokenMetadata.find('.js-weight-slot').exists()).toBe(true);
-    });
-  });
-
-  describe('token assignees', () => {
-    it('renders assignees avatars', () => {
-      expect(wrapper.findAll('.item-assignees .user-avatar-link').length).toBe(2);
-      expect(wrapper.find('.item-assignees .avatar-counter').text()).toContain('+2');
-    });
-  });
-
-  describe('remove button', () => {
-    let removeBtn;
-
-    beforeEach(done => {
-      wrapper.setProps({ canRemove: true });
-      Vue.nextTick(() => {
-        removeBtn = wrapper.find({ ref: 'removeButton' });
-
-        done();
-      });
-    });
-
-    it('renders if canRemove', () => {
-      expect(removeBtn.exists()).toBe(true);
-    });
-
-    it('renders disabled button when removeDisabled', done => {
-      wrapper.vm.removeDisabled = true;
-
-      Vue.nextTick(() => {
-        expect(removeBtn.attributes('disabled')).toEqual('disabled');
-
-        done();
-      });
-    });
-
-    it('triggers onRemoveRequest when clicked', () => {
-      removeBtn.trigger('click');
-
-      const { relatedIssueRemoveRequest } = wrapper.emitted();
-
-      expect(relatedIssueRemoveRequest.length).toBe(1);
-      expect(relatedIssueRemoveRequest[0]).toEqual([props.idKey]);
-    });
-  });
-});