Merge branch 'refactor/58827-migrate-issue-spec-to-jest' into 'master'

Migrated issue spec files to Jest

Closes #58827

See merge request gitlab-org/gitlab-ce!27673

4 files changed, 543 insertions, 0 deletions

diff --git a/spec/frontend/vue_shared/components/issue/issue_assignees_spec.js b/spec/frontend/vue_shared/components/issue/issue_assignees_spec.js
new file mode 100644
index 00000000000..d1de98f4a15
--- /dev/null
+++ b/spec/frontend/vue_shared/components/issue/issue_assignees_spec.js
@@ -0,0 +1,114 @@
+import Vue from 'vue';
+
+import IssueAssignees from '~/vue_shared/components/issue/issue_assignees.vue';
+
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { mockAssigneesList } from '../../../../javascripts/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/frontend/vue_shared/components/issue/issue_milestone_spec.js b/spec/frontend/vue_shared/components/issue/issue_milestone_spec.js
new file mode 100644
index 00000000000..2e93ec412b9
--- /dev/null
+++ b/spec/frontend/vue_shared/components/issue/issue_milestone_spec.js
@@ -0,0 +1,172 @@
+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+
+import IssueMilestone from '~/vue_shared/components/issue/issue_milestone.vue';
+
+import { mockMilestone } from '../../../../javascripts/boards/mock_data';
+
+const createComponent = (milestone = mockMilestone) => {
+  const Component = Vue.extend(IssueMilestone);
+
+  return mount(Component, {
+    propsData: {
+      milestone,
+    },
+    sync: false,
+  });
+};
+
+describe('IssueMilestoneComponent', () => {
+  let wrapper;
+  let vm;
+
+  beforeEach(done => {
+    wrapper = createComponent();
+
+    ({ vm } = wrapper);
+
+    Vue.nextTick(done);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('computed', () => {
+    describe('isMilestoneStarted', () => {
+      it('should return `false` when milestoneStart prop is not defined', () => {
+        wrapper.setProps({
+          milestone: Object.assign({}, mockMilestone, {
+            start_date: '',
+          }),
+        });
+
+        expect(wrapper.vm.isMilestoneStarted).toBe(false);
+      });
+
+      it('should return `true` when milestone start date is past current date', () => {
+        wrapper.setProps({
+          milestone: Object.assign({}, mockMilestone, {
+            start_date: '1990-07-22',
+          }),
+        });
+
+        expect(wrapper.vm.isMilestoneStarted).toBe(true);
+      });
+    });
+
+    describe('isMilestonePastDue', () => {
+      it('should return `false` when milestoneDue prop is not defined', () => {
+        wrapper.setProps({
+          milestone: Object.assign({}, mockMilestone, {
+            due_date: '',
+          }),
+        });
+
+        expect(wrapper.vm.isMilestonePastDue).toBe(false);
+      });
+
+      it('should return `true` when milestone due is past current date', () => {
+        wrapper.setProps({
+          milestone: Object.assign({}, mockMilestone, {
+            due_date: '1990-07-22',
+          }),
+        });
+
+        expect(wrapper.vm.isMilestonePastDue).toBe(true);
+      });
+    });
+
+    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', () => {
+        wrapper.setProps({
+          milestone: Object.assign({}, mockMilestone, {
+            due_date: '',
+          }),
+        });
+
+        expect(wrapper.vm.milestoneDatesAbsolute).toBe('(January 1, 2018)');
+      });
+
+      it('returns empty string when both milestone start and due dates are not present', () => {
+        wrapper.setProps({
+          milestone: Object.assign({}, mockMilestone, {
+            start_date: '',
+            due_date: '',
+          }),
+        });
+
+        expect(wrapper.vm.milestoneDatesAbsolute).toBe('');
+      });
+    });
+
+    describe('milestoneDatesHuman', () => {
+      it('returns string containing milestone due date when date is yet to be due', () => {
+        wrapper.setProps({
+          milestone: Object.assign({}, mockMilestone, {
+            due_date: `${new Date().getFullYear() + 10}-01-01`,
+          }),
+        });
+
+        expect(wrapper.vm.milestoneDatesHuman).toContain('years remaining');
+      });
+
+      it('returns string containing milestone start date when date has already started and due date is not present', () => {
+        wrapper.setProps({
+          milestone: Object.assign({}, mockMilestone, {
+            start_date: '1990-07-22',
+            due_date: '',
+          }),
+        });
+
+        expect(wrapper.vm.milestoneDatesHuman).toContain('Started');
+      });
+
+      it('returns string containing milestone start date when date is yet to start and due date is not present', () => {
+        wrapper.setProps({
+          milestone: Object.assign({}, mockMilestone, {
+            start_date: `${new Date().getFullYear() + 10}-01-01`,
+            due_date: '',
+          }),
+        });
+
+        expect(wrapper.vm.milestoneDatesHuman).toContain('Starts');
+      });
+
+      it('returns empty string when milestone start and due dates are not present', () => {
+        wrapper.setProps({
+          milestone: Object.assign({}, mockMilestone, {
+            start_date: '',
+            due_date: '',
+          }),
+        });
+
+        expect(wrapper.vm.milestoneDatesHuman).toBe('');
+      });
+    });
+  });
+
+  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/frontend/vue_shared/components/issue/issue_warning_spec.js b/spec/frontend/vue_shared/components/issue/issue_warning_spec.js
new file mode 100644
index 00000000000..4a8de5fc4f1
--- /dev/null
+++ b/spec/frontend/vue_shared/components/issue/issue_warning_spec.js
@@ -0,0 +1,59 @@
+import Vue from 'vue';
+import issueWarning from '~/vue_shared/components/issue/issue_warning.vue';
+import mountComponent from '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').getAttributeNS('http://www.w3.org/1999/xlink', 'href'),
+      ).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').getAttributeNS('http://www.w3.org/1999/xlink', 'href'),
+      ).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/frontend/vue_shared/components/issue/related_issuable_item_spec.js b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
new file mode 100644
index 00000000000..e43d5301a50
--- /dev/null
+++ b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
@@ -0,0 +1,198 @@
+import Vue from 'vue';
+import { formatDate } from '~/lib/utils/datetime_utility';
+import { mount, createLocalVue } from '@vue/test-utils';
+import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue';
+import {
+  defaultAssignees,
+  defaultMilestone,
+} from '../../../../javascripts/vue_shared/components/issue/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');
+      const formatedCreateDate = formatDate(props.createdAt);
+
+      expect(stateTitle).toContain('<span class="bold">Opened</span>');
+
+      expect(stateTitle).toContain(`<span class="text-tertiary">${formatedCreateDate}</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]);
+    });
+  });
+});