diff options
Diffstat (limited to 'spec/javascripts')
26 files changed, 1333 insertions, 955 deletions
diff --git a/spec/javascripts/diffs/store/getters_spec.js b/spec/javascripts/diffs/store/getters_spec.js index 7945ddea911..7a94f18778b 100644 --- a/spec/javascripts/diffs/store/getters_spec.js +++ b/spec/javascripts/diffs/store/getters_spec.js @@ -1,24 +1,66 @@ -import getters from '~/diffs/store/getters'; +import * as getters from '~/diffs/store/getters'; +import state from '~/diffs/store/modules/diff_state'; import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants'; describe('DiffsStoreGetters', () => { + let localState; + + beforeEach(() => { + localState = state(); + }); + describe('isParallelView', () => { it('should return true if view set to parallel view', () => { - expect(getters.isParallelView({ diffViewType: PARALLEL_DIFF_VIEW_TYPE })).toBeTruthy(); + localState.diffViewType = PARALLEL_DIFF_VIEW_TYPE; + + expect(getters.isParallelView(localState)).toEqual(true); }); it('should return false if view not to parallel view', () => { - expect(getters.isParallelView({ diffViewType: 'foo' })).toBeFalsy(); + localState.diffViewType = INLINE_DIFF_VIEW_TYPE; + + expect(getters.isParallelView(localState)).toEqual(false); }); }); describe('isInlineView', () => { it('should return true if view set to inline view', () => { - expect(getters.isInlineView({ diffViewType: INLINE_DIFF_VIEW_TYPE })).toBeTruthy(); + localState.diffViewType = INLINE_DIFF_VIEW_TYPE; + + expect(getters.isInlineView(localState)).toEqual(true); }); it('should return false if view not to inline view', () => { - expect(getters.isInlineView({ diffViewType: PARALLEL_DIFF_VIEW_TYPE })).toBeFalsy(); + localState.diffViewType = PARALLEL_DIFF_VIEW_TYPE; + + expect(getters.isInlineView(localState)).toEqual(false); + }); + }); + + describe('areAllFilesCollapsed', () => { + it('returns true when all files are collapsed', () => { + localState.diffFiles = [{ collapsed: true }, { collapsed: true }]; + expect(getters.areAllFilesCollapsed(localState)).toEqual(true); + }); + + it('returns false when at least one file is not collapsed', () => { + localState.diffFiles = [{ collapsed: false }, { collapsed: true }]; + expect(getters.areAllFilesCollapsed(localState)).toEqual(false); + }); + }); + + describe('commitId', () => { + it('returns commit id when is set', () => { + const commitID = '800f7a91'; + localState.commit = { + id: commitID, + }; + + expect(getters.commitId(localState)).toEqual(commitID); + }); + + it('returns null when no commit is set', () => { + expect(getters.commitId(localState)).toEqual(null); }); }); }); diff --git a/spec/javascripts/fixtures/merge_requests.rb b/spec/javascripts/fixtures/merge_requests.rb index ee60489eb7c..7257d0c8556 100644 --- a/spec/javascripts/fixtures/merge_requests.rb +++ b/spec/javascripts/fixtures/merge_requests.rb @@ -80,6 +80,13 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont render_discussions_json(merge_request, example.description) end + it 'merge_requests/resolved_diff_discussion.json' do |example| + note = create(:discussion_note_on_merge_request, :resolved, project: project, author: admin, position: position, noteable: merge_request) + create(:system_note, project: project, author: admin, noteable: merge_request, discussion_id: note.discussion.id) + + render_discussions_json(merge_request, example.description) + end + context 'with image diff' do let(:merge_request2) { create(:merge_request_with_diffs, :with_image_diffs, source_project: project, title: "Added images") } let(:image_path) { "files/images/ee_repo_logo.png" } diff --git a/spec/javascripts/frequent_items/components/app_spec.js b/spec/javascripts/frequent_items/components/app_spec.js new file mode 100644 index 00000000000..834f919524d --- /dev/null +++ b/spec/javascripts/frequent_items/components/app_spec.js @@ -0,0 +1,251 @@ +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import Vue from 'vue'; +import appComponent from '~/frequent_items/components/app.vue'; +import eventHub from '~/frequent_items/event_hub'; +import store from '~/frequent_items/store'; +import { FREQUENT_ITEMS, HOUR_IN_MS } from '~/frequent_items/constants'; +import { getTopFrequentItems } from '~/frequent_items/utils'; +import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper'; +import { currentSession, mockFrequentProjects, mockSearchedProjects } from '../mock_data'; + +let session; +const createComponentWithStore = (namespace = 'projects') => { + session = currentSession[namespace]; + gon.api_version = session.apiVersion; + const Component = Vue.extend(appComponent); + + return mountComponentWithStore(Component, { + store, + props: { + namespace, + currentUserName: session.username, + currentItem: session.project || session.group, + }, + }); +}; + +describe('Frequent Items App Component', () => { + let vm; + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + vm = createComponentWithStore(); + }); + + afterEach(() => { + mock.restore(); + vm.$destroy(); + }); + + describe('methods', () => { + describe('dropdownOpenHandler', () => { + it('should fetch frequent items when no search has been previously made on desktop', () => { + spyOn(vm, 'fetchFrequentItems'); + + vm.dropdownOpenHandler(); + + expect(vm.fetchFrequentItems).toHaveBeenCalledWith(); + }); + }); + + describe('logItemAccess', () => { + let storage; + + beforeEach(() => { + storage = {}; + + spyOn(window.localStorage, 'setItem').and.callFake((storageKey, value) => { + storage[storageKey] = value; + }); + + spyOn(window.localStorage, 'getItem').and.callFake(storageKey => { + if (storage[storageKey]) { + return storage[storageKey]; + } + + return null; + }); + }); + + it('should create a project store if it does not exist and adds a project', () => { + vm.logItemAccess(session.storageKey, session.project); + + const projects = JSON.parse(storage[session.storageKey]); + + expect(projects.length).toBe(1); + expect(projects[0].frequency).toBe(1); + expect(projects[0].lastAccessedOn).toBeDefined(); + }); + + it('should prevent inserting same report multiple times into store', () => { + vm.logItemAccess(session.storageKey, session.project); + vm.logItemAccess(session.storageKey, session.project); + + const projects = JSON.parse(storage[session.storageKey]); + + expect(projects.length).toBe(1); + }); + + it('should increase frequency of report if it was logged multiple times over the course of an hour', () => { + let projects; + const newTimestamp = Date.now() + HOUR_IN_MS + 1; + + vm.logItemAccess(session.storageKey, session.project); + projects = JSON.parse(storage[session.storageKey]); + + expect(projects[0].frequency).toBe(1); + + vm.logItemAccess(session.storageKey, { + ...session.project, + lastAccessedOn: newTimestamp, + }); + projects = JSON.parse(storage[session.storageKey]); + + expect(projects[0].frequency).toBe(2); + expect(projects[0].lastAccessedOn).not.toBe(session.project.lastAccessedOn); + }); + + it('should always update project metadata', () => { + let projects; + const oldProject = { + ...session.project, + }; + + const newProject = { + ...session.project, + name: 'New Name', + avatarUrl: 'new/avatar.png', + namespace: 'New / Namespace', + webUrl: 'http://localhost/new/web/url', + }; + + vm.logItemAccess(session.storageKey, oldProject); + projects = JSON.parse(storage[session.storageKey]); + + expect(projects[0].name).toBe(oldProject.name); + expect(projects[0].avatarUrl).toBe(oldProject.avatarUrl); + expect(projects[0].namespace).toBe(oldProject.namespace); + expect(projects[0].webUrl).toBe(oldProject.webUrl); + + vm.logItemAccess(session.storageKey, newProject); + projects = JSON.parse(storage[session.storageKey]); + + expect(projects[0].name).toBe(newProject.name); + expect(projects[0].avatarUrl).toBe(newProject.avatarUrl); + expect(projects[0].namespace).toBe(newProject.namespace); + expect(projects[0].webUrl).toBe(newProject.webUrl); + }); + + it('should not add more than 20 projects in store', () => { + for (let id = 0; id < FREQUENT_ITEMS.MAX_COUNT; id += 1) { + const project = { + ...session.project, + id, + }; + vm.logItemAccess(session.storageKey, project); + } + + const projects = JSON.parse(storage[session.storageKey]); + + expect(projects.length).toBe(FREQUENT_ITEMS.MAX_COUNT); + }); + }); + }); + + describe('created', () => { + it('should bind event listeners on eventHub', done => { + spyOn(eventHub, '$on'); + + createComponentWithStore().$mount(); + + Vue.nextTick(() => { + expect(eventHub.$on).toHaveBeenCalledWith('projects-dropdownOpen', jasmine.any(Function)); + done(); + }); + }); + }); + + describe('beforeDestroy', () => { + it('should unbind event listeners on eventHub', done => { + spyOn(eventHub, '$off'); + + vm.$mount(); + vm.$destroy(); + + Vue.nextTick(() => { + expect(eventHub.$off).toHaveBeenCalledWith('projects-dropdownOpen', jasmine.any(Function)); + done(); + }); + }); + }); + + describe('template', () => { + it('should render search input', () => { + expect(vm.$el.querySelector('.search-input-container')).toBeDefined(); + }); + + it('should render loading animation', done => { + vm.$store.dispatch('fetchSearchedItems'); + + Vue.nextTick(() => { + const loadingEl = vm.$el.querySelector('.loading-animation'); + + expect(loadingEl).toBeDefined(); + expect(loadingEl.classList.contains('prepend-top-20')).toBe(true); + expect(loadingEl.querySelector('i').getAttribute('aria-label')).toBe('Loading projects'); + done(); + }); + }); + + it('should render frequent projects list header', done => { + Vue.nextTick(() => { + const sectionHeaderEl = vm.$el.querySelector('.section-header'); + + expect(sectionHeaderEl).toBeDefined(); + expect(sectionHeaderEl.innerText.trim()).toBe('Frequently visited'); + done(); + }); + }); + + it('should render frequent projects list', done => { + const expectedResult = getTopFrequentItems(mockFrequentProjects); + spyOn(window.localStorage, 'getItem').and.callFake(() => + JSON.stringify(mockFrequentProjects), + ); + + expect(vm.$el.querySelectorAll('.frequent-items-list-container li').length).toBe(1); + + vm.fetchFrequentItems(); + Vue.nextTick(() => { + expect(vm.$el.querySelectorAll('.frequent-items-list-container li').length).toBe( + expectedResult.length, + ); + done(); + }); + }); + + it('should render searched projects list', done => { + mock.onGet(/\/api\/v4\/projects.json(.*)$/).replyOnce(200, mockSearchedProjects); + + expect(vm.$el.querySelectorAll('.frequent-items-list-container li').length).toBe(1); + + vm.$store.dispatch('setSearchQuery', 'gitlab'); + vm + .$nextTick() + .then(() => { + expect(vm.$el.querySelector('.loading-animation')).toBeDefined(); + }) + .then(vm.$nextTick) + .then(vm.$nextTick) + .then(() => { + expect(vm.$el.querySelectorAll('.frequent-items-list-container li').length).toBe( + mockSearchedProjects.length, + ); + }) + .then(done) + .catch(done.fail); + }); + }); +}); diff --git a/spec/javascripts/projects_dropdown/components/projects_list_item_spec.js b/spec/javascripts/frequent_items/components/frequent_items_list_item_spec.js index c193258474e..201aca77b10 100644 --- a/spec/javascripts/projects_dropdown/components/projects_list_item_spec.js +++ b/spec/javascripts/frequent_items/components/frequent_items_list_item_spec.js @@ -1,23 +1,21 @@ import Vue from 'vue'; - -import projectsListItemComponent from '~/projects_dropdown/components/projects_list_item.vue'; - +import frequentItemsListItemComponent from '~/frequent_items/components/frequent_items_list_item.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import { mockProject } from '../mock_data'; +import { mockProject } from '../mock_data'; // can also use 'mockGroup', but not useful to test here const createComponent = () => { - const Component = Vue.extend(projectsListItemComponent); + const Component = Vue.extend(frequentItemsListItemComponent); return mountComponent(Component, { - projectId: mockProject.id, - projectName: mockProject.name, + itemId: mockProject.id, + itemName: mockProject.name, namespace: mockProject.namespace, webUrl: mockProject.webUrl, avatarUrl: mockProject.avatarUrl, }); }; -describe('ProjectsListItemComponent', () => { +describe('FrequentItemsListItemComponent', () => { let vm; beforeEach(() => { @@ -32,22 +30,22 @@ describe('ProjectsListItemComponent', () => { describe('hasAvatar', () => { it('should return `true` or `false` if whether avatar is present or not', () => { vm.avatarUrl = 'path/to/avatar.png'; - expect(vm.hasAvatar).toBeTruthy(); + expect(vm.hasAvatar).toBe(true); vm.avatarUrl = null; - expect(vm.hasAvatar).toBeFalsy(); + expect(vm.hasAvatar).toBe(false); }); }); - describe('highlightedProjectName', () => { + describe('highlightedItemName', () => { it('should enclose part of project name in <b> & </b> which matches with `matcher` prop', () => { vm.matcher = 'lab'; - expect(vm.highlightedProjectName).toContain('<b>Lab</b>'); + expect(vm.highlightedItemName).toContain('<b>Lab</b>'); }); it('should return project name as it is if `matcher` is not available', () => { vm.matcher = null; - expect(vm.highlightedProjectName).toBe(mockProject.name); + expect(vm.highlightedItemName).toBe(mockProject.name); }); }); @@ -66,12 +64,12 @@ describe('ProjectsListItemComponent', () => { describe('template', () => { it('should render component element', () => { - expect(vm.$el.classList.contains('projects-list-item-container')).toBeTruthy(); + expect(vm.$el.classList.contains('frequent-items-list-item-container')).toBeTruthy(); expect(vm.$el.querySelectorAll('a').length).toBe(1); - expect(vm.$el.querySelectorAll('.project-item-avatar-container').length).toBe(1); - expect(vm.$el.querySelectorAll('.project-item-metadata-container').length).toBe(1); - expect(vm.$el.querySelectorAll('.project-title').length).toBe(1); - expect(vm.$el.querySelectorAll('.project-namespace').length).toBe(1); + expect(vm.$el.querySelectorAll('.frequent-items-item-avatar-container').length).toBe(1); + expect(vm.$el.querySelectorAll('.frequent-items-item-metadata-container').length).toBe(1); + expect(vm.$el.querySelectorAll('.frequent-items-item-title').length).toBe(1); + expect(vm.$el.querySelectorAll('.frequent-items-item-namespace').length).toBe(1); }); }); }); diff --git a/spec/javascripts/frequent_items/components/frequent_items_list_spec.js b/spec/javascripts/frequent_items/components/frequent_items_list_spec.js new file mode 100644 index 00000000000..3003b7ee000 --- /dev/null +++ b/spec/javascripts/frequent_items/components/frequent_items_list_spec.js @@ -0,0 +1,84 @@ +import Vue from 'vue'; +import frequentItemsListComponent from '~/frequent_items/components/frequent_items_list.vue'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import { mockFrequentProjects } from '../mock_data'; + +const createComponent = (namespace = 'projects') => { + const Component = Vue.extend(frequentItemsListComponent); + + return mountComponent(Component, { + namespace, + items: mockFrequentProjects, + isFetchFailed: false, + hasSearchQuery: false, + matcher: 'lab', + }); +}; + +describe('FrequentItemsListComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('computed', () => { + describe('isListEmpty', () => { + it('should return `true` or `false` representing whether if `items` is empty or not with projects', () => { + vm.items = []; + expect(vm.isListEmpty).toBe(true); + + vm.items = mockFrequentProjects; + expect(vm.isListEmpty).toBe(false); + }); + }); + + describe('fetched item messages', () => { + it('should return appropriate empty list message based on value of `localStorageFailed` prop with projects', () => { + vm.isFetchFailed = true; + expect(vm.listEmptyMessage).toBe('This feature requires browser localStorage support'); + + vm.isFetchFailed = false; + expect(vm.listEmptyMessage).toBe('Projects you visit often will appear here'); + }); + }); + + describe('searched item messages', () => { + it('should return appropriate empty list message based on value of `searchFailed` prop with projects', () => { + vm.hasSearchQuery = true; + vm.isFetchFailed = true; + expect(vm.listEmptyMessage).toBe('Something went wrong on our end.'); + + vm.isFetchFailed = false; + expect(vm.listEmptyMessage).toBe('Sorry, no projects matched your search'); + }); + }); + }); + + describe('template', () => { + it('should render component element with list of projects', done => { + vm.items = mockFrequentProjects; + + Vue.nextTick(() => { + expect(vm.$el.classList.contains('frequent-items-list-container')).toBe(true); + expect(vm.$el.querySelectorAll('ul.list-unstyled').length).toBe(1); + expect(vm.$el.querySelectorAll('li.frequent-items-list-item-container').length).toBe(5); + done(); + }); + }); + + it('should render component element with empty message', done => { + vm.items = []; + + Vue.nextTick(() => { + expect(vm.$el.querySelectorAll('li.section-empty').length).toBe(1); + expect(vm.$el.querySelectorAll('li.frequent-items-list-item-container').length).toBe(0); + done(); + }); + }); + }); +}); diff --git a/spec/javascripts/frequent_items/components/frequent_items_search_input_spec.js b/spec/javascripts/frequent_items/components/frequent_items_search_input_spec.js new file mode 100644 index 00000000000..6a11038e70a --- /dev/null +++ b/spec/javascripts/frequent_items/components/frequent_items_search_input_spec.js @@ -0,0 +1,77 @@ +import Vue from 'vue'; +import searchComponent from '~/frequent_items/components/frequent_items_search_input.vue'; +import eventHub from '~/frequent_items/event_hub'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; + +const createComponent = (namespace = 'projects') => { + const Component = Vue.extend(searchComponent); + + return mountComponent(Component, { namespace }); +}; + +describe('FrequentItemsSearchInputComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('methods', () => { + describe('setFocus', () => { + it('should set focus to search input', () => { + spyOn(vm.$refs.search, 'focus'); + + vm.setFocus(); + expect(vm.$refs.search.focus).toHaveBeenCalled(); + }); + }); + }); + + describe('mounted', () => { + it('should listen `dropdownOpen` event', done => { + spyOn(eventHub, '$on'); + const vmX = createComponent(); + + Vue.nextTick(() => { + expect(eventHub.$on).toHaveBeenCalledWith( + `${vmX.namespace}-dropdownOpen`, + jasmine.any(Function), + ); + done(); + }); + }); + }); + + describe('beforeDestroy', () => { + it('should unbind event listeners on eventHub', done => { + const vmX = createComponent(); + spyOn(eventHub, '$off'); + + vmX.$mount(); + vmX.$destroy(); + + Vue.nextTick(() => { + expect(eventHub.$off).toHaveBeenCalledWith( + `${vmX.namespace}-dropdownOpen`, + jasmine.any(Function), + ); + done(); + }); + }); + }); + + describe('template', () => { + it('should render component element', () => { + const inputEl = vm.$el.querySelector('input.form-control'); + + expect(vm.$el.classList.contains('search-input-container')).toBeTruthy(); + expect(inputEl).not.toBe(null); + expect(inputEl.getAttribute('placeholder')).toBe('Search your projects'); + expect(vm.$el.querySelector('.search-icon')).toBeDefined(); + }); + }); +}); diff --git a/spec/javascripts/frequent_items/mock_data.js b/spec/javascripts/frequent_items/mock_data.js new file mode 100644 index 00000000000..cf3602f42d6 --- /dev/null +++ b/spec/javascripts/frequent_items/mock_data.js @@ -0,0 +1,168 @@ +export const currentSession = { + groups: { + username: 'root', + storageKey: 'root/frequent-groups', + apiVersion: 'v4', + group: { + id: 1, + name: 'dummy-group', + full_name: 'dummy-parent-group', + webUrl: `${gl.TEST_HOST}/dummy-group`, + avatarUrl: null, + lastAccessedOn: Date.now(), + }, + }, + projects: { + username: 'root', + storageKey: 'root/frequent-projects', + apiVersion: 'v4', + project: { + id: 1, + name: 'dummy-project', + namespace: 'SampleGroup / Dummy-Project', + webUrl: `${gl.TEST_HOST}/samplegroup/dummy-project`, + avatarUrl: null, + lastAccessedOn: Date.now(), + }, + }, +}; + +export const mockNamespace = 'projects'; + +export const mockStorageKey = 'test-user/frequent-projects'; + +export const mockGroup = { + id: 1, + name: 'Sub451', + namespace: 'Commit451 / Sub451', + webUrl: `${gl.TEST_HOST}/Commit451/Sub451`, + avatarUrl: null, +}; + +export const mockRawGroup = { + id: 1, + name: 'Sub451', + full_name: 'Commit451 / Sub451', + web_url: `${gl.TEST_HOST}/Commit451/Sub451`, + avatar_url: null, +}; + +export const mockFrequentGroups = [ + { + id: 3, + name: 'Subgroup451', + full_name: 'Commit451 / Subgroup451', + webUrl: '/Commit451/Subgroup451', + avatarUrl: null, + frequency: 7, + lastAccessedOn: 1497979281815, + }, + { + id: 1, + name: 'Commit451', + full_name: 'Commit451', + webUrl: '/Commit451', + avatarUrl: null, + frequency: 3, + lastAccessedOn: 1497979281815, + }, +]; + +export const mockSearchedGroups = [mockRawGroup]; +export const mockProcessedSearchedGroups = [mockGroup]; + +export const mockProject = { + id: 1, + name: 'GitLab Community Edition', + namespace: 'gitlab-org / gitlab-ce', + webUrl: `${gl.TEST_HOST}/gitlab-org/gitlab-ce`, + avatarUrl: null, +}; + +export const mockRawProject = { + id: 1, + name: 'GitLab Community Edition', + name_with_namespace: 'gitlab-org / gitlab-ce', + web_url: `${gl.TEST_HOST}/gitlab-org/gitlab-ce`, + avatar_url: null, +}; + +export const mockFrequentProjects = [ + { + id: 1, + name: 'GitLab Community Edition', + namespace: 'gitlab-org / gitlab-ce', + webUrl: `${gl.TEST_HOST}/gitlab-org/gitlab-ce`, + avatarUrl: null, + frequency: 1, + lastAccessedOn: Date.now(), + }, + { + id: 2, + name: 'GitLab CI', + namespace: 'gitlab-org / gitlab-ci', + webUrl: `${gl.TEST_HOST}/gitlab-org/gitlab-ci`, + avatarUrl: null, + frequency: 9, + lastAccessedOn: Date.now(), + }, + { + id: 3, + name: 'Typeahead.Js', + namespace: 'twitter / typeahead-js', + webUrl: `${gl.TEST_HOST}/twitter/typeahead-js`, + avatarUrl: '/uploads/-/system/project/avatar/7/TWBS.png', + frequency: 2, + lastAccessedOn: Date.now(), + }, + { + id: 4, + name: 'Intel', + namespace: 'platform / hardware / bsp / intel', + webUrl: `${gl.TEST_HOST}/platform/hardware/bsp/intel`, + avatarUrl: null, + frequency: 3, + lastAccessedOn: Date.now(), + }, + { + id: 5, + name: 'v4.4', + namespace: 'platform / hardware / bsp / kernel / common / v4.4', + webUrl: `${gl.TEST_HOST}/platform/hardware/bsp/kernel/common/v4.4`, + avatarUrl: null, + frequency: 8, + lastAccessedOn: Date.now(), + }, +]; + +export const mockSearchedProjects = [mockRawProject]; +export const mockProcessedSearchedProjects = [mockProject]; + +export const unsortedFrequentItems = [ + { id: 1, frequency: 12, lastAccessedOn: 1491400843391 }, + { id: 2, frequency: 14, lastAccessedOn: 1488240890738 }, + { id: 3, frequency: 44, lastAccessedOn: 1497675908472 }, + { id: 4, frequency: 8, lastAccessedOn: 1497979281815 }, + { id: 5, frequency: 34, lastAccessedOn: 1488089211943 }, + { id: 6, frequency: 14, lastAccessedOn: 1493517292488 }, + { id: 7, frequency: 42, lastAccessedOn: 1486815299875 }, + { id: 8, frequency: 33, lastAccessedOn: 1500762279114 }, + { id: 10, frequency: 46, lastAccessedOn: 1483251641543 }, +]; + +/** + * This const has a specific order which tests authenticity + * of `getTopFrequentItems` method so + * DO NOT change order of items in this const. + */ +export const sortedFrequentItems = [ + { id: 10, frequency: 46, lastAccessedOn: 1483251641543 }, + { id: 3, frequency: 44, lastAccessedOn: 1497675908472 }, + { id: 7, frequency: 42, lastAccessedOn: 1486815299875 }, + { id: 5, frequency: 34, lastAccessedOn: 1488089211943 }, + { id: 8, frequency: 33, lastAccessedOn: 1500762279114 }, + { id: 6, frequency: 14, lastAccessedOn: 1493517292488 }, + { id: 2, frequency: 14, lastAccessedOn: 1488240890738 }, + { id: 1, frequency: 12, lastAccessedOn: 1491400843391 }, + { id: 4, frequency: 8, lastAccessedOn: 1497979281815 }, +]; diff --git a/spec/javascripts/frequent_items/store/actions_spec.js b/spec/javascripts/frequent_items/store/actions_spec.js new file mode 100644 index 00000000000..0cdd033d38f --- /dev/null +++ b/spec/javascripts/frequent_items/store/actions_spec.js @@ -0,0 +1,225 @@ +import testAction from 'spec/helpers/vuex_action_helper'; +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import AccessorUtilities from '~/lib/utils/accessor'; +import * as actions from '~/frequent_items/store/actions'; +import * as types from '~/frequent_items/store/mutation_types'; +import state from '~/frequent_items/store/state'; +import { + mockNamespace, + mockStorageKey, + mockFrequentProjects, + mockSearchedProjects, +} from '../mock_data'; + +describe('Frequent Items Dropdown Store Actions', () => { + let mockedState; + let mock; + + beforeEach(() => { + mockedState = state(); + mock = new MockAdapter(axios); + + mockedState.namespace = mockNamespace; + mockedState.storageKey = mockStorageKey; + }); + + afterEach(() => { + mock.restore(); + }); + + describe('setNamespace', () => { + it('should set namespace', done => { + testAction( + actions.setNamespace, + mockNamespace, + mockedState, + [{ type: types.SET_NAMESPACE, payload: mockNamespace }], + [], + done, + ); + }); + }); + + describe('setStorageKey', () => { + it('should set storage key', done => { + testAction( + actions.setStorageKey, + mockStorageKey, + mockedState, + [{ type: types.SET_STORAGE_KEY, payload: mockStorageKey }], + [], + done, + ); + }); + }); + + describe('requestFrequentItems', () => { + it('should request frequent items', done => { + testAction( + actions.requestFrequentItems, + null, + mockedState, + [{ type: types.REQUEST_FREQUENT_ITEMS }], + [], + done, + ); + }); + }); + + describe('receiveFrequentItemsSuccess', () => { + it('should set frequent items', done => { + testAction( + actions.receiveFrequentItemsSuccess, + mockFrequentProjects, + mockedState, + [{ type: types.RECEIVE_FREQUENT_ITEMS_SUCCESS, payload: mockFrequentProjects }], + [], + done, + ); + }); + }); + + describe('receiveFrequentItemsError', () => { + it('should set frequent items error state', done => { + testAction( + actions.receiveFrequentItemsError, + null, + mockedState, + [{ type: types.RECEIVE_FREQUENT_ITEMS_ERROR }], + [], + done, + ); + }); + }); + + describe('fetchFrequentItems', () => { + it('should dispatch `receiveFrequentItemsSuccess`', done => { + mockedState.namespace = mockNamespace; + mockedState.storageKey = mockStorageKey; + + testAction( + actions.fetchFrequentItems, + null, + mockedState, + [], + [{ type: 'requestFrequentItems' }, { type: 'receiveFrequentItemsSuccess', payload: [] }], + done, + ); + }); + + it('should dispatch `receiveFrequentItemsError`', done => { + spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').and.returnValue(false); + mockedState.namespace = mockNamespace; + mockedState.storageKey = mockStorageKey; + + testAction( + actions.fetchFrequentItems, + null, + mockedState, + [], + [{ type: 'requestFrequentItems' }, { type: 'receiveFrequentItemsError' }], + done, + ); + }); + }); + + describe('requestSearchedItems', () => { + it('should request searched items', done => { + testAction( + actions.requestSearchedItems, + null, + mockedState, + [{ type: types.REQUEST_SEARCHED_ITEMS }], + [], + done, + ); + }); + }); + + describe('receiveSearchedItemsSuccess', () => { + it('should set searched items', done => { + testAction( + actions.receiveSearchedItemsSuccess, + mockSearchedProjects, + mockedState, + [{ type: types.RECEIVE_SEARCHED_ITEMS_SUCCESS, payload: mockSearchedProjects }], + [], + done, + ); + }); + }); + + describe('receiveSearchedItemsError', () => { + it('should set searched items error state', done => { + testAction( + actions.receiveSearchedItemsError, + null, + mockedState, + [{ type: types.RECEIVE_SEARCHED_ITEMS_ERROR }], + [], + done, + ); + }); + }); + + describe('fetchSearchedItems', () => { + beforeEach(() => { + gon.api_version = 'v4'; + }); + + it('should dispatch `receiveSearchedItemsSuccess`', done => { + mock.onGet(/\/api\/v4\/projects.json(.*)$/).replyOnce(200, mockSearchedProjects); + + testAction( + actions.fetchSearchedItems, + null, + mockedState, + [], + [ + { type: 'requestSearchedItems' }, + { type: 'receiveSearchedItemsSuccess', payload: mockSearchedProjects }, + ], + done, + ); + }); + + it('should dispatch `receiveSearchedItemsError`', done => { + gon.api_version = 'v4'; + mock.onGet(/\/api\/v4\/projects.json(.*)$/).replyOnce(500); + + testAction( + actions.fetchSearchedItems, + null, + mockedState, + [], + [{ type: 'requestSearchedItems' }, { type: 'receiveSearchedItemsError' }], + done, + ); + }); + }); + + describe('setSearchQuery', () => { + it('should commit query and dispatch `fetchSearchedItems` when query is present', done => { + testAction( + actions.setSearchQuery, + { query: 'test' }, + mockedState, + [{ type: types.SET_SEARCH_QUERY }], + [{ type: 'fetchSearchedItems', payload: { query: 'test' } }], + done, + ); + }); + + it('should commit query and dispatch `fetchFrequentItems` when query is empty', done => { + testAction( + actions.setSearchQuery, + null, + mockedState, + [{ type: types.SET_SEARCH_QUERY }], + [{ type: 'fetchFrequentItems' }], + done, + ); + }); + }); +}); diff --git a/spec/javascripts/frequent_items/store/getters_spec.js b/spec/javascripts/frequent_items/store/getters_spec.js new file mode 100644 index 00000000000..1cd12eb6832 --- /dev/null +++ b/spec/javascripts/frequent_items/store/getters_spec.js @@ -0,0 +1,24 @@ +import state from '~/frequent_items/store/state'; +import * as getters from '~/frequent_items/store/getters'; + +describe('Frequent Items Dropdown Store Getters', () => { + let mockedState; + + beforeEach(() => { + mockedState = state(); + }); + + describe('hasSearchQuery', () => { + it('should return `true` when search query is present', () => { + mockedState.searchQuery = 'test'; + + expect(getters.hasSearchQuery(mockedState)).toBe(true); + }); + + it('should return `false` when search query is empty', () => { + mockedState.searchQuery = ''; + + expect(getters.hasSearchQuery(mockedState)).toBe(false); + }); + }); +}); diff --git a/spec/javascripts/frequent_items/store/mutations_spec.js b/spec/javascripts/frequent_items/store/mutations_spec.js new file mode 100644 index 00000000000..d36964b2600 --- /dev/null +++ b/spec/javascripts/frequent_items/store/mutations_spec.js @@ -0,0 +1,117 @@ +import state from '~/frequent_items/store/state'; +import mutations from '~/frequent_items/store/mutations'; +import * as types from '~/frequent_items/store/mutation_types'; +import { + mockNamespace, + mockStorageKey, + mockFrequentProjects, + mockSearchedProjects, + mockProcessedSearchedProjects, + mockSearchedGroups, + mockProcessedSearchedGroups, +} from '../mock_data'; + +describe('Frequent Items dropdown mutations', () => { + let stateCopy; + + beforeEach(() => { + stateCopy = state(); + }); + + describe('SET_NAMESPACE', () => { + it('should set namespace', () => { + mutations[types.SET_NAMESPACE](stateCopy, mockNamespace); + + expect(stateCopy.namespace).toEqual(mockNamespace); + }); + }); + + describe('SET_STORAGE_KEY', () => { + it('should set storage key', () => { + mutations[types.SET_STORAGE_KEY](stateCopy, mockStorageKey); + + expect(stateCopy.storageKey).toEqual(mockStorageKey); + }); + }); + + describe('SET_SEARCH_QUERY', () => { + it('should set search query', () => { + const searchQuery = 'gitlab-ce'; + + mutations[types.SET_SEARCH_QUERY](stateCopy, searchQuery); + + expect(stateCopy.searchQuery).toEqual(searchQuery); + }); + }); + + describe('REQUEST_FREQUENT_ITEMS', () => { + it('should set view states when requesting frequent items', () => { + mutations[types.REQUEST_FREQUENT_ITEMS](stateCopy); + + expect(stateCopy.isLoadingItems).toEqual(true); + expect(stateCopy.hasSearchQuery).toEqual(false); + }); + }); + + describe('RECEIVE_FREQUENT_ITEMS_SUCCESS', () => { + it('should set view states when receiving frequent items', () => { + mutations[types.RECEIVE_FREQUENT_ITEMS_SUCCESS](stateCopy, mockFrequentProjects); + + expect(stateCopy.items).toEqual(mockFrequentProjects); + expect(stateCopy.isLoadingItems).toEqual(false); + expect(stateCopy.hasSearchQuery).toEqual(false); + expect(stateCopy.isFetchFailed).toEqual(false); + }); + }); + + describe('RECEIVE_FREQUENT_ITEMS_ERROR', () => { + it('should set items and view states when error occurs retrieving frequent items', () => { + mutations[types.RECEIVE_FREQUENT_ITEMS_ERROR](stateCopy); + + expect(stateCopy.items).toEqual([]); + expect(stateCopy.isLoadingItems).toEqual(false); + expect(stateCopy.hasSearchQuery).toEqual(false); + expect(stateCopy.isFetchFailed).toEqual(true); + }); + }); + + describe('REQUEST_SEARCHED_ITEMS', () => { + it('should set view states when requesting searched items', () => { + mutations[types.REQUEST_SEARCHED_ITEMS](stateCopy); + + expect(stateCopy.isLoadingItems).toEqual(true); + expect(stateCopy.hasSearchQuery).toEqual(true); + }); + }); + + describe('RECEIVE_SEARCHED_ITEMS_SUCCESS', () => { + it('should set items and view states when receiving searched items', () => { + mutations[types.RECEIVE_SEARCHED_ITEMS_SUCCESS](stateCopy, mockSearchedProjects); + + expect(stateCopy.items).toEqual(mockProcessedSearchedProjects); + expect(stateCopy.isLoadingItems).toEqual(false); + expect(stateCopy.hasSearchQuery).toEqual(true); + expect(stateCopy.isFetchFailed).toEqual(false); + }); + + it('should also handle the different `full_name` key for namespace in groups payload', () => { + mutations[types.RECEIVE_SEARCHED_ITEMS_SUCCESS](stateCopy, mockSearchedGroups); + + expect(stateCopy.items).toEqual(mockProcessedSearchedGroups); + expect(stateCopy.isLoadingItems).toEqual(false); + expect(stateCopy.hasSearchQuery).toEqual(true); + expect(stateCopy.isFetchFailed).toEqual(false); + }); + }); + + describe('RECEIVE_SEARCHED_ITEMS_ERROR', () => { + it('should set view states when error occurs retrieving searched items', () => { + mutations[types.RECEIVE_SEARCHED_ITEMS_ERROR](stateCopy); + + expect(stateCopy.items).toEqual([]); + expect(stateCopy.isLoadingItems).toEqual(false); + expect(stateCopy.hasSearchQuery).toEqual(true); + expect(stateCopy.isFetchFailed).toEqual(true); + }); + }); +}); diff --git a/spec/javascripts/frequent_items/utils_spec.js b/spec/javascripts/frequent_items/utils_spec.js new file mode 100644 index 00000000000..cd27d79b29a --- /dev/null +++ b/spec/javascripts/frequent_items/utils_spec.js @@ -0,0 +1,89 @@ +import bp from '~/breakpoints'; +import { isMobile, getTopFrequentItems, updateExistingFrequentItem } from '~/frequent_items/utils'; +import { HOUR_IN_MS, FREQUENT_ITEMS } from '~/frequent_items/constants'; +import { mockProject, unsortedFrequentItems, sortedFrequentItems } from './mock_data'; + +describe('Frequent Items utils spec', () => { + describe('isMobile', () => { + it('returns true when the screen is small ', () => { + spyOn(bp, 'getBreakpointSize').and.returnValue('sm'); + + expect(isMobile()).toBe(true); + }); + + it('returns true when the screen is extra-small ', () => { + spyOn(bp, 'getBreakpointSize').and.returnValue('xs'); + + expect(isMobile()).toBe(true); + }); + + it('returns false when the screen is larger than small ', () => { + spyOn(bp, 'getBreakpointSize').and.returnValue('md'); + + expect(isMobile()).toBe(false); + }); + }); + + describe('getTopFrequentItems', () => { + it('returns empty array if no items provided', () => { + const result = getTopFrequentItems(); + + expect(result.length).toBe(0); + }); + + it('returns correct amount of items for mobile', () => { + spyOn(bp, 'getBreakpointSize').and.returnValue('sm'); + const result = getTopFrequentItems(unsortedFrequentItems); + + expect(result.length).toBe(FREQUENT_ITEMS.LIST_COUNT_MOBILE); + }); + + it('returns correct amount of items for desktop', () => { + spyOn(bp, 'getBreakpointSize').and.returnValue('lg'); + const result = getTopFrequentItems(unsortedFrequentItems); + + expect(result.length).toBe(FREQUENT_ITEMS.LIST_COUNT_DESKTOP); + }); + + it('sorts frequent items in order of frequency and lastAccessedOn', () => { + spyOn(bp, 'getBreakpointSize').and.returnValue('lg'); + const result = getTopFrequentItems(unsortedFrequentItems); + const expectedResult = sortedFrequentItems.slice(0, FREQUENT_ITEMS.LIST_COUNT_DESKTOP); + + expect(result).toEqual(expectedResult); + }); + }); + + describe('updateExistingFrequentItem', () => { + let mockedProject; + + beforeEach(() => { + mockedProject = { + ...mockProject, + frequency: 1, + lastAccessedOn: 1497979281815, + }; + }); + + it('updates item if accessed over an hour ago', () => { + const newTimestamp = Date.now() + HOUR_IN_MS + 1; + const newItem = { + ...mockedProject, + lastAccessedOn: newTimestamp, + }; + const result = updateExistingFrequentItem(mockedProject, newItem); + + expect(result.frequency).toBe(mockedProject.frequency + 1); + }); + + it('does not update item if accessed within the hour', () => { + const newItem = { + ...mockedProject, + lastAccessedOn: mockedProject.lastAccessedOn + HOUR_IN_MS, + }; + const result = updateExistingFrequentItem(mockedProject, newItem); + + expect(result.frequency).toBe(mockedProject.frequency); + }); + }); +}); diff --git a/spec/javascripts/ide/components/merge_requests/info_spec.js b/spec/javascripts/ide/components/merge_requests/info_spec.js new file mode 100644 index 00000000000..98a29e5128b --- /dev/null +++ b/spec/javascripts/ide/components/merge_requests/info_spec.js @@ -0,0 +1,51 @@ +import Vue from 'vue'; +import '~/behaviors/markdown/render_gfm'; +import { createStore } from '~/ide/stores'; +import Info from '~/ide/components/merge_requests/info.vue'; +import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper'; + +describe('IDE merge request details', () => { + let Component; + let vm; + + beforeAll(() => { + Component = Vue.extend(Info); + }); + + beforeEach(() => { + const store = createStore(); + store.state.currentProjectId = 'gitlab-ce'; + store.state.currentMergeRequestId = 1; + store.state.projects['gitlab-ce'] = { + mergeRequests: { + 1: { + iid: 1, + title: 'Testing', + title_html: '<span class="title-html">Testing</span>', + description: 'Description', + description_html: '<p class="description-html">Description HTML</p>', + }, + }, + }; + + vm = createComponentWithStore(Component, store).$mount(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders merge request IID', () => { + expect(vm.$el.querySelector('.detail-page-header').textContent).toContain('!1'); + }); + + it('renders title as HTML', () => { + expect(vm.$el.querySelector('.title-html')).not.toBe(null); + expect(vm.$el.querySelector('.title').textContent).toContain('Testing'); + }); + + it('renders description as HTML', () => { + expect(vm.$el.querySelector('.description-html')).not.toBe(null); + expect(vm.$el.querySelector('.description').textContent).toContain('Description HTML'); + }); +}); diff --git a/spec/javascripts/ide/components/panes/right_spec.js b/spec/javascripts/ide/components/panes/right_spec.js new file mode 100644 index 00000000000..99879fb0930 --- /dev/null +++ b/spec/javascripts/ide/components/panes/right_spec.js @@ -0,0 +1,72 @@ +import Vue from 'vue'; +import '~/behaviors/markdown/render_gfm'; +import { createStore } from '~/ide/stores'; +import RightPane from '~/ide/components/panes/right.vue'; +import { rightSidebarViews } from '~/ide/constants'; +import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper'; + +describe('IDE right pane', () => { + let Component; + let vm; + + beforeAll(() => { + Component = Vue.extend(RightPane); + }); + + beforeEach(() => { + const store = createStore(); + + vm = createComponentWithStore(Component, store).$mount(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('active', () => { + it('renders merge request button as active', done => { + vm.$store.state.rightPane = rightSidebarViews.mergeRequestInfo; + vm.$store.state.currentMergeRequestId = '123'; + vm.$store.state.currentProjectId = 'gitlab-ce'; + vm.$store.state.currentMergeRequestId = 1; + vm.$store.state.projects['gitlab-ce'] = { + mergeRequests: { + 1: { + iid: 1, + title: 'Testing', + title_html: '<span class="title-html">Testing</span>', + description: 'Description', + description_html: '<p class="description-html">Description HTML</p>', + }, + }, + }; + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.ide-sidebar-link.active')).not.toBe(null); + expect( + vm.$el.querySelector('.ide-sidebar-link.active').getAttribute('data-original-title'), + ).toBe('Merge Request'); + + done(); + }); + }); + }); + + describe('click', () => { + beforeEach(() => { + spyOn(vm, 'setRightPane'); + }); + + it('sets view to merge request', done => { + vm.$store.state.currentMergeRequestId = '123'; + + vm.$nextTick(() => { + vm.$el.querySelector('.ide-sidebar-link').click(); + + expect(vm.setRightPane).toHaveBeenCalledWith(rightSidebarViews.mergeRequestInfo); + + done(); + }); + }); + }); +}); diff --git a/spec/javascripts/ide/stores/actions/merge_request_spec.js b/spec/javascripts/ide/stores/actions/merge_request_spec.js index c99ccc70c6a..90c28c769f7 100644 --- a/spec/javascripts/ide/stores/actions/merge_request_spec.js +++ b/spec/javascripts/ide/stores/actions/merge_request_spec.js @@ -39,7 +39,9 @@ describe('IDE store merge request actions', () => { store .dispatch('getMergeRequestData', { projectId: 'abcproject', mergeRequestId: 1 }) .then(() => { - expect(service.getProjectMergeRequestData).toHaveBeenCalledWith('abcproject', 1); + expect(service.getProjectMergeRequestData).toHaveBeenCalledWith('abcproject', 1, { + render_html: true, + }); done(); }) diff --git a/spec/javascripts/notes/components/discussion_counter_spec.js b/spec/javascripts/notes/components/discussion_counter_spec.js index 7b2302e6f47..a3869cc6498 100644 --- a/spec/javascripts/notes/components/discussion_counter_spec.js +++ b/spec/javascripts/notes/components/discussion_counter_spec.js @@ -32,12 +32,12 @@ describe('DiscussionCounter component', () => { { ...discussionMock, id: discussionMock.id, - notes: [{ ...discussionMock.notes[0], resolved: true }], + notes: [{ ...discussionMock.notes[0], resolvable: true, resolved: true }], }, { ...discussionMock, id: discussionMock.id + 1, - notes: [{ ...discussionMock.notes[0], resolved: false }], + notes: [{ ...discussionMock.notes[0], resolvable: true, resolved: false }], }, ]; const firstDiscussionId = discussionMock.id + 1; diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js index 058ddb6202f..7da931fd9cb 100644 --- a/spec/javascripts/notes/components/noteable_discussion_spec.js +++ b/spec/javascripts/notes/components/noteable_discussion_spec.js @@ -4,22 +4,23 @@ import noteableDiscussion from '~/notes/components/noteable_discussion.vue'; import '~/behaviors/markdown/render_gfm'; import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data'; +const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json'; + describe('noteable_discussion component', () => { + const Component = Vue.extend(noteableDiscussion); let store; let vm; - beforeEach(() => { - const Component = Vue.extend(noteableDiscussion); + preloadFixtures(discussionWithTwoUnresolvedNotes); + beforeEach(() => { store = createStore(); store.dispatch('setNoteableData', noteableDataMock); store.dispatch('setNotesData', notesDataMock); vm = new Component({ store, - propsData: { - discussion: discussionMock, - }, + propsData: { discussion: discussionMock }, }).$mount(); }); @@ -84,7 +85,9 @@ describe('noteable_discussion component', () => { }); it('is true if there are two unresolved discussions', done => { - spyOnProperty(vm, 'unresolvedDiscussions').and.returnValue([{}, {}]); + const discussion = getJSONFixture(discussionWithTwoUnresolvedNotes)[0]; + discussion.notes[0].resolved = false; + vm.$store.dispatch('setInitialNotes', [discussion, discussion]); Vue.nextTick() .then(() => { @@ -105,12 +108,12 @@ describe('noteable_discussion component', () => { { ...discussionMock, id: discussionMock.id + 1, - notes: [{ ...discussionMock.notes[0], resolved: true }], + notes: [{ ...discussionMock.notes[0], resolvable: true, resolved: true }], }, { ...discussionMock, id: discussionMock.id + 2, - notes: [{ ...discussionMock.notes[0], resolved: false }], + notes: [{ ...discussionMock.notes[0], resolvable: true, resolved: false }], }, ]; const nextDiscussionId = discussionMock.id + 2; diff --git a/spec/javascripts/notes/mock_data.js b/spec/javascripts/notes/mock_data.js index 547efa32694..be2a8ba67fe 100644 --- a/spec/javascripts/notes/mock_data.js +++ b/spec/javascripts/notes/mock_data.js @@ -165,6 +165,7 @@ export const note = { report_abuse_path: '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_546&user_id=1', path: '/gitlab-org/gitlab-ce/notes/546', + cached_markdown_version: 11, }; export const discussionMock = { @@ -303,6 +304,7 @@ export const discussionMock = { }, ], individual_note: false, + resolvable: true, }; export const loggedOutnoteableData = { diff --git a/spec/javascripts/notes/stores/getters_spec.js b/spec/javascripts/notes/stores/getters_spec.js index 815cc09621f..41599e00122 100644 --- a/spec/javascripts/notes/stores/getters_spec.js +++ b/spec/javascripts/notes/stores/getters_spec.js @@ -7,9 +7,13 @@ import { collapseNotesMock, } from '../mock_data'; +const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json'; + describe('Getters Notes Store', () => { let state; + preloadFixtures(discussionWithTwoUnresolvedNotes); + beforeEach(() => { state = { discussions: [individualNote], @@ -22,12 +26,26 @@ describe('Getters Notes Store', () => { noteableData: noteableDataMock, }; }); + describe('discussions', () => { it('should return all discussions in the store', () => { expect(getters.discussions(state)).toEqual([individualNote]); }); }); + describe('resolvedDiscussionsById', () => { + it('ignores unresolved system notes', () => { + const [discussion] = getJSONFixture(discussionWithTwoUnresolvedNotes); + discussion.notes[0].resolved = true; + discussion.notes[1].resolved = false; + state.discussions.push(discussion); + + expect(getters.resolvedDiscussionsById(state)).toEqual({ + [discussion.id]: discussion, + }); + }); + }); + describe('Collapsed notes', () => { const stateCollapsedNotes = { discussions: collapseNotesMock, diff --git a/spec/javascripts/profile/add_ssh_key_validation_spec.js b/spec/javascripts/profile/add_ssh_key_validation_spec.js new file mode 100644 index 00000000000..c71a2885acc --- /dev/null +++ b/spec/javascripts/profile/add_ssh_key_validation_spec.js @@ -0,0 +1,69 @@ +import AddSshKeyValidation from '../../../app/assets/javascripts/profile/add_ssh_key_validation'; + +describe('AddSshKeyValidation', () => { + describe('submit', () => { + it('returns true if isValid is true', () => { + const addSshKeyValidation = new AddSshKeyValidation({}); + spyOn(AddSshKeyValidation, 'isPublicKey').and.returnValue(true); + + expect(addSshKeyValidation.submit()).toBeTruthy(); + }); + + it('calls preventDefault and toggleWarning if isValid is false', () => { + const addSshKeyValidation = new AddSshKeyValidation({}); + const event = jasmine.createSpyObj('event', ['preventDefault']); + spyOn(AddSshKeyValidation, 'isPublicKey').and.returnValue(false); + spyOn(addSshKeyValidation, 'toggleWarning'); + + addSshKeyValidation.submit(event); + + expect(event.preventDefault).toHaveBeenCalled(); + expect(addSshKeyValidation.toggleWarning).toHaveBeenCalledWith(true); + }); + }); + + describe('toggleWarning', () => { + it('shows warningElement and hides originalSubmitElement if isVisible is true', () => { + const warningElement = document.createElement('div'); + const originalSubmitElement = document.createElement('div'); + warningElement.classList.add('hide'); + + const addSshKeyValidation = new AddSshKeyValidation( + {}, + warningElement, + originalSubmitElement, + ); + addSshKeyValidation.toggleWarning(true); + + expect(warningElement.classList.contains('hide')).toBeFalsy(); + expect(originalSubmitElement.classList.contains('hide')).toBeTruthy(); + }); + + it('hides warningElement and shows originalSubmitElement if isVisible is false', () => { + const warningElement = document.createElement('div'); + const originalSubmitElement = document.createElement('div'); + originalSubmitElement.classList.add('hide'); + + const addSshKeyValidation = new AddSshKeyValidation( + {}, + warningElement, + originalSubmitElement, + ); + addSshKeyValidation.toggleWarning(false); + + expect(warningElement.classList.contains('hide')).toBeTruthy(); + expect(originalSubmitElement.classList.contains('hide')).toBeFalsy(); + }); + }); + + describe('isPublicKey', () => { + it('returns false if probably invalid public ssh key', () => { + expect(AddSshKeyValidation.isPublicKey('nope')).toBeFalsy(); + }); + + it('returns true if probably valid public ssh key', () => { + expect(AddSshKeyValidation.isPublicKey('ssh-')).toBeTruthy(); + expect(AddSshKeyValidation.isPublicKey('ecdsa-sha2-')).toBeTruthy(); + }); + }); +}); diff --git a/spec/javascripts/projects_dropdown/components/app_spec.js b/spec/javascripts/projects_dropdown/components/app_spec.js deleted file mode 100644 index 38b31c3d727..00000000000 --- a/spec/javascripts/projects_dropdown/components/app_spec.js +++ /dev/null @@ -1,349 +0,0 @@ -import Vue from 'vue'; - -import bp from '~/breakpoints'; -import appComponent from '~/projects_dropdown/components/app.vue'; -import eventHub from '~/projects_dropdown/event_hub'; -import ProjectsStore from '~/projects_dropdown/store/projects_store'; -import ProjectsService from '~/projects_dropdown/service/projects_service'; - -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import { currentSession, mockProject, mockRawProject } from '../mock_data'; - -const createComponent = () => { - gon.api_version = currentSession.apiVersion; - const Component = Vue.extend(appComponent); - const store = new ProjectsStore(); - const service = new ProjectsService(currentSession.username); - - return mountComponent(Component, { - store, - service, - currentUserName: currentSession.username, - currentProject: currentSession.project, - }); -}; - -const returnServicePromise = (data, failed) => - new Promise((resolve, reject) => { - if (failed) { - reject(data); - } else { - resolve({ - json() { - return data; - }, - }); - } - }); - -describe('AppComponent', () => { - describe('computed', () => { - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('frequentProjects', () => { - it('should return list of frequently accessed projects from store', () => { - expect(vm.frequentProjects).toBeDefined(); - expect(vm.frequentProjects.length).toBe(0); - - vm.store.setFrequentProjects([mockProject]); - expect(vm.frequentProjects).toBeDefined(); - expect(vm.frequentProjects.length).toBe(1); - }); - }); - - describe('searchProjects', () => { - it('should return list of frequently accessed projects from store', () => { - expect(vm.searchProjects).toBeDefined(); - expect(vm.searchProjects.length).toBe(0); - - vm.store.setSearchedProjects([mockRawProject]); - expect(vm.searchProjects).toBeDefined(); - expect(vm.searchProjects.length).toBe(1); - }); - }); - }); - - describe('methods', () => { - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('toggleFrequentProjectsList', () => { - it('should toggle props which control visibility of Frequent Projects list from state passed', () => { - vm.toggleFrequentProjectsList(true); - expect(vm.isLoadingProjects).toBeFalsy(); - expect(vm.isSearchListVisible).toBeFalsy(); - expect(vm.isFrequentsListVisible).toBeTruthy(); - - vm.toggleFrequentProjectsList(false); - expect(vm.isLoadingProjects).toBeTruthy(); - expect(vm.isSearchListVisible).toBeTruthy(); - expect(vm.isFrequentsListVisible).toBeFalsy(); - }); - }); - - describe('toggleSearchProjectsList', () => { - it('should toggle props which control visibility of Searched Projects list from state passed', () => { - vm.toggleSearchProjectsList(true); - expect(vm.isLoadingProjects).toBeFalsy(); - expect(vm.isFrequentsListVisible).toBeFalsy(); - expect(vm.isSearchListVisible).toBeTruthy(); - - vm.toggleSearchProjectsList(false); - expect(vm.isLoadingProjects).toBeTruthy(); - expect(vm.isFrequentsListVisible).toBeTruthy(); - expect(vm.isSearchListVisible).toBeFalsy(); - }); - }); - - describe('toggleLoader', () => { - it('should toggle props which control visibility of list loading animation from state passed', () => { - vm.toggleLoader(true); - expect(vm.isFrequentsListVisible).toBeFalsy(); - expect(vm.isSearchListVisible).toBeFalsy(); - expect(vm.isLoadingProjects).toBeTruthy(); - - vm.toggleLoader(false); - expect(vm.isFrequentsListVisible).toBeTruthy(); - expect(vm.isSearchListVisible).toBeTruthy(); - expect(vm.isLoadingProjects).toBeFalsy(); - }); - }); - - describe('fetchFrequentProjects', () => { - it('should set props for loading animation to `true` while frequent projects list is being loaded', () => { - spyOn(vm, 'toggleLoader'); - - vm.fetchFrequentProjects(); - expect(vm.isLocalStorageFailed).toBeFalsy(); - expect(vm.toggleLoader).toHaveBeenCalledWith(true); - }); - - it('should set props for loading animation to `false` and props for frequent projects list to `true` once data is loaded', () => { - const mockData = [mockProject]; - - spyOn(vm.service, 'getFrequentProjects').and.returnValue(mockData); - spyOn(vm.store, 'setFrequentProjects'); - spyOn(vm, 'toggleFrequentProjectsList'); - - vm.fetchFrequentProjects(); - expect(vm.service.getFrequentProjects).toHaveBeenCalled(); - expect(vm.store.setFrequentProjects).toHaveBeenCalledWith(mockData); - expect(vm.toggleFrequentProjectsList).toHaveBeenCalledWith(true); - }); - - it('should set props for failure message to `true` when method fails to fetch frequent projects list', () => { - spyOn(vm.service, 'getFrequentProjects').and.returnValue(null); - spyOn(vm.store, 'setFrequentProjects'); - spyOn(vm, 'toggleFrequentProjectsList'); - - expect(vm.isLocalStorageFailed).toBeFalsy(); - - vm.fetchFrequentProjects(); - expect(vm.service.getFrequentProjects).toHaveBeenCalled(); - expect(vm.store.setFrequentProjects).toHaveBeenCalledWith([]); - expect(vm.toggleFrequentProjectsList).toHaveBeenCalledWith(true); - expect(vm.isLocalStorageFailed).toBeTruthy(); - }); - - it('should set props for search results list to `true` if search query was already made previously', () => { - spyOn(bp, 'getBreakpointSize').and.returnValue('md'); - spyOn(vm.service, 'getFrequentProjects'); - spyOn(vm, 'toggleSearchProjectsList'); - - vm.searchQuery = 'test'; - vm.fetchFrequentProjects(); - expect(vm.service.getFrequentProjects).not.toHaveBeenCalled(); - expect(vm.toggleSearchProjectsList).toHaveBeenCalledWith(true); - }); - - it('should set props for frequent projects list to `true` if search query was already made but screen size is less than 768px', () => { - spyOn(bp, 'getBreakpointSize').and.returnValue('sm'); - spyOn(vm, 'toggleSearchProjectsList'); - spyOn(vm.service, 'getFrequentProjects'); - - vm.searchQuery = 'test'; - vm.fetchFrequentProjects(); - expect(vm.service.getFrequentProjects).toHaveBeenCalled(); - expect(vm.toggleSearchProjectsList).not.toHaveBeenCalled(); - }); - }); - - describe('fetchSearchedProjects', () => { - const searchQuery = 'test'; - - it('should perform search with provided search query', done => { - const mockData = [mockRawProject]; - spyOn(vm, 'toggleLoader'); - spyOn(vm, 'toggleSearchProjectsList'); - spyOn(vm.service, 'getSearchedProjects').and.returnValue(returnServicePromise(mockData)); - spyOn(vm.store, 'setSearchedProjects'); - - vm.fetchSearchedProjects(searchQuery); - setTimeout(() => { - expect(vm.searchQuery).toBe(searchQuery); - expect(vm.toggleLoader).toHaveBeenCalledWith(true); - expect(vm.service.getSearchedProjects).toHaveBeenCalledWith(searchQuery); - expect(vm.toggleSearchProjectsList).toHaveBeenCalledWith(true); - expect(vm.store.setSearchedProjects).toHaveBeenCalledWith(mockData); - done(); - }, 0); - }); - - it('should update props for showing search failure', done => { - spyOn(vm, 'toggleSearchProjectsList'); - spyOn(vm.service, 'getSearchedProjects').and.returnValue(returnServicePromise({}, true)); - - vm.fetchSearchedProjects(searchQuery); - setTimeout(() => { - expect(vm.searchQuery).toBe(searchQuery); - expect(vm.service.getSearchedProjects).toHaveBeenCalledWith(searchQuery); - expect(vm.isSearchFailed).toBeTruthy(); - expect(vm.toggleSearchProjectsList).toHaveBeenCalledWith(true); - done(); - }, 0); - }); - }); - - describe('logCurrentProjectAccess', () => { - it('should log current project access via service', done => { - spyOn(vm.service, 'logProjectAccess'); - - vm.currentProject = mockProject; - vm.logCurrentProjectAccess(); - - setTimeout(() => { - expect(vm.service.logProjectAccess).toHaveBeenCalledWith(mockProject); - done(); - }, 1); - }); - }); - - describe('handleSearchClear', () => { - it('should show frequent projects list when search input is cleared', () => { - spyOn(vm.store, 'clearSearchedProjects'); - spyOn(vm, 'toggleFrequentProjectsList'); - - vm.handleSearchClear(); - - expect(vm.toggleFrequentProjectsList).toHaveBeenCalledWith(true); - expect(vm.store.clearSearchedProjects).toHaveBeenCalled(); - expect(vm.searchQuery).toBe(''); - }); - }); - - describe('handleSearchFailure', () => { - it('should show failure message within dropdown', () => { - spyOn(vm, 'toggleSearchProjectsList'); - - vm.handleSearchFailure(); - expect(vm.toggleSearchProjectsList).toHaveBeenCalledWith(true); - expect(vm.isSearchFailed).toBeTruthy(); - }); - }); - }); - - describe('created', () => { - it('should bind event listeners on eventHub', done => { - spyOn(eventHub, '$on'); - - createComponent().$mount(); - - Vue.nextTick(() => { - expect(eventHub.$on).toHaveBeenCalledWith('dropdownOpen', jasmine.any(Function)); - expect(eventHub.$on).toHaveBeenCalledWith('searchProjects', jasmine.any(Function)); - expect(eventHub.$on).toHaveBeenCalledWith('searchCleared', jasmine.any(Function)); - expect(eventHub.$on).toHaveBeenCalledWith('searchFailed', jasmine.any(Function)); - done(); - }); - }); - }); - - describe('beforeDestroy', () => { - it('should unbind event listeners on eventHub', done => { - const vm = createComponent(); - spyOn(eventHub, '$off'); - - vm.$mount(); - vm.$destroy(); - - Vue.nextTick(() => { - expect(eventHub.$off).toHaveBeenCalledWith('dropdownOpen', jasmine.any(Function)); - expect(eventHub.$off).toHaveBeenCalledWith('searchProjects', jasmine.any(Function)); - expect(eventHub.$off).toHaveBeenCalledWith('searchCleared', jasmine.any(Function)); - expect(eventHub.$off).toHaveBeenCalledWith('searchFailed', jasmine.any(Function)); - done(); - }); - }); - }); - - describe('template', () => { - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('should render search input', () => { - expect(vm.$el.querySelector('.search-input-container')).toBeDefined(); - }); - - it('should render loading animation', done => { - vm.toggleLoader(true); - Vue.nextTick(() => { - const loadingEl = vm.$el.querySelector('.loading-animation'); - - expect(loadingEl).toBeDefined(); - expect(loadingEl.classList.contains('prepend-top-20')).toBeTruthy(); - expect(loadingEl.querySelector('i').getAttribute('aria-label')).toBe('Loading projects'); - done(); - }); - }); - - it('should render frequent projects list header', done => { - vm.toggleFrequentProjectsList(true); - Vue.nextTick(() => { - const sectionHeaderEl = vm.$el.querySelector('.section-header'); - - expect(sectionHeaderEl).toBeDefined(); - expect(sectionHeaderEl.innerText.trim()).toBe('Frequently visited'); - done(); - }); - }); - - it('should render frequent projects list', done => { - vm.toggleFrequentProjectsList(true); - Vue.nextTick(() => { - expect(vm.$el.querySelector('.projects-list-frequent-container')).toBeDefined(); - done(); - }); - }); - - it('should render searched projects list', done => { - vm.toggleSearchProjectsList(true); - Vue.nextTick(() => { - expect(vm.$el.querySelector('.section-header')).toBe(null); - expect(vm.$el.querySelector('.projects-list-search-container')).toBeDefined(); - done(); - }); - }); - }); -}); diff --git a/spec/javascripts/projects_dropdown/components/projects_list_frequent_spec.js b/spec/javascripts/projects_dropdown/components/projects_list_frequent_spec.js deleted file mode 100644 index 2bafb4e81ca..00000000000 --- a/spec/javascripts/projects_dropdown/components/projects_list_frequent_spec.js +++ /dev/null @@ -1,72 +0,0 @@ -import Vue from 'vue'; - -import projectsListFrequentComponent from '~/projects_dropdown/components/projects_list_frequent.vue'; - -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import { mockFrequents } from '../mock_data'; - -const createComponent = () => { - const Component = Vue.extend(projectsListFrequentComponent); - - return mountComponent(Component, { - projects: mockFrequents, - localStorageFailed: false, - }); -}; - -describe('ProjectsListFrequentComponent', () => { - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('computed', () => { - describe('isListEmpty', () => { - it('should return `true` or `false` representing whether if `projects` is empty of not', () => { - vm.projects = []; - expect(vm.isListEmpty).toBeTruthy(); - - vm.projects = mockFrequents; - expect(vm.isListEmpty).toBeFalsy(); - }); - }); - - describe('listEmptyMessage', () => { - it('should return appropriate empty list message based on value of `localStorageFailed` prop', () => { - vm.localStorageFailed = true; - expect(vm.listEmptyMessage).toBe('This feature requires browser localStorage support'); - - vm.localStorageFailed = false; - expect(vm.listEmptyMessage).toBe('Projects you visit often will appear here'); - }); - }); - }); - - describe('template', () => { - it('should render component element with list of projects', (done) => { - vm.projects = mockFrequents; - - Vue.nextTick(() => { - expect(vm.$el.classList.contains('projects-list-frequent-container')).toBeTruthy(); - expect(vm.$el.querySelectorAll('ul.list-unstyled').length).toBe(1); - expect(vm.$el.querySelectorAll('li.projects-list-item-container').length).toBe(5); - done(); - }); - }); - - it('should render component element with empty message', (done) => { - vm.projects = []; - - Vue.nextTick(() => { - expect(vm.$el.querySelectorAll('li.section-empty').length).toBe(1); - expect(vm.$el.querySelectorAll('li.projects-list-item-container').length).toBe(0); - done(); - }); - }); - }); -}); diff --git a/spec/javascripts/projects_dropdown/components/projects_list_search_spec.js b/spec/javascripts/projects_dropdown/components/projects_list_search_spec.js deleted file mode 100644 index c4b86d77034..00000000000 --- a/spec/javascripts/projects_dropdown/components/projects_list_search_spec.js +++ /dev/null @@ -1,84 +0,0 @@ -import Vue from 'vue'; - -import projectsListSearchComponent from '~/projects_dropdown/components/projects_list_search.vue'; - -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import { mockProject } from '../mock_data'; - -const createComponent = () => { - const Component = Vue.extend(projectsListSearchComponent); - - return mountComponent(Component, { - projects: [mockProject], - matcher: 'lab', - searchFailed: false, - }); -}; - -describe('ProjectsListSearchComponent', () => { - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('computed', () => { - describe('isListEmpty', () => { - it('should return `true` or `false` representing whether if `projects` is empty of not', () => { - vm.projects = []; - expect(vm.isListEmpty).toBeTruthy(); - - vm.projects = [mockProject]; - expect(vm.isListEmpty).toBeFalsy(); - }); - }); - - describe('listEmptyMessage', () => { - it('should return appropriate empty list message based on value of `searchFailed` prop', () => { - vm.searchFailed = true; - expect(vm.listEmptyMessage).toBe('Something went wrong on our end.'); - - vm.searchFailed = false; - expect(vm.listEmptyMessage).toBe('Sorry, no projects matched your search'); - }); - }); - }); - - describe('template', () => { - it('should render component element with list of projects', (done) => { - vm.projects = [mockProject]; - - Vue.nextTick(() => { - expect(vm.$el.classList.contains('projects-list-search-container')).toBeTruthy(); - expect(vm.$el.querySelectorAll('ul.list-unstyled').length).toBe(1); - expect(vm.$el.querySelectorAll('li.projects-list-item-container').length).toBe(1); - done(); - }); - }); - - it('should render component element with empty message', (done) => { - vm.projects = []; - - Vue.nextTick(() => { - expect(vm.$el.querySelectorAll('li.section-empty').length).toBe(1); - expect(vm.$el.querySelectorAll('li.projects-list-item-container').length).toBe(0); - done(); - }); - }); - - it('should render component element with failure message', (done) => { - vm.searchFailed = true; - vm.projects = []; - - Vue.nextTick(() => { - expect(vm.$el.querySelectorAll('li.section-empty.section-failure').length).toBe(1); - expect(vm.$el.querySelectorAll('li.projects-list-item-container').length).toBe(0); - done(); - }); - }); - }); -}); diff --git a/spec/javascripts/projects_dropdown/components/search_spec.js b/spec/javascripts/projects_dropdown/components/search_spec.js deleted file mode 100644 index 427f5024e3a..00000000000 --- a/spec/javascripts/projects_dropdown/components/search_spec.js +++ /dev/null @@ -1,100 +0,0 @@ -import Vue from 'vue'; - -import searchComponent from '~/projects_dropdown/components/search.vue'; -import eventHub from '~/projects_dropdown/event_hub'; - -import mountComponent from 'spec/helpers/vue_mount_component_helper'; - -const createComponent = () => { - const Component = Vue.extend(searchComponent); - - return mountComponent(Component); -}; - -describe('SearchComponent', () => { - describe('methods', () => { - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('setFocus', () => { - it('should set focus to search input', () => { - spyOn(vm.$refs.search, 'focus'); - - vm.setFocus(); - expect(vm.$refs.search.focus).toHaveBeenCalled(); - }); - }); - - describe('emitSearchEvents', () => { - it('should emit `searchProjects` event via eventHub when `searchQuery` present', () => { - const searchQuery = 'test'; - spyOn(eventHub, '$emit'); - vm.searchQuery = searchQuery; - vm.emitSearchEvents(); - expect(eventHub.$emit).toHaveBeenCalledWith('searchProjects', searchQuery); - }); - - it('should emit `searchCleared` event via eventHub when `searchQuery` is cleared', () => { - spyOn(eventHub, '$emit'); - vm.searchQuery = ''; - vm.emitSearchEvents(); - expect(eventHub.$emit).toHaveBeenCalledWith('searchCleared'); - }); - }); - }); - - describe('mounted', () => { - it('should listen `dropdownOpen` event', (done) => { - spyOn(eventHub, '$on'); - createComponent(); - - Vue.nextTick(() => { - expect(eventHub.$on).toHaveBeenCalledWith('dropdownOpen', jasmine.any(Function)); - done(); - }); - }); - }); - - describe('beforeDestroy', () => { - it('should unbind event listeners on eventHub', (done) => { - const vm = createComponent(); - spyOn(eventHub, '$off'); - - vm.$mount(); - vm.$destroy(); - - Vue.nextTick(() => { - expect(eventHub.$off).toHaveBeenCalledWith('dropdownOpen', jasmine.any(Function)); - done(); - }); - }); - }); - - describe('template', () => { - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('should render component element', () => { - const inputEl = vm.$el.querySelector('input.form-control'); - - expect(vm.$el.classList.contains('search-input-container')).toBeTruthy(); - expect(inputEl).not.toBe(null); - expect(inputEl.getAttribute('placeholder')).toBe('Search your projects'); - expect(vm.$el.querySelector('.search-icon')).toBeDefined(); - }); - }); -}); diff --git a/spec/javascripts/projects_dropdown/mock_data.js b/spec/javascripts/projects_dropdown/mock_data.js deleted file mode 100644 index d6a79fb8ac1..00000000000 --- a/spec/javascripts/projects_dropdown/mock_data.js +++ /dev/null @@ -1,96 +0,0 @@ -export const currentSession = { - username: 'root', - storageKey: 'root/frequent-projects', - apiVersion: 'v4', - project: { - id: 1, - name: 'dummy-project', - namespace: 'SamepleGroup / Dummy-Project', - webUrl: 'http://127.0.0.1/samplegroup/dummy-project', - avatarUrl: null, - lastAccessedOn: Date.now(), - }, -}; - -export const mockProject = { - id: 1, - name: 'GitLab Community Edition', - namespace: 'gitlab-org / gitlab-ce', - webUrl: 'http://127.0.0.1:3000/gitlab-org/gitlab-ce', - avatarUrl: null, -}; - -export const mockRawProject = { - id: 1, - name: 'GitLab Community Edition', - name_with_namespace: 'gitlab-org / gitlab-ce', - web_url: 'http://127.0.0.1:3000/gitlab-org/gitlab-ce', - avatar_url: null, -}; - -export const mockFrequents = [ - { - id: 1, - name: 'GitLab Community Edition', - namespace: 'gitlab-org / gitlab-ce', - webUrl: 'http://127.0.0.1:3000/gitlab-org/gitlab-ce', - avatarUrl: null, - }, - { - id: 2, - name: 'GitLab CI', - namespace: 'gitlab-org / gitlab-ci', - webUrl: 'http://127.0.0.1:3000/gitlab-org/gitlab-ci', - avatarUrl: null, - }, - { - id: 3, - name: 'Typeahead.Js', - namespace: 'twitter / typeahead-js', - webUrl: 'http://127.0.0.1:3000/twitter/typeahead-js', - avatarUrl: '/uploads/-/system/project/avatar/7/TWBS.png', - }, - { - id: 4, - name: 'Intel', - namespace: 'platform / hardware / bsp / intel', - webUrl: 'http://127.0.0.1:3000/platform/hardware/bsp/intel', - avatarUrl: null, - }, - { - id: 5, - name: 'v4.4', - namespace: 'platform / hardware / bsp / kernel / common / v4.4', - webUrl: 'http://localhost:3000/platform/hardware/bsp/kernel/common/v4.4', - avatarUrl: null, - }, -]; - -export const unsortedFrequents = [ - { id: 1, frequency: 12, lastAccessedOn: 1491400843391 }, - { id: 2, frequency: 14, lastAccessedOn: 1488240890738 }, - { id: 3, frequency: 44, lastAccessedOn: 1497675908472 }, - { id: 4, frequency: 8, lastAccessedOn: 1497979281815 }, - { id: 5, frequency: 34, lastAccessedOn: 1488089211943 }, - { id: 6, frequency: 14, lastAccessedOn: 1493517292488 }, - { id: 7, frequency: 42, lastAccessedOn: 1486815299875 }, - { id: 8, frequency: 33, lastAccessedOn: 1500762279114 }, - { id: 10, frequency: 46, lastAccessedOn: 1483251641543 }, -]; - -/** - * This const has a specific order which tests authenticity - * of `ProjectsService.getTopFrequentProjects` method so - * DO NOT change order of items in this const. - */ -export const sortedFrequents = [ - { id: 10, frequency: 46, lastAccessedOn: 1483251641543 }, - { id: 3, frequency: 44, lastAccessedOn: 1497675908472 }, - { id: 7, frequency: 42, lastAccessedOn: 1486815299875 }, - { id: 5, frequency: 34, lastAccessedOn: 1488089211943 }, - { id: 8, frequency: 33, lastAccessedOn: 1500762279114 }, - { id: 6, frequency: 14, lastAccessedOn: 1493517292488 }, - { id: 2, frequency: 14, lastAccessedOn: 1488240890738 }, - { id: 1, frequency: 12, lastAccessedOn: 1491400843391 }, - { id: 4, frequency: 8, lastAccessedOn: 1497979281815 }, -]; diff --git a/spec/javascripts/projects_dropdown/service/projects_service_spec.js b/spec/javascripts/projects_dropdown/service/projects_service_spec.js deleted file mode 100644 index cfd1bb7d24f..00000000000 --- a/spec/javascripts/projects_dropdown/service/projects_service_spec.js +++ /dev/null @@ -1,179 +0,0 @@ -import Vue from 'vue'; -import VueResource from 'vue-resource'; - -import bp from '~/breakpoints'; -import ProjectsService from '~/projects_dropdown/service/projects_service'; -import { FREQUENT_PROJECTS } from '~/projects_dropdown/constants'; -import { currentSession, unsortedFrequents, sortedFrequents } from '../mock_data'; - -Vue.use(VueResource); - -FREQUENT_PROJECTS.MAX_COUNT = 3; - -describe('ProjectsService', () => { - let service; - - beforeEach(() => { - gon.api_version = currentSession.apiVersion; - gon.current_user_id = 1; - service = new ProjectsService(currentSession.username); - }); - - describe('contructor', () => { - it('should initialize default properties of class', () => { - expect(service.isLocalStorageAvailable).toBeTruthy(); - expect(service.currentUserName).toBe(currentSession.username); - expect(service.storageKey).toBe(currentSession.storageKey); - expect(service.projectsPath).toBeDefined(); - }); - }); - - describe('getSearchedProjects', () => { - it('should return promise from VueResource HTTP GET', () => { - spyOn(service.projectsPath, 'get').and.stub(); - - const searchQuery = 'lab'; - const queryParams = { - simple: true, - per_page: 20, - membership: true, - order_by: 'last_activity_at', - search: searchQuery, - }; - - service.getSearchedProjects(searchQuery); - expect(service.projectsPath.get).toHaveBeenCalledWith(queryParams); - }); - }); - - describe('logProjectAccess', () => { - let storage; - - beforeEach(() => { - storage = {}; - - spyOn(window.localStorage, 'setItem').and.callFake((storageKey, value) => { - storage[storageKey] = value; - }); - - spyOn(window.localStorage, 'getItem').and.callFake((storageKey) => { - if (storage[storageKey]) { - return storage[storageKey]; - } - - return null; - }); - }); - - it('should create a project store if it does not exist and adds a project', () => { - service.logProjectAccess(currentSession.project); - - const projects = JSON.parse(storage[currentSession.storageKey]); - expect(projects.length).toBe(1); - expect(projects[0].frequency).toBe(1); - expect(projects[0].lastAccessedOn).toBeDefined(); - }); - - it('should prevent inserting same report multiple times into store', () => { - service.logProjectAccess(currentSession.project); - service.logProjectAccess(currentSession.project); - - const projects = JSON.parse(storage[currentSession.storageKey]); - expect(projects.length).toBe(1); - }); - - it('should increase frequency of report if it was logged multiple times over the course of an hour', () => { - let projects; - spyOn(Math, 'abs').and.returnValue(3600001); // this will lead to `diff` > 1; - service.logProjectAccess(currentSession.project); - - projects = JSON.parse(storage[currentSession.storageKey]); - expect(projects[0].frequency).toBe(1); - - service.logProjectAccess(currentSession.project); - projects = JSON.parse(storage[currentSession.storageKey]); - expect(projects[0].frequency).toBe(2); - expect(projects[0].lastAccessedOn).not.toBe(currentSession.project.lastAccessedOn); - }); - - it('should always update project metadata', () => { - let projects; - const oldProject = { - ...currentSession.project, - }; - - const newProject = { - ...currentSession.project, - name: 'New Name', - avatarUrl: 'new/avatar.png', - namespace: 'New / Namespace', - webUrl: 'http://localhost/new/web/url', - }; - - service.logProjectAccess(oldProject); - projects = JSON.parse(storage[currentSession.storageKey]); - expect(projects[0].name).toBe(oldProject.name); - expect(projects[0].avatarUrl).toBe(oldProject.avatarUrl); - expect(projects[0].namespace).toBe(oldProject.namespace); - expect(projects[0].webUrl).toBe(oldProject.webUrl); - - service.logProjectAccess(newProject); - projects = JSON.parse(storage[currentSession.storageKey]); - expect(projects[0].name).toBe(newProject.name); - expect(projects[0].avatarUrl).toBe(newProject.avatarUrl); - expect(projects[0].namespace).toBe(newProject.namespace); - expect(projects[0].webUrl).toBe(newProject.webUrl); - }); - - it('should not add more than 20 projects in store', () => { - for (let i = 1; i <= 5; i += 1) { - const project = Object.assign(currentSession.project, { id: i }); - service.logProjectAccess(project); - } - - const projects = JSON.parse(storage[currentSession.storageKey]); - expect(projects.length).toBe(3); - }); - }); - - describe('getTopFrequentProjects', () => { - let storage = {}; - - beforeEach(() => { - storage[currentSession.storageKey] = JSON.stringify(unsortedFrequents); - - spyOn(window.localStorage, 'getItem').and.callFake((storageKey) => { - if (storage[storageKey]) { - return storage[storageKey]; - } - - return null; - }); - }); - - it('should return top 5 frequently accessed projects for desktop screens', () => { - spyOn(bp, 'getBreakpointSize').and.returnValue('md'); - const frequentProjects = service.getTopFrequentProjects(); - - expect(frequentProjects.length).toBe(5); - frequentProjects.forEach((project, index) => { - expect(project.id).toBe(sortedFrequents[index].id); - }); - }); - - it('should return top 3 frequently accessed projects for mobile screens', () => { - spyOn(bp, 'getBreakpointSize').and.returnValue('sm'); - const frequentProjects = service.getTopFrequentProjects(); - - expect(frequentProjects.length).toBe(3); - frequentProjects.forEach((project, index) => { - expect(project.id).toBe(sortedFrequents[index].id); - }); - }); - - it('should return empty array if there are no projects available in store', () => { - storage = {}; - expect(service.getTopFrequentProjects().length).toBe(0); - }); - }); -}); diff --git a/spec/javascripts/projects_dropdown/store/projects_store_spec.js b/spec/javascripts/projects_dropdown/store/projects_store_spec.js deleted file mode 100644 index e57399d37cd..00000000000 --- a/spec/javascripts/projects_dropdown/store/projects_store_spec.js +++ /dev/null @@ -1,41 +0,0 @@ -import ProjectsStore from '~/projects_dropdown/store/projects_store'; -import { mockProject, mockRawProject } from '../mock_data'; - -describe('ProjectsStore', () => { - let store; - - beforeEach(() => { - store = new ProjectsStore(); - }); - - describe('setFrequentProjects', () => { - it('should set frequent projects list to state', () => { - store.setFrequentProjects([mockProject]); - - expect(store.getFrequentProjects().length).toBe(1); - expect(store.getFrequentProjects()[0].id).toBe(mockProject.id); - }); - }); - - describe('setSearchedProjects', () => { - it('should set searched projects list to state', () => { - store.setSearchedProjects([mockRawProject]); - - const processedProjects = store.getSearchedProjects(); - expect(processedProjects.length).toBe(1); - expect(processedProjects[0].id).toBe(mockRawProject.id); - expect(processedProjects[0].namespace).toBe(mockRawProject.name_with_namespace); - expect(processedProjects[0].webUrl).toBe(mockRawProject.web_url); - expect(processedProjects[0].avatarUrl).toBe(mockRawProject.avatar_url); - }); - }); - - describe('clearSearchedProjects', () => { - it('should clear searched projects list from state', () => { - store.setSearchedProjects([mockRawProject]); - expect(store.getSearchedProjects().length).toBe(1); - store.clearSearchedProjects(); - expect(store.getSearchedProjects().length).toBe(0); - }); - }); -}); |