diff options
Diffstat (limited to 'spec/javascripts/sidebar')
-rw-r--r-- | spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js | 278 | ||||
-rw-r--r-- | spec/javascripts/sidebar/lock/edit_form_buttons_spec.js | 32 | ||||
-rw-r--r-- | spec/javascripts/sidebar/lock/lock_issue_sidebar_spec.js | 99 | ||||
-rw-r--r-- | spec/javascripts/sidebar/mock_data.js | 7 | ||||
-rw-r--r-- | spec/javascripts/sidebar/participants_spec.js | 202 | ||||
-rw-r--r-- | spec/javascripts/sidebar/sidebar_mediator_spec.js | 134 | ||||
-rw-r--r-- | spec/javascripts/sidebar/sidebar_move_issue_spec.js | 166 | ||||
-rw-r--r-- | spec/javascripts/sidebar/sidebar_subscriptions_spec.js | 38 | ||||
-rw-r--r-- | spec/javascripts/sidebar/subscriptions_spec.js | 100 |
9 files changed, 0 insertions, 1056 deletions
diff --git a/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js b/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js deleted file mode 100644 index 1580f32cfca..00000000000 --- a/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js +++ /dev/null @@ -1,278 +0,0 @@ -import Vue from 'vue'; - -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue'; - -describe('Issuable Time Tracker', () => { - let initialData; - let vm; - - const initTimeTrackingComponent = ({ - timeEstimate, - timeSpent, - timeEstimateHumanReadable, - timeSpentHumanReadable, - limitToHours, - }) => { - setFixtures(` - <div> - <div id="mock-container"></div> - </div> - `); - - initialData = { - timeEstimate, - timeSpent, - humanTimeEstimate: timeEstimateHumanReadable, - humanTimeSpent: timeSpentHumanReadable, - limitToHours: Boolean(limitToHours), - rootPath: '/', - }; - - const TimeTrackingComponent = Vue.extend({ - ...TimeTracker, - components: { - ...TimeTracker.components, - transition: { - // disable animations - template: '<div><slot></slot></div>', - }, - }, - }); - vm = mountComponent(TimeTrackingComponent, initialData, '#mock-container'); - }; - - afterEach(() => { - vm.$destroy(); - }); - - describe('Initialization', () => { - beforeEach(() => { - initTimeTrackingComponent({ - timeEstimate: 10000, // 2h 46m - timeSpent: 5000, // 1h 23m - timeEstimateHumanReadable: '2h 46m', - timeSpentHumanReadable: '1h 23m', - }); - }); - - it('should return something defined', () => { - expect(vm).toBeDefined(); - }); - - it('should correctly set timeEstimate', done => { - Vue.nextTick(() => { - expect(vm.timeEstimate).toBe(initialData.timeEstimate); - done(); - }); - }); - - it('should correctly set time_spent', done => { - Vue.nextTick(() => { - expect(vm.timeSpent).toBe(initialData.timeSpent); - done(); - }); - }); - }); - - describe('Content Display', () => { - describe('Panes', () => { - describe('Comparison pane', () => { - beforeEach(() => { - initTimeTrackingComponent({ - timeEstimate: 100000, // 1d 3h - timeSpent: 5000, // 1h 23m - timeEstimateHumanReadable: '1d 3h', - timeSpentHumanReadable: '1h 23m', - }); - }); - - it('should show the "Comparison" pane when timeEstimate and time_spent are truthy', done => { - Vue.nextTick(() => { - expect(vm.showComparisonState).toBe(true); - const $comparisonPane = vm.$el.querySelector('.time-tracking-comparison-pane'); - - expect($comparisonPane).toBeVisible(); - done(); - }); - }); - - it('should show full times when the sidebar is collapsed', done => { - Vue.nextTick(() => { - const timeTrackingText = vm.$el.querySelector('.time-tracking-collapsed-summary span') - .innerText; - - expect(timeTrackingText).toBe('1h 23m / 1d 3h'); - done(); - }); - }); - - describe('Remaining meter', () => { - it('should display the remaining meter with the correct width', done => { - Vue.nextTick(() => { - expect( - vm.$el.querySelector('.time-tracking-comparison-pane .progress[value="5"]'), - ).not.toBeNull(); - done(); - }); - }); - - it('should display the remaining meter with the correct background color when within estimate', done => { - Vue.nextTick(() => { - expect( - vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="primary"]'), - ).not.toBeNull(); - done(); - }); - }); - - it('should display the remaining meter with the correct background color when over estimate', done => { - vm.timeEstimate = 10000; // 2h 46m - vm.timeSpent = 20000000; // 231 days - Vue.nextTick(() => { - expect( - vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="danger"]'), - ).not.toBeNull(); - done(); - }); - }); - }); - }); - - describe('Comparison pane when limitToHours is true', () => { - beforeEach(() => { - initTimeTrackingComponent({ - timeEstimate: 100000, // 1d 3h - timeSpent: 5000, // 1h 23m - timeEstimateHumanReadable: '', - timeSpentHumanReadable: '', - limitToHours: true, - }); - }); - - it('should show the correct tooltip text', done => { - Vue.nextTick(() => { - expect(vm.showComparisonState).toBe(true); - const $title = vm.$el.querySelector('.time-tracking-content .compare-meter').dataset - .originalTitle; - - expect($title).toBe('Time remaining: 26h 23m'); - done(); - }); - }); - }); - - describe('Estimate only pane', () => { - beforeEach(() => { - initTimeTrackingComponent({ - timeEstimate: 10000, // 2h 46m - timeSpent: 0, - timeEstimateHumanReadable: '2h 46m', - timeSpentHumanReadable: '', - }); - }); - - it('should display the human readable version of time estimated', done => { - Vue.nextTick(() => { - const estimateText = vm.$el.querySelector('.time-tracking-estimate-only-pane') - .innerText; - const correctText = 'Estimated: 2h 46m'; - - expect(estimateText).toBe(correctText); - done(); - }); - }); - }); - - describe('Spent only pane', () => { - beforeEach(() => { - initTimeTrackingComponent({ - timeEstimate: 0, - timeSpent: 5000, // 1h 23m - timeEstimateHumanReadable: '2h 46m', - timeSpentHumanReadable: '1h 23m', - }); - }); - - it('should display the human readable version of time spent', done => { - Vue.nextTick(() => { - const spentText = vm.$el.querySelector('.time-tracking-spend-only-pane').innerText; - const correctText = 'Spent: 1h 23m'; - - expect(spentText).toBe(correctText); - done(); - }); - }); - }); - - describe('No time tracking pane', () => { - beforeEach(() => { - initTimeTrackingComponent({ - timeEstimate: 0, - timeSpent: 0, - timeEstimateHumanReadable: '', - timeSpentHumanReadable: '', - }); - }); - - it('should only show the "No time tracking" pane when both timeEstimate and time_spent are falsey', done => { - Vue.nextTick(() => { - const $noTrackingPane = vm.$el.querySelector('.time-tracking-no-tracking-pane'); - const noTrackingText = $noTrackingPane.innerText; - const correctText = 'No estimate or time spent'; - - expect(vm.showNoTimeTrackingState).toBe(true); - expect($noTrackingPane).toBeVisible(); - expect(noTrackingText).toBe(correctText); - done(); - }); - }); - }); - - describe('Help pane', () => { - const helpButton = () => vm.$el.querySelector('.help-button'); - const closeHelpButton = () => vm.$el.querySelector('.close-help-button'); - const helpPane = () => vm.$el.querySelector('.time-tracking-help-state'); - - beforeEach(done => { - initTimeTrackingComponent({ timeEstimate: 0, timeSpent: 0 }); - - Vue.nextTick() - .then(done) - .catch(done.fail); - }); - - it('should not show the "Help" pane by default', () => { - expect(vm.showHelpState).toBe(false); - expect(helpPane()).toBeNull(); - }); - - it('should show the "Help" pane when help button is clicked', done => { - helpButton().click(); - - Vue.nextTick() - .then(() => { - expect(vm.showHelpState).toBe(true); - expect(helpPane()).toBeVisible(); - }) - .then(done) - .catch(done.fail); - }); - - it('should not show the "Help" pane when help button is clicked and then closed', done => { - helpButton().click(); - - Vue.nextTick() - .then(() => closeHelpButton().click()) - .then(() => Vue.nextTick()) - .then(() => { - expect(vm.showHelpState).toBe(false); - expect(helpPane()).toBeNull(); - }) - .then(done) - .catch(done.fail); - }); - }); - }); - }); -}); diff --git a/spec/javascripts/sidebar/lock/edit_form_buttons_spec.js b/spec/javascripts/sidebar/lock/edit_form_buttons_spec.js deleted file mode 100644 index c532554efb4..00000000000 --- a/spec/javascripts/sidebar/lock/edit_form_buttons_spec.js +++ /dev/null @@ -1,32 +0,0 @@ -import Vue from 'vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import editFormButtons from '~/sidebar/components/lock/edit_form_buttons.vue'; - -describe('EditFormButtons', () => { - let vm1; - let vm2; - - beforeEach(() => { - const Component = Vue.extend(editFormButtons); - const toggleForm = () => {}; - const updateLockedAttribute = () => {}; - - vm1 = mountComponent(Component, { - isLocked: true, - toggleForm, - updateLockedAttribute, - }); - - vm2 = mountComponent(Component, { - isLocked: false, - toggleForm, - updateLockedAttribute, - }); - }); - - it('renders unlock or lock text based on locked state', () => { - expect(vm1.$el.innerHTML.includes('Unlock')).toBe(true); - - expect(vm2.$el.innerHTML.includes('Lock')).toBe(true); - }); -}); diff --git a/spec/javascripts/sidebar/lock/lock_issue_sidebar_spec.js b/spec/javascripts/sidebar/lock/lock_issue_sidebar_spec.js deleted file mode 100644 index 5296908afe2..00000000000 --- a/spec/javascripts/sidebar/lock/lock_issue_sidebar_spec.js +++ /dev/null @@ -1,99 +0,0 @@ -import Vue from 'vue'; -import { mockTracking, triggerEvent } from 'spec/helpers/tracking_helper'; -import lockIssueSidebar from '~/sidebar/components/lock/lock_issue_sidebar.vue'; - -describe('LockIssueSidebar', () => { - let vm1; - let vm2; - - beforeEach(() => { - const Component = Vue.extend(lockIssueSidebar); - - const mediator = { - service: { - update: Promise.resolve(true), - }, - - store: { - isLockDialogOpen: false, - }, - }; - - vm1 = new Component({ - propsData: { - isLocked: true, - isEditable: true, - mediator, - issuableType: 'issue', - }, - }).$mount(); - - vm2 = new Component({ - propsData: { - isLocked: false, - isEditable: false, - mediator, - issuableType: 'merge_request', - }, - }).$mount(); - }); - - it('shows if locked and/or editable', () => { - expect(vm1.$el.innerHTML.includes('Edit')).toBe(true); - - expect(vm1.$el.innerHTML.includes('Locked')).toBe(true); - - expect(vm2.$el.innerHTML.includes('Unlocked')).toBe(true); - }); - - it('displays the edit form when editable', done => { - expect(vm1.isLockDialogOpen).toBe(false); - - vm1.$el.querySelector('.lock-edit').click(); - - expect(vm1.isLockDialogOpen).toBe(true); - - vm1.$nextTick(() => { - expect(vm1.$el.innerHTML.includes('Unlock this issue?')).toBe(true); - - done(); - }); - }); - - it('tracks an event when "Edit" is clicked', () => { - const spy = mockTracking('_category_', vm1.$el, spyOn); - triggerEvent('.lock-edit'); - - expect(spy).toHaveBeenCalledWith('_category_', 'click_edit_button', { - label: 'right_sidebar', - property: 'lock_issue', - }); - }); - - it('displays the edit form when opened from collapsed state', done => { - expect(vm1.isLockDialogOpen).toBe(false); - - vm1.$el.querySelector('.sidebar-collapsed-icon').click(); - - expect(vm1.isLockDialogOpen).toBe(true); - - setTimeout(() => { - expect(vm1.$el.innerHTML.includes('Unlock this issue?')).toBe(true); - - done(); - }); - }); - - it('does not display the edit form when opened from collapsed state if not editable', done => { - expect(vm2.isLockDialogOpen).toBe(false); - - vm2.$el.querySelector('.sidebar-collapsed-icon').click(); - - Vue.nextTick() - .then(() => { - expect(vm2.isLockDialogOpen).toBe(false); - }) - .then(done) - .catch(done.fail); - }); -}); diff --git a/spec/javascripts/sidebar/mock_data.js b/spec/javascripts/sidebar/mock_data.js deleted file mode 100644 index c869ff96933..00000000000 --- a/spec/javascripts/sidebar/mock_data.js +++ /dev/null @@ -1,7 +0,0 @@ -// No new code should be added to this file. Instead, modify the -// file this one re-exports from. For more detail about why, see: -// https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/31349 - -import mockData from '../../../spec/frontend/sidebar/mock_data'; - -export default mockData; diff --git a/spec/javascripts/sidebar/participants_spec.js b/spec/javascripts/sidebar/participants_spec.js deleted file mode 100644 index 7e80e86f8ca..00000000000 --- a/spec/javascripts/sidebar/participants_spec.js +++ /dev/null @@ -1,202 +0,0 @@ -import Vue from 'vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import participants from '~/sidebar/components/participants/participants.vue'; - -const PARTICIPANT = { - id: 1, - state: 'active', - username: 'marcene', - name: 'Allie Will', - web_url: 'foo.com', - avatar_url: 'gravatar.com/avatar/xxx', -}; - -const PARTICIPANT_LIST = [PARTICIPANT, { ...PARTICIPANT, id: 2 }, { ...PARTICIPANT, id: 3 }]; - -describe('Participants', function() { - let vm; - let Participants; - - beforeEach(() => { - Participants = Vue.extend(participants); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('collapsed sidebar state', () => { - it('shows loading spinner when loading', () => { - vm = mountComponent(Participants, { - loading: true, - }); - - expect(vm.$el.querySelector('.js-participants-collapsed-loading-icon')).toBeDefined(); - }); - - it('shows participant count when given', () => { - vm = mountComponent(Participants, { - loading: false, - participants: PARTICIPANT_LIST, - }); - const countEl = vm.$el.querySelector('.js-participants-collapsed-count'); - - expect(countEl.textContent.trim()).toBe(`${PARTICIPANT_LIST.length}`); - }); - - it('shows full participant count when there are hidden participants', () => { - vm = mountComponent(Participants, { - loading: false, - participants: PARTICIPANT_LIST, - numberOfLessParticipants: 1, - }); - const countEl = vm.$el.querySelector('.js-participants-collapsed-count'); - - expect(countEl.textContent.trim()).toBe(`${PARTICIPANT_LIST.length}`); - }); - }); - - describe('expanded sidebar state', () => { - it('shows loading spinner when loading', () => { - vm = mountComponent(Participants, { - loading: true, - }); - - expect(vm.$el.querySelector('.js-participants-expanded-loading-icon')).toBeDefined(); - }); - - it('when only showing visible participants, shows an avatar only for each participant under the limit', done => { - const numberOfLessParticipants = 2; - vm = mountComponent(Participants, { - loading: false, - participants: PARTICIPANT_LIST, - numberOfLessParticipants, - }); - vm.isShowingMoreParticipants = false; - - Vue.nextTick() - .then(() => { - const participantEls = vm.$el.querySelectorAll('.js-participants-author'); - - expect(participantEls.length).toBe(numberOfLessParticipants); - }) - .then(done) - .catch(done.fail); - }); - - it('when only showing all participants, each has an avatar', done => { - const numberOfLessParticipants = 2; - vm = mountComponent(Participants, { - loading: false, - participants: PARTICIPANT_LIST, - numberOfLessParticipants, - }); - vm.isShowingMoreParticipants = true; - - Vue.nextTick() - .then(() => { - const participantEls = vm.$el.querySelectorAll('.js-participants-author'); - - expect(participantEls.length).toBe(PARTICIPANT_LIST.length); - }) - .then(done) - .catch(done.fail); - }); - - it('does not have more participants link when they can all be shown', () => { - const numberOfLessParticipants = 100; - vm = mountComponent(Participants, { - loading: false, - participants: PARTICIPANT_LIST, - numberOfLessParticipants, - }); - const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button'); - - expect(PARTICIPANT_LIST.length).toBeLessThan(numberOfLessParticipants); - expect(moreParticipantLink).toBeNull(); - }); - - it('when too many participants, has more participants link to show more', done => { - vm = mountComponent(Participants, { - loading: false, - participants: PARTICIPANT_LIST, - numberOfLessParticipants: 2, - }); - vm.isShowingMoreParticipants = false; - - Vue.nextTick() - .then(() => { - const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button'); - - expect(moreParticipantLink.textContent.trim()).toBe('+ 1 more'); - }) - .then(done) - .catch(done.fail); - }); - - it('when too many participants and already showing them, has more participants link to show less', done => { - vm = mountComponent(Participants, { - loading: false, - participants: PARTICIPANT_LIST, - numberOfLessParticipants: 2, - }); - vm.isShowingMoreParticipants = true; - - Vue.nextTick() - .then(() => { - const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button'); - - expect(moreParticipantLink.textContent.trim()).toBe('- show less'); - }) - .then(done) - .catch(done.fail); - }); - - it('clicking more participants link emits event', () => { - vm = mountComponent(Participants, { - loading: false, - participants: PARTICIPANT_LIST, - numberOfLessParticipants: 2, - }); - const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button'); - - expect(vm.isShowingMoreParticipants).toBe(false); - - moreParticipantLink.click(); - - expect(vm.isShowingMoreParticipants).toBe(true); - }); - - it('clicking on participants icon emits `toggleSidebar` event', () => { - vm = mountComponent(Participants, { - loading: false, - participants: PARTICIPANT_LIST, - numberOfLessParticipants: 2, - }); - spyOn(vm, '$emit'); - - const participantsIconEl = vm.$el.querySelector('.sidebar-collapsed-icon'); - - participantsIconEl.click(); - - expect(vm.$emit).toHaveBeenCalledWith('toggleSidebar'); - }); - }); - - describe('when not showing participants label', () => { - beforeEach(() => { - vm = mountComponent(Participants, { - participants: PARTICIPANT_LIST, - showParticipantLabel: false, - }); - }); - - it('does not show sidebar collapsed icon', () => { - expect(vm.$el.querySelector('.sidebar-collapsed-icon')).not.toBeTruthy(); - }); - - it('does not show participants label title', () => { - expect(vm.$el.querySelector('.title')).not.toBeTruthy(); - }); - }); -}); diff --git a/spec/javascripts/sidebar/sidebar_mediator_spec.js b/spec/javascripts/sidebar/sidebar_mediator_spec.js deleted file mode 100644 index 2aa30fd1cc6..00000000000 --- a/spec/javascripts/sidebar/sidebar_mediator_spec.js +++ /dev/null @@ -1,134 +0,0 @@ -import MockAdapter from 'axios-mock-adapter'; -import axios from '~/lib/utils/axios_utils'; -import SidebarMediator from '~/sidebar/sidebar_mediator'; -import SidebarStore from '~/sidebar/stores/sidebar_store'; -import SidebarService, { gqClient } from '~/sidebar/services/sidebar_service'; -import Mock from './mock_data'; - -const { mediator: mediatorMockData } = Mock; - -describe('Sidebar mediator', function() { - let mock; - - beforeEach(() => { - mock = new MockAdapter(axios); - - this.mediator = new SidebarMediator(mediatorMockData); - }); - - afterEach(() => { - SidebarService.singleton = null; - SidebarStore.singleton = null; - SidebarMediator.singleton = null; - mock.restore(); - }); - - it('assigns yourself ', () => { - this.mediator.assignYourself(); - - expect(this.mediator.store.currentUser).toEqual(mediatorMockData.currentUser); - expect(this.mediator.store.assignees[0]).toEqual(mediatorMockData.currentUser); - }); - - it('saves assignees', done => { - mock.onPut(mediatorMockData.endpoint).reply(200, {}); - this.mediator - .saveAssignees('issue[assignee_ids]') - .then(resp => { - expect(resp.status).toEqual(200); - done(); - }) - .catch(done.fail); - }); - - it('fetches the data', done => { - const mockData = Mock.responseMap.GET[mediatorMockData.endpoint]; - mock.onGet(mediatorMockData.endpoint).reply(200, mockData); - - const mockGraphQlData = Mock.graphQlResponseData; - spyOn(gqClient, 'query').and.returnValue({ - data: mockGraphQlData, - }); - - spyOn(this.mediator, 'processFetchedData').and.callThrough(); - - this.mediator - .fetch() - .then(() => { - expect(this.mediator.processFetchedData).toHaveBeenCalledWith(mockData, mockGraphQlData); - }) - .then(done) - .catch(done.fail); - }); - - it('processes fetched data', () => { - const mockData = Mock.responseMap.GET[mediatorMockData.endpoint]; - this.mediator.processFetchedData(mockData); - - expect(this.mediator.store.assignees).toEqual(mockData.assignees); - expect(this.mediator.store.humanTimeEstimate).toEqual(mockData.human_time_estimate); - expect(this.mediator.store.humanTotalTimeSpent).toEqual(mockData.human_total_time_spent); - expect(this.mediator.store.participants).toEqual(mockData.participants); - expect(this.mediator.store.subscribed).toEqual(mockData.subscribed); - expect(this.mediator.store.timeEstimate).toEqual(mockData.time_estimate); - expect(this.mediator.store.totalTimeSpent).toEqual(mockData.total_time_spent); - }); - - it('sets moveToProjectId', () => { - const projectId = 7; - spyOn(this.mediator.store, 'setMoveToProjectId').and.callThrough(); - - this.mediator.setMoveToProjectId(projectId); - - expect(this.mediator.store.setMoveToProjectId).toHaveBeenCalledWith(projectId); - }); - - it('fetches autocomplete projects', done => { - const searchTerm = 'foo'; - mock.onGet(mediatorMockData.projectsAutocompleteEndpoint).reply(200, {}); - spyOn(this.mediator.service, 'getProjectsAutocomplete').and.callThrough(); - spyOn(this.mediator.store, 'setAutocompleteProjects').and.callThrough(); - - this.mediator - .fetchAutocompleteProjects(searchTerm) - .then(() => { - expect(this.mediator.service.getProjectsAutocomplete).toHaveBeenCalledWith(searchTerm); - expect(this.mediator.store.setAutocompleteProjects).toHaveBeenCalled(); - }) - .then(done) - .catch(done.fail); - }); - - it('moves issue', done => { - const mockData = Mock.responseMap.POST[mediatorMockData.moveIssueEndpoint]; - const moveToProjectId = 7; - mock.onPost(mediatorMockData.moveIssueEndpoint).reply(200, mockData); - this.mediator.store.setMoveToProjectId(moveToProjectId); - spyOn(this.mediator.service, 'moveIssue').and.callThrough(); - const visitUrl = spyOnDependency(SidebarMediator, 'visitUrl'); - - this.mediator - .moveIssue() - .then(() => { - expect(this.mediator.service.moveIssue).toHaveBeenCalledWith(moveToProjectId); - expect(visitUrl).toHaveBeenCalledWith(mockData.web_url); - }) - .then(done) - .catch(done.fail); - }); - - it('toggle subscription', done => { - this.mediator.store.setSubscribedState(false); - mock.onPost(mediatorMockData.toggleSubscriptionEndpoint).reply(200, {}); - spyOn(this.mediator.service, 'toggleSubscription').and.callThrough(); - - this.mediator - .toggleSubscription() - .then(() => { - expect(this.mediator.service.toggleSubscription).toHaveBeenCalled(); - expect(this.mediator.store.subscribed).toEqual(true); - }) - .then(done) - .catch(done.fail); - }); -}); diff --git a/spec/javascripts/sidebar/sidebar_move_issue_spec.js b/spec/javascripts/sidebar/sidebar_move_issue_spec.js deleted file mode 100644 index ec712450f2e..00000000000 --- a/spec/javascripts/sidebar/sidebar_move_issue_spec.js +++ /dev/null @@ -1,166 +0,0 @@ -import $ from 'jquery'; -import MockAdapter from 'axios-mock-adapter'; -import axios from '~/lib/utils/axios_utils'; -import SidebarMediator from '~/sidebar/sidebar_mediator'; -import SidebarStore from '~/sidebar/stores/sidebar_store'; -import SidebarService from '~/sidebar/services/sidebar_service'; -import SidebarMoveIssue from '~/sidebar/lib/sidebar_move_issue'; -import Mock from './mock_data'; - -describe('SidebarMoveIssue', function() { - let mock; - - beforeEach(() => { - mock = new MockAdapter(axios); - const mockData = Mock.responseMap.GET['/autocomplete/projects?project_id=15']; - mock.onGet('/autocomplete/projects?project_id=15').reply(200, mockData); - this.mediator = new SidebarMediator(Mock.mediator); - this.$content = $(` - <div class="dropdown"> - <div class="js-toggle"></div> - <div class="dropdown-menu"> - <div class="dropdown-content"></div> - </div> - <div class="js-confirm-button"></div> - </div> - `); - this.$toggleButton = this.$content.find('.js-toggle'); - this.$confirmButton = this.$content.find('.js-confirm-button'); - - this.sidebarMoveIssue = new SidebarMoveIssue( - this.mediator, - this.$toggleButton, - this.$confirmButton, - ); - this.sidebarMoveIssue.init(); - }); - - afterEach(() => { - SidebarService.singleton = null; - SidebarStore.singleton = null; - SidebarMediator.singleton = null; - - this.sidebarMoveIssue.destroy(); - mock.restore(); - }); - - describe('init', () => { - it('should initialize the dropdown and listeners', () => { - spyOn(this.sidebarMoveIssue, 'initDropdown'); - spyOn(this.sidebarMoveIssue, 'addEventListeners'); - - this.sidebarMoveIssue.init(); - - expect(this.sidebarMoveIssue.initDropdown).toHaveBeenCalled(); - expect(this.sidebarMoveIssue.addEventListeners).toHaveBeenCalled(); - }); - }); - - describe('destroy', () => { - it('should remove the listeners', () => { - spyOn(this.sidebarMoveIssue, 'removeEventListeners'); - - this.sidebarMoveIssue.destroy(); - - expect(this.sidebarMoveIssue.removeEventListeners).toHaveBeenCalled(); - }); - }); - - describe('initDropdown', () => { - it('should initialize the gl_dropdown', () => { - spyOn($.fn, 'glDropdown'); - - this.sidebarMoveIssue.initDropdown(); - - expect($.fn.glDropdown).toHaveBeenCalled(); - }); - - it('escapes html from project name', done => { - this.$toggleButton.dropdown('toggle'); - - setTimeout(() => { - expect(this.$content.find('.js-move-issue-dropdown-item')[1].innerHTML.trim()).toEqual( - '<img src=x onerror=alert(document.domain)> foo / bar', - ); - done(); - }); - }); - }); - - describe('onConfirmClicked', () => { - it('should move the issue with valid project ID', () => { - spyOn(this.mediator, 'moveIssue').and.returnValue(Promise.resolve()); - this.mediator.setMoveToProjectId(7); - - this.sidebarMoveIssue.onConfirmClicked(); - - expect(this.mediator.moveIssue).toHaveBeenCalled(); - expect(this.$confirmButton.prop('disabled')).toBeTruthy(); - expect(this.$confirmButton.hasClass('is-loading')).toBe(true); - }); - - it('should remove loading state from confirm button on failure', done => { - spyOn(window, 'Flash'); - spyOn(this.mediator, 'moveIssue').and.returnValue(Promise.reject()); - this.mediator.setMoveToProjectId(7); - - this.sidebarMoveIssue.onConfirmClicked(); - - expect(this.mediator.moveIssue).toHaveBeenCalled(); - // Wait for the move issue request to fail - setTimeout(() => { - expect(window.Flash).toHaveBeenCalled(); - expect(this.$confirmButton.prop('disabled')).toBeFalsy(); - expect(this.$confirmButton.hasClass('is-loading')).toBe(false); - done(); - }); - }); - - it('should not move the issue with id=0', () => { - spyOn(this.mediator, 'moveIssue'); - this.mediator.setMoveToProjectId(0); - - this.sidebarMoveIssue.onConfirmClicked(); - - expect(this.mediator.moveIssue).not.toHaveBeenCalled(); - }); - }); - - it('should set moveToProjectId on dropdown item "No project" click', done => { - spyOn(this.mediator, 'setMoveToProjectId'); - - // Open the dropdown - this.$toggleButton.dropdown('toggle'); - - // Wait for the autocomplete request to finish - setTimeout(() => { - this.$content - .find('.js-move-issue-dropdown-item') - .eq(0) - .trigger('click'); - - expect(this.mediator.setMoveToProjectId).toHaveBeenCalledWith(0); - expect(this.$confirmButton.prop('disabled')).toBeTruthy(); - done(); - }, 0); - }); - - it('should set moveToProjectId on dropdown item click', done => { - spyOn(this.mediator, 'setMoveToProjectId'); - - // Open the dropdown - this.$toggleButton.dropdown('toggle'); - - // Wait for the autocomplete request to finish - setTimeout(() => { - this.$content - .find('.js-move-issue-dropdown-item') - .eq(1) - .trigger('click'); - - expect(this.mediator.setMoveToProjectId).toHaveBeenCalledWith(20); - expect(this.$confirmButton.attr('disabled')).toBe(undefined); - done(); - }, 0); - }); -}); diff --git a/spec/javascripts/sidebar/sidebar_subscriptions_spec.js b/spec/javascripts/sidebar/sidebar_subscriptions_spec.js deleted file mode 100644 index ee4516f3bcd..00000000000 --- a/spec/javascripts/sidebar/sidebar_subscriptions_spec.js +++ /dev/null @@ -1,38 +0,0 @@ -import Vue from 'vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import sidebarSubscriptions from '~/sidebar/components/subscriptions/sidebar_subscriptions.vue'; -import SidebarMediator from '~/sidebar/sidebar_mediator'; -import SidebarService from '~/sidebar/services/sidebar_service'; -import SidebarStore from '~/sidebar/stores/sidebar_store'; -import Mock from './mock_data'; - -describe('Sidebar Subscriptions', function() { - let vm; - let SidebarSubscriptions; - - beforeEach(() => { - SidebarSubscriptions = Vue.extend(sidebarSubscriptions); - // Set up the stores, services, etc - // eslint-disable-next-line no-new - new SidebarMediator(Mock.mediator); - }); - - afterEach(() => { - vm.$destroy(); - SidebarService.singleton = null; - SidebarStore.singleton = null; - SidebarMediator.singleton = null; - }); - - it('calls the mediator toggleSubscription on event', () => { - const mediator = new SidebarMediator(); - spyOn(mediator, 'toggleSubscription').and.returnValue(Promise.resolve()); - vm = mountComponent(SidebarSubscriptions, { - mediator, - }); - - vm.onToggleSubscription(); - - expect(mediator.toggleSubscription).toHaveBeenCalled(); - }); -}); diff --git a/spec/javascripts/sidebar/subscriptions_spec.js b/spec/javascripts/sidebar/subscriptions_spec.js deleted file mode 100644 index cdb39efbef8..00000000000 --- a/spec/javascripts/sidebar/subscriptions_spec.js +++ /dev/null @@ -1,100 +0,0 @@ -import Vue from 'vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import { mockTracking } from 'spec/helpers/tracking_helper'; -import subscriptions from '~/sidebar/components/subscriptions/subscriptions.vue'; -import eventHub from '~/sidebar/event_hub'; - -describe('Subscriptions', function() { - let vm; - let Subscriptions; - - beforeEach(() => { - Subscriptions = Vue.extend(subscriptions); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('shows loading spinner when loading', () => { - vm = mountComponent(Subscriptions, { - loading: true, - subscribed: undefined, - }); - - expect(vm.$refs.toggleButton.isLoading).toBe(true); - expect(vm.$refs.toggleButton.$el.querySelector('.project-feature-toggle')).toHaveClass( - 'is-loading', - ); - }); - - it('is toggled "off" when currently not subscribed', () => { - vm = mountComponent(Subscriptions, { - subscribed: false, - }); - - expect(vm.$refs.toggleButton.$el.querySelector('.project-feature-toggle')).not.toHaveClass( - 'is-checked', - ); - }); - - it('is toggled "on" when currently subscribed', () => { - vm = mountComponent(Subscriptions, { - subscribed: true, - }); - - expect(vm.$refs.toggleButton.$el.querySelector('.project-feature-toggle')).toHaveClass( - 'is-checked', - ); - }); - - it('toggleSubscription method emits `toggleSubscription` event on eventHub and Component', () => { - vm = mountComponent(Subscriptions, { subscribed: true }); - spyOn(eventHub, '$emit'); - spyOn(vm, '$emit'); - spyOn(vm, 'track'); - - vm.toggleSubscription(); - - expect(eventHub.$emit).toHaveBeenCalledWith('toggleSubscription', jasmine.any(Object)); - expect(vm.$emit).toHaveBeenCalledWith('toggleSubscription', jasmine.any(Object)); - }); - - it('tracks the event when toggled', () => { - vm = mountComponent(Subscriptions, { subscribed: true }); - const spy = mockTracking('_category_', vm.$el, spyOn); - vm.toggleSubscription(); - - expect(spy).toHaveBeenCalled(); - }); - - it('onClickCollapsedIcon method emits `toggleSidebar` event on component', () => { - vm = mountComponent(Subscriptions, { subscribed: true }); - spyOn(vm, '$emit'); - - vm.onClickCollapsedIcon(); - - expect(vm.$emit).toHaveBeenCalledWith('toggleSidebar'); - }); - - describe('given project emails are disabled', () => { - const subscribeDisabledDescription = 'Notifications have been disabled'; - - beforeEach(() => { - vm = mountComponent(Subscriptions, { - subscribed: false, - projectEmailsDisabled: true, - subscribeDisabledDescription, - }); - }); - - it('sets the correct display text', () => { - expect(vm.$el.textContent).toContain(subscribeDisabledDescription); - expect(vm.$refs.tooltip.dataset.originalTitle).toBe(subscribeDisabledDescription); - }); - - it('does not render the toggle button', () => { - expect(vm.$refs.toggleButton).toBeUndefined(); - }); - }); -}); |