diff options
author | Kushal Pandya <kushalspandya@gmail.com> | 2019-04-26 07:48:35 +0300 |
---|---|---|
committer | Kushal Pandya <kushalspandya@gmail.com> | 2019-04-26 07:48:35 +0300 |
commit | c4340c652beee10bf840f2a9ad52208715fcd085 (patch) | |
tree | 950490f881aa93718539fe22b3abf7c0f31a493e /spec/frontend | |
parent | d7b0dd8f7d0e51465ead9dbc4348efae8c672952 (diff) | |
parent | 396dbbd415e12d469f6aecaac4144e74fb8e7ec0 (diff) |
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
Diffstat (limited to 'spec/frontend')
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]); + }); + }); +}); |