diff options
Diffstat (limited to 'spec/javascripts')
178 files changed, 2312 insertions, 4717 deletions
diff --git a/spec/javascripts/api_spec.js b/spec/javascripts/api_spec.js index cf3a76d0d2e..5477581c1b9 100644 --- a/spec/javascripts/api_spec.js +++ b/spec/javascripts/api_spec.js @@ -137,6 +137,27 @@ describe('Api', () => { done(); }); }); + + it('creates a group label', (done) => { + const namespace = 'group/subgroup'; + const labelData = { some: 'data' }; + const expectedUrl = `${dummyUrlRoot}/groups/${namespace}/-/labels`; + const expectedData = { + label: labelData, + }; + mock.onPost(expectedUrl).reply((config) => { + expect(config.data).toBe(JSON.stringify(expectedData)); + + return [200, { + name: 'test', + }]; + }); + + Api.newLabel(namespace, undefined, labelData, (response) => { + expect(response.name).toBe('test'); + done(); + }); + }); }); describe('groupProjects', () => { diff --git a/spec/javascripts/autosave_spec.js b/spec/javascripts/autosave_spec.js index 9f9acc392c2..b568d7fa8b0 100644 --- a/spec/javascripts/autosave_spec.js +++ b/spec/javascripts/autosave_spec.js @@ -3,28 +3,24 @@ import AccessorUtilities from '~/lib/utils/accessor'; describe('Autosave', () => { let autosave; + const field = $('<textarea></textarea>'); + const key = 'key'; describe('class constructor', () => { - const key = 'key'; - const field = jasmine.createSpyObj('field', ['data', 'on']); - beforeEach(() => { spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').and.returnValue(true); spyOn(Autosave.prototype, 'restore'); - - autosave = new Autosave(field, key); }); it('should set .isLocalStorageAvailable', () => { + autosave = new Autosave(field, key); + expect(AccessorUtilities.isLocalStorageAccessSafe).toHaveBeenCalled(); expect(autosave.isLocalStorageAvailable).toBe(true); }); }); describe('restore', () => { - const key = 'key'; - const field = jasmine.createSpyObj('field', ['trigger']); - beforeEach(() => { autosave = { field, @@ -49,24 +45,53 @@ describe('Autosave', () => { describe('if .isLocalStorageAvailable is `true`', () => { beforeEach(() => { autosave.isLocalStorageAvailable = true; - - Autosave.prototype.restore.call(autosave); }); it('should call .getItem', () => { + Autosave.prototype.restore.call(autosave); + expect(window.localStorage.getItem).toHaveBeenCalledWith(key); }); + + it('triggers jquery event', () => { + spyOn(autosave.field, 'trigger').and.callThrough(); + + Autosave.prototype.restore.call(autosave); + + expect( + field.trigger, + ).toHaveBeenCalled(); + }); + + it('triggers native event', (done) => { + autosave.field.get(0).addEventListener('change', () => { + done(); + }); + + Autosave.prototype.restore.call(autosave); + }); + }); + + describe('if field gets deleted from DOM', () => { + beforeEach(() => { + autosave.field = $('.not-a-real-element'); + }); + + it('does not trigger event', () => { + spyOn(field, 'trigger').and.callThrough(); + + expect( + field.trigger, + ).not.toHaveBeenCalled(); + }); }); }); describe('save', () => { - const field = jasmine.createSpyObj('field', ['val']); - beforeEach(() => { autosave = jasmine.createSpyObj('autosave', ['reset']); autosave.field = field; - - field.val.and.returnValue('value'); + field.val('value'); spyOn(window.localStorage, 'setItem'); }); @@ -97,8 +122,6 @@ describe('Autosave', () => { }); describe('reset', () => { - const key = 'key'; - beforeEach(() => { autosave = { key, diff --git a/spec/javascripts/boards/board_card_spec.js b/spec/javascripts/boards/board_card_spec.js index 80a598e63bd..13d607a06d2 100644 --- a/spec/javascripts/boards/board_card_spec.js +++ b/spec/javascripts/boards/board_card_spec.js @@ -9,8 +9,8 @@ import axios from '~/lib/utils/axios_utils'; import '~/boards/models/assignee'; import eventHub from '~/boards/eventhub'; +import '~/vue_shared/models/label'; import '~/boards/models/list'; -import '~/boards/models/label'; import '~/boards/stores/boards_store'; import boardCard from '~/boards/components/board_card.vue'; import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data'; diff --git a/spec/javascripts/boards/board_new_issue_spec.js b/spec/javascripts/boards/board_new_issue_spec.js index e204985f039..d5fbfdeaa91 100644 --- a/spec/javascripts/boards/board_new_issue_spec.js +++ b/spec/javascripts/boards/board_new_issue_spec.js @@ -4,7 +4,7 @@ import Vue from 'vue'; import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; -import boardNewIssue from '~/boards/components/board_new_issue'; +import boardNewIssue from '~/boards/components/board_new_issue.vue'; import '~/boards/models/list'; import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data'; diff --git a/spec/javascripts/boards/boards_store_spec.js b/spec/javascripts/boards/boards_store_spec.js index 8411f4dd8a6..0cf9e4c9ba1 100644 --- a/spec/javascripts/boards/boards_store_spec.js +++ b/spec/javascripts/boards/boards_store_spec.js @@ -7,8 +7,8 @@ import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; import Cookies from 'js-cookie'; +import '~/vue_shared/models/label'; import '~/boards/models/issue'; -import '~/boards/models/label'; import '~/boards/models/list'; import '~/boards/models/assignee'; import '~/boards/services/board_service'; diff --git a/spec/javascripts/boards/issue_card_spec.js b/spec/javascripts/boards/issue_card_spec.js index 278155c585e..37088a6421c 100644 --- a/spec/javascripts/boards/issue_card_spec.js +++ b/spec/javascripts/boards/issue_card_spec.js @@ -4,8 +4,8 @@ import Vue from 'vue'; +import '~/vue_shared/models/label'; import '~/boards/models/issue'; -import '~/boards/models/label'; import '~/boards/models/list'; import '~/boards/models/assignee'; import '~/boards/stores/boards_store'; diff --git a/spec/javascripts/boards/issue_spec.js b/spec/javascripts/boards/issue_spec.js index dbbe14fe3e0..4a11131b55c 100644 --- a/spec/javascripts/boards/issue_spec.js +++ b/spec/javascripts/boards/issue_spec.js @@ -3,8 +3,8 @@ /* global ListIssue */ import Vue from 'vue'; +import '~/vue_shared/models/label'; import '~/boards/models/issue'; -import '~/boards/models/label'; import '~/boards/models/list'; import '~/boards/models/assignee'; import '~/boards/services/board_service'; diff --git a/spec/javascripts/boards/list_spec.js b/spec/javascripts/boards/list_spec.js index 34964b20b05..d9a1d692949 100644 --- a/spec/javascripts/boards/list_spec.js +++ b/spec/javascripts/boards/list_spec.js @@ -6,8 +6,8 @@ import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; import _ from 'underscore'; +import '~/vue_shared/models/label'; import '~/boards/models/issue'; -import '~/boards/models/label'; import '~/boards/models/list'; import '~/boards/models/assignee'; import '~/boards/services/board_service'; diff --git a/spec/javascripts/boards/modal_store_spec.js b/spec/javascripts/boards/modal_store_spec.js index 7eecb58a4c3..e9d77f035e3 100644 --- a/spec/javascripts/boards/modal_store_spec.js +++ b/spec/javascripts/boards/modal_store_spec.js @@ -1,7 +1,7 @@ /* global ListIssue */ +import '~/vue_shared/models/label'; import '~/boards/models/issue'; -import '~/boards/models/label'; import '~/boards/models/list'; import '~/boards/models/assignee'; import '~/boards/stores/modal_store'; diff --git a/spec/javascripts/ci_variable_list/ci_variable_list_spec.js b/spec/javascripts/ci_variable_list/ci_variable_list_spec.js index cac785fd3c6..270f925e699 100644 --- a/spec/javascripts/ci_variable_list/ci_variable_list_spec.js +++ b/spec/javascripts/ci_variable_list/ci_variable_list_spec.js @@ -1,5 +1,5 @@ import VariableList from '~/ci_variable_list/ci_variable_list'; -import getSetTimeoutPromise from '../helpers/set_timeout_promise_helper'; +import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper'; const HIDE_CLASS = 'hide'; diff --git a/spec/javascripts/clusters/clusters_bundle_spec.js b/spec/javascripts/clusters/clusters_bundle_spec.js index a9e244e523d..a5cd247b689 100644 --- a/spec/javascripts/clusters/clusters_bundle_spec.js +++ b/spec/javascripts/clusters/clusters_bundle_spec.js @@ -7,7 +7,7 @@ import { REQUEST_SUCCESS, REQUEST_FAILURE, } from '~/clusters/constants'; -import getSetTimeoutPromise from '../helpers/set_timeout_promise_helper'; +import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper'; describe('Clusters', () => { let cluster; diff --git a/spec/javascripts/clusters/components/application_row_spec.js b/spec/javascripts/clusters/components/application_row_spec.js index e671c18e1a5..2c4707bb856 100644 --- a/spec/javascripts/clusters/components/application_row_spec.js +++ b/spec/javascripts/clusters/components/application_row_spec.js @@ -12,7 +12,7 @@ import { REQUEST_FAILURE, } from '~/clusters/constants'; import applicationRow from '~/clusters/components/application_row.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { DEFAULT_APPLICATION_STATE } from '../services/mock_data'; describe('Application Row', () => { diff --git a/spec/javascripts/clusters/components/applications_spec.js b/spec/javascripts/clusters/components/applications_spec.js index 1a8affad4e3..d546543d273 100644 --- a/spec/javascripts/clusters/components/applications_spec.js +++ b/spec/javascripts/clusters/components/applications_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import applications from '~/clusters/components/applications.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Applications', () => { let vm; @@ -38,10 +38,75 @@ describe('Applications', () => { expect(vm.$el.querySelector('.js-cluster-application-row-prometheus')).toBeDefined(); }); - /* * / it('renders a row for GitLab Runner', () => { expect(vm.$el.querySelector('.js-cluster-application-row-runner')).toBeDefined(); }); - /* */ + }); + + describe('Ingress application', () => { + describe('when installed', () => { + describe('with ip address', () => { + it('renders ip address with a clipboard button', () => { + vm = mountComponent(Applications, { + applications: { + ingress: { + title: 'Ingress', + status: 'installed', + externalIp: '0.0.0.0', + }, + helm: { title: 'Helm Tiller' }, + runner: { title: 'GitLab Runner' }, + prometheus: { title: 'Prometheus' }, + }, + }); + + expect( + vm.$el.querySelector('.js-ip-address').value, + ).toEqual('0.0.0.0'); + + expect( + vm.$el.querySelector('.js-clipboard-btn').getAttribute('data-clipboard-text'), + ).toEqual('0.0.0.0'); + }); + }); + + describe('without ip address', () => { + it('renders an input text with a question mark and an alert text', () => { + vm = mountComponent(Applications, { + applications: { + ingress: { + title: 'Ingress', + status: 'installed', + }, + helm: { title: 'Helm Tiller' }, + runner: { title: 'GitLab Runner' }, + prometheus: { title: 'Prometheus' }, + }, + }); + + expect( + vm.$el.querySelector('.js-ip-address').value, + ).toEqual('?'); + + expect(vm.$el.querySelector('.js-no-ip-message')).not.toBe(null); + }); + }); + }); + + describe('before installing', () => { + it('does not render the IP address', () => { + vm = mountComponent(Applications, { + applications: { + helm: { title: 'Helm Tiller' }, + ingress: { title: 'Ingress' }, + runner: { title: 'GitLab Runner' }, + prometheus: { title: 'Prometheus' }, + }, + }); + + expect(vm.$el.textContent).not.toContain('Ingress IP Address'); + expect(vm.$el.querySelector('.js-ip-address')).toBe(null); + }); + }); }); }); diff --git a/spec/javascripts/clusters/services/mock_data.js b/spec/javascripts/clusters/services/mock_data.js index 253b3c45243..6ae7a792329 100644 --- a/spec/javascripts/clusters/services/mock_data.js +++ b/spec/javascripts/clusters/services/mock_data.js @@ -18,6 +18,7 @@ const CLUSTERS_MOCK_DATA = { name: 'ingress', status: APPLICATION_ERROR, status_reason: 'Cannot connect', + external_ip: null, }, { name: 'runner', status: APPLICATION_INSTALLING, diff --git a/spec/javascripts/clusters/stores/clusters_store_spec.js b/spec/javascripts/clusters/stores/clusters_store_spec.js index 726a4ed30de..8028faf2f02 100644 --- a/spec/javascripts/clusters/stores/clusters_store_spec.js +++ b/spec/javascripts/clusters/stores/clusters_store_spec.js @@ -75,6 +75,7 @@ describe('Clusters Store', () => { statusReason: mockResponseData.applications[1].status_reason, requestStatus: null, requestReason: null, + externalIp: null, }, runner: { title: 'GitLab Runner', diff --git a/spec/javascripts/commit/commit_pipeline_status_component_spec.js b/spec/javascripts/commit/commit_pipeline_status_component_spec.js index 90f290e845e..421fe62a1e7 100644 --- a/spec/javascripts/commit/commit_pipeline_status_component_spec.js +++ b/spec/javascripts/commit/commit_pipeline_status_component_spec.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue'; -import mountComponent from '../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Commit pipeline status component', () => { let vm; diff --git a/spec/javascripts/cycle_analytics/banner_spec.js b/spec/javascripts/cycle_analytics/banner_spec.js index 64a76a6ee5f..2815bdba0c2 100644 --- a/spec/javascripts/cycle_analytics/banner_spec.js +++ b/spec/javascripts/cycle_analytics/banner_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import banner from '~/cycle_analytics/components/banner.vue'; -import mountComponent from '../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Cycle analytics banner', () => { let vm; diff --git a/spec/javascripts/cycle_analytics/total_time_component_spec.js b/spec/javascripts/cycle_analytics/total_time_component_spec.js index ad0fc38a856..691e03cb8a6 100644 --- a/spec/javascripts/cycle_analytics/total_time_component_spec.js +++ b/spec/javascripts/cycle_analytics/total_time_component_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import component from '~/cycle_analytics/components/total_time_component.vue'; -import mountComponent from '../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Total time component', () => { let vm; diff --git a/spec/javascripts/environments/emtpy_state_spec.js b/spec/javascripts/environments/emtpy_state_spec.js index 82de35933f5..10a19af4175 100644 --- a/spec/javascripts/environments/emtpy_state_spec.js +++ b/spec/javascripts/environments/emtpy_state_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import emptyState from '~/environments/components/empty_state.vue'; -import mountComponent from '../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('environments empty state', () => { let vm; diff --git a/spec/javascripts/environments/environment_table_spec.js b/spec/javascripts/environments/environment_table_spec.js index 9bd42863759..0e5e50a59a5 100644 --- a/spec/javascripts/environments/environment_table_spec.js +++ b/spec/javascripts/environments/environment_table_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import environmentTableComp from '~/environments/components/environments_table.vue'; -import mountComponent from '../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Environment table', () => { let Component; diff --git a/spec/javascripts/environments/environments_app_spec.js b/spec/javascripts/environments/environments_app_spec.js index a41a4e5a3f7..e4c3bf2bef1 100644 --- a/spec/javascripts/environments/environments_app_spec.js +++ b/spec/javascripts/environments/environments_app_spec.js @@ -1,9 +1,9 @@ import _ from 'underscore'; import Vue from 'vue'; import environmentsComponent from '~/environments/components/environments_app.vue'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import { headersInterceptor } from 'spec/helpers/vue_resource_helper'; import { environment, folder } from './mock_data'; -import { headersInterceptor } from '../helpers/vue_resource_helper'; -import mountComponent from '../helpers/vue_mount_component_helper'; describe('Environment', () => { const mockData = { @@ -61,6 +61,7 @@ describe('Environment', () => { }); describe('with paginated environments', () => { + let backupInterceptors; const environmentsResponseInterceptor = (request, next) => { next((response) => { response.headers.set('X-nExt-pAge', '2'); @@ -84,16 +85,16 @@ describe('Environment', () => { }; beforeEach(() => { - Vue.http.interceptors.push(environmentsResponseInterceptor); - Vue.http.interceptors.push(headersInterceptor); + backupInterceptors = Vue.http.interceptors; + Vue.http.interceptors = [ + environmentsResponseInterceptor, + headersInterceptor, + ]; component = mountComponent(EnvironmentsComponent, mockData); }); afterEach(() => { - Vue.http.interceptors = _.without( - Vue.http.interceptors, environmentsResponseInterceptor, - ); - Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor); + Vue.http.interceptors = backupInterceptors; }); it('should render a table with environments', (done) => { diff --git a/spec/javascripts/environments/folder/environments_folder_view_spec.js b/spec/javascripts/environments/folder/environments_folder_view_spec.js index a085074d312..906a1116974 100644 --- a/spec/javascripts/environments/folder/environments_folder_view_spec.js +++ b/spec/javascripts/environments/folder/environments_folder_view_spec.js @@ -1,9 +1,9 @@ import _ from 'underscore'; import Vue from 'vue'; import environmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue'; +import { headersInterceptor } from 'spec/helpers/vue_resource_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { environmentsList } from '../mock_data'; -import { headersInterceptor } from '../../helpers/vue_resource_helper'; -import mountComponent from '../../helpers/vue_mount_component_helper'; describe('Environments Folder View', () => { let Component; diff --git a/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js b/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js index 34ffc7b1016..1b1f28f3ddb 100644 --- a/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js +++ b/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js @@ -8,7 +8,7 @@ import { mouseenter, inserted, } from '~/feature_highlight/feature_highlight_helper'; -import getSetTimeoutPromise from '../helpers/set_timeout_promise_helper'; +import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper'; describe('feature highlight helper', () => { describe('getSelector', () => { diff --git a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js index f1da5f81c0f..756a654765b 100644 --- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js +++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js @@ -128,6 +128,24 @@ describe('Filtered Search Visual Tokens', () => { }); }); + describe('getEndpointWithQueryParams', () => { + it('returns `endpoint` string as is when second param `endpointQueryParams` is undefined, null or empty string', () => { + const endpoint = 'foo/bar/labels.json'; + expect(subject.getEndpointWithQueryParams(endpoint)).toBe(endpoint); + expect(subject.getEndpointWithQueryParams(endpoint, null)).toBe(endpoint); + expect(subject.getEndpointWithQueryParams(endpoint, '')).toBe(endpoint); + }); + + it('returns `endpoint` string with values of `endpointQueryParams`', () => { + const endpoint = 'foo/bar/labels.json'; + const singleQueryParams = '{"foo":"true"}'; + const multipleQueryParams = '{"foo":"true","bar":"true"}'; + + expect(subject.getEndpointWithQueryParams(endpoint, singleQueryParams)).toBe(`${endpoint}?foo=true`); + expect(subject.getEndpointWithQueryParams(endpoint, multipleQueryParams)).toBe(`${endpoint}?foo=true&bar=true`); + }); + }); + describe('unselectTokens', () => { it('does nothing when there are no tokens', () => { const beforeHTML = tokensContainer.innerHTML; diff --git a/spec/javascripts/fixtures/environments.rb b/spec/javascripts/fixtures/environments.rb deleted file mode 100644 index d2457d75419..00000000000 --- a/spec/javascripts/fixtures/environments.rb +++ /dev/null @@ -1,30 +0,0 @@ -require 'spec_helper' - -describe Projects::EnvironmentsController, '(JavaScript fixtures)', type: :controller do - include JavaScriptFixturesHelpers - - let(:admin) { create(:admin) } - let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} - let(:project) { create(:project_empty_repo, namespace: namespace, path: 'environments-project') } - let(:environment) { create(:environment, name: 'production', project: project) } - - render_views - - before(:all) do - clean_frontend_fixtures('environments/metrics') - end - - before do - sign_in(admin) - end - - it 'environments/metrics/metrics.html.raw' do |example| - get :metrics, - namespace_id: project.namespace, - project_id: project, - id: environment.id - - expect(response).to be_success - store_frontend_fixture(response, example.description) - end -end diff --git a/spec/javascripts/fixtures/merge_requests.rb b/spec/javascripts/fixtures/merge_requests.rb index 3fd16d76f51..ee60489eb7c 100644 --- a/spec/javascripts/fixtures/merge_requests.rb +++ b/spec/javascripts/fixtures/merge_requests.rb @@ -70,8 +70,50 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont render_merge_request(example.description, merge_request) end + it 'merge_requests/discussions.json' do |example| + create(:diff_note_on_merge_request, project: project, author: admin, position: position, noteable: merge_request) + render_discussions_json(merge_request, example.description) + end + + it 'merge_requests/diff_discussion.json' do |example| + create(:diff_note_on_merge_request, project: project, author: admin, position: position, noteable: merge_request) + 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" } + let(:image_position) do + Gitlab::Diff::Position.new( + old_path: image_path, + new_path: image_path, + width: 100, + height: 100, + x: 1, + y: 1, + position_type: "image", + diff_refs: merge_request2.diff_refs + ) + end + + it 'merge_requests/image_diff_discussion.json' do |example| + create(:diff_note_on_merge_request, project: project, noteable: merge_request2, position: image_position) + render_discussions_json(merge_request2, example.description) + end + end + private + def render_discussions_json(merge_request, fixture_file_name) + get :discussions, + namespace_id: project.namespace.to_param, + project_id: project, + id: merge_request.to_param, + format: :json + + store_frontend_fixture(response, fixture_file_name) + end + def render_merge_request(fixture_file_name, merge_request) get :show, namespace_id: project.namespace.to_param, diff --git a/spec/javascripts/groups/components/app_spec.js b/spec/javascripts/groups/components/app_spec.js index 3adc29262f3..46c7b9f54f2 100644 --- a/spec/javascripts/groups/components/app_spec.js +++ b/spec/javascripts/groups/components/app_spec.js @@ -129,7 +129,7 @@ describe('AppComponent', () => { vm.fetchGroups({}); setTimeout(() => { - expect(vm.isLoading).toBeFalsy(); + expect(vm.isLoading).toBe(false); expect($.scrollTo).toHaveBeenCalledWith(0); expect(window.Flash).toHaveBeenCalledWith('An error occurred. Please try again.'); done(); @@ -144,10 +144,10 @@ describe('AppComponent', () => { spyOn(vm, 'updateGroups').and.callThrough(); vm.fetchAllGroups(); - expect(vm.isLoading).toBeTruthy(); + expect(vm.isLoading).toBe(true); expect(vm.fetchGroups).toHaveBeenCalled(); setTimeout(() => { - expect(vm.isLoading).toBeFalsy(); + expect(vm.isLoading).toBe(false); expect(vm.updateGroups).toHaveBeenCalled(); done(); }, 0); @@ -181,7 +181,7 @@ describe('AppComponent', () => { spyOn($, 'scrollTo'); vm.fetchPage(2, null, null, true); - expect(vm.isLoading).toBeTruthy(); + expect(vm.isLoading).toBe(true); expect(vm.fetchGroups).toHaveBeenCalledWith({ page: 2, filterGroupsBy: null, @@ -190,7 +190,7 @@ describe('AppComponent', () => { archived: true, }); setTimeout(() => { - expect(vm.isLoading).toBeFalsy(); + expect(vm.isLoading).toBe(false); expect($.scrollTo).toHaveBeenCalledWith(0); expect(utils.mergeUrlParams).toHaveBeenCalledWith({ page: 2 }, jasmine.any(String)); expect(window.history.replaceState).toHaveBeenCalledWith({ @@ -216,7 +216,7 @@ describe('AppComponent', () => { spyOn(vm.store, 'setGroupChildren'); vm.toggleChildren(groupItem); - expect(groupItem.isChildrenLoading).toBeTruthy(); + expect(groupItem.isChildrenLoading).toBe(true); expect(vm.fetchGroups).toHaveBeenCalledWith({ parentId: groupItem.id, }); @@ -232,7 +232,7 @@ describe('AppComponent', () => { vm.toggleChildren(groupItem); expect(vm.fetchGroups).not.toHaveBeenCalled(); - expect(groupItem.isOpen).toBeTruthy(); + expect(groupItem.isOpen).toBe(true); }); it('should collapse group if it is already expanded', () => { @@ -241,16 +241,16 @@ describe('AppComponent', () => { vm.toggleChildren(groupItem); expect(vm.fetchGroups).not.toHaveBeenCalled(); - expect(groupItem.isOpen).toBeFalsy(); + expect(groupItem.isOpen).toBe(false); }); it('should set `isChildrenLoading` back to `false` if load request fails', (done) => { spyOn(vm, 'fetchGroups').and.returnValue(returnServicePromise({}, true)); vm.toggleChildren(groupItem); - expect(groupItem.isChildrenLoading).toBeTruthy(); + expect(groupItem.isChildrenLoading).toBe(true); setTimeout(() => { - expect(groupItem.isChildrenLoading).toBeFalsy(); + expect(groupItem.isChildrenLoading).toBe(false); done(); }, 0); }); @@ -268,10 +268,10 @@ describe('AppComponent', () => { it('updates props which show modal confirmation dialog', () => { const group = Object.assign({}, mockParentGroupItem); - expect(vm.updateModal).toBeFalsy(); + expect(vm.showModal).toBe(false); expect(vm.groupLeaveConfirmationMessage).toBe(''); vm.showLeaveGroupModal(group, mockParentGroupItem); - expect(vm.updateModal).toBeTruthy(); + expect(vm.showModal).toBe(true); expect(vm.groupLeaveConfirmationMessage).toBe(`Are you sure you want to leave the "${group.fullName}" group?`); }); }); @@ -280,9 +280,9 @@ describe('AppComponent', () => { it('hides modal confirmation which is shown before leaving the group', () => { const group = Object.assign({}, mockParentGroupItem); vm.showLeaveGroupModal(group, mockParentGroupItem); - expect(vm.updateModal).toBeTruthy(); + expect(vm.showModal).toBe(true); vm.hideLeaveGroupModal(); - expect(vm.updateModal).toBeFalsy(); + expect(vm.showModal).toBe(false); }); }); @@ -307,8 +307,8 @@ describe('AppComponent', () => { spyOn($, 'scrollTo'); vm.leaveGroup(); - expect(vm.updateModal).toBeFalsy(); - expect(vm.targetGroup.isBeingRemoved).toBeTruthy(); + expect(vm.showModal).toBe(false); + expect(vm.targetGroup.isBeingRemoved).toBe(true); expect(vm.service.leaveGroup).toHaveBeenCalledWith(vm.targetGroup.leavePath); setTimeout(() => { expect($.scrollTo).toHaveBeenCalledWith(0); @@ -325,12 +325,12 @@ describe('AppComponent', () => { spyOn(window, 'Flash'); vm.leaveGroup(); - expect(vm.targetGroup.isBeingRemoved).toBeTruthy(); + expect(vm.targetGroup.isBeingRemoved).toBe(true); expect(vm.service.leaveGroup).toHaveBeenCalledWith(childGroupItem.leavePath); setTimeout(() => { expect(vm.store.removeGroup).not.toHaveBeenCalled(); expect(window.Flash).toHaveBeenCalledWith(message); - expect(vm.targetGroup.isBeingRemoved).toBeFalsy(); + expect(vm.targetGroup.isBeingRemoved).toBe(false); done(); }, 0); }); @@ -342,12 +342,12 @@ describe('AppComponent', () => { spyOn(window, 'Flash'); vm.leaveGroup(childGroupItem, groupItem); - expect(vm.targetGroup.isBeingRemoved).toBeTruthy(); + expect(vm.targetGroup.isBeingRemoved).toBe(true); expect(vm.service.leaveGroup).toHaveBeenCalledWith(childGroupItem.leavePath); setTimeout(() => { expect(vm.store.removeGroup).not.toHaveBeenCalled(); expect(window.Flash).toHaveBeenCalledWith(message); - expect(vm.targetGroup.isBeingRemoved).toBeFalsy(); + expect(vm.targetGroup.isBeingRemoved).toBe(false); done(); }, 0); }); @@ -379,10 +379,10 @@ describe('AppComponent', () => { it('should set `isSearchEmpty` prop based on groups count', () => { vm.updateGroups(mockGroups); - expect(vm.isSearchEmpty).toBeFalsy(); + expect(vm.isSearchEmpty).toBe(false); vm.updateGroups([]); - expect(vm.isSearchEmpty).toBeTruthy(); + expect(vm.isSearchEmpty).toBe(true); }); }); }); @@ -473,13 +473,16 @@ describe('AppComponent', () => { }); }); - it('renders modal confirmation dialog', () => { + it('renders modal confirmation dialog', (done) => { vm.groupLeaveConfirmationMessage = 'Are you sure you want to leave the "foo" group?'; - vm.updateModal = true; - const modalDialogEl = vm.$el.querySelector('.modal'); - expect(modalDialogEl).not.toBe(null); - expect(modalDialogEl.querySelector('.modal-title').innerText.trim()).toBe('Are you sure?'); - expect(modalDialogEl.querySelector('.btn.btn-warning').innerText.trim()).toBe('Leave'); + vm.showModal = true; + Vue.nextTick(() => { + const modalDialogEl = vm.$el.querySelector('.modal'); + expect(modalDialogEl).not.toBe(null); + expect(modalDialogEl.querySelector('.modal-title').innerText.trim()).toBe('Are you sure?'); + expect(modalDialogEl.querySelector('.btn.btn-warning').innerText.trim()).toBe('Leave'); + done(); + }); }); }); }); diff --git a/spec/javascripts/groups/components/group_item_spec.js b/spec/javascripts/groups/components/group_item_spec.js index 618d0022e4f..e3c942597a3 100644 --- a/spec/javascripts/groups/components/group_item_spec.js +++ b/spec/javascripts/groups/components/group_item_spec.js @@ -3,10 +3,9 @@ import * as urlUtils from '~/lib/utils/url_utility'; import groupItemComponent from '~/groups/components/group_item.vue'; import groupFolderComponent from '~/groups/components/group_folder.vue'; import eventHub from '~/groups/event_hub'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { mockParentGroupItem, mockChildren } from '../mock_data'; -import mountComponent from '../../helpers/vue_mount_component_helper'; - const createComponent = (group = mockParentGroupItem, parentGroup = mockChildren[0]) => { const Component = Vue.extend(groupItemComponent); diff --git a/spec/javascripts/groups/components/groups_spec.js b/spec/javascripts/groups/components/groups_spec.js index 90e818c1545..793c4909d89 100644 --- a/spec/javascripts/groups/components/groups_spec.js +++ b/spec/javascripts/groups/components/groups_spec.js @@ -4,10 +4,9 @@ import groupsComponent from '~/groups/components/groups.vue'; import groupFolderComponent from '~/groups/components/group_folder.vue'; import groupItemComponent from '~/groups/components/group_item.vue'; import eventHub from '~/groups/event_hub'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { mockGroups, mockPageInfo } from '../mock_data'; -import mountComponent from '../../helpers/vue_mount_component_helper'; - const createComponent = (searchEmpty = false) => { const Component = Vue.extend(groupsComponent); diff --git a/spec/javascripts/groups/components/item_actions_spec.js b/spec/javascripts/groups/components/item_actions_spec.js index acccbe639c4..15fd37ebcd2 100644 --- a/spec/javascripts/groups/components/item_actions_spec.js +++ b/spec/javascripts/groups/components/item_actions_spec.js @@ -2,10 +2,9 @@ import Vue from 'vue'; import itemActionsComponent from '~/groups/components/item_actions.vue'; import eventHub from '~/groups/event_hub'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { mockParentGroupItem, mockChildren } from '../mock_data'; -import mountComponent from '../../helpers/vue_mount_component_helper'; - const createComponent = (group = mockParentGroupItem, parentGroup = mockChildren[0]) => { const Component = Vue.extend(itemActionsComponent); diff --git a/spec/javascripts/groups/components/item_caret_spec.js b/spec/javascripts/groups/components/item_caret_spec.js index 8faad455825..36f838a104f 100644 --- a/spec/javascripts/groups/components/item_caret_spec.js +++ b/spec/javascripts/groups/components/item_caret_spec.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import itemCaretComponent from '~/groups/components/item_caret.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; const createComponent = (isGroupOpen = false) => { const Component = Vue.extend(itemCaretComponent); diff --git a/spec/javascripts/groups/components/item_stats_spec.js b/spec/javascripts/groups/components/item_stats_spec.js index 55a7a713ca6..ee7ee18259e 100644 --- a/spec/javascripts/groups/components/item_stats_spec.js +++ b/spec/javascripts/groups/components/item_stats_spec.js @@ -1,6 +1,7 @@ import Vue from 'vue'; import itemStatsComponent from '~/groups/components/item_stats.vue'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { mockParentGroupItem, ITEM_TYPE, @@ -9,8 +10,6 @@ import { PROJECT_VISIBILITY_TYPE, } from '../mock_data'; -import mountComponent from '../../helpers/vue_mount_component_helper'; - const createComponent = (item = mockParentGroupItem) => { const Component = Vue.extend(itemStatsComponent); diff --git a/spec/javascripts/groups/components/item_stats_value_spec.js b/spec/javascripts/groups/components/item_stats_value_spec.js index e990870aaa6..5e35ae4d36c 100644 --- a/spec/javascripts/groups/components/item_stats_value_spec.js +++ b/spec/javascripts/groups/components/item_stats_value_spec.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import itemStatsValueComponent from '~/groups/components/item_stats_value.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; const createComponent = ({ title, cssClass, iconName, tooltipPlacement, value }) => { const Component = Vue.extend(itemStatsValueComponent); diff --git a/spec/javascripts/groups/components/item_type_icon_spec.js b/spec/javascripts/groups/components/item_type_icon_spec.js index 495cc97b475..24380689b29 100644 --- a/spec/javascripts/groups/components/item_type_icon_spec.js +++ b/spec/javascripts/groups/components/item_type_icon_spec.js @@ -1,10 +1,9 @@ import Vue from 'vue'; import itemTypeIconComponent from '~/groups/components/item_type_icon.vue'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { ITEM_TYPE } from '../mock_data'; -import mountComponent from '../../helpers/vue_mount_component_helper'; - const createComponent = (itemType = ITEM_TYPE.GROUP, isGroupOpen = false) => { const Component = Vue.extend(itemTypeIconComponent); diff --git a/spec/javascripts/importer_status_spec.js b/spec/javascripts/importer_status_spec.js index 71a2cd51f63..0575d02886d 100644 --- a/spec/javascripts/importer_status_spec.js +++ b/spec/javascripts/importer_status_spec.js @@ -29,7 +29,10 @@ describe('Importer Status', () => { `); spyOn(ImporterStatus.prototype, 'initStatusPage').and.callFake(() => {}); spyOn(ImporterStatus.prototype, 'setAutoUpdate').and.callFake(() => {}); - instance = new ImporterStatus('', importUrl); + instance = new ImporterStatus({ + jobsUrl: '', + importUrl, + }); }); it('sets table row to active after post request', (done) => { @@ -65,7 +68,9 @@ describe('Importer Status', () => { spyOn(ImporterStatus.prototype, 'initStatusPage').and.callFake(() => {}); spyOn(ImporterStatus.prototype, 'setAutoUpdate').and.callFake(() => {}); - instance = new ImporterStatus(jobsUrl); + instance = new ImporterStatus({ + jobsUrl, + }); }); function setupMock(importStatus) { @@ -86,17 +91,17 @@ describe('Importer Status', () => { it('sets the job status to done', (done) => { setupMock('finished'); - expectJobStatus(done, 'done'); + expectJobStatus(done, 'Done'); }); it('sets the job status to scheduled', (done) => { setupMock('scheduled'); - expectJobStatus(done, 'scheduled'); + expectJobStatus(done, 'Scheduled'); }); it('sets the job status to started', (done) => { setupMock('started'); - expectJobStatus(done, 'started'); + expectJobStatus(done, 'Started'); }); it('sets the job status to custom status', (done) => { diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js index 1c9f48028f2..584db6c6632 100644 --- a/spec/javascripts/issue_show/components/app_spec.js +++ b/spec/javascripts/issue_show/components/app_spec.js @@ -6,8 +6,8 @@ import '~/render_gfm'; import * as urlUtils from '~/lib/utils/url_utility'; import issuableApp from '~/issue_show/components/app.vue'; import eventHub from '~/issue_show/event_hub'; +import setTimeoutPromise from 'spec/helpers/set_timeout_promise_helper'; import issueShowData from '../mock_data'; -import setTimeoutPromise from '../../helpers/set_timeout_promise_helper'; function formatText(text) { return text.trim().replace(/\s\s+/g, ' '); diff --git a/spec/javascripts/issue_show/components/description_spec.js b/spec/javascripts/issue_show/components/description_spec.js index 0da25bdca9c..ff7f99eec14 100644 --- a/spec/javascripts/issue_show/components/description_spec.js +++ b/spec/javascripts/issue_show/components/description_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import descriptionComponent from '~/issue_show/components/description.vue'; import * as taskList from '~/task_list'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Description component', () => { let vm; diff --git a/spec/javascripts/jobs/header_spec.js b/spec/javascripts/jobs/header_spec.js index a9df0418d5d..0961605ce5c 100644 --- a/spec/javascripts/jobs/header_spec.js +++ b/spec/javascripts/jobs/header_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import headerComponent from '~/jobs/components/header.vue'; -import mountComponent from '../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Job details header', () => { let HeaderComponent; diff --git a/spec/javascripts/labels_select_spec.js b/spec/javascripts/labels_select_spec.js new file mode 100644 index 00000000000..b8f7b1dc855 --- /dev/null +++ b/spec/javascripts/labels_select_spec.js @@ -0,0 +1,43 @@ +import LabelsSelect from '~/labels_select'; + +const mockUrl = '/foo/bar/url'; + +const mockLabels = [ + { + id: 26, + title: 'Foo Label', + description: 'Foobar', + color: '#BADA55', + text_color: '#FFFFFF', + }, +]; + +describe('LabelsSelect', () => { + describe('getLabelTemplate', () => { + const label = mockLabels[0]; + let $labelEl; + + beforeEach(() => { + $labelEl = $(LabelsSelect.getLabelTemplate({ + labels: mockLabels, + issueUpdateURL: mockUrl, + })); + }); + + it('generated label item template has correct label URL', () => { + expect($labelEl.attr('href')).toBe('/foo/bar?label_name[]=Foo%20Label'); + }); + + it('generated label item template has correct label title', () => { + expect($labelEl.find('span.label').text()).toBe(label.title); + }); + + it('generated label item template has label description as title attribute', () => { + expect($labelEl.find('span.label').attr('title')).toBe(label.description); + }); + + it('generated label item template has correct label styles', () => { + expect($labelEl.find('span.label').attr('style')).toBe(`background-color: ${label.color}; color: ${label.text_color};`); + }); + }); +}); diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js index 49799c31995..27f06573432 100644 --- a/spec/javascripts/lib/utils/common_utils_spec.js +++ b/spec/javascripts/lib/utils/common_utils_spec.js @@ -166,6 +166,21 @@ describe('common_utils', () => { }); }); + describe('objectToQueryString', () => { + it('returns empty string when `param` is undefined, null or empty string', () => { + expect(commonUtils.objectToQueryString()).toBe(''); + expect(commonUtils.objectToQueryString('')).toBe(''); + }); + + it('returns query string with values of `params`', () => { + const singleQueryParams = { foo: true }; + const multipleQueryParams = { foo: true, bar: true }; + + expect(commonUtils.objectToQueryString(singleQueryParams)).toBe('foo=true'); + expect(commonUtils.objectToQueryString(multipleQueryParams)).toBe('foo=true&bar=true'); + }); + }); + describe('buildUrlWithCurrentLocation', () => { it('should build an url with current location and given parameters', () => { expect(commonUtils.buildUrlWithCurrentLocation()).toEqual(window.location.pathname); diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js index eb8f6bbe50d..29b355307ef 100644 --- a/spec/javascripts/monitoring/dashboard_spec.js +++ b/spec/javascripts/monitoring/dashboard_spec.js @@ -5,24 +5,35 @@ import axios from '~/lib/utils/axios_utils'; import { metricsGroupsAPIResponse, mockApiEndpoint } from './mock_data'; describe('Dashboard', () => { - const fixtureName = 'environments/metrics/metrics.html.raw'; let DashboardComponent; - let component; - preloadFixtures(fixtureName); + + const propsData = { + hasMetrics: false, + documentationPath: '/path/to/docs', + settingsPath: '/path/to/settings', + clustersPath: '/path/to/clusters', + tagsPath: '/path/to/tags', + projectPath: '/path/to/project', + metricsEndpoint: mockApiEndpoint, + deploymentEndpoint: null, + emptyGettingStartedSvgPath: '/path/to/getting-started.svg', + emptyLoadingSvgPath: '/path/to/loading.svg', + emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg', + }; beforeEach(() => { - loadFixtures(fixtureName); + setFixtures('<div class="prometheus-graphs"></div>'); DashboardComponent = Vue.extend(Dashboard); }); describe('no metrics are available yet', () => { it('shows a getting started empty state when no metrics are present', () => { - component = new DashboardComponent({ - el: document.querySelector('#prometheus-graphs'), + const component = new DashboardComponent({ + el: document.querySelector('.prometheus-graphs'), + propsData, }); - component.$mount(); - expect(component.$el.querySelector('#prometheus-graphs')).toBe(null); + expect(component.$el.querySelector('.prometheus-graphs')).toBe(null); expect(component.state).toEqual('gettingStarted'); }); }); @@ -30,11 +41,8 @@ describe('Dashboard', () => { describe('requests information to the server', () => { let mock; beforeEach(() => { - document.querySelector('#prometheus-graphs').setAttribute('data-has-metrics', 'true'); mock = new MockAdapter(axios); - mock.onGet(mockApiEndpoint).reply(200, { - metricsGroupsAPIResponse, - }); + mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse); }); afterEach(() => { @@ -42,14 +50,43 @@ describe('Dashboard', () => { }); it('shows up a loading state', (done) => { - component = new DashboardComponent({ - el: document.querySelector('#prometheus-graphs'), + const component = new DashboardComponent({ + el: document.querySelector('.prometheus-graphs'), + propsData: { ...propsData, hasMetrics: true }, }); - component.$mount(); + Vue.nextTick(() => { expect(component.state).toEqual('loading'); done(); }); }); + + it('hides the legend when showLegend is false', (done) => { + const component = new DashboardComponent({ + el: document.querySelector('.prometheus-graphs'), + propsData: { ...propsData, hasMetrics: true, showLegend: false }, + }); + + setTimeout(() => { + expect(component.showEmptyState).toEqual(false); + expect(component.$el.querySelector('.legend-group')).toEqual(null); + expect(component.$el.querySelector('.prometheus-graph-group')).toBeTruthy(); + done(); + }); + }); + + it('hides the group panels when showPanels is false', (done) => { + const component = new DashboardComponent({ + el: document.querySelector('.prometheus-graphs'), + propsData: { ...propsData, hasMetrics: true, showPanels: false }, + }); + + setTimeout(() => { + expect(component.showEmptyState).toEqual(false); + expect(component.$el.querySelector('.prometheus-panel')).toEqual(null); + expect(component.$el.querySelector('.prometheus-graph-group')).toBeTruthy(); + done(); + }); + }); }); }); diff --git a/spec/javascripts/notes/components/comment_form_spec.js b/spec/javascripts/notes/components/comment_form_spec.js index 104d03377b6..6a7131528a3 100644 --- a/spec/javascripts/notes/components/comment_form_spec.js +++ b/spec/javascripts/notes/components/comment_form_spec.js @@ -1,17 +1,20 @@ import Vue from 'vue'; import Autosize from 'autosize'; import store from '~/notes/stores'; -import issueCommentForm from '~/notes/components/comment_form.vue'; +import CommentForm from '~/notes/components/comment_form.vue'; import { loggedOutnoteableData, notesDataMock, userDataMock, noteableDataMock } from '../mock_data'; import { keyboardDownEvent } from '../../issue_show/helpers'; describe('issue_comment_form component', () => { let vm; - const Component = Vue.extend(issueCommentForm); + const Component = Vue.extend(CommentForm); let mountComponent; beforeEach(() => { - mountComponent = () => new Component({ + mountComponent = (noteableType = 'issue') => new Component({ + propsData: { + noteableType, + }, store, }).$mount(); }); @@ -136,6 +139,11 @@ describe('issue_comment_form component', () => { expect(vm.editCurrentUserLastNote).toHaveBeenCalled(); }); + + it('inits autosave', () => { + expect(vm.autosave).toBeDefined(); + expect(vm.autosave.key).toEqual(`autosave/Note/Issue/${noteableDataMock.id}`); + }); }); describe('event enter', () => { @@ -182,6 +190,15 @@ describe('issue_comment_form component', () => { done(); }); }); + + it('updates button text with noteable type', (done) => { + vm.noteableType = 'merge_request'; + + Vue.nextTick(() => { + expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Close merge request'); + done(); + }); + }); }); describe('issue is confidential', () => { diff --git a/spec/javascripts/notes/components/diff_file_header_spec.js b/spec/javascripts/notes/components/diff_file_header_spec.js new file mode 100644 index 00000000000..aed30a087a6 --- /dev/null +++ b/spec/javascripts/notes/components/diff_file_header_spec.js @@ -0,0 +1,93 @@ +import Vue from 'vue'; +import DiffFileHeader from '~/notes/components/diff_file_header.vue'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import mountComponent from '../../helpers/vue_mount_component_helper'; + +const discussionFixture = 'merge_requests/diff_discussion.json'; + +describe('diff_file_header', () => { + let vm; + const diffDiscussionMock = getJSONFixture(discussionFixture)[0]; + const diffFile = convertObjectPropsToCamelCase(diffDiscussionMock.diff_file); + const props = { + diffFile, + }; + const Component = Vue.extend(DiffFileHeader); + const selectors = { + get copyButton() { + return vm.$el.querySelector('button[data-original-title="Copy file path to clipboard"]'); + }, + get fileName() { + return vm.$el.querySelector('.file-title-name'); + }, + get titleWrapper() { + return vm.$refs.titleWrapper; + }, + }; + + describe('submodule', () => { + beforeEach(() => { + props.diffFile.submodule = true; + props.diffFile.submoduleLink = '<a href="/bha">Submodule</a>'; + + vm = mountComponent(Component, props); + }); + + it('shows submoduleLink', () => { + expect(selectors.fileName.innerHTML).toBe(props.diffFile.submoduleLink); + }); + + it('has button to copy blob path', () => { + expect(selectors.copyButton).toExist(); + expect(selectors.copyButton.getAttribute('data-clipboard-text')).toBe(props.diffFile.submoduleLink); + }); + }); + + describe('changed file', () => { + beforeEach(() => { + props.diffFile.submodule = false; + props.diffFile.discussionPath = 'some/discussion/id'; + + vm = mountComponent(Component, props); + }); + + it('shows file type icon', () => { + expect(vm.$el.innerHTML).toContain('fa-file-text-o'); + }); + + it('links to discussion path', () => { + expect(selectors.titleWrapper).toExist(); + expect(selectors.titleWrapper.tagName).toBe('A'); + expect(selectors.titleWrapper.getAttribute('href')).toBe(props.diffFile.discussionPath); + }); + + it('shows plain title if no link given', () => { + props.diffFile.discussionPath = undefined; + vm = mountComponent(Component, props); + + expect(selectors.titleWrapper.tagName).not.toBe('A'); + expect(selectors.titleWrapper.href).toBeFalsy(); + }); + + it('has button to copy file path', () => { + expect(selectors.copyButton).toExist(); + expect(selectors.copyButton.getAttribute('data-clipboard-text')).toBe(props.diffFile.filePath); + }); + + it('shows file mode change', (done) => { + vm.diffFile = { + ...props.diffFile, + modeChanged: true, + aMode: '100755', + bMode: '100644', + }; + + Vue.nextTick(() => { + expect( + vm.$refs.fileMode.textContent.trim(), + ).toBe('100755 → 100644'); + done(); + }); + }); + }); +}); diff --git a/spec/javascripts/notes/components/diff_with_note_spec.js b/spec/javascripts/notes/components/diff_with_note_spec.js new file mode 100644 index 00000000000..7f1f4bf0bcd --- /dev/null +++ b/spec/javascripts/notes/components/diff_with_note_spec.js @@ -0,0 +1,64 @@ +import Vue from 'vue'; +import DiffWithNote from '~/notes/components/diff_with_note.vue'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import mountComponent from '../../helpers/vue_mount_component_helper'; + +const discussionFixture = 'merge_requests/diff_discussion.json'; +const imageDiscussionFixture = 'merge_requests/image_diff_discussion.json'; + +describe('diff_with_note', () => { + let vm; + const diffDiscussionMock = getJSONFixture(discussionFixture)[0]; + const diffDiscussion = convertObjectPropsToCamelCase(diffDiscussionMock); + const Component = Vue.extend(DiffWithNote); + const props = { + discussion: diffDiscussion, + }; + const selectors = { + get container() { + return vm.$refs.fileHolder; + }, + get diffTable() { + return this.container.querySelector('.diff-content table'); + }, + get diffRows() { + return this.container.querySelectorAll('.diff-content .line_holder'); + }, + get noteRow() { + return this.container.querySelector('.diff-content .notes_holder'); + }, + }; + + describe('text diff', () => { + beforeEach(() => { + vm = mountComponent(Component, props); + }); + + it('shows text diff', () => { + expect(selectors.container).toHaveClass('text-file'); + expect(selectors.diffTable).toExist(); + }); + + it('shows diff lines', () => { + expect(selectors.diffRows.length).toBe(12); + }); + + it('shows notes row', () => { + expect(selectors.noteRow).toExist(); + }); + }); + + describe('image diff', () => { + beforeEach(() => { + const imageDiffDiscussionMock = getJSONFixture(imageDiscussionFixture)[0]; + props.discussion = convertObjectPropsToCamelCase(imageDiffDiscussionMock); + }); + + it('shows image diff', () => { + vm = mountComponent(Component, props); + + expect(selectors.container).toHaveClass('js-image-file'); + expect(selectors.diffTable).not.toExist(); + }); + }); +}); diff --git a/spec/javascripts/notes/components/note_app_spec.js b/spec/javascripts/notes/components/note_app_spec.js index 12d180137a0..e1c612f5100 100644 --- a/spec/javascripts/notes/components/note_app_spec.js +++ b/spec/javascripts/notes/components/note_app_spec.js @@ -24,6 +24,7 @@ describe('note_app', () => { beforeEach(() => { jasmine.addMatchers(vueMatchers); + $('body').attr('data-page', 'projects:merge_requests:show'); const IssueNotesApp = Vue.extend(notesApp); @@ -119,8 +120,8 @@ describe('note_app', () => { vm = mountComponent(); }); - it('should render loading icon', () => { - expect(vm).toIncludeElement('.js-loading'); + it('renders skeleton notes', () => { + expect(vm).toIncludeElement('.animation-container'); }); it('should render form', () => { diff --git a/spec/javascripts/notes/components/note_body_spec.js b/spec/javascripts/notes/components/note_body_spec.js index b42e7943b98..0ff804f0e55 100644 --- a/spec/javascripts/notes/components/note_body_spec.js +++ b/spec/javascripts/notes/components/note_body_spec.js @@ -30,17 +30,26 @@ describe('issue_note_body component', () => { expect(vm.$el.querySelector('.note-text').innerHTML).toEqual(note.note_html); }); - it('should be render form if user is editing', (done) => { - vm.isEditing = true; + it('should render awards list', () => { + expect(vm.$el.querySelector('.js-awards-block button [data-name="baseball"]')).not.toBeNull(); + expect(vm.$el.querySelector('.js-awards-block button [data-name="bath_tone3"]')).not.toBeNull(); + }); - Vue.nextTick(() => { - expect(vm.$el.querySelector('textarea.js-task-list-field')).toBeDefined(); - done(); + describe('isEditing', () => { + beforeEach((done) => { + vm.isEditing = true; + Vue.nextTick(done); }); - }); - it('should render awards list', () => { - expect(vm.$el.querySelector('.js-awards-block button [data-name="baseball"]')).toBeDefined(); - expect(vm.$el.querySelector('.js-awards-block button [data-name="bath_tone3"]')).toBeDefined(); + it('renders edit form', () => { + expect(vm.$el.querySelector('textarea.js-task-list-field')).not.toBeNull(); + }); + + it('adds autosave', () => { + const autosaveKey = `autosave/Note/${note.noteable_type}/${note.id}`; + + expect(vm.autosave).toExist(); + expect(vm.autosave.key).toEqual(autosaveKey); + }); }); }); diff --git a/spec/javascripts/notes/components/note_header_spec.js b/spec/javascripts/notes/components/note_header_spec.js index 16a76b11321..5636f8d1a9f 100644 --- a/spec/javascripts/notes/components/note_header_spec.js +++ b/spec/javascripts/notes/components/note_header_spec.js @@ -32,6 +32,7 @@ describe('note_header component', () => { createdAt: '2017-08-02T10:51:58.559Z', includeToggle: false, noteId: 1394, + expanded: true, }, }).$mount(); }); @@ -68,6 +69,7 @@ describe('note_header component', () => { createdAt: '2017-08-02T10:51:58.559Z', includeToggle: true, noteId: 1395, + expanded: true, }, }).$mount(); }); @@ -76,17 +78,35 @@ describe('note_header component', () => { expect(vm.$el.querySelector('.js-vue-toggle-button')).toBeDefined(); }); - it('should toggle the disucssion icon', (done) => { - expect( - vm.$el.querySelector('.js-vue-toggle-button i').classList.contains('fa-chevron-up'), - ).toEqual(true); + it('emits toggle event on click', (done) => { + spyOn(vm, '$emit'); vm.$el.querySelector('.js-vue-toggle-button').click(); Vue.nextTick(() => { + expect(vm.$emit).toHaveBeenCalledWith('toggleHandler'); + done(); + }); + }); + + it('renders up arrow when open', (done) => { + vm.expanded = true; + + Vue.nextTick(() => { + expect( + vm.$el.querySelector('.js-vue-toggle-button i').classList, + ).toContain('fa-chevron-up'); + done(); + }); + }); + + it('renders down arrow when closed', (done) => { + vm.expanded = false; + + Vue.nextTick(() => { expect( - vm.$el.querySelector('.js-vue-toggle-button i').classList.contains('fa-chevron-down'), - ).toEqual(true); + vm.$el.querySelector('.js-vue-toggle-button i').classList, + ).toContain('fa-chevron-down'); done(); }); }); diff --git a/spec/javascripts/notes/mock_data.js b/spec/javascripts/notes/mock_data.js index ccf4bd070c2..bf60cb12f52 100644 --- a/spec/javascripts/notes/mock_data.js +++ b/spec/javascripts/notes/mock_data.js @@ -7,8 +7,9 @@ export const notesDataMock = { notesPath: '/gitlab-org/gitlab-ce/noteable/issue/98/notes', quickActionsDocsPath: '/help/user/project/quick_actions', registerPath: '/users/sign_in?redirect_to_referer=yes#register-pane', - closeIssuePath: '/twitter/flight/issues/9.json?issue%5Bstate_event%5D=close', - reopenIssuePath: '/twitter/flight/issues/9.json?issue%5Bstate_event%5D=reopen', + totalNotes: 1, + closePath: '/twitter/flight/issues/9.json?issue%5Bstate_event%5D=close', + reopenPath: '/twitter/flight/issues/9.json?issue%5Bstate_event%5D=reopen', }; export const userDataMock = { diff --git a/spec/javascripts/notes/stores/getters_spec.js b/spec/javascripts/notes/stores/getters_spec.js index 919ffbfdef0..8b2a8d2cd7a 100644 --- a/spec/javascripts/notes/stores/getters_spec.js +++ b/spec/javascripts/notes/stores/getters_spec.js @@ -56,9 +56,9 @@ describe('Getters Notes Store', () => { }); }); - describe('issueState', () => { + describe('openState', () => { it('should return the issue state', () => { - expect(getters.issueState(state)).toEqual(noteableDataMock.state); + expect(getters.openState(state)).toEqual(noteableDataMock.state); }); }); }); diff --git a/spec/javascripts/notes/stores/mutation_spec.js b/spec/javascripts/notes/stores/mutation_spec.js index 22d99998a7d..e4baefc5bfc 100644 --- a/spec/javascripts/notes/stores/mutation_spec.js +++ b/spec/javascripts/notes/stores/mutation_spec.js @@ -1,7 +1,7 @@ import mutations from '~/notes/stores/mutations'; import { note, discussionMock, notesDataMock, userDataMock, noteableDataMock, individualNote } from '../mock_data'; -describe('Mutation Notes Store', () => { +describe('Notes Store mutations', () => { describe('ADD_NEW_NOTE', () => { let state; let noteData; @@ -103,7 +103,8 @@ describe('Mutation Notes Store', () => { }; mutations.SET_INITIAL_NOTES(state, [note]); - expect(state.notes).toEqual([note]); + expect(state.notes[0].id).toEqual(note.id); + expect(state.notes.length).toEqual(1); }); }); diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js index 274d7591c71..d4a148e6ab1 100644 --- a/spec/javascripts/notes_spec.js +++ b/spec/javascripts/notes_spec.js @@ -34,6 +34,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper'; describe('Notes', function() { const FLASH_TYPE_ALERT = 'alert'; + const NOTES_POST_PATH = /(.*)\/notes\?html=true$/; var commentsTemplate = 'merge_requests/merge_request_with_comment.html.raw'; preloadFixtures(commentsTemplate); @@ -154,7 +155,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper'; $form.find('textarea.js-note-text').val(sampleComment); mock = new MockAdapter(axios); - mock.onPost(/(.*)\/notes$/).reply(200, noteEntity); + mock.onPost(NOTES_POST_PATH).reply(200, noteEntity); }); afterEach(() => { @@ -506,11 +507,11 @@ import timeoutPromise from './helpers/set_timeout_promise_helper'; let mock; function mockNotesPost() { - mock.onPost(/(.*)\/notes$/).reply(200, note); + mock.onPost(NOTES_POST_PATH).reply(200, note); } function mockNotesPostError() { - mock.onPost(/(.*)\/notes$/).networkError(); + mock.onPost(NOTES_POST_PATH).networkError(); } beforeEach(() => { @@ -631,7 +632,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper'; beforeEach(() => { mock = new MockAdapter(axios); - mock.onPost(/(.*)\/notes$/).reply(200, note); + mock.onPost(NOTES_POST_PATH).reply(200, note); this.notes = new Notes('', []); window.gon.current_username = 'root'; @@ -684,7 +685,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper'; beforeEach(() => { mock = new MockAdapter(axios); - mock.onPost(/(.*)\/notes$/).reply(200, note); + mock.onPost(NOTES_POST_PATH).reply(200, note); this.notes = new Notes('', []); window.gon.current_username = 'root'; diff --git a/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js b/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js index 440a6585d57..a6fe9fb65e9 100644 --- a/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js +++ b/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js @@ -4,7 +4,7 @@ import axios from '~/lib/utils/axios_utils'; import stopJobsModal from '~/pages/admin/jobs/index/components/stop_jobs_modal.vue'; import * as urlUtility from '~/lib/utils/url_utility'; -import mountComponent from '../../../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('stop_jobs_modal.vue', () => { const props = { diff --git a/spec/javascripts/pages/labels/components/promote_label_modal_spec.js b/spec/javascripts/pages/labels/components/promote_label_modal_spec.js new file mode 100644 index 00000000000..ba2e07f02f7 --- /dev/null +++ b/spec/javascripts/pages/labels/components/promote_label_modal_spec.js @@ -0,0 +1,88 @@ +import Vue from 'vue'; +import promoteLabelModal from '~/pages/projects/labels/components/promote_label_modal.vue'; +import eventHub from '~/pages/projects/labels/event_hub'; +import axios from '~/lib/utils/axios_utils'; +import mountComponent from '../../../helpers/vue_mount_component_helper'; + +describe('Promote label modal', () => { + let vm; + const Component = Vue.extend(promoteLabelModal); + const labelMockData = { + labelTitle: 'Documentation', + labelColor: '#5cb85c', + labelTextColor: '#ffffff', + url: `${gl.TEST_HOST}/dummy/promote/labels`, + }; + + describe('Modal title and description', () => { + beforeEach(() => { + vm = mountComponent(Component, labelMockData); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('contains the proper description', () => { + expect(vm.text).toContain('Promoting this label will make it available for all projects inside the group'); + }); + + it('contains a label span with the color', () => { + const labelFromTitle = vm.$el.querySelector('.modal-header .label.color-label'); + + expect(labelFromTitle.style.backgroundColor).not.toBe(null); + expect(labelFromTitle.textContent).toContain(vm.labelTitle); + }); + }); + + describe('When requesting a label promotion', () => { + beforeEach(() => { + vm = mountComponent(Component, { + ...labelMockData, + }); + spyOn(eventHub, '$emit'); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('redirects when a label is promoted', (done) => { + const responseURL = `${gl.TEST_HOST}/dummy/endpoint`; + spyOn(axios, 'post').and.callFake((url) => { + expect(url).toBe(labelMockData.url); + expect(eventHub.$emit).toHaveBeenCalledWith('promoteLabelModal.requestStarted', labelMockData.url); + return Promise.resolve({ + request: { + responseURL, + }, + }); + }); + + vm.onSubmit() + .then(() => { + expect(eventHub.$emit).toHaveBeenCalledWith('promoteLabelModal.requestFinished', { labelUrl: labelMockData.url, successful: true }); + }) + .then(done) + .catch(done.fail); + }); + + it('displays an error if promoting a label failed', (done) => { + const dummyError = new Error('promoting label failed'); + dummyError.response = { status: 500 }; + spyOn(axios, 'post').and.callFake((url) => { + expect(url).toBe(labelMockData.url); + expect(eventHub.$emit).toHaveBeenCalledWith('promoteLabelModal.requestStarted', labelMockData.url); + return Promise.reject(dummyError); + }); + + vm.onSubmit() + .catch((error) => { + expect(error).toBe(dummyError); + expect(eventHub.$emit).toHaveBeenCalledWith('promoteLabelModal.requestFinished', { labelUrl: labelMockData.url, successful: false }); + }) + .then(done) + .catch(done.fail); + }); + }); +}); diff --git a/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js b/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js index 3cd33a3e900..6074e06fcec 100644 --- a/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js +++ b/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js @@ -5,7 +5,7 @@ import deleteMilestoneModal from '~/pages/milestones/shared/components/delete_mi import eventHub from '~/pages/milestones/shared/event_hub'; import * as urlUtility from '~/lib/utils/url_utility'; -import mountComponent from '../../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('delete_milestone_modal.vue', () => { const Component = Vue.extend(deleteMilestoneModal); diff --git a/spec/javascripts/pages/milestones/shared/components/promote_milestone_modal_spec.js b/spec/javascripts/pages/milestones/shared/components/promote_milestone_modal_spec.js new file mode 100644 index 00000000000..bf044fe8fb5 --- /dev/null +++ b/spec/javascripts/pages/milestones/shared/components/promote_milestone_modal_spec.js @@ -0,0 +1,83 @@ +import Vue from 'vue'; +import promoteMilestoneModal from '~/pages/milestones/shared/components/promote_milestone_modal.vue'; +import eventHub from '~/pages/milestones/shared/event_hub'; +import axios from '~/lib/utils/axios_utils'; +import mountComponent from '../../../../helpers/vue_mount_component_helper'; + +describe('Promote milestone modal', () => { + let vm; + const Component = Vue.extend(promoteMilestoneModal); + const milestoneMockData = { + milestoneTitle: 'v1.0', + url: `${gl.TEST_HOST}/dummy/promote/milestones`, + }; + + describe('Modal title and description', () => { + beforeEach(() => { + vm = mountComponent(Component, milestoneMockData); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('contains the proper description', () => { + expect(vm.text).toContain('Promoting this milestone will make it available for all projects inside the group.'); + }); + + it('contains the correct title', () => { + expect(vm.title).toEqual('Promote v1.0 to group milestone?'); + }); + }); + + describe('When requesting a milestone promotion', () => { + beforeEach(() => { + vm = mountComponent(Component, { + ...milestoneMockData, + }); + spyOn(eventHub, '$emit'); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('redirects when a milestone is promoted', (done) => { + const responseURL = `${gl.TEST_HOST}/dummy/endpoint`; + spyOn(axios, 'post').and.callFake((url) => { + expect(url).toBe(milestoneMockData.url); + expect(eventHub.$emit).toHaveBeenCalledWith('promoteMilestoneModal.requestStarted', milestoneMockData.url); + return Promise.resolve({ + request: { + responseURL, + }, + }); + }); + + vm.onSubmit() + .then(() => { + expect(eventHub.$emit).toHaveBeenCalledWith('promoteMilestoneModal.requestFinished', { milestoneUrl: milestoneMockData.url, successful: true }); + }) + .then(done) + .catch(done.fail); + }); + + it('displays an error if promoting a milestone failed', (done) => { + const dummyError = new Error('promoting milestone failed'); + dummyError.response = { status: 500 }; + spyOn(axios, 'post').and.callFake((url) => { + expect(url).toBe(milestoneMockData.url); + expect(eventHub.$emit).toHaveBeenCalledWith('promoteMilestoneModal.requestStarted', milestoneMockData.url); + return Promise.reject(dummyError); + }); + + vm.onSubmit() + .catch((error) => { + expect(error).toBe(dummyError); + expect(eventHub.$emit).toHaveBeenCalledWith('promoteMilestoneModal.requestFinished', { milestoneUrl: milestoneMockData.url, successful: false }); + }) + .then(done) + .catch(done.fail); + }); + }); +}); diff --git a/spec/javascripts/pipelines/blank_state_spec.js b/spec/javascripts/pipelines/blank_state_spec.js new file mode 100644 index 00000000000..b7a9b60d85c --- /dev/null +++ b/spec/javascripts/pipelines/blank_state_spec.js @@ -0,0 +1,29 @@ +import Vue from 'vue'; +import component from '~/pipelines/components/blank_state.vue'; +import mountComponent from '../helpers/vue_mount_component_helper'; + +describe('Pipelines Blank State', () => { + let vm; + let Component; + + beforeEach(() => { + Component = Vue.extend(component); + + vm = mountComponent(Component, + { + svgPath: 'foo', + message: 'Blank State', + }, + ); + }); + + it('should render svg', () => { + expect(vm.$el.querySelector('.svg-content img').getAttribute('src')).toEqual('foo'); + }); + + it('should render message', () => { + expect( + vm.$el.querySelector('h4').textContent.trim(), + ).toEqual('Blank State'); + }); +}); diff --git a/spec/javascripts/pipelines/empty_state_spec.js b/spec/javascripts/pipelines/empty_state_spec.js index 97f04844b3a..71f77e5f42e 100644 --- a/spec/javascripts/pipelines/empty_state_spec.js +++ b/spec/javascripts/pipelines/empty_state_spec.js @@ -1,5 +1,6 @@ import Vue from 'vue'; import emptyStateComp from '~/pipelines/components/empty_state.vue'; +import mountComponent from '../helpers/vue_mount_component_helper'; describe('Pipelines Empty State', () => { let component; @@ -8,12 +9,15 @@ describe('Pipelines Empty State', () => { beforeEach(() => { EmptyStateComponent = Vue.extend(emptyStateComp); - component = new EmptyStateComponent({ - propsData: { - helpPagePath: 'foo', - emptyStateSvgPath: 'foo', - }, - }).$mount(); + component = mountComponent(EmptyStateComponent, { + helpPagePath: 'foo', + emptyStateSvgPath: 'foo', + canSetCi: true, + }); + }); + + afterEach(() => { + component.$destroy(); }); it('should render empty state SVG', () => { @@ -24,16 +28,16 @@ describe('Pipelines Empty State', () => { expect(component.$el.querySelector('h4').textContent).toContain('Build with confidence'); expect( - component.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '), - ).toContain('Continous Integration can help catch bugs by running your tests automatically'); + component.$el.querySelector('p').innerHTML.trim().replace(/\n+\s+/m, ' ').replace(/\s\s+/g, ' '), + ).toContain('Continous Integration can help catch bugs by running your tests automatically,'); expect( - component.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '), - ).toContain('Continuous Deployment can help you deliver code to your product environment'); + component.$el.querySelector('p').innerHTML.trim().replace(/\n+\s+/m, ' ').replace(/\s\s+/g, ' '), + ).toContain('while Continuous Deployment can help you deliver code to your product environment'); }); it('should render a link with provided help path', () => { - expect(component.$el.querySelector('.btn-info').getAttribute('href')).toEqual('foo'); - expect(component.$el.querySelector('.btn-info').textContent).toContain('Get started with Pipelines'); + expect(component.$el.querySelector('.js-get-started-pipelines').getAttribute('href')).toEqual('foo'); + expect(component.$el.querySelector('.js-get-started-pipelines').textContent).toContain('Get started with Pipelines'); }); }); diff --git a/spec/javascripts/pipelines/error_state_spec.js b/spec/javascripts/pipelines/error_state_spec.js deleted file mode 100644 index a402857a4d1..00000000000 --- a/spec/javascripts/pipelines/error_state_spec.js +++ /dev/null @@ -1,27 +0,0 @@ -import Vue from 'vue'; -import errorStateComp from '~/pipelines/components/error_state.vue'; - -describe('Pipelines Error State', () => { - let component; - let ErrorStateComponent; - - beforeEach(() => { - ErrorStateComponent = Vue.extend(errorStateComp); - - component = new ErrorStateComponent({ - propsData: { - errorStateSvgPath: 'foo', - }, - }).$mount(); - }); - - it('should render error state SVG', () => { - expect(component.$el.querySelector('.svg-content svg')).toBeDefined(); - }); - - it('should render emtpy state information', () => { - expect( - component.$el.querySelector('h4').textContent, - ).toContain('The API failed to fetch the pipelines'); - }); -}); diff --git a/spec/javascripts/pipelines/graph/job_component_spec.js b/spec/javascripts/pipelines/graph/job_component_spec.js index c3dc7b53d0f..ce181a1e515 100644 --- a/spec/javascripts/pipelines/graph/job_component_spec.js +++ b/spec/javascripts/pipelines/graph/job_component_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import jobComponent from '~/pipelines/components/graph/job_component.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('pipeline graph job component', () => { let JobComponent; diff --git a/spec/javascripts/pipelines/nav_controls_spec.js b/spec/javascripts/pipelines/nav_controls_spec.js index 09a0c14d96c..d6232f5c567 100644 --- a/spec/javascripts/pipelines/nav_controls_spec.js +++ b/spec/javascripts/pipelines/nav_controls_spec.js @@ -1,116 +1,79 @@ import Vue from 'vue'; import navControlsComp from '~/pipelines/components/nav_controls.vue'; +import mountComponent from '../helpers/vue_mount_component_helper'; describe('Pipelines Nav Controls', () => { let NavControlsComponent; + let component; beforeEach(() => { NavControlsComponent = Vue.extend(navControlsComp); }); - it('should render link to create a new pipeline', () => { - const mockData = { - newPipelinePath: 'foo', - hasCiEnabled: true, - helpPagePath: 'foo', - ciLintPath: 'foo', - resetCachePath: 'foo', - canCreatePipeline: true, - }; - - const component = new NavControlsComponent({ - propsData: mockData, - }).$mount(); - - expect(component.$el.querySelector('.btn-create').textContent).toContain('Run Pipeline'); - expect(component.$el.querySelector('.btn-create').getAttribute('href')).toEqual(mockData.newPipelinePath); + afterEach(() => { + component.$destroy(); }); - it('should not render link to create pipeline if no permission is provided', () => { + it('should render link to create a new pipeline', () => { const mockData = { newPipelinePath: 'foo', - hasCiEnabled: true, - helpPagePath: 'foo', ciLintPath: 'foo', resetCachePath: 'foo', - canCreatePipeline: false, }; - const component = new NavControlsComponent({ - propsData: mockData, - }).$mount(); + component = mountComponent(NavControlsComponent, mockData); - expect(component.$el.querySelector('.btn-create')).toEqual(null); + expect(component.$el.querySelector('.js-run-pipeline').textContent).toContain('Run Pipeline'); + expect(component.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(mockData.newPipelinePath); }); - it('should render link for resetting runner caches', () => { + it('should not render link to create pipeline if no path is provided', () => { const mockData = { - newPipelinePath: 'foo', - hasCiEnabled: true, helpPagePath: 'foo', ciLintPath: 'foo', resetCachePath: 'foo', - canCreatePipeline: false, }; - const component = new NavControlsComponent({ - propsData: mockData, - }).$mount(); + component = mountComponent(NavControlsComponent, mockData); - expect(component.$el.querySelectorAll('.btn-default')[0].textContent).toContain('Clear runner caches'); - expect(component.$el.querySelectorAll('.btn-default')[0].getAttribute('href')).toEqual(mockData.resetCachePath); + expect(component.$el.querySelector('.js-run-pipeline')).toEqual(null); }); it('should render link for CI lint', () => { const mockData = { newPipelinePath: 'foo', - hasCiEnabled: true, helpPagePath: 'foo', ciLintPath: 'foo', resetCachePath: 'foo', - canCreatePipeline: true, }; - const component = new NavControlsComponent({ - propsData: mockData, - }).$mount(); + component = mountComponent(NavControlsComponent, mockData); - expect(component.$el.querySelectorAll('.btn-default')[1].textContent).toContain('CI Lint'); - expect(component.$el.querySelectorAll('.btn-default')[1].getAttribute('href')).toEqual(mockData.ciLintPath); + expect(component.$el.querySelector('.js-ci-lint').textContent.trim()).toContain('CI Lint'); + expect(component.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(mockData.ciLintPath); }); - it('should render link to help page when CI is not enabled', () => { - const mockData = { - newPipelinePath: 'foo', - hasCiEnabled: false, - helpPagePath: 'foo', - ciLintPath: 'foo', - resetCachePath: 'foo', - canCreatePipeline: true, - }; + describe('Reset Runners Cache', () => { + beforeEach(() => { + const mockData = { + newPipelinePath: 'foo', + ciLintPath: 'foo', + resetCachePath: 'foo', + }; - const component = new NavControlsComponent({ - propsData: mockData, - }).$mount(); + component = mountComponent(NavControlsComponent, mockData); + }); - expect(component.$el.querySelector('.btn-info').textContent).toContain('Get started with Pipelines'); - expect(component.$el.querySelector('.btn-info').getAttribute('href')).toEqual(mockData.helpPagePath); - }); + it('should render button for resetting runner caches', () => { + expect(component.$el.querySelector('.js-clear-cache').textContent.trim()).toContain('Clear Runner Caches'); + }); - it('should not render link to help page when CI is enabled', () => { - const mockData = { - newPipelinePath: 'foo', - hasCiEnabled: true, - helpPagePath: 'foo', - ciLintPath: 'foo', - resetCachePath: 'foo', - canCreatePipeline: true, - }; + it('should emit postAction event when reset runner cache button is clicked', () => { + spyOn(component, '$emit'); - const component = new NavControlsComponent({ - propsData: mockData, - }).$mount(); + component.$el.querySelector('.js-clear-cache').click(); - expect(component.$el.querySelector('.btn-info')).toEqual(null); + expect(component.$emit).toHaveBeenCalledWith('resetRunnersCache', 'foo'); + }); }); }); diff --git a/spec/javascripts/pipelines/pipelines_spec.js b/spec/javascripts/pipelines/pipelines_spec.js index a99ebc4e51a..7e242eb45e1 100644 --- a/spec/javascripts/pipelines/pipelines_spec.js +++ b/spec/javascripts/pipelines/pipelines_spec.js @@ -2,41 +2,385 @@ import _ from 'underscore'; import Vue from 'vue'; import pipelinesComp from '~/pipelines/components/pipelines.vue'; import Store from '~/pipelines/stores/pipelines_store'; -import mountComponent from '../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Pipelines', () => { const jsonFixtureName = 'pipelines/pipelines.json'; - preloadFixtures('static/pipelines.html.raw'); preloadFixtures(jsonFixtureName); let PipelinesComponent; let pipelines; - let component; + let vm; + const paths = { + endpoint: 'twitter/flight/pipelines.json', + autoDevopsPath: '/help/topics/autodevops/index.md', + helpPagePath: '/help/ci/quick_start/README', + emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg', + errorStateSvgPath: '/assets/illustrations/pipelines_failed.svg', + noPipelinesSvgPath: '/assets/illustrations/pipelines_pending.svg', + ciLintPath: '/ci/lint', + resetCachePath: '/twitter/flight/settings/ci_cd/reset_cache', + newPipelinePath: '/twitter/flight/pipelines/new', + }; + + const noPermissions = { + endpoint: 'twitter/flight/pipelines.json', + autoDevopsPath: '/help/topics/autodevops/index.md', + helpPagePath: '/help/ci/quick_start/README', + emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg', + errorStateSvgPath: '/assets/illustrations/pipelines_failed.svg', + noPipelinesSvgPath: '/assets/illustrations/pipelines_pending.svg', + }; beforeEach(() => { - loadFixtures('static/pipelines.html.raw'); pipelines = getJSONFixture(jsonFixtureName); PipelinesComponent = Vue.extend(pipelinesComp); }); afterEach(() => { - component.$destroy(); + vm.$destroy(); + }); + + const pipelinesInterceptor = (request, next) => { + next(request.respondWith(JSON.stringify(pipelines), { + status: 200, + })); + }; + + const emptyStateInterceptor = (request, next) => { + next(request.respondWith(JSON.stringify({ + pipelines: [], + count: { + all: 0, + pending: 0, + running: 0, + finished: 0, + }, + }), { + status: 200, + })); + }; + + const errorInterceptor = (request, next) => { + next(request.respondWith(JSON.stringify({}), { + status: 500, + })); + }; + + describe('With permission', () => { + describe('With pipelines in main tab', () => { + beforeEach((done) => { + Vue.http.interceptors.push(pipelinesInterceptor); + vm = mountComponent(PipelinesComponent, { + store: new Store(), + hasGitlabCi: true, + canCreatePipeline: true, + ...paths, + }); + + setTimeout(() => { + done(); + }); + }); + + afterEach(() => { + Vue.http.interceptors = _.without( + Vue.http.interceptors, pipelinesInterceptor, + ); + }); + + it('renders tabs', () => { + expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); + }); + + it('renders Run Pipeline link', () => { + expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath); + }); + + it('renders CI Lint link', () => { + expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath); + }); + + it('renders Clear Runner Cache button', () => { + expect(vm.$el.querySelector('.js-clear-cache').textContent.trim()).toEqual('Clear Runner Caches'); + }); + + it('renders pipelines table', () => { + expect( + vm.$el.querySelectorAll('.gl-responsive-table-row').length, + ).toEqual(pipelines.pipelines.length + 1); + }); + }); + + describe('Without pipelines on main tab with CI', () => { + beforeEach((done) => { + Vue.http.interceptors.push(emptyStateInterceptor); + vm = mountComponent(PipelinesComponent, { + store: new Store(), + hasGitlabCi: true, + canCreatePipeline: true, + ...paths, + }); + + setTimeout(() => { + done(); + }); + }); + + afterEach(() => { + Vue.http.interceptors = _.without( + Vue.http.interceptors, emptyStateInterceptor, + ); + }); + + it('renders tabs', () => { + expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); + }); + + it('renders Run Pipeline link', () => { + expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath); + }); + + it('renders CI Lint link', () => { + expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath); + }); + + it('renders Clear Runner Cache button', () => { + expect(vm.$el.querySelector('.js-clear-cache').textContent.trim()).toEqual('Clear Runner Caches'); + }); + + it('renders tab empty state', () => { + expect(vm.$el.querySelector('.empty-state h4').textContent.trim()).toEqual('There are currently no pipelines.'); + }); + }); + + describe('Without pipelines nor CI', () => { + beforeEach((done) => { + Vue.http.interceptors.push(emptyStateInterceptor); + vm = mountComponent(PipelinesComponent, { + store: new Store(), + hasGitlabCi: false, + canCreatePipeline: true, + ...paths, + }); + + setTimeout(() => { + done(); + }); + }); + + afterEach(() => { + Vue.http.interceptors = _.without( + Vue.http.interceptors, emptyStateInterceptor, + ); + }); + + it('renders empty state', () => { + expect(vm.$el.querySelector('.js-empty-state h4').textContent.trim()).toEqual('Build with confidence'); + expect(vm.$el.querySelector('.js-get-started-pipelines').getAttribute('href')).toEqual(paths.helpPagePath); + }); + + it('does not render tabs nor buttons', () => { + expect(vm.$el.querySelector('.js-pipelines-tab-all')).toBeNull(); + expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull(); + expect(vm.$el.querySelector('.js-ci-lint')).toBeNull(); + expect(vm.$el.querySelector('.js-clear-cache')).toBeNull(); + }); + }); + + describe('When API returns error', () => { + beforeEach((done) => { + Vue.http.interceptors.push(errorInterceptor); + vm = mountComponent(PipelinesComponent, { + store: new Store(), + hasGitlabCi: false, + canCreatePipeline: true, + ...paths, + }); + + setTimeout(() => { + done(); + }); + }); + + afterEach(() => { + Vue.http.interceptors = _.without( + Vue.http.interceptors, errorInterceptor, + ); + }); + + it('renders tabs', () => { + expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); + }); + + it('renders buttons', () => { + expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath); + expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath); + expect(vm.$el.querySelector('.js-clear-cache').textContent.trim()).toEqual('Clear Runner Caches'); + }); + + it('renders error state', () => { + expect(vm.$el.querySelector('.empty-state').textContent.trim()).toContain('There was an error fetching the pipelines.'); + }); + }); + }); + + describe('Without permission', () => { + describe('With pipelines in main tab', () => { + beforeEach((done) => { + Vue.http.interceptors.push(pipelinesInterceptor); + vm = mountComponent(PipelinesComponent, { + store: new Store(), + hasGitlabCi: false, + canCreatePipeline: false, + ...noPermissions, + }); + + setTimeout(() => { + done(); + }); + }); + + afterEach(() => { + Vue.http.interceptors = _.without( + Vue.http.interceptors, pipelinesInterceptor, + ); + }); + + it('renders tabs', () => { + expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); + }); + + it('does not render buttons', () => { + expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull(); + expect(vm.$el.querySelector('.js-ci-lint')).toBeNull(); + expect(vm.$el.querySelector('.js-clear-cache')).toBeNull(); + }); + + it('renders pipelines table', () => { + expect( + vm.$el.querySelectorAll('.gl-responsive-table-row').length, + ).toEqual(pipelines.pipelines.length + 1); + }); + }); + + describe('Without pipelines on main tab with CI', () => { + beforeEach((done) => { + Vue.http.interceptors.push(emptyStateInterceptor); + vm = mountComponent(PipelinesComponent, { + store: new Store(), + hasGitlabCi: true, + canCreatePipeline: false, + ...noPermissions, + }); + + setTimeout(() => { + done(); + }); + }); + + afterEach(() => { + Vue.http.interceptors = _.without( + Vue.http.interceptors, emptyStateInterceptor, + ); + }); + it('renders tabs', () => { + expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); + }); + + it('does not render buttons', () => { + expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull(); + expect(vm.$el.querySelector('.js-ci-lint')).toBeNull(); + expect(vm.$el.querySelector('.js-clear-cache')).toBeNull(); + }); + + it('renders tab empty state', () => { + expect(vm.$el.querySelector('.empty-state h4').textContent.trim()).toEqual('There are currently no pipelines.'); + }); + }); + + describe('Without pipelines nor CI', () => { + beforeEach((done) => { + Vue.http.interceptors.push(emptyStateInterceptor); + vm = mountComponent(PipelinesComponent, { + store: new Store(), + hasGitlabCi: false, + canCreatePipeline: false, + ...noPermissions, + }); + + setTimeout(() => { + done(); + }); + }); + + afterEach(() => { + Vue.http.interceptors = _.without( + Vue.http.interceptors, emptyStateInterceptor, + ); + }); + + it('renders empty state without button to set CI', () => { + expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toEqual('This project is not currently set up to run pipelines.'); + expect(vm.$el.querySelector('.js-get-started-pipelines')).toBeNull(); + }); + + it('does not render tabs or buttons', () => { + expect(vm.$el.querySelector('.js-pipelines-tab-all')).toBeNull(); + expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull(); + expect(vm.$el.querySelector('.js-ci-lint')).toBeNull(); + expect(vm.$el.querySelector('.js-clear-cache')).toBeNull(); + }); + }); + + describe('When API returns error', () => { + beforeEach((done) => { + Vue.http.interceptors.push(errorInterceptor); + vm = mountComponent(PipelinesComponent, { + store: new Store(), + hasGitlabCi: false, + canCreatePipeline: true, + ...noPermissions, + }); + + setTimeout(() => { + done(); + }); + }); + + afterEach(() => { + Vue.http.interceptors = _.without( + Vue.http.interceptors, errorInterceptor, + ); + }); + + it('renders tabs', () => { + expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); + }); + + it('does not renders buttons', () => { + expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull(); + expect(vm.$el.querySelector('.js-ci-lint')).toBeNull(); + expect(vm.$el.querySelector('.js-clear-cache')).toBeNull(); + }); + + it('renders error state', () => { + expect(vm.$el.querySelector('.empty-state').textContent.trim()).toContain('There was an error fetching the pipelines.'); + }); + }); }); describe('successfull request', () => { describe('with pipelines', () => { - const pipelinesInterceptor = (request, next) => { - next(request.respondWith(JSON.stringify(pipelines), { - status: 200, - })); - }; - beforeEach(() => { Vue.http.interceptors.push(pipelinesInterceptor); - component = mountComponent(PipelinesComponent, { + vm = mountComponent(PipelinesComponent, { store: new Store(), + hasGitlabCi: true, + canCreatePipeline: true, + ...paths, }); }); @@ -48,9 +392,9 @@ describe('Pipelines', () => { it('should render table', (done) => { setTimeout(() => { - expect(component.$el.querySelector('.table-holder')).toBeDefined(); + expect(vm.$el.querySelector('.table-holder')).toBeDefined(); expect( - component.$el.querySelectorAll('.gl-responsive-table-row').length, + vm.$el.querySelectorAll('.gl-responsive-table-row').length, ).toEqual(pipelines.pipelines.length + 1); done(); }); @@ -59,22 +403,22 @@ describe('Pipelines', () => { it('should render navigation tabs', (done) => { setTimeout(() => { expect( - component.$el.querySelector('.js-pipelines-tab-pending').textContent.trim(), + vm.$el.querySelector('.js-pipelines-tab-pending').textContent.trim(), ).toContain('Pending'); expect( - component.$el.querySelector('.js-pipelines-tab-all').textContent.trim(), + vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim(), ).toContain('All'); expect( - component.$el.querySelector('.js-pipelines-tab-running').textContent.trim(), + vm.$el.querySelector('.js-pipelines-tab-running').textContent.trim(), ).toContain('Running'); expect( - component.$el.querySelector('.js-pipelines-tab-finished').textContent.trim(), + vm.$el.querySelector('.js-pipelines-tab-finished').textContent.trim(), ).toContain('Finished'); expect( - component.$el.querySelector('.js-pipelines-tab-branches').textContent.trim(), + vm.$el.querySelector('.js-pipelines-tab-branches').textContent.trim(), ).toContain('Branches'); expect( - component.$el.querySelector('.js-pipelines-tab-tags').textContent.trim(), + vm.$el.querySelector('.js-pipelines-tab-tags').textContent.trim(), ).toContain('Tags'); done(); }); @@ -82,10 +426,10 @@ describe('Pipelines', () => { it('should make an API request when using tabs', (done) => { setTimeout(() => { - spyOn(component, 'updateContent'); - component.$el.querySelector('.js-pipelines-tab-finished').click(); + spyOn(vm, 'updateContent'); + vm.$el.querySelector('.js-pipelines-tab-finished').click(); - expect(component.updateContent).toHaveBeenCalledWith({ scope: 'finished', page: '1' }); + expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'finished', page: '1' }); done(); }); }); @@ -93,9 +437,9 @@ describe('Pipelines', () => { describe('with pagination', () => { it('should make an API request when using pagination', (done) => { setTimeout(() => { - spyOn(component, 'updateContent'); + spyOn(vm, 'updateContent'); // Mock pagination - component.store.state.pageInfo = { + vm.store.state.pageInfo = { page: 1, total: 10, perPage: 2, @@ -103,9 +447,9 @@ describe('Pipelines', () => { totalPages: 5, }; - Vue.nextTick(() => { - component.$el.querySelector('.js-next-button a').click(); - expect(component.updateContent).toHaveBeenCalledWith({ scope: 'all', page: '2' }); + vm.$nextTick(() => { + vm.$el.querySelector('.js-next-button a').click(); + expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'all', page: '2' }); done(); }); @@ -113,112 +457,249 @@ describe('Pipelines', () => { }); }); }); + }); - describe('without pipelines', () => { - const emptyInterceptor = (request, next) => { - next(request.respondWith(JSON.stringify([]), { - status: 200, - })); - }; + describe('methods', () => { + beforeEach(() => { + spyOn(history, 'pushState').and.stub(); + }); - beforeEach(() => { - Vue.http.interceptors.push(emptyInterceptor); - }); + describe('updateContent', () => { + it('should set given parameters', () => { + vm = mountComponent(PipelinesComponent, { + store: new Store(), + hasGitlabCi: true, + canCreatePipeline: true, + ...paths, + }); + vm.updateContent({ scope: 'finished', page: '4' }); - afterEach(() => { - Vue.http.interceptors = _.without( - Vue.http.interceptors, emptyInterceptor, - ); + expect(vm.page).toEqual('4'); + expect(vm.scope).toEqual('finished'); + expect(vm.requestData.scope).toEqual('finished'); + expect(vm.requestData.page).toEqual('4'); }); + }); + + describe('onChangeTab', () => { + it('should set page to 1', () => { + vm = mountComponent(PipelinesComponent, { + store: new Store(), + hasGitlabCi: true, + canCreatePipeline: true, + ...paths, + }); + spyOn(vm, 'updateContent'); - it('should render empty state', (done) => { - component = new PipelinesComponent({ - propsData: { - store: new Store(), - }, - }).$mount(); + vm.onChangeTab('running'); - setTimeout(() => { - expect(component.$el.querySelector('.empty-state')).not.toBe(null); - done(); + expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'running', page: '1' }); + }); + }); + + describe('onChangePage', () => { + it('should update page and keep scope', () => { + vm = mountComponent(PipelinesComponent, { + store: new Store(), + hasGitlabCi: true, + canCreatePipeline: true, + ...paths, }); + spyOn(vm, 'updateContent'); + + vm.onChangePage(4); + + expect(vm.updateContent).toHaveBeenCalledWith({ scope: vm.scope, page: '4' }); }); }); }); - describe('unsuccessfull request', () => { - const errorInterceptor = (request, next) => { - next(request.respondWith(JSON.stringify([]), { - status: 500, - })); - }; - + describe('computed properties', () => { beforeEach(() => { - Vue.http.interceptors.push(errorInterceptor); + vm = mountComponent(PipelinesComponent, { + store: new Store(), + hasGitlabCi: true, + canCreatePipeline: true, + ...paths, + }); }); - afterEach(() => { - Vue.http.interceptors = _.without( - Vue.http.interceptors, errorInterceptor, - ); + describe('tabs', () => { + it('returns default tabs', () => { + expect(vm.tabs).toEqual([ + { name: 'All', scope: 'all', count: undefined, isActive: true }, + { name: 'Pending', scope: 'pending', count: undefined, isActive: false }, + { name: 'Running', scope: 'running', count: undefined, isActive: false }, + { name: 'Finished', scope: 'finished', count: undefined, isActive: false }, + { name: 'Branches', scope: 'branches', isActive: false }, + { name: 'Tags', scope: 'tags', isActive: false }, + ]); + }); }); - it('should render error state', (done) => { - component = new PipelinesComponent({ - propsData: { - store: new Store(), - }, - }).$mount(); + describe('emptyTabMessage', () => { + it('returns message with scope', (done) => { + vm.scope = 'pending'; - setTimeout(() => { - expect(component.$el.querySelector('.js-pipelines-error-state')).toBeDefined(); - done(); + vm.$nextTick(() => { + expect(vm.emptyTabMessage).toEqual('There are currently no pending pipelines.'); + done(); + }); }); - }); - }); - describe('methods', () => { - beforeEach(() => { - spyOn(history, 'pushState').and.stub(); + it('returns message without scope when scope is `all`', () => { + expect(vm.emptyTabMessage).toEqual('There are currently no pipelines.'); + }); }); - describe('updateContent', () => { - it('should set given parameters', () => { - component = mountComponent(PipelinesComponent, { - store: new Store(), + describe('stateToRender', () => { + it('returns loading state when the app is loading', () => { + expect(vm.stateToRender).toEqual('loading'); + }); + + it('returns error state when app has error', (done) => { + vm.hasError = true; + vm.isLoading = false; + + vm.$nextTick(() => { + expect(vm.stateToRender).toEqual('error'); + done(); + }); + }); + + it('returns table list when app has pipelines', (done) => { + vm.isLoading = false; + vm.hasError = false; + vm.state.pipelines = pipelines.pipelines; + + vm.$nextTick(() => { + expect(vm.stateToRender).toEqual('tableList'); + + done(); + }); + }); + + it('returns empty tab when app does not have pipelines but project has pipelines', (done) => { + vm.state.count.all = 10; + vm.isLoading = false; + + vm.$nextTick(() => { + expect(vm.stateToRender).toEqual('emptyTab'); + + done(); }); - component.updateContent({ scope: 'finished', page: '4' }); + }); + + it('returns empty tab when project has CI', (done) => { + vm.isLoading = false; + vm.$nextTick(() => { + expect(vm.stateToRender).toEqual('emptyTab'); - expect(component.page).toEqual('4'); - expect(component.scope).toEqual('finished'); - expect(component.requestData.scope).toEqual('finished'); - expect(component.requestData.page).toEqual('4'); + done(); + }); + }); + + it('returns empty state when project does not have pipelines nor CI', (done) => { + vm.isLoading = false; + vm.hasGitlabCi = false; + vm.$nextTick(() => { + expect(vm.stateToRender).toEqual('emptyState'); + + done(); + }); }); }); - describe('onChangeTab', () => { - it('should set page to 1', () => { - component = mountComponent(PipelinesComponent, { - store: new Store(), + describe('shouldRenderTabs', () => { + it('returns true when state is loading & has already made the first request', (done) => { + vm.isLoading = true; + vm.hasMadeRequest = true; + + vm.$nextTick(() => { + expect(vm.shouldRenderTabs).toEqual(true); + + done(); }); - spyOn(component, 'updateContent'); + }); - component.onChangeTab('running'); + it('returns true when state is tableList & has already made the first request', (done) => { + vm.isLoading = false; + vm.state.pipelines = pipelines.pipelines; + vm.hasMadeRequest = true; - expect(component.updateContent).toHaveBeenCalledWith({ scope: 'running', page: '1' }); + vm.$nextTick(() => { + expect(vm.shouldRenderTabs).toEqual(true); + + done(); + }); + }); + + it('returns true when state is error & has already made the first request', (done) => { + vm.isLoading = false; + vm.hasError = true; + vm.hasMadeRequest = true; + + vm.$nextTick(() => { + expect(vm.shouldRenderTabs).toEqual(true); + + done(); + }); + }); + + it('returns true when state is empty tab & has already made the first request', (done) => { + vm.isLoading = false; + vm.state.count.all = 10; + vm.hasMadeRequest = true; + + vm.$nextTick(() => { + expect(vm.shouldRenderTabs).toEqual(true); + + done(); + }); + }); + + it('returns false when has not made first request', (done) => { + vm.hasMadeRequest = false; + + vm.$nextTick(() => { + expect(vm.shouldRenderTabs).toEqual(false); + + done(); + }); + }); + + it('returns false when state is emtpy state', (done) => { + vm.isLoading = false; + vm.hasMadeRequest = true; + vm.hasGitlabCi = false; + + vm.$nextTick(() => { + expect(vm.shouldRenderTabs).toEqual(false); + + done(); + }); }); }); - describe('onChangePage', () => { - it('should update page and keep scope', () => { - component = mountComponent(PipelinesComponent, { - store: new Store(), + describe('shouldRenderButtons', () => { + it('returns true when it has paths & has made the first request', (done) => { + vm.hasMadeRequest = true; + + vm.$nextTick(() => { + expect(vm.shouldRenderButtons).toEqual(true); + + done(); }); - spyOn(component, 'updateContent'); + }); + + it('returns false when it has not made the first request', (done) => { + vm.hasMadeRequest = false; - component.onChangePage(4); + vm.$nextTick(() => { + expect(vm.shouldRenderButtons).toEqual(false); - expect(component.updateContent).toHaveBeenCalledWith({ scope: component.scope, page: '4' }); + done(); + }); }); }); }); diff --git a/spec/javascripts/profile/account/components/delete_account_modal_spec.js b/spec/javascripts/profile/account/components/delete_account_modal_spec.js index 588b61196a5..a0939ff5c20 100644 --- a/spec/javascripts/profile/account/components/delete_account_modal_spec.js +++ b/spec/javascripts/profile/account/components/delete_account_modal_spec.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import deleteAccountModal from '~/profile/account/components/delete_account_modal.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('DeleteAccountModal component', () => { const actionUrl = `${gl.TEST_HOST}/delete/user`; diff --git a/spec/javascripts/projects_dropdown/components/app_spec.js b/spec/javascripts/projects_dropdown/components/app_spec.js index 42f0f6fc1af..2054fef790b 100644 --- a/spec/javascripts/projects_dropdown/components/app_spec.js +++ b/spec/javascripts/projects_dropdown/components/app_spec.js @@ -6,7 +6,7 @@ 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 '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { currentSession, mockProject, mockRawProject } from '../mock_data'; const createComponent = () => { diff --git a/spec/javascripts/projects_dropdown/components/projects_list_frequent_spec.js b/spec/javascripts/projects_dropdown/components/projects_list_frequent_spec.js index fcd0f6a3630..2bafb4e81ca 100644 --- a/spec/javascripts/projects_dropdown/components/projects_list_frequent_spec.js +++ b/spec/javascripts/projects_dropdown/components/projects_list_frequent_spec.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import projectsListFrequentComponent from '~/projects_dropdown/components/projects_list_frequent.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { mockFrequents } from '../mock_data'; const createComponent = () => { diff --git a/spec/javascripts/projects_dropdown/components/projects_list_item_spec.js b/spec/javascripts/projects_dropdown/components/projects_list_item_spec.js index edef150dd1e..c193258474e 100644 --- a/spec/javascripts/projects_dropdown/components/projects_list_item_spec.js +++ b/spec/javascripts/projects_dropdown/components/projects_list_item_spec.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import projectsListItemComponent from '~/projects_dropdown/components/projects_list_item.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { mockProject } from '../mock_data'; const createComponent = () => { diff --git a/spec/javascripts/projects_dropdown/components/projects_list_search_spec.js b/spec/javascripts/projects_dropdown/components/projects_list_search_spec.js index 67f8a8946c2..c4b86d77034 100644 --- a/spec/javascripts/projects_dropdown/components/projects_list_search_spec.js +++ b/spec/javascripts/projects_dropdown/components/projects_list_search_spec.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import projectsListSearchComponent from '~/projects_dropdown/components/projects_list_search.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { mockProject } from '../mock_data'; const createComponent = () => { diff --git a/spec/javascripts/projects_dropdown/components/search_spec.js b/spec/javascripts/projects_dropdown/components/search_spec.js index 24d8a00b254..601264258c2 100644 --- a/spec/javascripts/projects_dropdown/components/search_spec.js +++ b/spec/javascripts/projects_dropdown/components/search_spec.js @@ -3,7 +3,7 @@ import Vue from 'vue'; import searchComponent from '~/projects_dropdown/components/search.vue'; import eventHub from '~/projects_dropdown/event_hub'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; const createComponent = () => { const Component = Vue.extend(searchComponent); diff --git a/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js b/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js index f6c0f51cf62..955ec6a531c 100644 --- a/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js +++ b/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js @@ -85,7 +85,7 @@ describe('PrometheusMetrics', () => { expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy(); expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBeFalsy(); - expect(prometheusMetrics.$monitoredMetricsCount.text()).toEqual('12'); + expect(prometheusMetrics.$monitoredMetricsCount.text()).toEqual('3 exporters with 12 metrics were found'); expect($metricsListLi.length).toEqual(metrics.length); expect($metricsListLi.first().find('.badge').text()).toEqual(`${metrics[0].active_metrics}`); }); diff --git a/spec/javascripts/registry/components/app_spec.js b/spec/javascripts/registry/components/app_spec.js index 6a8a85e3dfb..cf1d0625397 100644 --- a/spec/javascripts/registry/components/app_spec.js +++ b/spec/javascripts/registry/components/app_spec.js @@ -1,7 +1,7 @@ import _ from 'underscore'; import Vue from 'vue'; import registry from '~/registry/components/app.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { reposServerResponse } from '../mock_data'; describe('Registry List', () => { diff --git a/spec/javascripts/repo/components/commit_sidebar/list_collapsed_spec.js b/spec/javascripts/repo/components/commit_sidebar/list_collapsed_spec.js deleted file mode 100644 index debde1bb357..00000000000 --- a/spec/javascripts/repo/components/commit_sidebar/list_collapsed_spec.js +++ /dev/null @@ -1,33 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import listCollapsed from '~/ide/components/commit_sidebar/list_collapsed.vue'; -import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper'; -import { file } from '../../helpers'; - -describe('Multi-file editor commit sidebar list collapsed', () => { - let vm; - - beforeEach(() => { - const Component = Vue.extend(listCollapsed); - - vm = createComponentWithStore(Component, store); - - vm.$store.state.openFiles.push(file('file1'), file('file2')); - vm.$store.state.openFiles[0].tempFile = true; - vm.$store.state.openFiles.forEach((f) => { - Object.assign(f, { - changed: true, - }); - }); - - vm.$mount(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('renders added & modified files count', () => { - expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toBe('1 1'); - }); -}); diff --git a/spec/javascripts/repo/components/commit_sidebar/list_item_spec.js b/spec/javascripts/repo/components/commit_sidebar/list_item_spec.js deleted file mode 100644 index 4b20fdf70d6..00000000000 --- a/spec/javascripts/repo/components/commit_sidebar/list_item_spec.js +++ /dev/null @@ -1,53 +0,0 @@ -import Vue from 'vue'; -import listItem from '~/ide/components/commit_sidebar/list_item.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; -import { file } from '../../helpers'; - -describe('Multi-file editor commit sidebar list item', () => { - let vm; - let f; - - beforeEach(() => { - const Component = Vue.extend(listItem); - - f = file('test-file'); - - vm = mountComponent(Component, { - file: f, - }); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('renders file path', () => { - expect(vm.$el.querySelector('.multi-file-commit-list-path').textContent.trim()).toBe(f.path); - }); - - describe('computed', () => { - describe('iconName', () => { - it('returns modified when not a tempFile', () => { - expect(vm.iconName).toBe('file-modified'); - }); - - it('returns addition when not a tempFile', () => { - f.tempFile = true; - - expect(vm.iconName).toBe('file-addition'); - }); - }); - - describe('iconClass', () => { - it('returns modified when not a tempFile', () => { - expect(vm.iconClass).toContain('multi-file-modified'); - }); - - it('returns addition when not a tempFile', () => { - f.tempFile = true; - - expect(vm.iconClass).toContain('multi-file-addition'); - }); - }); - }); -}); diff --git a/spec/javascripts/repo/components/commit_sidebar/list_spec.js b/spec/javascripts/repo/components/commit_sidebar/list_spec.js deleted file mode 100644 index cb5240ad118..00000000000 --- a/spec/javascripts/repo/components/commit_sidebar/list_spec.js +++ /dev/null @@ -1,59 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import commitSidebarList from '~/ide/components/commit_sidebar/list.vue'; -import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper'; -import { file } from '../../helpers'; - -describe('Multi-file editor commit sidebar list', () => { - let vm; - - beforeEach(() => { - const Component = Vue.extend(commitSidebarList); - - vm = createComponentWithStore(Component, store, { - title: 'Staged', - fileList: [], - }); - - vm.$store.state.rightPanelCollapsed = false; - - vm.$mount(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('empty file list', () => { - it('renders no changes text', () => { - expect(vm.$el.querySelector('.help-block').textContent.trim()).toBe('No changes'); - }); - }); - - describe('with a list of files', () => { - beforeEach((done) => { - const f = file('file name'); - f.changed = true; - vm.fileList.push(f); - - Vue.nextTick(done); - }); - - it('renders list', () => { - expect(vm.$el.querySelectorAll('li').length).toBe(1); - }); - }); - - describe('collapsed', () => { - beforeEach((done) => { - vm.$store.state.rightPanelCollapsed = true; - - Vue.nextTick(done); - }); - - it('hides list', () => { - expect(vm.$el.querySelector('.list-unstyled')).toBeNull(); - expect(vm.$el.querySelector('.help-block')).toBeNull(); - }); - }); -}); diff --git a/spec/javascripts/repo/components/ide_context_bar_spec.js b/spec/javascripts/repo/components/ide_context_bar_spec.js deleted file mode 100644 index 3f8f37d2343..00000000000 --- a/spec/javascripts/repo/components/ide_context_bar_spec.js +++ /dev/null @@ -1,49 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import ideContextBar from '~/ide/components/ide_context_bar.vue'; -import { createComponentWithStore } from '../../helpers/vue_mount_component_helper'; - -describe('Multi-file editor right context bar', () => { - let vm; - - beforeEach(() => { - const Component = Vue.extend(ideContextBar); - - vm = createComponentWithStore(Component, store); - - vm.$store.state.rightPanelCollapsed = false; - - vm.$mount(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('collapsed', () => { - beforeEach((done) => { - vm.$store.state.rightPanelCollapsed = true; - - Vue.nextTick(done); - }); - - it('adds collapsed class', () => { - expect(vm.$el.querySelector('.is-collapsed')).not.toBeNull(); - }); - - it('shows correct icon', () => { - expect(vm.currentIcon).toBe('angle-double-left'); - }); - }); - - it('clicking toggle collapse button collapses the bar', () => { - spyOn(vm, 'setPanelCollapsedStatus').and.returnValue(Promise.resolve()); - - vm.$el.querySelector('.multi-file-commit-panel-collapse-btn').click(); - - expect(vm.setPanelCollapsedStatus).toHaveBeenCalledWith({ - side: 'right', - collapsed: true, - }); - }); -}); diff --git a/spec/javascripts/repo/components/ide_repo_tree_spec.js b/spec/javascripts/repo/components/ide_repo_tree_spec.js deleted file mode 100644 index e3bbda514da..00000000000 --- a/spec/javascripts/repo/components/ide_repo_tree_spec.js +++ /dev/null @@ -1,63 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import ideRepoTree from '~/ide/components/ide_repo_tree.vue'; -import { file, resetStore } from '../helpers'; - -describe('IdeRepoTree', () => { - let vm; - - beforeEach(() => { - const IdeRepoTree = Vue.extend(ideRepoTree); - - vm = new IdeRepoTree({ - store, - propsData: { - treeId: 'abcproject/mybranch', - }, - }); - - vm.$store.state.currentBranch = 'master'; - vm.$store.state.isRoot = true; - vm.$store.state.trees['abcproject/mybranch'] = { - tree: [file()], - }; - - vm.$mount(); - }); - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - it('renders a sidebar', () => { - const tbody = vm.$el.querySelector('tbody'); - - expect(vm.$el.classList.contains('sidebar-mini')).toBeFalsy(); - expect(tbody.querySelector('.repo-file-options')).toBeFalsy(); - expect(tbody.querySelector('.prev-directory')).toBeFalsy(); - expect(tbody.querySelector('.loading-file')).toBeFalsy(); - expect(tbody.querySelector('.file')).toBeTruthy(); - }); - - it('renders 3 loading files if tree is loading', (done) => { - vm.treeId = '123'; - - Vue.nextTick(() => { - expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toEqual(3); - - done(); - }); - }); - - it('renders a prev directory if is not root', (done) => { - vm.$store.state.isRoot = false; - - Vue.nextTick(() => { - expect(vm.$el.querySelector('tbody .prev-directory')).toBeTruthy(); - - done(); - }); - }); -}); diff --git a/spec/javascripts/repo/components/ide_side_bar_spec.js b/spec/javascripts/repo/components/ide_side_bar_spec.js deleted file mode 100644 index 30e45169205..00000000000 --- a/spec/javascripts/repo/components/ide_side_bar_spec.js +++ /dev/null @@ -1,43 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import ideSidebar from '~/ide/components/ide_side_bar.vue'; -import { resetStore } from '../helpers'; -import { createComponentWithStore } from '../../helpers/vue_mount_component_helper'; - -describe('IdeSidebar', () => { - let vm; - - beforeEach(() => { - const Component = Vue.extend(ideSidebar); - - vm = createComponentWithStore(Component, store).$mount(); - - vm.$store.state.leftPanelCollapsed = false; - }); - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - it('renders a sidebar', () => { - expect(vm.$el.querySelector('.multi-file-commit-panel-inner')).not.toBeNull(); - }); - - describe('collapsed', () => { - beforeEach((done) => { - vm.$store.state.leftPanelCollapsed = true; - - Vue.nextTick(done); - }); - - it('adds collapsed class', () => { - expect(vm.$el.classList).toContain('is-collapsed'); - }); - - it('shows correct icon', () => { - expect(vm.currentIcon).toBe('angle-double-right'); - }); - }); -}); diff --git a/spec/javascripts/repo/components/ide_spec.js b/spec/javascripts/repo/components/ide_spec.js deleted file mode 100644 index acfd63eb8de..00000000000 --- a/spec/javascripts/repo/components/ide_spec.js +++ /dev/null @@ -1,39 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import ide from '~/ide/components/ide.vue'; -import { createComponentWithStore } from '../../helpers/vue_mount_component_helper'; -import { file, resetStore } from '../helpers'; - -describe('ide component', () => { - let vm; - - beforeEach(() => { - const Component = Vue.extend(ide); - - vm = createComponentWithStore(Component, store, { - emptyStateSvgPath: 'svg', - }).$mount(); - }); - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - it('does not render panel right when no files open', () => { - expect(vm.$el.querySelector('.panel-right')).toBeNull(); - }); - - it('renders panel right when files are open', (done) => { - vm.$store.state.trees['abcproject/mybranch'] = { - tree: [file()], - }; - - Vue.nextTick(() => { - expect(vm.$el.querySelector('.panel-right')).toBeNull(); - - done(); - }); - }); -}); diff --git a/spec/javascripts/repo/components/new_branch_form_spec.js b/spec/javascripts/repo/components/new_branch_form_spec.js deleted file mode 100644 index cd1d073ec18..00000000000 --- a/spec/javascripts/repo/components/new_branch_form_spec.js +++ /dev/null @@ -1,114 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import newBranchForm from '~/ide/components/new_branch_form.vue'; -import { createComponentWithStore } from '../../helpers/vue_mount_component_helper'; -import { resetStore } from '../helpers'; - -describe('Multi-file editor new branch form', () => { - let vm; - - beforeEach(() => { - const Component = Vue.extend(newBranchForm); - - vm = createComponentWithStore(Component, store); - - vm.$store.state.currentBranch = 'master'; - - vm.$mount(); - }); - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - describe('template', () => { - it('renders submit as disabled', () => { - expect(vm.$el.querySelector('.btn').getAttribute('disabled')).toBe('disabled'); - }); - - it('enables the submit button when branch is not empty', (done) => { - vm.branchName = 'testing'; - - Vue.nextTick(() => { - expect(vm.$el.querySelector('.btn').getAttribute('disabled')).toBeNull(); - - done(); - }); - }); - - it('displays current branch creating from', (done) => { - Vue.nextTick(() => { - expect(vm.$el.querySelector('p').textContent.replace(/\s+/g, ' ').trim()).toBe('Create from: master'); - - done(); - }); - }); - }); - - describe('submitNewBranch', () => { - beforeEach(() => { - spyOn(vm, 'createNewBranch').and.returnValue(Promise.resolve()); - }); - - it('sets to loading', () => { - vm.submitNewBranch(); - - expect(vm.loading).toBeTruthy(); - }); - - it('hides current flash element', (done) => { - vm.$refs.flashContainer.innerHTML = '<div class="flash-alert"></div>'; - - vm.submitNewBranch(); - - Vue.nextTick(() => { - expect(vm.$el.querySelector('.flash-alert')).toBeNull(); - - done(); - }); - }); - - it('calls createdNewBranch with branchName', () => { - vm.branchName = 'testing'; - - vm.submitNewBranch(); - - expect(vm.createNewBranch).toHaveBeenCalledWith('testing'); - }); - }); - - describe('submitNewBranch with error', () => { - beforeEach(() => { - spyOn(vm, 'createNewBranch').and.returnValue(Promise.reject({ - json: () => Promise.resolve({ - message: 'error message', - }), - })); - }); - - it('sets loading to false', (done) => { - vm.loading = true; - - vm.submitNewBranch(); - - setTimeout(() => { - expect(vm.loading).toBeFalsy(); - - done(); - }); - }); - - it('creates flash element', (done) => { - vm.submitNewBranch(); - - setTimeout(() => { - expect(vm.$el.querySelector('.flash-alert')).not.toBeNull(); - expect(vm.$el.querySelector('.flash-alert').textContent.trim()).toBe('error message'); - - done(); - }); - }); - }); -}); diff --git a/spec/javascripts/repo/components/new_dropdown/index_spec.js b/spec/javascripts/repo/components/new_dropdown/index_spec.js deleted file mode 100644 index 6efbbf6d75e..00000000000 --- a/spec/javascripts/repo/components/new_dropdown/index_spec.js +++ /dev/null @@ -1,77 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import newDropdown from '~/ide/components/new_dropdown/index.vue'; -import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper'; -import { resetStore } from '../../helpers'; - -describe('new dropdown component', () => { - let vm; - - beforeEach(() => { - const component = Vue.extend(newDropdown); - - vm = createComponentWithStore(component, store, { - branch: 'master', - path: '', - }); - - vm.$store.state.currentProjectId = 'abcproject'; - vm.$store.state.path = ''; - - vm.$mount(); - }); - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - it('renders new file, upload and new directory links', () => { - expect(vm.$el.querySelectorAll('a')[0].textContent.trim()).toBe('New file'); - expect(vm.$el.querySelectorAll('a')[1].textContent.trim()).toBe('Upload file'); - expect(vm.$el.querySelectorAll('a')[2].textContent.trim()).toBe('New directory'); - }); - - describe('createNewItem', () => { - it('sets modalType to blob when new file is clicked', () => { - vm.$el.querySelectorAll('a')[0].click(); - - expect(vm.modalType).toBe('blob'); - }); - - it('sets modalType to tree when new directory is clicked', () => { - vm.$el.querySelectorAll('a')[2].click(); - - expect(vm.modalType).toBe('tree'); - }); - - it('opens modal when link is clicked', (done) => { - vm.$el.querySelectorAll('a')[0].click(); - - Vue.nextTick(() => { - expect(vm.$el.querySelector('.modal')).not.toBeNull(); - - done(); - }); - }); - }); - - describe('hideModal', () => { - beforeAll((done) => { - vm.openModal = true; - Vue.nextTick(done); - }); - - it('closes modal after toggling', (done) => { - vm.hideModal(); - - Vue.nextTick() - .then(() => { - expect(vm.$el.querySelector('.modal')).toBeNull(); - }) - .then(done) - .catch(done.fail); - }); - }); -}); diff --git a/spec/javascripts/repo/components/new_dropdown/modal_spec.js b/spec/javascripts/repo/components/new_dropdown/modal_spec.js deleted file mode 100644 index 8bbc3100357..00000000000 --- a/spec/javascripts/repo/components/new_dropdown/modal_spec.js +++ /dev/null @@ -1,237 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import service from '~/ide/services'; -import modal from '~/ide/components/new_dropdown/modal.vue'; -import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper'; -import { file, resetStore } from '../../helpers'; - -describe('new file modal component', () => { - const Component = Vue.extend(modal); - let vm; - let projectTree; - - beforeEach(() => { - spyOn(service, 'getProjectData').and.returnValue(Promise.resolve({ - data: { - id: '123', - }, - })); - - spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({ - data: { - commit: { - id: '123branch', - }, - }, - })); - - spyOn(service, 'getTreeData').and.returnValue(Promise.resolve({ - headers: { - 'page-title': 'test', - }, - json: () => Promise.resolve({ - last_commit_path: 'last_commit_path', - parent_tree_url: 'parent_tree_url', - path: '/', - trees: [{ name: 'tree' }], - blobs: [{ name: 'blob' }], - submodules: [{ name: 'submodule' }], - }), - })); - }); - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - ['tree', 'blob'].forEach((type) => { - describe(type, () => { - beforeEach(() => { - store.state.projects.abcproject = { - web_url: '', - }; - store.state.trees = []; - store.state.trees['abcproject/mybranch'] = { - tree: [], - }; - projectTree = store.state.trees['abcproject/mybranch']; - store.state.currentProjectId = 'abcproject'; - - vm = createComponentWithStore(Component, store, { - type, - branchId: 'master', - path: '', - parent: projectTree, - }); - - vm.entryName = 'testing'; - - vm.$mount(); - }); - - it(`sets modal title as ${type}`, () => { - const title = type === 'tree' ? 'directory' : 'file'; - - expect(vm.$el.querySelector('.modal-title').textContent.trim()).toBe(`Create new ${title}`); - }); - - it(`sets button label as ${type}`, () => { - const title = type === 'tree' ? 'directory' : 'file'; - - expect(vm.$el.querySelector('.btn-success').textContent.trim()).toBe(`Create ${title}`); - }); - - it(`sets form label as ${type}`, () => { - const title = type === 'tree' ? 'Directory' : 'File'; - - expect(vm.$el.querySelector('.label-light').textContent.trim()).toBe(`${title} name`); - }); - - describe('createEntryInStore', () => { - it('calls createTempEntry', () => { - spyOn(vm, 'createTempEntry'); - - vm.createEntryInStore(); - - expect(vm.createTempEntry).toHaveBeenCalledWith({ - projectId: 'abcproject', - branchId: 'master', - parent: projectTree, - name: 'testing', - type, - }); - }); - - it('sets editMode to true', (done) => { - vm.createEntryInStore(); - - setTimeout(() => { - expect(vm.$store.state.editMode).toBeTruthy(); - - done(); - }); - }); - - it('toggles blob view', (done) => { - vm.createEntryInStore(); - - setTimeout(() => { - expect(vm.$store.state.currentBlobView).toBe('repo-editor'); - - done(); - }); - }); - - it('opens newly created file', (done) => { - if (type === 'blob') { - vm.createEntryInStore(); - - setTimeout(() => { - expect(vm.$store.state.openFiles.length).toBe(1); - expect(vm.$store.state.openFiles[0].name).toBe(type === 'blob' ? 'testing' : '.gitkeep'); - - done(); - }); - } else { - done(); - } - }); - - if (type === 'blob') { - it('creates new file', (done) => { - vm.createEntryInStore(); - - setTimeout(() => { - const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree; - expect(baseTree.length).toBe(1); - expect(baseTree[0].name).toBe('testing'); - expect(baseTree[0].type).toBe('blob'); - expect(baseTree[0].tempFile).toBeTruthy(); - - done(); - }); - }); - - it('does not create temp file when file already exists', (done) => { - const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree; - baseTree.push(file('testing', '1', type)); - - vm.createEntryInStore(); - - setTimeout(() => { - expect(baseTree.length).toBe(1); - expect(baseTree[0].name).toBe('testing'); - expect(baseTree[0].type).toBe('blob'); - expect(baseTree[0].tempFile).toBeFalsy(); - - done(); - }); - }); - } else { - it('creates new tree', () => { - vm.createEntryInStore(); - - const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree; - expect(baseTree.length).toBe(1); - expect(baseTree[0].name).toBe('testing'); - expect(baseTree[0].type).toBe('tree'); - expect(baseTree[0].tempFile).toBeTruthy(); - }); - - it('creates multiple trees when entryName has slashes', () => { - vm.entryName = 'app/test'; - vm.createEntryInStore(); - - const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree; - expect(baseTree.length).toBe(1); - expect(baseTree[0].name).toBe('app'); - }); - - it('creates tree in existing tree', () => { - const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree; - baseTree.push(file('app', '1', 'tree')); - - vm.entryName = 'app/test'; - vm.createEntryInStore(); - - expect(baseTree.length).toBe(1); - expect(baseTree[0].name).toBe('app'); - expect(baseTree[0].tempFile).toBeFalsy(); - expect(baseTree[0].tree[0].tempFile).toBeTruthy(); - expect(baseTree[0].tree[0].name).toBe('test'); - }); - - it('does not create new tree when already exists', () => { - const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree; - baseTree.push(file('app', '1', 'tree')); - - vm.entryName = 'app'; - vm.createEntryInStore(); - - expect(baseTree.length).toBe(1); - expect(baseTree[0].name).toBe('app'); - expect(baseTree[0].tempFile).toBeFalsy(); - expect(baseTree[0].tree.length).toBe(0); - }); - } - }); - }); - }); - - it('focuses field on mount', () => { - document.body.innerHTML += '<div class="js-test"></div>'; - - vm = createComponentWithStore(Component, store, { - type: 'tree', - projectId: 'abcproject', - branchId: 'master', - path: '', - }).$mount('.js-test'); - - expect(document.activeElement).toBe(vm.$refs.fieldName); - - vm.$el.remove(); - }); -}); diff --git a/spec/javascripts/repo/components/new_dropdown/upload_spec.js b/spec/javascripts/repo/components/new_dropdown/upload_spec.js deleted file mode 100644 index 667112ab21a..00000000000 --- a/spec/javascripts/repo/components/new_dropdown/upload_spec.js +++ /dev/null @@ -1,158 +0,0 @@ -import Vue from 'vue'; -import upload from '~/ide/components/new_dropdown/upload.vue'; -import store from '~/ide/stores'; -import service from '~/ide/services'; -import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper'; -import { resetStore } from '../../helpers'; - -describe('new dropdown upload', () => { - let vm; - let projectTree; - - beforeEach(() => { - spyOn(service, 'getProjectData').and.returnValue(Promise.resolve({ - data: { - id: '123', - }, - })); - - spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({ - data: { - commit: { - id: '123branch', - }, - }, - })); - - spyOn(service, 'getTreeData').and.returnValue(Promise.resolve({ - headers: { - 'page-title': 'test', - }, - json: () => Promise.resolve({ - last_commit_path: 'last_commit_path', - parent_tree_url: 'parent_tree_url', - path: '/', - trees: [{ name: 'tree' }], - blobs: [{ name: 'blob' }], - submodules: [{ name: 'submodule' }], - }), - })); - - const Component = Vue.extend(upload); - - store.state.projects.abcproject = { - web_url: '', - }; - store.state.currentProjectId = 'abcproject'; - store.state.trees = []; - store.state.trees['abcproject/mybranch'] = { - tree: [], - }; - projectTree = store.state.trees['abcproject/mybranch']; - - vm = createComponentWithStore(Component, store, { - branchId: 'master', - path: '', - parent: projectTree, - }); - - vm.entryName = 'testing'; - - vm.$mount(); - }); - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - describe('readFile', () => { - beforeEach(() => { - spyOn(FileReader.prototype, 'readAsText'); - spyOn(FileReader.prototype, 'readAsDataURL'); - }); - - it('calls readAsText for text files', () => { - const file = { - type: 'text/html', - }; - - vm.readFile(file); - - expect(FileReader.prototype.readAsText).toHaveBeenCalledWith(file); - }); - - it('calls readAsDataURL for non-text files', () => { - const file = { - type: 'images/png', - }; - - vm.readFile(file); - - expect(FileReader.prototype.readAsDataURL).toHaveBeenCalledWith(file); - }); - }); - - describe('createFile', () => { - const target = { - result: 'content', - }; - const binaryTarget = { - result: 'base64,base64content', - }; - const file = { - name: 'file', - }; - - it('creates new file', (done) => { - vm.createFile(target, file, true); - - vm.$nextTick(() => { - const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree; - expect(baseTree.length).toBe(1); - expect(baseTree[0].name).toBe(file.name); - expect(baseTree[0].content).toBe(target.result); - - done(); - }); - }); - - it('creates new file in path', (done) => { - const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree; - const tree = { - type: 'tree', - name: 'testing', - path: 'testing', - tree: [], - }; - baseTree.push(tree); - - vm.parent = tree; - vm.createFile(target, file, true); - - vm.$nextTick(() => { - expect(baseTree.length).toBe(1); - expect(baseTree[0].tree[0].name).toBe(file.name); - expect(baseTree[0].tree[0].content).toBe(target.result); - expect(baseTree[0].tree[0].path).toBe(`testing/${file.name}`); - - done(); - }); - }); - - it('splits content on base64 if binary', (done) => { - vm.createFile(binaryTarget, file, false); - - vm.$nextTick(() => { - const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree; - expect(baseTree.length).toBe(1); - expect(baseTree[0].name).toBe(file.name); - expect(baseTree[0].content).toBe(binaryTarget.result.split('base64,')[1]); - expect(baseTree[0].base64).toBe(true); - - done(); - }); - }); - }); -}); diff --git a/spec/javascripts/repo/components/repo_commit_section_spec.js b/spec/javascripts/repo/components/repo_commit_section_spec.js deleted file mode 100644 index 93e94b4f24c..00000000000 --- a/spec/javascripts/repo/components/repo_commit_section_spec.js +++ /dev/null @@ -1,140 +0,0 @@ -import Vue from 'vue'; -import * as urlUtils from '~/lib/utils/url_utility'; -import store from '~/ide/stores'; -import service from '~/ide/services'; -import repoCommitSection from '~/ide/components/repo_commit_section.vue'; -import getSetTimeoutPromise from '../../helpers/set_timeout_promise_helper'; -import { file, resetStore } from '../helpers'; - -describe('RepoCommitSection', () => { - let vm; - - function createComponent() { - const RepoCommitSection = Vue.extend(repoCommitSection); - - const comp = new RepoCommitSection({ - store, - }).$mount(); - - comp.$store.state.currentProjectId = 'abcproject'; - comp.$store.state.currentBranchId = 'master'; - comp.$store.state.projects.abcproject = { - web_url: '', - branches: { - master: { - workingReference: '1', - }, - }, - }; - - comp.$store.state.rightPanelCollapsed = false; - comp.$store.state.currentBranch = 'master'; - comp.$store.state.openFiles = [file('file1'), file('file2')]; - comp.$store.state.openFiles.forEach(f => Object.assign(f, { - changed: true, - content: 'testing', - })); - - return comp.$mount(); - } - - beforeEach((done) => { - vm = createComponent(); - - spyOn(service, 'getTreeData').and.returnValue(Promise.resolve({ - headers: { - 'page-title': 'test', - }, - json: () => Promise.resolve({ - last_commit_path: 'last_commit_path', - parent_tree_url: 'parent_tree_url', - path: '/', - trees: [{ name: 'tree' }], - blobs: [{ name: 'blob' }], - submodules: [{ name: 'submodule' }], - }), - })); - - Vue.nextTick(done); - }); - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - it('renders a commit section', () => { - const changedFileElements = [...vm.$el.querySelectorAll('.multi-file-commit-list li')]; - const submitCommit = vm.$el.querySelector('form .btn'); - - expect(vm.$el.querySelector('.multi-file-commit-form')).not.toBeNull(); - expect(changedFileElements.length).toEqual(2); - - changedFileElements.forEach((changedFile, i) => { - expect(changedFile.textContent.trim()).toEqual(vm.$store.getters.changedFiles[i].path); - }); - - expect(submitCommit.disabled).toBeTruthy(); - expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeNull(); - }); - - describe('when submitting', () => { - let changedFiles; - - beforeEach(() => { - vm.commitMessage = 'testing'; - changedFiles = JSON.parse(JSON.stringify(vm.$store.getters.changedFiles)); - - spyOn(service, 'commit').and.returnValue(Promise.resolve({ - data: { - short_id: '1', - stats: {}, - }, - })); - }); - - it('allows you to submit', () => { - expect(vm.$el.querySelector('form .btn').disabled).toBeTruthy(); - }); - - it('submits commit', (done) => { - vm.makeCommit(); - - // Wait for the branch check to finish - getSetTimeoutPromise() - .then(() => Vue.nextTick()) - .then(() => { - const args = service.commit.calls.allArgs()[0]; - const { commit_message, actions, branch: payloadBranch } = args[1]; - - expect(commit_message).toBe('testing'); - expect(actions.length).toEqual(2); - expect(payloadBranch).toEqual('master'); - expect(actions[0].action).toEqual('update'); - expect(actions[1].action).toEqual('update'); - expect(actions[0].content).toEqual(changedFiles[0].content); - expect(actions[1].content).toEqual(changedFiles[1].content); - expect(actions[0].file_path).toEqual(changedFiles[0].path); - expect(actions[1].file_path).toEqual(changedFiles[1].path); - }) - .then(done) - .catch(done.fail); - }); - - it('redirects to MR creation page if start new MR checkbox checked', (done) => { - spyOn(urlUtils, 'visitUrl'); - vm.startNewMR = true; - - vm.makeCommit(); - - getSetTimeoutPromise() - .then(() => Vue.nextTick()) - .then(() => { - expect(urlUtils.visitUrl).toHaveBeenCalled(); - }) - .then(done) - .catch(done.fail); - }); - }); -}); diff --git a/spec/javascripts/repo/components/repo_edit_button_spec.js b/spec/javascripts/repo/components/repo_edit_button_spec.js deleted file mode 100644 index 2895b794506..00000000000 --- a/spec/javascripts/repo/components/repo_edit_button_spec.js +++ /dev/null @@ -1,83 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import repoEditButton from '~/ide/components/repo_edit_button.vue'; -import { file, resetStore } from '../helpers'; - -describe('RepoEditButton', () => { - let vm; - - beforeEach(() => { - const f = file(); - const RepoEditButton = Vue.extend(repoEditButton); - - vm = new RepoEditButton({ - store, - }); - - f.active = true; - vm.$store.dispatch('setInitialData', { - canCommit: true, - onTopOfBranch: true, - }); - vm.$store.state.openFiles.push(f); - }); - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - it('renders an edit button', () => { - vm.$mount(); - - expect(vm.$el.querySelector('.btn')).not.toBeNull(); - expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Cancel edit'); - }); - - it('renders edit button with cancel text', () => { - vm.$store.state.editMode = true; - - vm.$mount(); - - expect(vm.$el.querySelector('.btn')).not.toBeNull(); - expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Cancel edit'); - }); - - it('toggles edit mode on click', (done) => { - vm.$mount(); - - vm.$el.querySelector('.btn').click(); - - vm.$nextTick(() => { - expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Edit'); - - done(); - }); - }); - - describe('discardPopupOpen', () => { - beforeEach(() => { - vm.$store.state.discardPopupOpen = true; - vm.$store.state.editMode = true; - vm.$store.state.openFiles[0].changed = true; - - vm.$mount(); - }); - - it('renders popup', () => { - expect(vm.$el.querySelector('.modal')).not.toBeNull(); - }); - - it('removes all changed files', (done) => { - vm.$el.querySelector('.btn-warning').click(); - - vm.$nextTick(() => { - expect(vm.$store.getters.changedFiles.length).toBe(0); - expect(vm.$el.querySelector('.modal')).toBeNull(); - - done(); - }); - }); - }); -}); diff --git a/spec/javascripts/repo/components/repo_editor_spec.js b/spec/javascripts/repo/components/repo_editor_spec.js deleted file mode 100644 index e7b2ed08acd..00000000000 --- a/spec/javascripts/repo/components/repo_editor_spec.js +++ /dev/null @@ -1,60 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import repoEditor from '~/ide/components/repo_editor.vue'; -import monacoLoader from '~/ide/monaco_loader'; -import { file, resetStore } from '../helpers'; - -describe('RepoEditor', () => { - let vm; - - beforeEach((done) => { - const f = file(); - const RepoEditor = Vue.extend(repoEditor); - - vm = new RepoEditor({ - store, - }); - - f.active = true; - f.tempFile = true; - vm.$store.state.openFiles.push(f); - vm.$store.getters.activeFile.html = 'testing'; - vm.monaco = true; - - vm.$mount(); - - monacoLoader(['vs/editor/editor.main'], () => { - setTimeout(done, 0); - }); - }); - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - it('renders an ide container', (done) => { - Vue.nextTick(() => { - expect(vm.shouldHideEditor).toBeFalsy(); - - done(); - }); - }); - - describe('when open file is binary and not raw', () => { - beforeEach((done) => { - vm.$store.getters.activeFile.binary = true; - - Vue.nextTick(done); - }); - - it('does not render the IDE', () => { - expect(vm.shouldHideEditor).toBeTruthy(); - }); - - it('shows activeFile html', () => { - expect(vm.$el.textContent).toContain('testing'); - }); - }); -}); diff --git a/spec/javascripts/repo/components/repo_file_buttons_spec.js b/spec/javascripts/repo/components/repo_file_buttons_spec.js deleted file mode 100644 index 115569a9117..00000000000 --- a/spec/javascripts/repo/components/repo_file_buttons_spec.js +++ /dev/null @@ -1,49 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import repoFileButtons from '~/ide/components/repo_file_buttons.vue'; -import { file, resetStore } from '../helpers'; - -describe('RepoFileButtons', () => { - const activeFile = file(); - let vm; - - function createComponent() { - const RepoFileButtons = Vue.extend(repoFileButtons); - - activeFile.rawPath = 'test'; - activeFile.blamePath = 'test'; - activeFile.commitsPath = 'test'; - activeFile.active = true; - store.state.openFiles.push(activeFile); - - return new RepoFileButtons({ - store, - }).$mount(); - } - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - it('renders Raw, Blame, History, Permalink and Preview toggle', (done) => { - vm = createComponent(); - - vm.$nextTick(() => { - const raw = vm.$el.querySelector('.raw'); - const blame = vm.$el.querySelector('.blame'); - const history = vm.$el.querySelector('.history'); - - expect(raw.href).toMatch(`/${activeFile.rawPath}`); - expect(raw.textContent.trim()).toEqual('Raw'); - expect(blame.href).toMatch(`/${activeFile.blamePath}`); - expect(blame.textContent.trim()).toEqual('Blame'); - expect(history.href).toMatch(`/${activeFile.commitsPath}`); - expect(history.textContent.trim()).toEqual('History'); - expect(vm.$el.querySelector('.permalink').textContent.trim()).toEqual('Permalink'); - - done(); - }); - }); -}); diff --git a/spec/javascripts/repo/components/repo_file_spec.js b/spec/javascripts/repo/components/repo_file_spec.js deleted file mode 100644 index 27b55ed1f87..00000000000 --- a/spec/javascripts/repo/components/repo_file_spec.js +++ /dev/null @@ -1,98 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import repoFile from '~/ide/components/repo_file.vue'; -import { file, resetStore } from '../helpers'; - -describe('RepoFile', () => { - const updated = 'updated'; - let vm; - - function createComponent(propsData) { - const RepoFile = Vue.extend(repoFile); - - return new RepoFile({ - store, - propsData, - }).$mount(); - } - - afterEach(() => { - resetStore(vm.$store); - }); - - it('renders link, icon and name', () => { - const RepoFile = Vue.extend(repoFile); - vm = new RepoFile({ - store, - propsData: { - file: file('t4'), - }, - }); - spyOn(vm, 'timeFormated').and.returnValue(updated); - vm.$mount(); - - const name = vm.$el.querySelector('.repo-file-name'); - - expect(name.href).toMatch(''); - expect(name.textContent.trim()).toEqual(vm.file.name); - }); - - it('does render if hasFiles is true and is loading tree', () => { - vm = createComponent({ - file: file('t1'), - }); - - expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy(); - }); - - it('does not render commit message and datetime if mini', (done) => { - vm = createComponent({ - file: file('t2'), - }); - vm.$store.state.openFiles.push(vm.file); - - vm.$nextTick(() => { - expect(vm.$el.querySelector('.commit-message')).toBeFalsy(); - expect(vm.$el.querySelector('.commit-update')).toBeFalsy(); - - done(); - }); - }); - - it('fires clickFile when the link is clicked', () => { - vm = createComponent({ - file: file('t3'), - }); - - spyOn(vm, 'clickFile'); - - vm.$el.click(); - - expect(vm.clickFile).toHaveBeenCalledWith(vm.file); - }); - - describe('submodule', () => { - let f; - - beforeEach(() => { - f = file('submodule name', '123456789'); - f.type = 'submodule'; - - vm = createComponent({ - file: f, - }); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('renders submodule short ID', () => { - expect(vm.$el.querySelector('.commit-sha').textContent.trim()).toBe('12345678'); - }); - - it('renders ID next to submodule name', () => { - expect(vm.$el.querySelector('td').textContent.replace(/\s+/g, ' ')).toContain('submodule name @ 12345678'); - }); - }); -}); diff --git a/spec/javascripts/repo/components/repo_loading_file_spec.js b/spec/javascripts/repo/components/repo_loading_file_spec.js deleted file mode 100644 index 18366fb89bc..00000000000 --- a/spec/javascripts/repo/components/repo_loading_file_spec.js +++ /dev/null @@ -1,63 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import repoLoadingFile from '~/ide/components/repo_loading_file.vue'; -import { resetStore } from '../helpers'; - -describe('RepoLoadingFile', () => { - let vm; - - function createComponent() { - const RepoLoadingFile = Vue.extend(repoLoadingFile); - - return new RepoLoadingFile({ - store, - }).$mount(); - } - - function assertLines(lines) { - lines.forEach((line, n) => { - const index = n + 1; - expect(line.classList.contains(`skeleton-line-${index}`)).toBeTruthy(); - }); - } - - function assertColumns(columns) { - columns.forEach((column) => { - const container = column.querySelector('.animation-container'); - const lines = [...container.querySelectorAll(':scope > div')]; - - expect(container).toBeTruthy(); - expect(lines.length).toEqual(6); - assertLines(lines); - }); - } - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - it('renders 3 columns of animated LoC', () => { - vm = createComponent(); - const columns = [...vm.$el.querySelectorAll('td')]; - - expect(columns.length).toEqual(3); - assertColumns(columns); - }); - - it('renders 1 column of animated LoC if isMini', (done) => { - vm = createComponent(); - vm.$store.state.leftPanelCollapsed = true; - vm.$store.state.openFiles.push('test'); - - vm.$nextTick(() => { - const columns = [...vm.$el.querySelectorAll('td')]; - - expect(columns.length).toEqual(1); - assertColumns(columns); - - done(); - }); - }); -}); diff --git a/spec/javascripts/repo/components/repo_prev_directory_spec.js b/spec/javascripts/repo/components/repo_prev_directory_spec.js deleted file mode 100644 index ff26cab2262..00000000000 --- a/spec/javascripts/repo/components/repo_prev_directory_spec.js +++ /dev/null @@ -1,45 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import repoPrevDirectory from '~/ide/components/repo_prev_directory.vue'; -import { resetStore } from '../helpers'; - -describe('RepoPrevDirectory', () => { - let vm; - const parentLink = 'parent'; - function createComponent() { - const RepoPrevDirectory = Vue.extend(repoPrevDirectory); - - const comp = new RepoPrevDirectory({ - store, - }); - - comp.$store.state.parentTreeUrl = parentLink; - - return comp.$mount(); - } - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - it('renders a prev dir link', () => { - const link = vm.$el.querySelector('a'); - - expect(link.href).toMatch(`/${parentLink}`); - expect(link.textContent).toEqual('...'); - }); - - it('clicking row triggers getTreeData', () => { - spyOn(vm, 'getTreeData'); - - vm.$el.querySelector('td').click(); - - expect(vm.getTreeData).toHaveBeenCalledWith({ endpoint: parentLink }); - }); -}); diff --git a/spec/javascripts/repo/components/repo_preview_spec.js b/spec/javascripts/repo/components/repo_preview_spec.js deleted file mode 100644 index e90837e4cb2..00000000000 --- a/spec/javascripts/repo/components/repo_preview_spec.js +++ /dev/null @@ -1,37 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import repoPreview from '~/ide/components/repo_preview.vue'; -import { file, resetStore } from '../helpers'; - -describe('RepoPreview', () => { - let vm; - - function createComponent() { - const f = file(); - const RepoPreview = Vue.extend(repoPreview); - - const comp = new RepoPreview({ - store, - }); - - f.active = true; - f.html = 'test'; - - comp.$store.state.openFiles.push(f); - - return comp.$mount(); - } - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - it('renders a div with the activeFile html', () => { - vm = createComponent(); - - expect(vm.$el.tagName).toEqual('DIV'); - expect(vm.$el.innerHTML).toContain('test'); - }); -}); diff --git a/spec/javascripts/repo/components/repo_tab_spec.js b/spec/javascripts/repo/components/repo_tab_spec.js deleted file mode 100644 index 933e8d3a06a..00000000000 --- a/spec/javascripts/repo/components/repo_tab_spec.js +++ /dev/null @@ -1,108 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import repoTab from '~/ide/components/repo_tab.vue'; -import { file, resetStore } from '../helpers'; - -describe('RepoTab', () => { - let vm; - - function createComponent(propsData) { - const RepoTab = Vue.extend(repoTab); - - return new RepoTab({ - store, - propsData, - }).$mount(); - } - - afterEach(() => { - resetStore(vm.$store); - }); - - it('renders a close link and a name link', () => { - vm = createComponent({ - tab: file(), - }); - vm.$store.state.openFiles.push(vm.tab); - const close = vm.$el.querySelector('.multi-file-tab-close'); - const name = vm.$el.querySelector(`[title="${vm.tab.url}"]`); - - expect(close.querySelector('.fa-times')).toBeTruthy(); - expect(name.textContent.trim()).toEqual(vm.tab.name); - }); - - it('fires clickFile when the link is clicked', () => { - vm = createComponent({ - tab: file(), - }); - - spyOn(vm, 'clickFile'); - - vm.$el.click(); - - expect(vm.clickFile).toHaveBeenCalledWith(vm.tab); - }); - - it('calls closeFile when clicking close button', () => { - vm = createComponent({ - tab: file(), - }); - - spyOn(vm, 'closeFile'); - - vm.$el.querySelector('.multi-file-tab-close').click(); - - expect(vm.closeFile).toHaveBeenCalledWith({ file: vm.tab }); - }); - - it('renders an fa-circle icon if tab is changed', () => { - const tab = file('changedFile'); - tab.changed = true; - vm = createComponent({ - tab, - }); - - expect(vm.$el.querySelector('.multi-file-tab-close .fa-circle')).not.toBeNull(); - }); - - describe('methods', () => { - describe('closeTab', () => { - it('does not close tab if is changed', (done) => { - const tab = file('closeFile'); - tab.changed = true; - tab.opened = true; - vm = createComponent({ - tab, - }); - vm.$store.state.openFiles.push(tab); - vm.$store.dispatch('setFileActive', tab); - - vm.$el.querySelector('.multi-file-tab-close').click(); - - vm.$nextTick(() => { - expect(tab.opened).toBeTruthy(); - - done(); - }); - }); - - it('closes tab when clicking close btn', (done) => { - const tab = file('lose'); - tab.opened = true; - vm = createComponent({ - tab, - }); - vm.$store.state.openFiles.push(tab); - vm.$store.dispatch('setFileActive', tab); - - vm.$el.querySelector('.multi-file-tab-close').click(); - - vm.$nextTick(() => { - expect(tab.opened).toBeFalsy(); - - done(); - }); - }); - }); - }); -}); diff --git a/spec/javascripts/repo/components/repo_tabs_spec.js b/spec/javascripts/repo/components/repo_tabs_spec.js deleted file mode 100644 index 2c363364d70..00000000000 --- a/spec/javascripts/repo/components/repo_tabs_spec.js +++ /dev/null @@ -1,37 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import repoTabs from '~/ide/components/repo_tabs.vue'; -import { file, resetStore } from '../helpers'; - -describe('RepoTabs', () => { - const openedFiles = [file('open1'), file('open2')]; - let vm; - - function createComponent() { - const RepoTabs = Vue.extend(repoTabs); - - return new RepoTabs({ - store, - }).$mount(); - } - - afterEach(() => { - resetStore(vm.$store); - }); - - it('renders a list of tabs', (done) => { - vm = createComponent(); - openedFiles[0].active = true; - vm.$store.state.openFiles = openedFiles; - - vm.$nextTick(() => { - const tabs = [...vm.$el.querySelectorAll('.multi-file-tab')]; - - expect(tabs.length).toEqual(2); - expect(tabs[0].classList.contains('active')).toBeTruthy(); - expect(tabs[1].classList.contains('active')).toBeFalsy(); - - done(); - }); - }); -}); diff --git a/spec/javascripts/repo/helpers.js b/spec/javascripts/repo/helpers.js deleted file mode 100644 index ac43d221198..00000000000 --- a/spec/javascripts/repo/helpers.js +++ /dev/null @@ -1,16 +0,0 @@ -import { decorateData } from '~/ide/stores/utils'; -import state from '~/ide/stores/state'; - -export const resetStore = (store) => { - store.replaceState(state()); -}; - -export const file = (name = 'name', id = name, type = '') => decorateData({ - id, - type, - icon: 'icon', - url: 'url', - name, - path: name, - lastCommit: {}, -}); diff --git a/spec/javascripts/repo/lib/common/disposable_spec.js b/spec/javascripts/repo/lib/common/disposable_spec.js deleted file mode 100644 index af12ca15369..00000000000 --- a/spec/javascripts/repo/lib/common/disposable_spec.js +++ /dev/null @@ -1,44 +0,0 @@ -import Disposable from '~/ide/lib/common/disposable'; - -describe('Multi-file editor library disposable class', () => { - let instance; - let disposableClass; - - beforeEach(() => { - instance = new Disposable(); - - disposableClass = { - dispose: jasmine.createSpy('dispose'), - }; - }); - - afterEach(() => { - instance.dispose(); - }); - - describe('add', () => { - it('adds disposable classes', () => { - instance.add(disposableClass); - - expect(instance.disposers.size).toBe(1); - }); - }); - - describe('dispose', () => { - beforeEach(() => { - instance.add(disposableClass); - }); - - it('calls dispose on all cached disposers', () => { - instance.dispose(); - - expect(disposableClass.dispose).toHaveBeenCalled(); - }); - - it('clears cached disposers', () => { - instance.dispose(); - - expect(instance.disposers.size).toBe(0); - }); - }); -}); diff --git a/spec/javascripts/repo/lib/common/model_manager_spec.js b/spec/javascripts/repo/lib/common/model_manager_spec.js deleted file mode 100644 index 563c2e33834..00000000000 --- a/spec/javascripts/repo/lib/common/model_manager_spec.js +++ /dev/null @@ -1,81 +0,0 @@ -/* global monaco */ -import monacoLoader from '~/ide/monaco_loader'; -import ModelManager from '~/ide/lib/common/model_manager'; -import { file } from '../../helpers'; - -describe('Multi-file editor library model manager', () => { - let instance; - - beforeEach((done) => { - monacoLoader(['vs/editor/editor.main'], () => { - instance = new ModelManager(monaco); - - done(); - }); - }); - - afterEach(() => { - instance.dispose(); - }); - - describe('addModel', () => { - it('caches model', () => { - instance.addModel(file()); - - expect(instance.models.size).toBe(1); - }); - - it('caches model by file path', () => { - instance.addModel(file('path-name')); - - expect(instance.models.keys().next().value).toBe('path-name'); - }); - - it('adds model into disposable', () => { - spyOn(instance.disposable, 'add').and.callThrough(); - - instance.addModel(file()); - - expect(instance.disposable.add).toHaveBeenCalled(); - }); - - it('returns cached model', () => { - spyOn(instance.models, 'get').and.callThrough(); - - instance.addModel(file()); - instance.addModel(file()); - - expect(instance.models.get).toHaveBeenCalled(); - }); - }); - - describe('hasCachedModel', () => { - it('returns false when no models exist', () => { - expect(instance.hasCachedModel('path')).toBeFalsy(); - }); - - it('returns true when model exists', () => { - instance.addModel(file('path-name')); - - expect(instance.hasCachedModel('path-name')).toBeTruthy(); - }); - }); - - describe('dispose', () => { - it('clears cached models', () => { - instance.addModel(file()); - - instance.dispose(); - - expect(instance.models.size).toBe(0); - }); - - it('calls disposable dispose', () => { - spyOn(instance.disposable, 'dispose').and.callThrough(); - - instance.dispose(); - - expect(instance.disposable.dispose).toHaveBeenCalled(); - }); - }); -}); diff --git a/spec/javascripts/repo/lib/common/model_spec.js b/spec/javascripts/repo/lib/common/model_spec.js deleted file mode 100644 index 878a4a3f3fe..00000000000 --- a/spec/javascripts/repo/lib/common/model_spec.js +++ /dev/null @@ -1,84 +0,0 @@ -/* global monaco */ -import monacoLoader from '~/ide/monaco_loader'; -import Model from '~/ide/lib/common/model'; -import { file } from '../../helpers'; - -describe('Multi-file editor library model', () => { - let model; - - beforeEach((done) => { - monacoLoader(['vs/editor/editor.main'], () => { - model = new Model(monaco, file('path')); - - done(); - }); - }); - - afterEach(() => { - model.dispose(); - }); - - it('creates original model & new model', () => { - expect(model.originalModel).not.toBeNull(); - expect(model.model).not.toBeNull(); - }); - - describe('path', () => { - it('returns file path', () => { - expect(model.path).toBe('path'); - }); - }); - - describe('getModel', () => { - it('returns model', () => { - expect(model.getModel()).toBe(model.model); - }); - }); - - describe('getOriginalModel', () => { - it('returns original model', () => { - expect(model.getOriginalModel()).toBe(model.originalModel); - }); - }); - - describe('onChange', () => { - it('caches event by path', () => { - model.onChange(() => {}); - - expect(model.events.size).toBe(1); - expect(model.events.keys().next().value).toBe('path'); - }); - - it('calls callback on change', (done) => { - const spy = jasmine.createSpy(); - model.onChange(spy); - - model.getModel().setValue('123'); - - setTimeout(() => { - expect(spy).toHaveBeenCalledWith(model.getModel(), jasmine.anything()); - done(); - }); - }); - }); - - describe('dispose', () => { - it('calls disposable dispose', () => { - spyOn(model.disposable, 'dispose').and.callThrough(); - - model.dispose(); - - expect(model.disposable.dispose).toHaveBeenCalled(); - }); - - it('clears events', () => { - model.onChange(() => {}); - - expect(model.events.size).toBe(1); - - model.dispose(); - - expect(model.events.size).toBe(0); - }); - }); -}); diff --git a/spec/javascripts/repo/lib/decorations/controller_spec.js b/spec/javascripts/repo/lib/decorations/controller_spec.js deleted file mode 100644 index fea12d74dca..00000000000 --- a/spec/javascripts/repo/lib/decorations/controller_spec.js +++ /dev/null @@ -1,120 +0,0 @@ -/* global monaco */ -import monacoLoader from '~/ide/monaco_loader'; -import editor from '~/ide/lib/editor'; -import DecorationsController from '~/ide/lib/decorations/controller'; -import Model from '~/ide/lib/common/model'; -import { file } from '../../helpers'; - -describe('Multi-file editor library decorations controller', () => { - let editorInstance; - let controller; - let model; - - beforeEach((done) => { - monacoLoader(['vs/editor/editor.main'], () => { - editorInstance = editor.create(monaco); - editorInstance.createInstance(document.createElement('div')); - - controller = new DecorationsController(editorInstance); - model = new Model(monaco, file('path')); - - done(); - }); - }); - - afterEach(() => { - model.dispose(); - editorInstance.dispose(); - controller.dispose(); - }); - - describe('getAllDecorationsForModel', () => { - it('returns empty array when no decorations exist for model', () => { - const decorations = controller.getAllDecorationsForModel(model); - - expect(decorations).toEqual([]); - }); - - it('returns decorations by model URL', () => { - controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]); - - const decorations = controller.getAllDecorationsForModel(model); - - expect(decorations[0]).toEqual({ decoration: 'decorationValue' }); - }); - }); - - describe('addDecorations', () => { - it('caches decorations in a new map', () => { - controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]); - - expect(controller.decorations.size).toBe(1); - }); - - it('does not create new cache model', () => { - controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]); - controller.addDecorations(model, 'key', [{ decoration: 'decorationValue2' }]); - - expect(controller.decorations.size).toBe(1); - }); - - it('caches decorations by model URL', () => { - controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]); - - expect(controller.decorations.size).toBe(1); - expect(controller.decorations.keys().next().value).toBe('path'); - }); - - it('calls decorate method', () => { - spyOn(controller, 'decorate'); - - controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]); - - expect(controller.decorate).toHaveBeenCalled(); - }); - }); - - describe('decorate', () => { - it('sets decorations on editor instance', () => { - spyOn(controller.editor.instance, 'deltaDecorations'); - - controller.decorate(model); - - expect(controller.editor.instance.deltaDecorations).toHaveBeenCalledWith([], []); - }); - - it('caches decorations', () => { - spyOn(controller.editor.instance, 'deltaDecorations').and.returnValue([]); - - controller.decorate(model); - - expect(controller.editorDecorations.size).toBe(1); - }); - - it('caches decorations by model URL', () => { - spyOn(controller.editor.instance, 'deltaDecorations').and.returnValue([]); - - controller.decorate(model); - - expect(controller.editorDecorations.keys().next().value).toBe('path'); - }); - }); - - describe('dispose', () => { - it('clears cached decorations', () => { - controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]); - - controller.dispose(); - - expect(controller.decorations.size).toBe(0); - }); - - it('clears cached editorDecorations', () => { - controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]); - - controller.dispose(); - - expect(controller.editorDecorations.size).toBe(0); - }); - }); -}); diff --git a/spec/javascripts/repo/lib/diff/controller_spec.js b/spec/javascripts/repo/lib/diff/controller_spec.js deleted file mode 100644 index 1d55c165260..00000000000 --- a/spec/javascripts/repo/lib/diff/controller_spec.js +++ /dev/null @@ -1,176 +0,0 @@ -/* global monaco */ -import monacoLoader from '~/ide/monaco_loader'; -import editor from '~/ide/lib/editor'; -import ModelManager from '~/ide/lib/common/model_manager'; -import DecorationsController from '~/ide/lib/decorations/controller'; -import DirtyDiffController, { getDiffChangeType, getDecorator } from '~/ide/lib/diff/controller'; -import { computeDiff } from '~/ide/lib/diff/diff'; -import { file } from '../../helpers'; - -describe('Multi-file editor library dirty diff controller', () => { - let editorInstance; - let controller; - let modelManager; - let decorationsController; - let model; - - beforeEach((done) => { - monacoLoader(['vs/editor/editor.main'], () => { - editorInstance = editor.create(monaco); - editorInstance.createInstance(document.createElement('div')); - - modelManager = new ModelManager(monaco); - decorationsController = new DecorationsController(editorInstance); - - model = modelManager.addModel(file()); - - controller = new DirtyDiffController(modelManager, decorationsController); - - done(); - }); - }); - - afterEach(() => { - controller.dispose(); - model.dispose(); - decorationsController.dispose(); - editorInstance.dispose(); - }); - - describe('getDiffChangeType', () => { - ['added', 'removed', 'modified'].forEach((type) => { - it(`returns ${type}`, () => { - const change = { - [type]: true, - }; - - expect(getDiffChangeType(change)).toBe(type); - }); - }); - }); - - describe('getDecorator', () => { - ['added', 'removed', 'modified'].forEach((type) => { - it(`returns with linesDecorationsClassName for ${type}`, () => { - const change = { - [type]: true, - }; - - expect( - getDecorator(change).options.linesDecorationsClassName, - ).toBe(`dirty-diff dirty-diff-${type}`); - }); - - it('returns with line numbers', () => { - const change = { - lineNumber: 1, - endLineNumber: 2, - [type]: true, - }; - - const range = getDecorator(change).range; - - expect(range.startLineNumber).toBe(1); - expect(range.endLineNumber).toBe(2); - expect(range.startColumn).toBe(1); - expect(range.endColumn).toBe(1); - }); - }); - }); - - describe('attachModel', () => { - it('adds change event callback', () => { - spyOn(model, 'onChange'); - - controller.attachModel(model); - - expect(model.onChange).toHaveBeenCalled(); - }); - - it('calls throttledComputeDiff on change', () => { - spyOn(controller, 'throttledComputeDiff'); - - controller.attachModel(model); - - model.getModel().setValue('123'); - - expect(controller.throttledComputeDiff).toHaveBeenCalled(); - }); - }); - - describe('computeDiff', () => { - it('posts to worker', () => { - spyOn(controller.dirtyDiffWorker, 'postMessage'); - - controller.computeDiff(model); - - expect(controller.dirtyDiffWorker.postMessage).toHaveBeenCalledWith({ - path: model.path, - originalContent: '', - newContent: '', - }); - }); - }); - - describe('reDecorate', () => { - it('calls decorations controller decorate', () => { - spyOn(controller.decorationsController, 'decorate'); - - controller.reDecorate(model); - - expect(controller.decorationsController.decorate).toHaveBeenCalledWith(model); - }); - }); - - describe('decorate', () => { - it('adds decorations into decorations controller', () => { - spyOn(controller.decorationsController, 'addDecorations'); - - controller.decorate({ data: { changes: [], path: 'path' } }); - - expect(controller.decorationsController.addDecorations).toHaveBeenCalledWith('path', 'dirtyDiff', jasmine.anything()); - }); - - it('adds decorations into editor', () => { - const spy = spyOn(controller.decorationsController.editor.instance, 'deltaDecorations'); - - controller.decorate({ data: { changes: computeDiff('123', '1234'), path: 'path' } }); - - expect(spy).toHaveBeenCalledWith([], [{ - range: new monaco.Range( - 1, 1, 1, 1, - ), - options: { - isWholeLine: true, - linesDecorationsClassName: 'dirty-diff dirty-diff-modified', - }, - }]); - }); - }); - - describe('dispose', () => { - it('calls disposable dispose', () => { - spyOn(controller.disposable, 'dispose').and.callThrough(); - - controller.dispose(); - - expect(controller.disposable.dispose).toHaveBeenCalled(); - }); - - it('terminates worker', () => { - spyOn(controller.dirtyDiffWorker, 'terminate').and.callThrough(); - - controller.dispose(); - - expect(controller.dirtyDiffWorker.terminate).toHaveBeenCalled(); - }); - - it('removes worker event listener', () => { - spyOn(controller.dirtyDiffWorker, 'removeEventListener').and.callThrough(); - - controller.dispose(); - - expect(controller.dirtyDiffWorker.removeEventListener).toHaveBeenCalledWith('message', jasmine.anything()); - }); - }); -}); diff --git a/spec/javascripts/repo/lib/diff/diff_spec.js b/spec/javascripts/repo/lib/diff/diff_spec.js deleted file mode 100644 index 57f3ac3d365..00000000000 --- a/spec/javascripts/repo/lib/diff/diff_spec.js +++ /dev/null @@ -1,80 +0,0 @@ -import { computeDiff } from '~/ide/lib/diff/diff'; - -describe('Multi-file editor library diff calculator', () => { - describe('computeDiff', () => { - it('returns empty array if no changes', () => { - const diff = computeDiff('123', '123'); - - expect(diff).toEqual([]); - }); - - describe('modified', () => { - it('', () => { - const diff = computeDiff('123', '1234')[0]; - - expect(diff.added).toBeTruthy(); - expect(diff.modified).toBeTruthy(); - expect(diff.removed).toBeUndefined(); - }); - - it('', () => { - const diff = computeDiff('123\n123\n123', '123\n1234\n123')[0]; - - expect(diff.added).toBeTruthy(); - expect(diff.modified).toBeTruthy(); - expect(diff.removed).toBeUndefined(); - expect(diff.lineNumber).toBe(2); - }); - }); - - describe('added', () => { - it('', () => { - const diff = computeDiff('123', '123\n123')[0]; - - expect(diff.added).toBeTruthy(); - expect(diff.modified).toBeUndefined(); - expect(diff.removed).toBeUndefined(); - }); - - it('', () => { - const diff = computeDiff('123\n123\n123', '123\n123\n1234\n123')[0]; - - expect(diff.added).toBeTruthy(); - expect(diff.modified).toBeUndefined(); - expect(diff.removed).toBeUndefined(); - expect(diff.lineNumber).toBe(3); - }); - }); - - describe('removed', () => { - it('', () => { - const diff = computeDiff('123', '')[0]; - - expect(diff.added).toBeUndefined(); - expect(diff.modified).toBeUndefined(); - expect(diff.removed).toBeTruthy(); - }); - - it('', () => { - const diff = computeDiff('123\n123\n123', '123\n123')[0]; - - expect(diff.added).toBeUndefined(); - expect(diff.modified).toBeTruthy(); - expect(diff.removed).toBeTruthy(); - expect(diff.lineNumber).toBe(2); - }); - }); - - it('includes line number of change', () => { - const diff = computeDiff('123', '')[0]; - - expect(diff.lineNumber).toBe(1); - }); - - it('includes end line number of change', () => { - const diff = computeDiff('123', '')[0]; - - expect(diff.endLineNumber).toBe(1); - }); - }); -}); diff --git a/spec/javascripts/repo/lib/editor_options_spec.js b/spec/javascripts/repo/lib/editor_options_spec.js deleted file mode 100644 index edbf5450dce..00000000000 --- a/spec/javascripts/repo/lib/editor_options_spec.js +++ /dev/null @@ -1,7 +0,0 @@ -import editorOptions from '~/ide/lib/editor_options'; - -describe('Multi-file editor library editor options', () => { - it('returns an array', () => { - expect(editorOptions).toEqual(jasmine.any(Array)); - }); -}); diff --git a/spec/javascripts/repo/lib/editor_spec.js b/spec/javascripts/repo/lib/editor_spec.js deleted file mode 100644 index 8d51d48a782..00000000000 --- a/spec/javascripts/repo/lib/editor_spec.js +++ /dev/null @@ -1,128 +0,0 @@ -/* global monaco */ -import monacoLoader from '~/ide/monaco_loader'; -import editor from '~/ide/lib/editor'; -import { file } from '../helpers'; - -describe('Multi-file editor library', () => { - let instance; - - beforeEach((done) => { - monacoLoader(['vs/editor/editor.main'], () => { - instance = editor.create(monaco); - - done(); - }); - }); - - afterEach(() => { - instance.dispose(); - }); - - it('creates instance of editor', () => { - expect(editor.editorInstance).not.toBeNull(); - }); - - describe('createInstance', () => { - let el; - - beforeEach(() => { - el = document.createElement('div'); - }); - - it('creates editor instance', () => { - spyOn(instance.monaco.editor, 'create').and.callThrough(); - - instance.createInstance(el); - - expect(instance.monaco.editor.create).toHaveBeenCalled(); - }); - - it('creates dirty diff controller', () => { - instance.createInstance(el); - - expect(instance.dirtyDiffController).not.toBeNull(); - }); - }); - - describe('createModel', () => { - it('calls model manager addModel', () => { - spyOn(instance.modelManager, 'addModel'); - - instance.createModel('FILE'); - - expect(instance.modelManager.addModel).toHaveBeenCalledWith('FILE'); - }); - }); - - describe('attachModel', () => { - let model; - - beforeEach(() => { - instance.createInstance(document.createElement('div')); - - model = instance.createModel(file()); - }); - - it('sets the current model on the instance', () => { - instance.attachModel(model); - - expect(instance.currentModel).toBe(model); - }); - - it('attaches the model to the current instance', () => { - spyOn(instance.instance, 'setModel'); - - instance.attachModel(model); - - expect(instance.instance.setModel).toHaveBeenCalledWith(model.getModel()); - }); - - it('attaches the model to the dirty diff controller', () => { - spyOn(instance.dirtyDiffController, 'attachModel'); - - instance.attachModel(model); - - expect(instance.dirtyDiffController.attachModel).toHaveBeenCalledWith(model); - }); - - it('re-decorates with the dirty diff controller', () => { - spyOn(instance.dirtyDiffController, 'reDecorate'); - - instance.attachModel(model); - - expect(instance.dirtyDiffController.reDecorate).toHaveBeenCalledWith(model); - }); - }); - - describe('clearEditor', () => { - it('resets the editor model', () => { - instance.createInstance(document.createElement('div')); - - spyOn(instance.instance, 'setModel'); - - instance.clearEditor(); - - expect(instance.instance.setModel).toHaveBeenCalledWith(null); - }); - }); - - describe('dispose', () => { - it('calls disposble dispose method', () => { - spyOn(instance.disposable, 'dispose').and.callThrough(); - - instance.dispose(); - - expect(instance.disposable.dispose).toHaveBeenCalled(); - }); - - it('resets instance', () => { - instance.createInstance(document.createElement('div')); - - expect(instance.instance).not.toBeNull(); - - instance.dispose(); - - expect(instance.instance).toBeNull(); - }); - }); -}); diff --git a/spec/javascripts/repo/monaco_loader_spec.js b/spec/javascripts/repo/monaco_loader_spec.js deleted file mode 100644 index b8ac36972aa..00000000000 --- a/spec/javascripts/repo/monaco_loader_spec.js +++ /dev/null @@ -1,13 +0,0 @@ -import monacoContext from 'monaco-editor/dev/vs/loader'; -import monacoLoader from '~/ide/monaco_loader'; - -describe('MonacoLoader', () => { - it('calls require.config and exports require', () => { - expect(monacoContext.require.getConfig()).toEqual(jasmine.objectContaining({ - paths: { - vs: `${__webpack_public_path__}monaco-editor/vs`, // eslint-disable-line camelcase - }, - })); - expect(monacoLoader).toBe(monacoContext.require); - }); -}); diff --git a/spec/javascripts/repo/stores/actions/branch_spec.js b/spec/javascripts/repo/stores/actions/branch_spec.js deleted file mode 100644 index 00d16fd790d..00000000000 --- a/spec/javascripts/repo/stores/actions/branch_spec.js +++ /dev/null @@ -1,44 +0,0 @@ -import store from '~/ide/stores'; -import service from '~/ide/services'; -import { resetStore } from '../../helpers'; - -describe('Multi-file store branch actions', () => { - afterEach(() => { - resetStore(store); - }); - - describe('createNewBranch', () => { - beforeEach(() => { - spyOn(service, 'createBranch').and.returnValue(Promise.resolve({ - json: () => ({ - name: 'testing', - }), - })); - spyOn(history, 'pushState'); - - store.state.currentProjectId = 'abcproject'; - store.state.currentBranchId = 'testing'; - store.state.projects.abcproject = { - branches: { - master: { - workingReference: '1', - }, - }, - }; - }); - - it('creates new branch', (done) => { - store.dispatch('createNewBranch', 'master') - .then(() => { - expect(store.state.currentBranchId).toBe('testing'); - expect(service.createBranch).toHaveBeenCalledWith('abcproject', { - branch: 'master', - ref: 'testing', - }); - - done(); - }) - .catch(done.fail); - }); - }); -}); diff --git a/spec/javascripts/repo/stores/actions/file_spec.js b/spec/javascripts/repo/stores/actions/file_spec.js deleted file mode 100644 index e2d8f002e27..00000000000 --- a/spec/javascripts/repo/stores/actions/file_spec.js +++ /dev/null @@ -1,431 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import service from '~/ide/services'; -import { file, resetStore } from '../../helpers'; - -describe('Multi-file store file actions', () => { - afterEach(() => { - resetStore(store); - }); - - describe('closeFile', () => { - let localFile; - let getLastCommitDataSpy; - let oldGetLastCommitData; - - beforeEach(() => { - getLastCommitDataSpy = jasmine.createSpy('getLastCommitData'); - oldGetLastCommitData = store._actions.getLastCommitData; // eslint-disable-line - store._actions.getLastCommitData = [getLastCommitDataSpy]; // eslint-disable-line - - localFile = file('testFile'); - localFile.active = true; - localFile.opened = true; - localFile.parentTreeUrl = 'parentTreeUrl'; - - store.state.openFiles.push(localFile); - }); - - afterEach(() => { - store._actions.getLastCommitData = oldGetLastCommitData; // eslint-disable-line - }); - - it('closes open files', (done) => { - store.dispatch('closeFile', { file: localFile }) - .then(() => { - expect(localFile.opened).toBeFalsy(); - expect(localFile.active).toBeFalsy(); - expect(store.state.openFiles.length).toBe(0); - - done(); - }).catch(done.fail); - }); - - it('does not close file if has changed', (done) => { - localFile.changed = true; - - store.dispatch('closeFile', { file: localFile }) - .then(() => { - expect(localFile.opened).toBeTruthy(); - expect(localFile.active).toBeTruthy(); - expect(store.state.openFiles.length).toBe(1); - - done(); - }).catch(done.fail); - }); - - it('does not close file if temp file', (done) => { - localFile.tempFile = true; - - store.dispatch('closeFile', { file: localFile }) - .then(() => { - expect(localFile.opened).toBeTruthy(); - expect(localFile.active).toBeTruthy(); - expect(store.state.openFiles.length).toBe(1); - - done(); - }).catch(done.fail); - }); - - it('force closes a changed file', (done) => { - localFile.changed = true; - - store.dispatch('closeFile', { file: localFile, force: true }) - .then(() => { - expect(localFile.opened).toBeFalsy(); - expect(localFile.active).toBeFalsy(); - expect(store.state.openFiles.length).toBe(0); - - done(); - }).catch(done.fail); - }); - - it('sets next file as active', (done) => { - const f = file('otherfile'); - store.state.openFiles.push(f); - - expect(f.active).toBeFalsy(); - - store.dispatch('closeFile', { file: localFile }) - .then(() => { - expect(f.active).toBeTruthy(); - - done(); - }).catch(done.fail); - }); - - it('calls getLastCommitData', (done) => { - store.dispatch('closeFile', { file: localFile }) - .then(() => { - expect(getLastCommitDataSpy).toHaveBeenCalled(); - - done(); - }).catch(done.fail); - }); - }); - - describe('setFileActive', () => { - let scrollToTabSpy; - let oldScrollToTab; - - beforeEach(() => { - scrollToTabSpy = jasmine.createSpy('scrollToTab'); - oldScrollToTab = store._actions.scrollToTab; // eslint-disable-line - store._actions.scrollToTab = [scrollToTabSpy]; // eslint-disable-line - }); - - afterEach(() => { - store._actions.scrollToTab = oldScrollToTab; // eslint-disable-line - }); - - it('calls scrollToTab', (done) => { - store.dispatch('setFileActive', file('setThisActive')) - .then(() => { - expect(scrollToTabSpy).toHaveBeenCalled(); - - done(); - }).catch(done.fail); - }); - - it('sets the file active', (done) => { - const localFile = file('activeFile'); - - store.dispatch('setFileActive', localFile) - .then(() => { - expect(localFile.active).toBeTruthy(); - - done(); - }).catch(done.fail); - }); - - it('returns early if file is already active', (done) => { - const localFile = file('earlyActive'); - localFile.active = true; - - store.dispatch('setFileActive', localFile) - .then(() => { - expect(scrollToTabSpy).not.toHaveBeenCalled(); - - done(); - }).catch(done.fail); - }); - - it('sets current active file to not active', (done) => { - const localFile = file('currentActive'); - localFile.active = true; - store.state.openFiles.push(localFile); - - store.dispatch('setFileActive', file('newActive')) - .then(() => { - expect(localFile.active).toBeFalsy(); - - done(); - }).catch(done.fail); - }); - - it('resets location.hash for line highlighting', (done) => { - location.hash = 'test'; - - store.dispatch('setFileActive', file('otherActive')) - .then(() => { - expect(location.hash).not.toBe('test'); - - done(); - }).catch(done.fail); - }); - }); - - describe('getFileData', () => { - let localFile; - - beforeEach(() => { - spyOn(service, 'getFileData').and.returnValue(Promise.resolve({ - headers: { - 'page-title': 'testing getFileData', - }, - json: () => Promise.resolve({ - blame_path: 'blame_path', - commits_path: 'commits_path', - permalink: 'permalink', - raw_path: 'raw_path', - binary: false, - html: '123', - render_error: '', - }), - })); - - localFile = file('newCreate'); - localFile.url = 'getFileDataURL'; - }); - - afterEach(() => { - store.dispatch('closeFile', { - file: localFile, - force: true, - }); - }); - - it('calls the service', (done) => { - store.dispatch('getFileData', localFile) - .then(() => { - expect(service.getFileData).toHaveBeenCalledWith('getFileDataURL'); - - done(); - }).catch(done.fail); - }); - - it('sets the file data', (done) => { - store.dispatch('getFileData', localFile) - .then(Vue.nextTick) - .then(() => { - expect(localFile.blamePath).toBe('blame_path'); - - done(); - }).catch(done.fail); - }); - - it('sets document title', (done) => { - store.dispatch('getFileData', localFile) - .then(() => { - expect(document.title).toBe('testing getFileData'); - - done(); - }).catch(done.fail); - }); - - it('sets the file as active', (done) => { - store.dispatch('getFileData', localFile) - .then(Vue.nextTick) - .then(() => { - expect(localFile.active).toBeTruthy(); - - done(); - }).catch(done.fail); - }); - - it('adds the file to open files', (done) => { - store.dispatch('getFileData', localFile) - .then(Vue.nextTick) - .then(() => { - expect(store.state.openFiles.length).toBe(1); - expect(store.state.openFiles[0].name).toBe(localFile.name); - - done(); - }).catch(done.fail); - }); - - it('toggles the file loading', (done) => { - store.dispatch('getFileData', localFile) - .then(() => { - expect(localFile.loading).toBeTruthy(); - - return Vue.nextTick(); - }) - .then(() => { - expect(localFile.loading).toBeFalsy(); - - done(); - }).catch(done.fail); - }); - }); - - describe('getRawFileData', () => { - let tmpFile; - - beforeEach(() => { - spyOn(service, 'getRawFileData').and.returnValue(Promise.resolve('raw')); - - tmpFile = file('tmpFile'); - }); - - it('calls getRawFileData service method', (done) => { - store.dispatch('getRawFileData', tmpFile) - .then(() => { - expect(service.getRawFileData).toHaveBeenCalledWith(tmpFile); - - done(); - }).catch(done.fail); - }); - - it('updates file raw data', (done) => { - store.dispatch('getRawFileData', tmpFile) - .then(() => { - expect(tmpFile.raw).toBe('raw'); - - done(); - }).catch(done.fail); - }); - }); - - describe('changeFileContent', () => { - let tmpFile; - - beforeEach(() => { - tmpFile = file('tmpFile'); - }); - - it('updates file content', (done) => { - store.dispatch('changeFileContent', { - file: tmpFile, - content: 'content', - }) - .then(() => { - expect(tmpFile.content).toBe('content'); - - done(); - }).catch(done.fail); - }); - }); - - describe('createTempFile', () => { - let projectTree; - - beforeEach(() => { - document.body.innerHTML += '<div class="flash-container"></div>'; - - store.state.currentProjectId = 'abcproject'; - store.state.currentBranchId = 'master'; - store.state.projects.abcproject = { - branches: { - master: { - workingReference: '1', - }, - }, - }; - - store.state.trees['abcproject/mybranch'] = { - tree: [], - }; - - projectTree = store.state.trees['abcproject/mybranch']; - }); - - afterEach(() => { - document.querySelector('.flash-container').remove(); - }); - - it('creates temp file', (done) => { - store.dispatch('createTempFile', { - name: 'test', - projectId: 'abcproject', - branchId: 'mybranch', - parent: projectTree, - }).then((f) => { - expect(f.tempFile).toBeTruthy(); - expect(store.state.trees['abcproject/mybranch'].tree.length).toBe(1); - - done(); - }).catch(done.fail); - }); - - it('adds tmp file to open files', (done) => { - store.dispatch('createTempFile', { - name: 'test', - projectId: 'abcproject', - branchId: 'mybranch', - parent: projectTree, - }).then((f) => { - expect(store.state.openFiles.length).toBe(1); - expect(store.state.openFiles[0].name).toBe(f.name); - - done(); - }).catch(done.fail); - }); - - it('sets tmp file as active', (done) => { - store.dispatch('createTempFile', { - name: 'test', - projectId: 'abcproject', - branchId: 'mybranch', - parent: projectTree, - }).then((f) => { - expect(f.active).toBeTruthy(); - - done(); - }).catch(done.fail); - }); - - it('enters edit mode if file is not base64', (done) => { - store.dispatch('createTempFile', { - name: 'test', - projectId: 'abcproject', - branchId: 'mybranch', - parent: projectTree, - }).then(() => { - expect(store.state.editMode).toBeTruthy(); - - done(); - }).catch(done.fail); - }); - - it('creates flash message is file already exists', (done) => { - store.state.trees['abcproject/mybranch'].tree.push(file('test', '1', 'blob')); - - store.dispatch('createTempFile', { - name: 'test', - projectId: 'abcproject', - branchId: 'mybranch', - parent: projectTree, - }).then(() => { - expect(document.querySelector('.flash-alert')).not.toBeNull(); - - done(); - }).catch(done.fail); - }); - - it('increases level of file', (done) => { - store.state.trees['abcproject/mybranch'].level = 1; - - store.dispatch('createTempFile', { - name: 'test', - projectId: 'abcproject', - branchId: 'mybranch', - parent: projectTree, - }).then((f) => { - expect(f.level).toBe(2); - - done(); - }).catch(done.fail); - }); - }); -}); diff --git a/spec/javascripts/repo/stores/actions/tree_spec.js b/spec/javascripts/repo/stores/actions/tree_spec.js deleted file mode 100644 index 65351dbb7d9..00000000000 --- a/spec/javascripts/repo/stores/actions/tree_spec.js +++ /dev/null @@ -1,350 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import service from '~/ide/services'; -import { file, resetStore } from '../../helpers'; - -describe('Multi-file store tree actions', () => { - let projectTree; - - const basicCallParameters = { - endpoint: 'rootEndpoint', - projectId: 'abcproject', - branch: 'master', - }; - - beforeEach(() => { - store.state.currentProjectId = 'abcproject'; - store.state.currentBranchId = 'master'; - store.state.projects.abcproject = { - web_url: '', - branches: { - master: { - workingReference: '1', - }, - }, - }; - }); - - afterEach(() => { - resetStore(store); - }); - - describe('getTreeData', () => { - beforeEach(() => { - spyOn(service, 'getTreeData').and.returnValue(Promise.resolve({ - headers: { - 'page-title': 'test', - }, - json: () => Promise.resolve({ - last_commit_path: 'last_commit_path', - parent_tree_url: 'parent_tree_url', - path: '/', - trees: [{ name: 'tree' }], - blobs: [{ name: 'blob' }], - submodules: [{ name: 'submodule' }], - }), - })); - }); - - it('calls service getTreeData', (done) => { - store.dispatch('getTreeData', basicCallParameters) - .then(() => { - expect(service.getTreeData).toHaveBeenCalledWith('rootEndpoint'); - - done(); - }).catch(done.fail); - }); - - it('adds data into tree', (done) => { - store.dispatch('getTreeData', basicCallParameters) - .then(() => { - projectTree = store.state.trees['abcproject/master']; - expect(projectTree.tree.length).toBe(3); - expect(projectTree.tree[0].type).toBe('tree'); - expect(projectTree.tree[1].type).toBe('submodule'); - expect(projectTree.tree[2].type).toBe('blob'); - - done(); - }).catch(done.fail); - }); - - it('sets parent tree URL', (done) => { - store.dispatch('getTreeData', basicCallParameters) - .then(() => { - expect(store.state.parentTreeUrl).toBe('parent_tree_url'); - - done(); - }).catch(done.fail); - }); - - it('sets last commit path', (done) => { - store.dispatch('getTreeData', basicCallParameters) - .then(() => { - expect(store.state.trees['abcproject/master'].lastCommitPath).toBe('last_commit_path'); - - done(); - }).catch(done.fail); - }); - - it('sets root if not currently at root', (done) => { - store.state.isInitialRoot = false; - - store.dispatch('getTreeData', basicCallParameters) - .then(() => { - expect(store.state.isInitialRoot).toBeTruthy(); - expect(store.state.isRoot).toBeTruthy(); - - done(); - }).catch(done.fail); - }); - - it('sets page title', (done) => { - store.dispatch('getTreeData', basicCallParameters) - .then(() => { - expect(document.title).toBe('test'); - - done(); - }).catch(done.fail); - }); - - it('calls getLastCommitData if prevLastCommitPath is not null', (done) => { - const getLastCommitDataSpy = jasmine.createSpy('getLastCommitData'); - const oldGetLastCommitData = store._actions.getLastCommitData; // eslint-disable-line - store._actions.getLastCommitData = [getLastCommitDataSpy]; // eslint-disable-line - store.state.prevLastCommitPath = 'test'; - - store.dispatch('getTreeData', basicCallParameters) - .then(() => { - expect(getLastCommitDataSpy).toHaveBeenCalledWith(projectTree); - - store._actions.getLastCommitData = oldGetLastCommitData; // eslint-disable-line - - done(); - }).catch(done.fail); - }); - }); - - describe('toggleTreeOpen', () => { - let oldGetTreeData; - let getTreeDataSpy; - let tree; - - beforeEach(() => { - getTreeDataSpy = jasmine.createSpy('getTreeData'); - - oldGetTreeData = store._actions.getTreeData; // eslint-disable-line - store._actions.getTreeData = [getTreeDataSpy]; // eslint-disable-line - - tree = { - projectId: 'abcproject', - branchId: 'master', - opened: false, - tree: [], - }; - }); - - afterEach(() => { - store._actions.getTreeData = oldGetTreeData; // eslint-disable-line - }); - - it('toggles the tree open', (done) => { - store.dispatch('toggleTreeOpen', { - endpoint: 'test', - tree, - }).then(() => { - expect(tree.opened).toBeTruthy(); - - done(); - }).catch(done.fail); - }); - - it('calls getTreeData if tree is closed', (done) => { - store.dispatch('toggleTreeOpen', { - endpoint: 'test', - tree, - }).then(() => { - expect(getTreeDataSpy).toHaveBeenCalledWith({ - projectId: 'abcproject', - branch: 'master', - endpoint: 'test', - tree, - }); - - done(); - }).catch(done.fail); - }); - - it('resets entries tree', (done) => { - Object.assign(tree, { - opened: true, - tree: ['a'], - }); - - store.dispatch('toggleTreeOpen', { - endpoint: 'test', - tree, - }).then(() => { - expect(tree.tree.length).toBe(0); - - done(); - }).catch(done.fail); - }); - }); - - describe('createTempTree', () => { - beforeEach(() => { - store.state.trees['abcproject/mybranch'] = { - tree: [], - }; - projectTree = store.state.trees['abcproject/mybranch']; - }); - - it('creates temp tree', (done) => { - store.dispatch('createTempTree', { - projectId: store.state.currentProjectId, - branchId: store.state.currentBranchId, - name: 'test', - parent: projectTree, - }) - .then(() => { - expect(projectTree.tree[0].name).toBe('test'); - expect(projectTree.tree[0].type).toBe('tree'); - - done(); - }).catch(done.fail); - }); - - it('creates new folder inside another tree', (done) => { - const tree = { - type: 'tree', - name: 'testing', - tree: [], - }; - - projectTree.tree.push(tree); - - store.dispatch('createTempTree', { - projectId: store.state.currentProjectId, - branchId: store.state.currentBranchId, - name: 'testing/test', - parent: projectTree, - }) - .then(() => { - expect(projectTree.tree[0].name).toBe('testing'); - expect(projectTree.tree[0].tree[0].tempFile).toBeTruthy(); - expect(projectTree.tree[0].tree[0].name).toBe('test'); - expect(projectTree.tree[0].tree[0].type).toBe('tree'); - - done(); - }).catch(done.fail); - }); - - it('does not create new tree if already exists', (done) => { - const tree = { - type: 'tree', - name: 'testing', - endpoint: 'test', - tree: [], - }; - - projectTree.tree.push(tree); - - store.dispatch('createTempTree', { - projectId: store.state.currentProjectId, - branchId: store.state.currentBranchId, - name: 'testing/test', - parent: projectTree, - }) - .then(() => { - expect(projectTree.tree[0].name).toBe('testing'); - expect(projectTree.tree[0].tempFile).toBeUndefined(); - - done(); - }).catch(done.fail); - }); - }); - - describe('getLastCommitData', () => { - beforeEach(() => { - spyOn(service, 'getTreeLastCommit').and.returnValue(Promise.resolve({ - headers: { - 'more-logs-url': null, - }, - json: () => Promise.resolve([{ - type: 'tree', - file_name: 'testing', - commit: { - message: 'commit message', - authored_date: '123', - }, - }]), - })); - - store.state.trees['abcproject/mybranch'] = { - tree: [], - }; - - projectTree = store.state.trees['abcproject/mybranch']; - projectTree.tree.push(file('testing', '1', 'tree')); - projectTree.lastCommitPath = 'lastcommitpath'; - }); - - it('calls service with lastCommitPath', (done) => { - store.dispatch('getLastCommitData', projectTree) - .then(() => { - expect(service.getTreeLastCommit).toHaveBeenCalledWith('lastcommitpath'); - - done(); - }).catch(done.fail); - }); - - it('updates trees last commit data', (done) => { - store.dispatch('getLastCommitData', projectTree) - .then(Vue.nextTick) - .then(() => { - expect(projectTree.tree[0].lastCommit.message).toBe('commit message'); - - done(); - }).catch(done.fail); - }); - - it('does not update entry if not found', (done) => { - projectTree.tree[0].name = 'a'; - - store.dispatch('getLastCommitData', projectTree) - .then(Vue.nextTick) - .then(() => { - expect(projectTree.tree[0].lastCommit.message).not.toBe('commit message'); - - done(); - }).catch(done.fail); - }); - }); - - describe('updateDirectoryData', () => { - it('adds data into tree', (done) => { - const tree = { - tree: [], - }; - const data = { - trees: [{ name: 'tree' }], - submodules: [{ name: 'submodule' }], - blobs: [{ name: 'blob' }], - }; - - store.dispatch('updateDirectoryData', { - data, - tree, - }).then(() => { - expect(tree.tree[0].name).toBe('tree'); - expect(tree.tree[0].type).toBe('tree'); - expect(tree.tree[1].name).toBe('submodule'); - expect(tree.tree[1].type).toBe('submodule'); - expect(tree.tree[2].name).toBe('blob'); - expect(tree.tree[2].type).toBe('blob'); - - done(); - }).catch(done.fail); - }); - }); -}); diff --git a/spec/javascripts/repo/stores/actions_spec.js b/spec/javascripts/repo/stores/actions_spec.js deleted file mode 100644 index f678967b092..00000000000 --- a/spec/javascripts/repo/stores/actions_spec.js +++ /dev/null @@ -1,432 +0,0 @@ -import Vue from 'vue'; -import * as urlUtils from '~/lib/utils/url_utility'; -import store from '~/ide/stores'; -import service from '~/ide/services'; -import { resetStore, file } from '../helpers'; - -describe('Multi-file store actions', () => { - afterEach(() => { - resetStore(store); - }); - - describe('redirectToUrl', () => { - it('calls visitUrl', (done) => { - spyOn(urlUtils, 'visitUrl'); - - store.dispatch('redirectToUrl', 'test') - .then(() => { - expect(urlUtils.visitUrl).toHaveBeenCalledWith('test'); - - done(); - }) - .catch(done.fail); - }); - }); - - describe('setInitialData', () => { - it('commits initial data', (done) => { - store.dispatch('setInitialData', { canCommit: true }) - .then(() => { - expect(store.state.canCommit).toBeTruthy(); - done(); - }) - .catch(done.fail); - }); - }); - - describe('closeDiscardPopup', () => { - it('closes the discard popup', (done) => { - store.dispatch('closeDiscardPopup', false) - .then(() => { - expect(store.state.discardPopupOpen).toBeFalsy(); - - done(); - }) - .catch(done.fail); - }); - }); - - describe('discardAllChanges', () => { - beforeEach(() => { - store.state.openFiles.push(file('discardAll')); - store.state.openFiles[0].changed = true; - }); - }); - - describe('closeAllFiles', () => { - beforeEach(() => { - store.state.openFiles.push(file('closeAll')); - store.state.openFiles[0].opened = true; - }); - - it('closes all open files', (done) => { - store.dispatch('closeAllFiles') - .then(() => { - expect(store.state.openFiles.length).toBe(0); - - done(); - }) - .catch(done.fail); - }); - }); - - describe('toggleEditMode', () => { - it('toggles edit mode', (done) => { - store.state.editMode = true; - - store.dispatch('toggleEditMode') - .then(() => { - expect(store.state.editMode).toBeFalsy(); - - done(); - }).catch(done.fail); - }); - - it('sets preview mode', (done) => { - store.state.currentBlobView = 'repo-editor'; - store.state.editMode = true; - - store.dispatch('toggleEditMode') - .then(Vue.nextTick) - .then(() => { - expect(store.state.currentBlobView).toBe('repo-preview'); - - done(); - }).catch(done.fail); - }); - - it('opens discard popup if there are changed files', (done) => { - store.state.editMode = true; - store.state.openFiles.push(file('discardChanges')); - store.state.openFiles[0].changed = true; - - store.dispatch('toggleEditMode') - .then(() => { - expect(store.state.discardPopupOpen).toBeTruthy(); - - done(); - }).catch(done.fail); - }); - - it('can force closed if there are changed files', (done) => { - store.state.editMode = true; - - store.state.openFiles.push(file('forceClose')); - store.state.openFiles[0].changed = true; - - store.dispatch('toggleEditMode', true) - .then(() => { - expect(store.state.discardPopupOpen).toBeFalsy(); - expect(store.state.editMode).toBeFalsy(); - - done(); - }).catch(done.fail); - }); - - it('discards file changes', (done) => { - const f = file('discard'); - store.state.editMode = true; - store.state.openFiles.push(f); - f.changed = true; - - store.dispatch('toggleEditMode', true) - .then(Vue.nextTick) - .then(() => { - expect(f.changed).toBeFalsy(); - - done(); - }).catch(done.fail); - }); - }); - - describe('toggleBlobView', () => { - it('sets edit mode view if in edit mode', (done) => { - store.dispatch('toggleBlobView') - .then(() => { - expect(store.state.currentBlobView).toBe('repo-editor'); - - done(); - }) - .catch(done.fail); - }); - - it('sets preview mode view if not in edit mode', (done) => { - store.state.editMode = false; - - store.dispatch('toggleBlobView') - .then(() => { - expect(store.state.currentBlobView).toBe('repo-preview'); - - done(); - }) - .catch(done.fail); - }); - }); - - describe('checkCommitStatus', () => { - beforeEach(() => { - store.state.currentProjectId = 'abcproject'; - store.state.currentBranchId = 'master'; - store.state.projects.abcproject = { - branches: { - master: { - workingReference: '1', - }, - }, - }; - }); - - it('calls service', (done) => { - spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({ - data: { - commit: { id: '123' }, - }, - })); - - store.dispatch('checkCommitStatus') - .then(() => { - expect(service.getBranchData).toHaveBeenCalledWith('abcproject', 'master'); - - done(); - }) - .catch(done.fail); - }); - - it('returns true if current ref does not equal returned ID', (done) => { - spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({ - data: { - commit: { id: '123' }, - }, - })); - - store.dispatch('checkCommitStatus') - .then((val) => { - expect(val).toBeTruthy(); - - done(); - }) - .catch(done.fail); - }); - - it('returns false if current ref equals returned ID', (done) => { - spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({ - data: { - commit: { id: '1' }, - }, - })); - - store.dispatch('checkCommitStatus') - .then((val) => { - expect(val).toBeFalsy(); - - done(); - }) - .catch(done.fail); - }); - }); - - describe('commitChanges', () => { - let payload; - - beforeEach(() => { - spyOn(window, 'scrollTo'); - - document.body.innerHTML += '<div class="flash-container"></div>'; - - store.state.currentProjectId = 'abcproject'; - store.state.currentBranchId = 'master'; - store.state.projects.abcproject = { - web_url: 'webUrl', - branches: { - master: { - workingReference: '1', - }, - }, - }; - - payload = { - branch: 'master', - }; - }); - - afterEach(() => { - document.querySelector('.flash-container').remove(); - }); - - describe('success', () => { - beforeEach(() => { - spyOn(service, 'commit').and.returnValue(Promise.resolve({ - data: { - id: '123456', - short_id: '123', - message: 'test message', - committed_date: 'date', - stats: { - additions: '1', - deletions: '2', - }, - }, - })); - }); - - it('calls service', (done) => { - store.dispatch('commitChanges', { payload, newMr: false }) - .then(() => { - expect(service.commit).toHaveBeenCalledWith('abcproject', payload); - - done(); - }).catch(done.fail); - }); - - it('shows flash notice', (done) => { - store.dispatch('commitChanges', { payload, newMr: false }) - .then(() => { - const alert = document.querySelector('.flash-container'); - - expect(alert.querySelector('.flash-notice')).not.toBeNull(); - expect(alert.textContent.trim()).toBe( - 'Your changes have been committed. Commit 123 with 1 additions, 2 deletions.', - ); - - done(); - }).catch(done.fail); - }); - - it('adds commit data to changed files', (done) => { - const changedFile = file('changed'); - const f = file('newfile'); - changedFile.changed = true; - - store.state.openFiles.push(changedFile, f); - - store.dispatch('commitChanges', { payload, newMr: false }) - .then(() => { - expect(changedFile.lastCommit.message).toBe('test message'); - expect(f.lastCommit.message).not.toBe('test message'); - - done(); - }).catch(done.fail); - }); - - it('scrolls to top of page', (done) => { - store.dispatch('commitChanges', { payload, newMr: false }) - .then(() => { - expect(window.scrollTo).toHaveBeenCalledWith(0, 0); - - done(); - }).catch(done.fail); - }); - - it('redirects to new merge request page', (done) => { - spyOn(urlUtils, 'visitUrl'); - - store.dispatch('commitChanges', { payload, newMr: true }) - .then(() => { - expect(urlUtils.visitUrl).toHaveBeenCalledWith('webUrl/merge_requests/new?merge_request%5Bsource_branch%5D=master'); - - done(); - }).catch(done.fail); - }); - }); - - describe('failed', () => { - beforeEach(() => { - spyOn(service, 'commit').and.returnValue(Promise.resolve({ - data: { - message: 'failed message', - }, - })); - }); - - it('shows failed message', (done) => { - store.dispatch('commitChanges', { payload, newMr: false }) - .then(() => { - const alert = document.querySelector('.flash-container'); - - expect(alert.textContent.trim()).toBe( - 'failed message', - ); - - done(); - }).catch(done.fail); - }); - }); - }); - - describe('createTempEntry', () => { - beforeEach(() => { - store.state.trees['abcproject/mybranch'] = { - tree: [], - }; - store.state.projects.abcproject = { - web_url: '', - }; - }); - - it('creates a temp tree', (done) => { - const projectTree = store.state.trees['abcproject/mybranch']; - - store.dispatch('createTempEntry', { - projectId: 'abcproject', - branchId: 'mybranch', - parent: projectTree, - name: 'test', - type: 'tree', - }) - .then(() => { - const baseTree = projectTree.tree; - expect(baseTree.length).toBe(1); - expect(baseTree[0].tempFile).toBeTruthy(); - expect(baseTree[0].type).toBe('tree'); - - done(); - }) - .catch(done.fail); - }); - - it('creates temp file', (done) => { - const projectTree = store.state.trees['abcproject/mybranch']; - - store.dispatch('createTempEntry', { - projectId: 'abcproject', - branchId: 'mybranch', - parent: projectTree, - name: 'test', - type: 'blob', - }) - .then(() => { - const baseTree = projectTree.tree; - expect(baseTree.length).toBe(1); - expect(baseTree[0].tempFile).toBeTruthy(); - expect(baseTree[0].type).toBe('blob'); - - done(); - }) - .catch(done.fail); - }); - }); - - describe('popHistoryState', () => { - - }); - - describe('scrollToTab', () => { - it('focuses the current active element', (done) => { - document.body.innerHTML += '<div id="tabs"><div class="active"><div class="repo-tab"></div></div></div>'; - const el = document.querySelector('.repo-tab'); - spyOn(el, 'focus'); - - store.dispatch('scrollToTab') - .then(() => { - setTimeout(() => { - expect(el.focus).toHaveBeenCalled(); - - document.getElementById('tabs').remove(); - - done(); - }); - }) - .catch(done.fail); - }); - }); -}); diff --git a/spec/javascripts/repo/stores/getters_spec.js b/spec/javascripts/repo/stores/getters_spec.js deleted file mode 100644 index d0d5934f29a..00000000000 --- a/spec/javascripts/repo/stores/getters_spec.js +++ /dev/null @@ -1,114 +0,0 @@ -import * as getters from '~/ide/stores/getters'; -import state from '~/ide/stores/state'; -import { file } from '../helpers'; - -describe('Multi-file store getters', () => { - let localState; - - beforeEach(() => { - localState = state(); - }); - - describe('changedFiles', () => { - it('returns a list of changed opened files', () => { - localState.openFiles.push(file()); - localState.openFiles.push(file('changed')); - localState.openFiles[1].changed = true; - - const changedFiles = getters.changedFiles(localState); - - expect(changedFiles.length).toBe(1); - expect(changedFiles[0].name).toBe('changed'); - }); - }); - - describe('activeFile', () => { - it('returns the current active file', () => { - localState.openFiles.push(file()); - localState.openFiles.push(file('active')); - localState.openFiles[1].active = true; - - expect(getters.activeFile(localState).name).toBe('active'); - }); - - it('returns undefined if no active files are found', () => { - localState.openFiles.push(file()); - localState.openFiles.push(file('active')); - - expect(getters.activeFile(localState)).toBeNull(); - }); - }); - - describe('activeFileExtension', () => { - it('returns the file extension for the current active file', () => { - localState.openFiles.push(file('active')); - localState.openFiles[0].active = true; - localState.openFiles[0].path = 'test.js'; - - expect(getters.activeFileExtension(localState)).toBe('.js'); - - localState.openFiles[0].path = 'test.es6.js'; - - expect(getters.activeFileExtension(localState)).toBe('.js'); - }); - }); - - describe('canEditFile', () => { - beforeEach(() => { - localState.onTopOfBranch = true; - localState.canCommit = true; - - localState.openFiles.push(file()); - localState.openFiles[0].active = true; - }); - - it('returns true if user can commit and has open files', () => { - expect(getters.canEditFile(localState)).toBeTruthy(); - }); - - it('returns false if user can commit and has no open files', () => { - localState.openFiles = []; - - expect(getters.canEditFile(localState)).toBeFalsy(); - }); - - it('returns false if user can commit and active file is binary', () => { - localState.openFiles[0].binary = true; - - expect(getters.canEditFile(localState)).toBeFalsy(); - }); - - it('returns false if user cant commit', () => { - localState.canCommit = false; - - expect(getters.canEditFile(localState)).toBeFalsy(); - }); - }); - - describe('modifiedFiles', () => { - it('returns a list of modified files', () => { - localState.openFiles.push(file()); - localState.openFiles.push(file('changed')); - localState.openFiles[1].changed = true; - - const modifiedFiles = getters.modifiedFiles(localState); - - expect(modifiedFiles.length).toBe(1); - expect(modifiedFiles[0].name).toBe('changed'); - }); - }); - - describe('addedFiles', () => { - it('returns a list of added files', () => { - localState.openFiles.push(file()); - localState.openFiles.push(file('added')); - localState.openFiles[1].changed = true; - localState.openFiles[1].tempFile = true; - - const modifiedFiles = getters.addedFiles(localState); - - expect(modifiedFiles.length).toBe(1); - expect(modifiedFiles[0].name).toBe('added'); - }); - }); -}); diff --git a/spec/javascripts/repo/stores/mutations/branch_spec.js b/spec/javascripts/repo/stores/mutations/branch_spec.js deleted file mode 100644 index a7167537ef2..00000000000 --- a/spec/javascripts/repo/stores/mutations/branch_spec.js +++ /dev/null @@ -1,18 +0,0 @@ -import mutations from '~/ide/stores/mutations/branch'; -import state from '~/ide/stores/state'; - -describe('Multi-file store branch mutations', () => { - let localState; - - beforeEach(() => { - localState = state(); - }); - - describe('SET_CURRENT_BRANCH', () => { - it('sets currentBranch', () => { - mutations.SET_CURRENT_BRANCH(localState, 'master'); - - expect(localState.currentBranchId).toBe('master'); - }); - }); -}); diff --git a/spec/javascripts/repo/stores/mutations/file_spec.js b/spec/javascripts/repo/stores/mutations/file_spec.js deleted file mode 100644 index 6e204ef0404..00000000000 --- a/spec/javascripts/repo/stores/mutations/file_spec.js +++ /dev/null @@ -1,131 +0,0 @@ -import mutations from '~/ide/stores/mutations/file'; -import state from '~/ide/stores/state'; -import { file } from '../../helpers'; - -describe('Multi-file store file mutations', () => { - let localState; - let localFile; - - beforeEach(() => { - localState = state(); - localFile = file(); - }); - - describe('SET_FILE_ACTIVE', () => { - it('sets the file active', () => { - mutations.SET_FILE_ACTIVE(localState, { - file: localFile, - active: true, - }); - - expect(localFile.active).toBeTruthy(); - }); - }); - - describe('TOGGLE_FILE_OPEN', () => { - beforeEach(() => { - mutations.TOGGLE_FILE_OPEN(localState, localFile); - }); - - it('adds into opened files', () => { - expect(localFile.opened).toBeTruthy(); - expect(localState.openFiles.length).toBe(1); - }); - - it('removes from opened files', () => { - mutations.TOGGLE_FILE_OPEN(localState, localFile); - - expect(localFile.opened).toBeFalsy(); - expect(localState.openFiles.length).toBe(0); - }); - }); - - describe('SET_FILE_DATA', () => { - it('sets extra file data', () => { - mutations.SET_FILE_DATA(localState, { - data: { - blame_path: 'blame', - commits_path: 'commits', - permalink: 'permalink', - raw_path: 'raw', - binary: true, - html: 'html', - render_error: 'render_error', - }, - file: localFile, - }); - - expect(localFile.blamePath).toBe('blame'); - expect(localFile.commitsPath).toBe('commits'); - expect(localFile.permalink).toBe('permalink'); - expect(localFile.rawPath).toBe('raw'); - expect(localFile.binary).toBeTruthy(); - expect(localFile.html).toBe('html'); - expect(localFile.renderError).toBe('render_error'); - }); - }); - - describe('SET_FILE_RAW_DATA', () => { - it('sets raw data', () => { - mutations.SET_FILE_RAW_DATA(localState, { - file: localFile, - raw: 'testing', - }); - - expect(localFile.raw).toBe('testing'); - }); - }); - - describe('UPDATE_FILE_CONTENT', () => { - beforeEach(() => { - localFile.raw = 'test'; - }); - - it('sets content', () => { - mutations.UPDATE_FILE_CONTENT(localState, { - file: localFile, - content: 'test', - }); - - expect(localFile.content).toBe('test'); - }); - - it('sets changed if content does not match raw', () => { - mutations.UPDATE_FILE_CONTENT(localState, { - file: localFile, - content: 'testing', - }); - - expect(localFile.content).toBe('testing'); - expect(localFile.changed).toBeTruthy(); - }); - }); - - describe('DISCARD_FILE_CHANGES', () => { - beforeEach(() => { - localFile.content = 'test'; - localFile.changed = true; - }); - - it('resets content and changed', () => { - mutations.DISCARD_FILE_CHANGES(localState, localFile); - - expect(localFile.content).toBe(''); - expect(localFile.changed).toBeFalsy(); - }); - }); - - describe('CREATE_TMP_FILE', () => { - it('adds file into parent tree', () => { - const f = file('tmpFile'); - - mutations.CREATE_TMP_FILE(localState, { - file: f, - parent: localFile, - }); - - expect(localFile.tree.length).toBe(1); - expect(localFile.tree[0].name).toBe(f.name); - }); - }); -}); diff --git a/spec/javascripts/repo/stores/mutations/tree_spec.js b/spec/javascripts/repo/stores/mutations/tree_spec.js deleted file mode 100644 index e6ca8ea139e..00000000000 --- a/spec/javascripts/repo/stores/mutations/tree_spec.js +++ /dev/null @@ -1,71 +0,0 @@ -import mutations from '~/ide/stores/mutations/tree'; -import state from '~/ide/stores/state'; -import { file } from '../../helpers'; - -describe('Multi-file store tree mutations', () => { - let localState; - let localTree; - - beforeEach(() => { - localState = state(); - localTree = file(); - }); - - describe('TOGGLE_TREE_OPEN', () => { - it('toggles tree open', () => { - mutations.TOGGLE_TREE_OPEN(localState, localTree); - - expect(localTree.opened).toBeTruthy(); - - mutations.TOGGLE_TREE_OPEN(localState, localTree); - - expect(localTree.opened).toBeFalsy(); - }); - }); - - describe('SET_DIRECTORY_DATA', () => { - const data = [{ - name: 'tree', - }, - { - name: 'submodule', - }, - { - name: 'blob', - }]; - - it('adds directory data', () => { - mutations.SET_DIRECTORY_DATA(localState, { - data, - tree: localState, - }); - - expect(localState.tree.length).toBe(3); - expect(localState.tree[0].name).toBe('tree'); - expect(localState.tree[1].name).toBe('submodule'); - expect(localState.tree[2].name).toBe('blob'); - }); - }); - - describe('SET_PARENT_TREE_URL', () => { - it('sets the parent tree url', () => { - mutations.SET_PARENT_TREE_URL(localState, 'test'); - - expect(localState.parentTreeUrl).toBe('test'); - }); - }); - - describe('CREATE_TMP_TREE', () => { - it('adds tree into parent tree', () => { - const tmpEntry = file('tmpTree'); - - mutations.CREATE_TMP_TREE(localState, { - tmpEntry, - parent: localTree, - }); - - expect(localTree.tree.length).toBe(1); - expect(localTree.tree[0].name).toBe(tmpEntry.name); - }); - }); -}); diff --git a/spec/javascripts/repo/stores/mutations_spec.js b/spec/javascripts/repo/stores/mutations_spec.js deleted file mode 100644 index 5fd8ad94972..00000000000 --- a/spec/javascripts/repo/stores/mutations_spec.js +++ /dev/null @@ -1,125 +0,0 @@ -import mutations from '~/ide/stores/mutations'; -import state from '~/ide/stores/state'; -import { file } from '../helpers'; - -describe('Multi-file store mutations', () => { - let localState; - let entry; - - beforeEach(() => { - localState = state(); - entry = file(); - }); - - describe('SET_INITIAL_DATA', () => { - it('sets all initial data', () => { - mutations.SET_INITIAL_DATA(localState, { - test: 'test', - }); - - expect(localState.test).toBe('test'); - }); - }); - - describe('SET_PREVIEW_MODE', () => { - it('sets currentBlobView to repo-preview', () => { - mutations.SET_PREVIEW_MODE(localState); - - expect(localState.currentBlobView).toBe('repo-preview'); - - localState.currentBlobView = 'testing'; - - mutations.SET_PREVIEW_MODE(localState); - - expect(localState.currentBlobView).toBe('repo-preview'); - }); - }); - - describe('SET_EDIT_MODE', () => { - it('sets currentBlobView to repo-editor', () => { - mutations.SET_EDIT_MODE(localState); - - expect(localState.currentBlobView).toBe('repo-editor'); - - localState.currentBlobView = 'testing'; - - mutations.SET_EDIT_MODE(localState); - - expect(localState.currentBlobView).toBe('repo-editor'); - }); - }); - - describe('TOGGLE_LOADING', () => { - it('toggles loading of entry', () => { - mutations.TOGGLE_LOADING(localState, entry); - - expect(entry.loading).toBeTruthy(); - - mutations.TOGGLE_LOADING(localState, entry); - - expect(entry.loading).toBeFalsy(); - }); - }); - - describe('TOGGLE_EDIT_MODE', () => { - it('toggles editMode', () => { - mutations.TOGGLE_EDIT_MODE(localState); - - expect(localState.editMode).toBeFalsy(); - - mutations.TOGGLE_EDIT_MODE(localState); - - expect(localState.editMode).toBeTruthy(); - }); - }); - - describe('TOGGLE_DISCARD_POPUP', () => { - it('sets discardPopupOpen', () => { - mutations.TOGGLE_DISCARD_POPUP(localState, true); - - expect(localState.discardPopupOpen).toBeTruthy(); - - mutations.TOGGLE_DISCARD_POPUP(localState, false); - - expect(localState.discardPopupOpen).toBeFalsy(); - }); - }); - - describe('SET_ROOT', () => { - it('sets isRoot & initialRoot', () => { - mutations.SET_ROOT(localState, true); - - expect(localState.isRoot).toBeTruthy(); - expect(localState.isInitialRoot).toBeTruthy(); - - mutations.SET_ROOT(localState, false); - - expect(localState.isRoot).toBeFalsy(); - expect(localState.isInitialRoot).toBeFalsy(); - }); - }); - - describe('SET_LEFT_PANEL_COLLAPSED', () => { - it('sets left panel collapsed', () => { - mutations.SET_LEFT_PANEL_COLLAPSED(localState, true); - - expect(localState.leftPanelCollapsed).toBeTruthy(); - - mutations.SET_LEFT_PANEL_COLLAPSED(localState, false); - - expect(localState.leftPanelCollapsed).toBeFalsy(); - }); - }); - - describe('SET_RIGHT_PANEL_COLLAPSED', () => { - it('sets right panel collapsed', () => { - mutations.SET_RIGHT_PANEL_COLLAPSED(localState, true); - - expect(localState.rightPanelCollapsed).toBeTruthy(); - - mutations.SET_RIGHT_PANEL_COLLAPSED(localState, false); - - expect(localState.rightPanelCollapsed).toBeFalsy(); - }); - }); -}); diff --git a/spec/javascripts/repo/stores/utils_spec.js b/spec/javascripts/repo/stores/utils_spec.js deleted file mode 100644 index 89745a2029e..00000000000 --- a/spec/javascripts/repo/stores/utils_spec.js +++ /dev/null @@ -1,119 +0,0 @@ -import * as utils from '~/ide/stores/utils'; -import state from '~/ide/stores/state'; -import { file } from '../helpers'; - -describe('Multi-file store utils', () => { - describe('setPageTitle', () => { - it('sets the document page title', () => { - utils.setPageTitle('test'); - - expect(document.title).toBe('test'); - }); - }); - - describe('treeList', () => { - let localState; - - beforeEach(() => { - localState = state(); - }); - - it('returns flat tree list', () => { - localState.trees = []; - localState.trees['abcproject/mybranch'] = { - tree: [], - }; - const baseTree = localState.trees['abcproject/mybranch'].tree; - baseTree.push(file('1')); - baseTree[0].tree.push(file('2')); - baseTree[0].tree[0].tree.push(file('3')); - - const treeList = utils.treeList(localState, 'abcproject/mybranch'); - - expect(treeList.length).toBe(3); - expect(treeList[1].name).toBe(baseTree[0].tree[0].name); - expect(treeList[2].name).toBe(baseTree[0].tree[0].tree[0].name); - }); - }); - - describe('createTemp', () => { - it('creates temp tree', () => { - const tmp = utils.createTemp({ - name: 'test', - path: 'test', - type: 'tree', - level: 0, - changed: false, - content: '', - base64: '', - }); - - expect(tmp.tempFile).toBeTruthy(); - expect(tmp.icon).toBe('fa-folder'); - }); - - it('creates temp file', () => { - const tmp = utils.createTemp({ - name: 'test', - path: 'test', - type: 'blob', - level: 0, - changed: false, - content: '', - base64: '', - }); - - expect(tmp.tempFile).toBeTruthy(); - expect(tmp.icon).toBe('fa-file-text-o'); - }); - }); - - describe('findIndexOfFile', () => { - let localState; - - beforeEach(() => { - localState = [{ - path: '1', - }, { - path: '2', - }]; - }); - - it('finds in the index of an entry by path', () => { - const index = utils.findIndexOfFile(localState, { - path: '2', - }); - - expect(index).toBe(1); - }); - }); - - describe('findEntry', () => { - let localState; - - beforeEach(() => { - localState = { - tree: [{ - type: 'tree', - name: 'test', - }, { - type: 'blob', - name: 'file', - }], - }; - }); - - it('returns an entry found by name', () => { - const foundEntry = utils.findEntry(localState.tree, 'tree', 'test'); - - expect(foundEntry.type).toBe('tree'); - expect(foundEntry.name).toBe('test'); - }); - - it('returns undefined when no entry found', () => { - const foundEntry = utils.findEntry(localState.tree, 'blob', 'test'); - - expect(foundEntry).toBeUndefined(); - }); - }); -}); diff --git a/spec/javascripts/sidebar/assignees_spec.js b/spec/javascripts/sidebar/assignees_spec.js index c9453a21189..4e4343812bd 100644 --- a/spec/javascripts/sidebar/assignees_spec.js +++ b/spec/javascripts/sidebar/assignees_spec.js @@ -1,5 +1,5 @@ import Vue from 'vue'; -import Assignee from '~/sidebar/components/assignees/assignees'; +import Assignee from '~/sidebar/components/assignees/assignees.vue'; import UsersMock from './mock_data'; import UsersMockHelper from '../helpers/user_mock_data_helper'; diff --git a/spec/javascripts/sidebar/lock/edit_form_buttons_spec.js b/spec/javascripts/sidebar/lock/edit_form_buttons_spec.js index b0ea8ae0206..deeea669de8 100644 --- a/spec/javascripts/sidebar/lock/edit_form_buttons_spec.js +++ b/spec/javascripts/sidebar/lock/edit_form_buttons_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import editFormButtons from '~/sidebar/components/lock/edit_form_buttons.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('EditFormButtons', () => { let vm1; diff --git a/spec/javascripts/sidebar/participants_spec.js b/spec/javascripts/sidebar/participants_spec.js index 30cc549c7c0..2a3b60c399c 100644 --- a/spec/javascripts/sidebar/participants_spec.js +++ b/spec/javascripts/sidebar/participants_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import participants from '~/sidebar/components/participants/participants.vue'; -import mountComponent from '../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; const PARTICIPANT = { id: 1, diff --git a/spec/javascripts/sidebar/sidebar_assignees_spec.js b/spec/javascripts/sidebar/sidebar_assignees_spec.js index 6bb6d639f24..ebaaa6e806b 100644 --- a/spec/javascripts/sidebar/sidebar_assignees_spec.js +++ b/spec/javascripts/sidebar/sidebar_assignees_spec.js @@ -1,11 +1,11 @@ import _ from 'underscore'; import Vue from 'vue'; -import SidebarAssignees from '~/sidebar/components/assignees/sidebar_assignees'; +import SidebarAssignees from '~/sidebar/components/assignees/sidebar_assignees.vue'; import SidebarMediator from '~/sidebar/sidebar_mediator'; import SidebarService from '~/sidebar/services/sidebar_service'; import SidebarStore from '~/sidebar/stores/sidebar_store'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import Mock from './mock_data'; -import mountComponent from '../helpers/vue_mount_component_helper'; describe('sidebar assignees', () => { let vm; diff --git a/spec/javascripts/sidebar/sidebar_subscriptions_spec.js b/spec/javascripts/sidebar/sidebar_subscriptions_spec.js index a6113cb0bae..56a2543660b 100644 --- a/spec/javascripts/sidebar/sidebar_subscriptions_spec.js +++ b/spec/javascripts/sidebar/sidebar_subscriptions_spec.js @@ -4,7 +4,7 @@ import SidebarMediator from '~/sidebar/sidebar_mediator'; import SidebarService from '~/sidebar/services/sidebar_service'; import SidebarStore from '~/sidebar/stores/sidebar_store'; import eventHub from '~/sidebar/event_hub'; -import mountComponent from '../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import Mock from './mock_data'; describe('Sidebar Subscriptions', function () { diff --git a/spec/javascripts/sidebar/subscriptions_spec.js b/spec/javascripts/sidebar/subscriptions_spec.js index 79db05f04ed..aee8f0acbb9 100644 --- a/spec/javascripts/sidebar/subscriptions_spec.js +++ b/spec/javascripts/sidebar/subscriptions_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import subscriptions from '~/sidebar/components/subscriptions/subscriptions.vue'; -import mountComponent from '../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Subscriptions', function () { let vm; diff --git a/spec/javascripts/test_bundle.js b/spec/javascripts/test_bundle.js index 94fcc6c7f2b..1bcfdfe72b6 100644 --- a/spec/javascripts/test_bundle.js +++ b/spec/javascripts/test_bundle.js @@ -37,6 +37,7 @@ window.$ = window.jQuery = $; window.gl = window.gl || {}; window.gl.TEST_HOST = 'http://test.host'; window.gon = window.gon || {}; +window.gon.test_env = true; let hasUnhandledPromiseRejections = false; @@ -126,7 +127,6 @@ if (process.env.BABEL_ENV === 'coverage') { './diff_notes/components/resolve_count.js', './dispatcher.js', './environments/environments_bundle.js', - './filtered_search/filtered_search_bundle.js', './graphs/graphs_bundle.js', './issuable/time_tracking/time_tracking_bundle.js', './main.js', diff --git a/spec/javascripts/u2f/authenticate_spec.js b/spec/javascripts/u2f/authenticate_spec.js index 29b15f3a782..4d15bcc4956 100644 --- a/spec/javascripts/u2f/authenticate_spec.js +++ b/spec/javascripts/u2f/authenticate_spec.js @@ -5,7 +5,7 @@ import MockU2FDevice from './mock_u2f_device'; describe('U2FAuthenticate', () => { preloadFixtures('u2f/authenticate.html.raw'); - beforeEach(() => { + beforeEach((done) => { loadFixtures('u2f/authenticate.html.raw'); this.u2fDevice = new MockU2FDevice(); this.container = $('#js-authenticate-u2f'); @@ -22,7 +22,7 @@ describe('U2FAuthenticate', () => { // bypass automatic form submission within renderAuthenticated spyOn(this.component, 'renderAuthenticated').and.returnValue(true); - return this.component.start(); + this.component.start().then(done).catch(done.fail); }); it('allows authenticating via a U2F device', () => { @@ -34,7 +34,7 @@ describe('U2FAuthenticate', () => { expect(this.component.renderAuthenticated).toHaveBeenCalledWith('{"deviceData":"this is data from the device"}'); }); - return describe('errors', () => { + describe('errors', () => { it('displays an error message', () => { const setupButton = this.container.find('#js-login-u2f-device'); setupButton.trigger('click'); diff --git a/spec/javascripts/u2f/register_spec.js b/spec/javascripts/u2f/register_spec.js index b0051f11362..dbe89c2923c 100644 --- a/spec/javascripts/u2f/register_spec.js +++ b/spec/javascripts/u2f/register_spec.js @@ -5,12 +5,12 @@ import MockU2FDevice from './mock_u2f_device'; describe('U2FRegister', () => { preloadFixtures('u2f/register.html.raw'); - beforeEach(() => { + beforeEach((done) => { loadFixtures('u2f/register.html.raw'); this.u2fDevice = new MockU2FDevice(); this.container = $('#js-register-u2f'); this.component = new U2FRegister(this.container, $('#js-register-u2f-templates'), {}, 'token'); - return this.component.start(); + this.component.start().then(done).catch(done.fail); }); it('allows registering a U2F device', () => { diff --git a/spec/javascripts/u2f/util_spec.js b/spec/javascripts/u2f/util_spec.js new file mode 100644 index 00000000000..4187183236f --- /dev/null +++ b/spec/javascripts/u2f/util_spec.js @@ -0,0 +1,45 @@ +import { canInjectU2fApi } from '~/u2f/util'; + +describe('U2F Utils', () => { + describe('canInjectU2fApi', () => { + it('returns false for Chrome < 41', () => { + const userAgent = 'Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.28 Safari/537.36'; + expect(canInjectU2fApi(userAgent)).toBe(false); + }); + + it('returns true for Chrome >= 41', () => { + const userAgent = 'Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36'; + expect(canInjectU2fApi(userAgent)).toBe(true); + }); + + it('returns false for Opera < 40', () => { + const userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36 OPR/32.0.1948.25'; + expect(canInjectU2fApi(userAgent)).toBe(false); + }); + + it('returns true for Opera >= 40', () => { + const userAgent = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 OPR/43.0.2442.991'; + expect(canInjectU2fApi(userAgent)).toBe(true); + }); + + it('returns false for Safari', () => { + const userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/603.2.4 (KHTML, like Gecko) Version/10.1.1 Safari/603.2.4'; + expect(canInjectU2fApi(userAgent)).toBe(false); + }); + + it('returns false for Chrome on Android', () => { + const userAgent = 'Mozilla/5.0 (Linux; Android 7.0; VS988 Build/NRD90U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3145.0 Mobile Safari/537.36'; + expect(canInjectU2fApi(userAgent)).toBe(false); + }); + + it('returns false for Chrome on iOS', () => { + const userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.75 Mobile/14E5239e Safari/602.1'; + expect(canInjectU2fApi(userAgent)).toBe(false); + }); + + it('returns false for Safari on iOS', () => { + const userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A356 Safari/604.1'; + expect(canInjectU2fApi(userAgent)).toBe(false); + }); + }); +}); diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_author_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_author_spec.js index f14d5f6f76c..db27aa144d6 100644 --- a/spec/javascripts/vue_mr_widget/components/mr_widget_author_spec.js +++ b/spec/javascripts/vue_mr_widget/components/mr_widget_author_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import authorComponent from '~/vue_merge_request_widget/components/mr_widget_author.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetAuthor', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js index 8c55622b15e..6784b498c29 100644 --- a/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js +++ b/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import authorTimeComponent from '~/vue_merge_request_widget/components/mr_widget_author_time.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetAuthorTime', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js index 13e5595bbfc..235c33fac0d 100644 --- a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js +++ b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import headerComponent from '~/vue_merge_request_widget/components/mr_widget_header.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetHeader', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_maintainer_edit_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_maintainer_edit_spec.js new file mode 100644 index 00000000000..cee22d5342a --- /dev/null +++ b/spec/javascripts/vue_mr_widget/components/mr_widget_maintainer_edit_spec.js @@ -0,0 +1,40 @@ +import Vue from 'vue'; +import maintainerEditComponent from '~/vue_merge_request_widget/components/mr_widget_maintainer_edit.vue'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; + +describe('RWidgetMaintainerEdit', () => { + let Component; + let vm; + + beforeEach(() => { + Component = Vue.extend(maintainerEditComponent); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('when a maintainer is allowed to edit', () => { + beforeEach(() => { + vm = mountComponent(Component, { + maintainerEditAllowed: true, + }); + }); + + it('it renders the message', () => { + expect(vm.$el.textContent.trim()).toEqual('Allows edits from maintainers'); + }); + }); + + describe('when a maintainer is not allowed to edit', () => { + beforeEach(() => { + vm = mountComponent(Component, { + maintainerEditAllowed: false, + }); + }); + + it('hides the message', () => { + expect(vm.$el.textContent.trim()).toEqual(''); + }); + }); +}); diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js index 07ed7f7f532..31710551399 100644 --- a/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js +++ b/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js @@ -1,5 +1,5 @@ import Vue from 'vue'; -import memoryUsageComponent from '~/vue_merge_request_widget/components/mr_widget_memory_usage'; +import MemoryUsage from '~/vue_merge_request_widget/components/memory_usage.vue'; import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service'; const url = '/root/acets-review-apps/environments/15/deployments/1/metrics'; @@ -34,7 +34,7 @@ const metricsMockData = { }; const createComponent = () => { - const Component = Vue.extend(memoryUsageComponent); + const Component = Vue.extend(MemoryUsage); return new Component({ el: document.createElement('div'), @@ -67,21 +67,9 @@ describe('MemoryUsage', () => { el = vm.$el; }); - describe('props', () => { - it('should have props with defaults', () => { - const { metricsUrl } = memoryUsageComponent.props; - const MetricsUrlTypeClass = metricsUrl.type; - - Vue.nextTick(() => { - expect(new MetricsUrlTypeClass() instanceof String).toBeTruthy(); - expect(metricsUrl.required).toBeTruthy(); - }); - }); - }); - describe('data', () => { it('should have default data', () => { - const data = memoryUsageComponent.data(); + const data = MemoryUsage.data(); expect(Array.isArray(data.memoryMetrics)).toBeTruthy(); expect(data.memoryMetrics.length).toBe(0); diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js index cc43639f576..367c499daaf 100644 --- a/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js +++ b/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetMergeHelp', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js index d7af956c9c1..431cb7f3913 100644 --- a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js +++ b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import pipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mockData from '../mock_data'; describe('MRWidgetPipeline', () => { diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_rebase_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_rebase_spec.js index 66ecaa316c8..b453d180a40 100644 --- a/spec/javascripts/vue_mr_widget/components/mr_widget_rebase_spec.js +++ b/spec/javascripts/vue_mr_widget/components/mr_widget_rebase_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import eventHub from '~/vue_merge_request_widget/event_hub'; import component from '~/vue_merge_request_widget/components/states/mr_widget_rebase.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Merge request widget rebase component', () => { let Component; diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_related_links_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_related_links_spec.js index 637bf483deb..5de6ac4079d 100644 --- a/spec/javascripts/vue_mr_widget/components/mr_widget_related_links_spec.js +++ b/spec/javascripts/vue_mr_widget/components/mr_widget_related_links_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import relatedLinksComponent from '~/vue_merge_request_widget/components/mr_widget_related_links.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetRelatedLinks', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_status_icon_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_status_icon_spec.js index c39fcda0071..0b25500caf4 100644 --- a/spec/javascripts/vue_mr_widget/components/mr_widget_status_icon_spec.js +++ b/spec/javascripts/vue_mr_widget/components/mr_widget_status_icon_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import mrStatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MR widget status icon component', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js index f98ebdb38e6..e818f87b4c8 100644 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js +++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import archivedComponent from '~/vue_merge_request_widget/components/states/mr_widget_archived.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetArchived', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js index 95c94e95e3a..d069dc3fcc6 100644 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js +++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import autoMergeFailedComponent from '~/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue'; import eventHub from '~/vue_merge_request_widget/event_hub'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetAutoMergeFailed', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_checking_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_checking_spec.js index 658cadddb81..658612aad3c 100644 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_checking_spec.js +++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_checking_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import checkingComponent from '~/vue_merge_request_widget/components/states/mr_widget_checking.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetChecking', () => { let Component; diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js index 51a34739ee9..0e3c134d3ac 100644 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js +++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import closedComponent from '~/vue_merge_request_widget/components/states/mr_widget_closed.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetClosed', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js index a7d69fdcdb9..5323523abc0 100644 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js +++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import conflictsComponent from '~/vue_merge_request_widget/components/states/mr_widget_conflicts.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetConflicts', () => { let Component; diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js index a57b9811e08..dd1d62cd4ed 100644 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js +++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import failedToMergeComponent from '~/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue'; import eventHub from '~/vue_merge_request_widget/event_hub'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetFailedToMerge', () => { let Component; diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js index df56c4e2c5c..dd907ad9015 100644 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js +++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import mwpsComponent from '~/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue'; import eventHub from '~/vue_merge_request_widget/event_hub'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetMergeWhenPipelineSucceeds', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js index 43a989393ba..c2c92d8ac56 100644 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js +++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import mergedComponent from '~/vue_merge_request_widget/components/states/mr_widget_merged.vue'; import eventHub from '~/vue_merge_request_widget/event_hub'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetMerged', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merging_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merging_spec.js index 0b2ed2d4086..d2d219e4bdb 100644 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merging_spec.js +++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merging_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import mergingComponent from '~/vue_merge_request_widget/components/states/mr_widget_merging.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetMerging', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js index 3d7f4abd420..34f76b39b28 100644 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js +++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import missingBranchComponent from '~/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetMissingBranch', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js index c89e863d904..9f8b96c118b 100644 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js +++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import notAllowedComponent from '~/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetNotAllowed', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js index edab26286bc..baacbc03fb1 100644 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js +++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import pipelineBlockedComponent from '~/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('MRWidgetPipelineBlocked', () => { let vm; diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js index 073f26cc78f..58f683fb3e6 100644 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js +++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js @@ -517,13 +517,9 @@ describe('MRWidgetReadyToMerge', () => { describe('Remove source branch checkbox', () => { describe('when user can merge but cannot delete branch', () => { - it('isRemoveSourceBranchButtonDisabled should be true', () => { - expect(vm.isRemoveSourceBranchButtonDisabled).toBe(true); - }); - it('should be disabled in the rendered output', () => { const checkboxElement = vm.$el.querySelector('#remove-source-branch-input'); - expect(checkboxElement.getAttribute('disabled')).toBe('disabled'); + expect(checkboxElement).toBeNull(); }); }); @@ -540,7 +536,7 @@ describe('MRWidgetReadyToMerge', () => { it('should be enabled in rendered output', () => { const checkboxElement = this.customVm.$el.querySelector('#remove-source-branch-input'); - expect(checkboxElement.getAttribute('disabled')).toBeNull(); + expect(checkboxElement).not.toBeNull(); }); }); }); @@ -549,12 +545,12 @@ describe('MRWidgetReadyToMerge', () => { describe('when allowed to merge', () => { beforeEach(() => { vm = createComponent({ - mr: { isMergeAllowed: true }, + mr: { isMergeAllowed: true, canRemoveSourceBranch: true }, }); }); it('shows remove source branch checkbox', () => { - expect(vm.$el.querySelector('.js-remove-source-branch-checkbox')).toBeDefined(); + expect(vm.$el.querySelector('.js-remove-source-branch-checkbox')).not.toBeNull(); }); it('shows modify commit message button', () => { diff --git a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js index 45035effe81..3e310980ffa 100644 --- a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js +++ b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js @@ -3,8 +3,8 @@ import mrWidgetOptions from '~/vue_merge_request_widget/mr_widget_options'; import eventHub from '~/vue_merge_request_widget/event_hub'; import notify from '~/lib/utils/notify'; import { stateKey } from '~/vue_merge_request_widget/stores/state_maps'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mockData from './mock_data'; -import mountComponent from '../helpers/vue_mount_component_helper'; const returnPromise = data => new Promise((resolve) => { resolve({ @@ -81,6 +81,29 @@ describe('mrWidgetOptions', () => { }); }); + describe('shouldRenderSourceBranchRemovalStatus', () => { + it('should return true when cannot remove source branch and branch will be removed', () => { + vm.mr.canRemoveSourceBranch = false; + vm.mr.shouldRemoveSourceBranch = true; + + expect(vm.shouldRenderSourceBranchRemovalStatus).toEqual(true); + }); + + it('should return false when can remove source branch and branch will be removed', () => { + vm.mr.canRemoveSourceBranch = true; + vm.mr.shouldRemoveSourceBranch = true; + + expect(vm.shouldRenderSourceBranchRemovalStatus).toEqual(false); + }); + + it('should return false when cannot remove source branch and branch will not be removed', () => { + vm.mr.canRemoveSourceBranch = false; + vm.mr.shouldRemoveSourceBranch = false; + + expect(vm.shouldRenderSourceBranchRemovalStatus).toEqual(false); + }); + }); + describe('shouldRenderDeployments', () => { it('should return false for the initial data', () => { expect(vm.shouldRenderDeployments).toBeFalsy(); @@ -349,6 +372,7 @@ describe('mrWidgetOptions', () => { expect(comps['mr-widget-pipeline-blocked']).toBeDefined(); expect(comps['mr-widget-pipeline-failed']).toBeDefined(); expect(comps['mr-widget-merge-when-pipeline-succeeds']).toBeDefined(); + expect(comps['mr-widget-maintainer-edit']).toBeDefined(); }); }); @@ -378,4 +402,22 @@ describe('mrWidgetOptions', () => { }); }); }); + + describe('rendering source branch removal status', () => { + it('renders when user cannot remove branch and branch should be removed', (done) => { + vm.mr.canRemoveSourceBranch = false; + vm.mr.shouldRemoveSourceBranch = true; + + vm.$nextTick(() => { + const tooltip = vm.$el.querySelector('.fa-question-circle'); + + expect(vm.$el.textContent).toContain('Removes source branch'); + expect(tooltip.getAttribute('data-original-title')).toBe( + 'A user with write access to the source branch selected this option', + ); + + done(); + }); + }); + }); }); diff --git a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js index 8762ce9903b..668742ebaee 100644 --- a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js +++ b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import ciBadge from '~/vue_shared/components/ci_badge_link.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('CI Badge Link Component', () => { let CIBadge; diff --git a/spec/javascripts/vue_shared/components/clipboard_button_spec.js b/spec/javascripts/vue_shared/components/clipboard_button_spec.js index 08e4e1f8337..f598b1afa74 100644 --- a/spec/javascripts/vue_shared/components/clipboard_button_spec.js +++ b/spec/javascripts/vue_shared/components/clipboard_button_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import clipboardButton from '~/vue_shared/components/clipboard_button.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('clipboard button', () => { let vm; @@ -10,6 +10,7 @@ describe('clipboard button', () => { vm = mountComponent(Component, { text: 'copy me', title: 'Copy this value into Clipboard!', + cssClass: 'btn-danger', }); }); @@ -28,4 +29,8 @@ describe('clipboard button', () => { expect(vm.$el.getAttribute('data-placement')).toEqual('top'); expect(vm.$el.getAttribute('data-container')).toEqual(null); }); + + it('should render provided classname', () => { + expect(vm.$el.classList).toContain('btn-danger'); + }); }); diff --git a/spec/javascripts/vue_shared/components/expand_button_spec.js b/spec/javascripts/vue_shared/components/expand_button_spec.js index a33ab689dd1..f19589d3b75 100644 --- a/spec/javascripts/vue_shared/components/expand_button_spec.js +++ b/spec/javascripts/vue_shared/components/expand_button_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import expandButton from '~/vue_shared/components/expand_button.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('expand button', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/file_icon_spec.js b/spec/javascripts/vue_shared/components/file_icon_spec.js index d99b17bdc79..f7581251bf0 100644 --- a/spec/javascripts/vue_shared/components/file_icon_spec.js +++ b/spec/javascripts/vue_shared/components/file_icon_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import fileIcon from '~/vue_shared/components/file_icon.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('File Icon component', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/gl_modal_spec.js b/spec/javascripts/vue_shared/components/gl_modal_spec.js index d6148cb785b..2805d9a7003 100644 --- a/spec/javascripts/vue_shared/components/gl_modal_spec.js +++ b/spec/javascripts/vue_shared/components/gl_modal_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import GlModal from '~/vue_shared/components/gl_modal.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; const modalComponent = Vue.extend(GlModal); diff --git a/spec/javascripts/vue_shared/components/header_ci_component_spec.js b/spec/javascripts/vue_shared/components/header_ci_component_spec.js index b378a0bd896..65499a2d730 100644 --- a/spec/javascripts/vue_shared/components/header_ci_component_spec.js +++ b/spec/javascripts/vue_shared/components/header_ci_component_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import headerCi from '~/vue_shared/components/header_ci_component.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Header CI Component', () => { let HeaderCi; diff --git a/spec/javascripts/vue_shared/components/icon_spec.js b/spec/javascripts/vue_shared/components/icon_spec.js index a22b6bd3a67..68d57ebc8f0 100644 --- a/spec/javascripts/vue_shared/components/icon_spec.js +++ b/spec/javascripts/vue_shared/components/icon_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import Icon from '~/vue_shared/components/icon.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Sprite Icon Component', function () { describe('Initialization', function () { diff --git a/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js b/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js index 24484796bf1..e6ed77dbb52 100644 --- a/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js +++ b/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import issueWarning from '~/vue_shared/components/issue/issue_warning.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; const IssueWarning = Vue.extend(issueWarning); diff --git a/spec/javascripts/vue_shared/components/loading_button_spec.js b/spec/javascripts/vue_shared/components/loading_button_spec.js index 49bf8ee6f7c..51c19cd4080 100644 --- a/spec/javascripts/vue_shared/components/loading_button_spec.js +++ b/spec/javascripts/vue_shared/components/loading_button_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import loadingButton from '~/vue_shared/components/loading_button.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; const LABEL = 'Hello'; diff --git a/spec/javascripts/vue_shared/components/memory_graph_spec.js b/spec/javascripts/vue_shared/components/memory_graph_spec.js index d46a3f2328e..73a69df019e 100644 --- a/spec/javascripts/vue_shared/components/memory_graph_spec.js +++ b/spec/javascripts/vue_shared/components/memory_graph_spec.js @@ -1,12 +1,12 @@ import Vue from 'vue'; -import memoryGraphComponent from '~/vue_shared/components/memory_graph'; +import MemoryGraph from '~/vue_shared/components/memory_graph.vue'; import { mockMetrics, mockMedian, mockMedianIndex } from './mock_data'; const defaultHeight = '25'; const defaultWidth = '100'; const createComponent = () => { - const Component = Vue.extend(memoryGraphComponent); + const Component = Vue.extend(MemoryGraph); return new Component({ el: document.createElement('div'), @@ -32,29 +32,9 @@ describe('MemoryGraph', () => { el = vm.$el; }); - describe('props', () => { - it('should have props with defaults', (done) => { - const { metrics, deploymentTime, width, height } = memoryGraphComponent.props; - - Vue.nextTick(() => { - const typeClassMatcher = (propItem, expectedType) => { - const PropItemTypeClass = propItem.type; - expect(new PropItemTypeClass() instanceof expectedType).toBeTruthy(); - expect(propItem.required).toBeTruthy(); - }; - - typeClassMatcher(metrics, Array); - typeClassMatcher(deploymentTime, Number); - typeClassMatcher(width, String); - typeClassMatcher(height, String); - done(); - }); - }); - }); - describe('data', () => { it('should have default data', () => { - const data = memoryGraphComponent.data(); + const data = MemoryGraph.data(); const dataValidator = (dataItem, expectedType, defaultVal) => { expect(typeof dataItem).toBe(expectedType); expect(dataItem).toBe(defaultVal); diff --git a/spec/javascripts/vue_shared/components/modal_spec.js b/spec/javascripts/vue_shared/components/modal_spec.js index a5f9c75be4e..8412df74f98 100644 --- a/spec/javascripts/vue_shared/components/modal_spec.js +++ b/spec/javascripts/vue_shared/components/modal_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import modal from '~/vue_shared/components/modal.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; const modalComponent = Vue.extend(modal); diff --git a/spec/javascripts/vue_shared/components/navigation_tabs_spec.js b/spec/javascripts/vue_shared/components/navigation_tabs_spec.js index 78e7d747b92..09fda95d7d3 100644 --- a/spec/javascripts/vue_shared/components/navigation_tabs_spec.js +++ b/spec/javascripts/vue_shared/components/navigation_tabs_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import navigationTabs from '~/vue_shared/components/navigation_tabs.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('navigation tabs component', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js b/spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js index 7b8e6c330c2..262571efcb8 100644 --- a/spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js +++ b/spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import placeholderSystemNote from '~/vue_shared/components/notes/placeholder_system_note.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('placeholder system note component', () => { let PlaceholderSystemNote; diff --git a/spec/javascripts/vue_shared/components/panel_resizer_spec.js b/spec/javascripts/vue_shared/components/panel_resizer_spec.js index 70ce3dffaba..8efcb54659d 100644 --- a/spec/javascripts/vue_shared/components/panel_resizer_spec.js +++ b/spec/javascripts/vue_shared/components/panel_resizer_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import panelResizer from '~/vue_shared/components/panel_resizer.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Panel Resizer component', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/pikaday_spec.js b/spec/javascripts/vue_shared/components/pikaday_spec.js index 47af9534737..b349e2a2a81 100644 --- a/spec/javascripts/vue_shared/components/pikaday_spec.js +++ b/spec/javascripts/vue_shared/components/pikaday_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import datePicker from '~/vue_shared/components/pikaday.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('datePicker', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js b/spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js index cce53193870..8c296af6652 100644 --- a/spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import collapsedCalendarIcon from '~/vue_shared/components/sidebar/collapsed_calendar_icon.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('collapsedCalendarIcon', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js b/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js index 2de108da2ac..9d60f9c758f 100644 --- a/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import collapsedGroupedDatePicker from '~/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('collapsedGroupedDatePicker', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js b/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js index 926e11b4d30..8840a5a9dbf 100644 --- a/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import sidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('sidebarDatePicker', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js new file mode 100644 index 00000000000..67056793a20 --- /dev/null +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js @@ -0,0 +1,81 @@ +import Vue from 'vue'; + +import LabelsSelect from '~/labels_select'; +import baseComponent from '~/vue_shared/components/sidebar/labels_select/base.vue'; + +import { mockConfig, mockLabels } from './mock_data'; + +import mountComponent from '../../../../helpers/vue_mount_component_helper'; + +const createComponent = (config = mockConfig) => { + const Component = Vue.extend(baseComponent); + + return mountComponent(Component, config); +}; + +describe('BaseComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('computed', () => { + describe('hiddenInputName', () => { + it('returns correct string when showCreate prop is `true`', () => { + expect(vm.hiddenInputName).toBe('issue[label_names][]'); + }); + + it('returns correct string when showCreate prop is `false`', () => { + const mockConfigNonEditable = Object.assign({}, mockConfig, { showCreate: false }); + const vmNonEditable = createComponent(mockConfigNonEditable); + expect(vmNonEditable.hiddenInputName).toBe('label_id[]'); + vmNonEditable.$destroy(); + }); + }); + }); + + describe('methods', () => { + describe('handleClick', () => { + it('emits onLabelClick event with label and list of labels as params', () => { + spyOn(vm, '$emit'); + vm.handleClick(mockLabels[0]); + expect(vm.$emit).toHaveBeenCalledWith('onLabelClick', mockLabels[0]); + }); + }); + }); + + describe('mounted', () => { + it('creates LabelsSelect object and assigns it to `labelsDropdon` as prop', () => { + expect(vm.labelsDropdown instanceof LabelsSelect).toBe(true); + }); + }); + + describe('template', () => { + it('renders component container element with classes `block labels`', () => { + expect(vm.$el.classList.contains('block')).toBe(true); + expect(vm.$el.classList.contains('labels')).toBe(true); + }); + + it('renders `.selectbox` element', () => { + expect(vm.$el.querySelector('.selectbox')).not.toBeNull(); + expect(vm.$el.querySelector('.selectbox').getAttribute('style')).toBe('display: none;'); + }); + + it('renders `.dropdown` element', () => { + expect(vm.$el.querySelector('.dropdown')).not.toBeNull(); + }); + + it('renders `.dropdown-menu` element', () => { + const dropdownMenuEl = vm.$el.querySelector('.dropdown-menu'); + expect(dropdownMenuEl).not.toBeNull(); + expect(dropdownMenuEl.querySelector('.dropdown-page-one')).not.toBeNull(); + expect(dropdownMenuEl.querySelector('.dropdown-content')).not.toBeNull(); + expect(dropdownMenuEl.querySelector('.dropdown-loading')).not.toBeNull(); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js new file mode 100644 index 00000000000..ec63ac306d0 --- /dev/null +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js @@ -0,0 +1,82 @@ +import Vue from 'vue'; + +import dropdownButtonComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_button.vue'; + +import { mockConfig, mockLabels } from './mock_data'; + +import mountComponent from '../../../../helpers/vue_mount_component_helper'; + +const componentConfig = Object.assign({}, mockConfig, { + fieldName: 'label_id[]', + labels: mockLabels, + showExtraOptions: false, +}); + +const createComponent = (config = componentConfig) => { + const Component = Vue.extend(dropdownButtonComponent); + + return mountComponent(Component, config); +}; + +describe('DropdownButtonComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('computed', () => { + describe('dropdownToggleText', () => { + it('returns text as `Label` when `labels` prop is empty array', () => { + const mockEmptyLabels = Object.assign({}, componentConfig, { labels: [] }); + const vmEmptyLabels = createComponent(mockEmptyLabels); + expect(vmEmptyLabels.dropdownToggleText).toBe('Label'); + vmEmptyLabels.$destroy(); + }); + + it('returns first label name with remaining label count when `labels` prop has more than one item', () => { + const mockMoreLabels = Object.assign({}, componentConfig, { + labels: mockLabels.concat(mockLabels), + }); + const vmMoreLabels = createComponent(mockMoreLabels); + expect(vmMoreLabels.dropdownToggleText).toBe('Foo Label +1 more'); + vmMoreLabels.$destroy(); + }); + + it('returns first label name when `labels` prop has only one item present', () => { + expect(vm.dropdownToggleText).toBe('Foo Label'); + }); + }); + }); + + describe('template', () => { + it('renders component container element of type `button`', () => { + expect(vm.$el.nodeName).toBe('BUTTON'); + }); + + it('renders component container element with required data attributes', () => { + expect(vm.$el.dataset.abilityName).toBe(vm.abilityName); + expect(vm.$el.dataset.fieldName).toBe(vm.fieldName); + expect(vm.$el.dataset.issueUpdate).toBe(vm.updatePath); + expect(vm.$el.dataset.labels).toBe(vm.labelsPath); + expect(vm.$el.dataset.namespacePath).toBe(vm.namespace); + expect(vm.$el.dataset.showAny).not.toBeDefined(); + }); + + it('renders dropdown toggle text element', () => { + const dropdownToggleTextEl = vm.$el.querySelector('.dropdown-toggle-text'); + expect(dropdownToggleTextEl).not.toBeNull(); + expect(dropdownToggleTextEl.innerText.trim()).toBe('Foo Label'); + }); + + it('renders dropdown button icon', () => { + const dropdownIconEl = vm.$el.querySelector('i.fa'); + expect(dropdownIconEl).not.toBeNull(); + expect(dropdownIconEl.classList.contains('fa-chevron-down')).toBe(true); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js new file mode 100644 index 00000000000..f07aefb2f87 --- /dev/null +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js @@ -0,0 +1,84 @@ +import Vue from 'vue'; + +import dropdownCreateLabelComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue'; + +import { mockSuggestedColors } from './mock_data'; + +import mountComponent from '../../../../helpers/vue_mount_component_helper'; + +const createComponent = () => { + const Component = Vue.extend(dropdownCreateLabelComponent); + + return mountComponent(Component); +}; + +describe('DropdownCreateLabelComponent', () => { + let vm; + + beforeEach(() => { + gon.suggested_label_colors = mockSuggestedColors; + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('created', () => { + it('initializes `suggestedColors` prop on component from `gon.suggested_color_labels` object', () => { + expect(vm.suggestedColors.length).toBe(mockSuggestedColors.length); + }); + }); + + describe('template', () => { + it('renders component container element with classes `dropdown-page-two dropdown-new-label`', () => { + expect(vm.$el.classList.contains('dropdown-page-two', 'dropdown-new-label')).toBe(true); + }); + + it('renders `Go back` button on component header', () => { + const backButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-back'); + expect(backButtonEl).not.toBe(null); + expect(backButtonEl.querySelector('.fa-arrow-left')).not.toBe(null); + }); + + it('renders component header element', () => { + const headerEl = vm.$el.querySelector('.dropdown-title'); + expect(headerEl.innerText.trim()).toContain('Create new label'); + }); + + it('renders `Close` button on component header', () => { + const closeButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close'); + expect(closeButtonEl).not.toBe(null); + expect(closeButtonEl.querySelector('.fa-times.dropdown-menu-close-icon')).not.toBe(null); + }); + + it('renders `Name new label` input element', () => { + expect(vm.$el.querySelector('.dropdown-labels-error.js-label-error')).not.toBe(null); + expect(vm.$el.querySelector('input#new_label_name.default-dropdown-input')).not.toBe(null); + }); + + it('renders suggested colors list elements', () => { + const colorsListContainerEl = vm.$el.querySelector('.suggest-colors.suggest-colors-dropdown'); + expect(colorsListContainerEl).not.toBe(null); + expect(colorsListContainerEl.querySelectorAll('a').length).toBe(mockSuggestedColors.length); + + const colorItemEl = colorsListContainerEl.querySelectorAll('a')[0]; + expect(colorItemEl.dataset.color).toBe(vm.suggestedColors[0]); + expect(colorItemEl.getAttribute('style')).toBe('background-color: rgb(0, 51, 204);'); + }); + + it('renders color input element', () => { + expect(vm.$el.querySelector('.dropdown-label-color-input')).not.toBe(null); + expect(vm.$el.querySelector('.dropdown-label-color-preview.js-dropdown-label-color-preview')).not.toBe(null); + expect(vm.$el.querySelector('input#new_label_color.default-dropdown-input')).not.toBe(null); + }); + + it('renders component action buttons', () => { + const createBtnEl = vm.$el.querySelector('button.js-new-label-btn'); + const cancelBtnEl = vm.$el.querySelector('button.js-cancel-label-btn'); + expect(createBtnEl).not.toBe(null); + expect(createBtnEl.innerText.trim()).toBe('Create'); + expect(cancelBtnEl.innerText.trim()).toBe('Cancel'); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js new file mode 100644 index 00000000000..809e0327b1c --- /dev/null +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js @@ -0,0 +1,42 @@ +import Vue from 'vue'; + +import dropdownFooterComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_footer.vue'; + +import { mockConfig } from './mock_data'; + +import mountComponent from '../../../../helpers/vue_mount_component_helper'; + +const createComponent = (labelsWebUrl = mockConfig.labelsWebUrl) => { + const Component = Vue.extend(dropdownFooterComponent); + + return mountComponent(Component, { + labelsWebUrl, + }); +}; + +describe('DropdownFooterComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('template', () => { + it('renders `Create new label` link element', () => { + const createLabelEl = vm.$el.querySelector('.dropdown-footer-list .dropdown-toggle-page'); + expect(createLabelEl).not.toBeNull(); + expect(createLabelEl.innerText.trim()).toBe('Create new label'); + }); + + it('renders `Manage labels` link element', () => { + const manageLabelsEl = vm.$el.querySelector('.dropdown-footer-list .dropdown-external-link'); + expect(manageLabelsEl).not.toBeNull(); + expect(manageLabelsEl.getAttribute('href')).toBe(vm.labelsWebUrl); + expect(manageLabelsEl.innerText.trim()).toBe('Manage labels'); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js new file mode 100644 index 00000000000..325fa47c957 --- /dev/null +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js @@ -0,0 +1,36 @@ +import Vue from 'vue'; + +import dropdownHeaderComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_header.vue'; + +import mountComponent from '../../../../helpers/vue_mount_component_helper'; + +const createComponent = () => { + const Component = Vue.extend(dropdownHeaderComponent); + + return mountComponent(Component); +}; + +describe('DropdownHeaderComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('template', () => { + it('renders header text element', () => { + const headerEl = vm.$el.querySelector('.dropdown-title span'); + expect(headerEl.innerText.trim()).toBe('Assign labels'); + }); + + it('renders `Close` button element', () => { + const closeBtnEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close'); + expect(closeBtnEl).not.toBeNull(); + expect(closeBtnEl.querySelector('.fa-times.dropdown-menu-close-icon')).not.toBeNull(); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input_spec.js new file mode 100644 index 00000000000..703b87498c7 --- /dev/null +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input_spec.js @@ -0,0 +1,37 @@ +import Vue from 'vue'; + +import dropdownHiddenInputComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue'; + +import { mockLabels } from './mock_data'; + +import mountComponent from '../../../../helpers/vue_mount_component_helper'; + +const createComponent = (name = 'label_id[]', label = mockLabels[0]) => { + const Component = Vue.extend(dropdownHiddenInputComponent); + + return mountComponent(Component, { + name, + label, + }); +}; + +describe('DropdownHiddenInputComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('template', () => { + it('renders input element of type `hidden`', () => { + expect(vm.$el.nodeName).toBe('INPUT'); + expect(vm.$el.getAttribute('type')).toBe('hidden'); + expect(vm.$el.getAttribute('name')).toBe(vm.name); + expect(vm.$el.getAttribute('value')).toBe(`${vm.label.id}`); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js new file mode 100644 index 00000000000..69e11d966c2 --- /dev/null +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js @@ -0,0 +1,39 @@ +import Vue from 'vue'; + +import dropdownSearchInputComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue'; + +import mountComponent from '../../../../helpers/vue_mount_component_helper'; + +const createComponent = () => { + const Component = Vue.extend(dropdownSearchInputComponent); + + return mountComponent(Component); +}; + +describe('DropdownSearchInputComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('template', () => { + it('renders input element with type `search`', () => { + const inputEl = vm.$el.querySelector('input.dropdown-input-field'); + expect(inputEl).not.toBeNull(); + expect(inputEl.getAttribute('type')).toBe('search'); + }); + + it('renders search icon element', () => { + expect(vm.$el.querySelector('.fa-search.dropdown-input-search')).not.toBeNull(); + }); + + it('renders clear search icon element', () => { + expect(vm.$el.querySelector('.fa-times.dropdown-input-clear.js-dropdown-input-clear')).not.toBeNull(); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js new file mode 100644 index 00000000000..c3580933072 --- /dev/null +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js @@ -0,0 +1,42 @@ +import Vue from 'vue'; + +import dropdownTitleComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_title.vue'; + +import mountComponent from '../../../../helpers/vue_mount_component_helper'; + +const createComponent = (canEdit = true) => { + const Component = Vue.extend(dropdownTitleComponent); + + return mountComponent(Component, { + canEdit, + }); +}; + +describe('DropdownTitleComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('template', () => { + it('renders title text', () => { + expect(vm.$el.classList.contains('title', 'hide-collapsed')).toBe(true); + expect(vm.$el.innerText.trim()).toContain('Labels'); + }); + + it('renders spinner icon element', () => { + expect(vm.$el.querySelector('.fa-spinner.fa-spin.block-loading')).not.toBeNull(); + }); + + it('renders `Edit` button element', () => { + const editBtnEl = vm.$el.querySelector('button.edit-link.js-sidebar-dropdown-toggle'); + expect(editBtnEl).not.toBeNull(); + expect(editBtnEl.innerText.trim()).toBe('Edit'); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js new file mode 100644 index 00000000000..93b42795bea --- /dev/null +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js @@ -0,0 +1,74 @@ +import Vue from 'vue'; + +import dropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue'; + +import { mockLabels } from './mock_data'; + +import mountComponent from '../../../../helpers/vue_mount_component_helper'; + +const createComponent = (labels = mockLabels) => { + const Component = Vue.extend(dropdownValueCollapsedComponent); + + return mountComponent(Component, { + labels, + }); +}; + +describe('DropdownValueCollapsedComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('computed', () => { + describe('labelsList', () => { + it('returns empty text when `labels` prop is empty array', () => { + const vmEmptyLabels = createComponent([]); + expect(vmEmptyLabels.labelsList).toBe(''); + vmEmptyLabels.$destroy(); + }); + + it('returns labels names separated by coma when `labels` prop has more than one item', () => { + const vmMoreLabels = createComponent(mockLabels.concat(mockLabels)); + expect(vmMoreLabels.labelsList).toBe('Foo Label, Foo Label'); + vmMoreLabels.$destroy(); + }); + + it('returns labels names separated by coma with remaining labels count and `and more` phrase when `labels` prop has more than five items', () => { + const mockMoreLabels = Object.assign([], mockLabels); + for (let i = 0; i < 6; i += 1) { + mockMoreLabels.unshift(mockLabels[0]); + } + + const vmMoreLabels = createComponent(mockMoreLabels); + expect(vmMoreLabels.labelsList).toBe('Foo Label, Foo Label, Foo Label, Foo Label, Foo Label, and 2 more'); + vmMoreLabels.$destroy(); + }); + + it('returns first label name when `labels` prop has only one item present', () => { + expect(vm.labelsList).toBe('Foo Label'); + }); + }); + }); + + describe('template', () => { + it('renders component container element with tooltip`', () => { + expect(vm.$el.dataset.placement).toBe('left'); + expect(vm.$el.dataset.container).toBe('body'); + expect(vm.$el.dataset.originalTitle).toBe(vm.labelsList); + }); + + it('renders tags icon element', () => { + expect(vm.$el.querySelector('.fa-tags')).not.toBeNull(); + }); + + it('renders labels count', () => { + expect(vm.$el.querySelector('span').innerText.trim()).toBe(`${vm.labels.length}`); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js new file mode 100644 index 00000000000..66e0957b431 --- /dev/null +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js @@ -0,0 +1,94 @@ +import Vue from 'vue'; + +import dropdownValueComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value.vue'; + +import { mockConfig, mockLabels } from './mock_data'; + +import mountComponent from '../../../../helpers/vue_mount_component_helper'; + +const createComponent = ( + labels = mockLabels, + labelFilterBasePath = mockConfig.labelFilterBasePath, +) => { + const Component = Vue.extend(dropdownValueComponent); + + return mountComponent(Component, { + labels, + labelFilterBasePath, + }); +}; + +describe('DropdownValueComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('computed', () => { + describe('isEmpty', () => { + it('returns true if `labels` prop is empty', () => { + const vmEmptyLabels = createComponent([]); + expect(vmEmptyLabels.isEmpty).toBe(true); + vmEmptyLabels.$destroy(); + }); + + it('returns false if `labels` prop is empty', () => { + expect(vm.isEmpty).toBe(false); + }); + }); + }); + + describe('methods', () => { + describe('labelFilterUrl', () => { + it('returns URL string starting with labelFilterBasePath and encoded label.title', () => { + expect(vm.labelFilterUrl({ + title: 'Foo bar', + })).toBe('/gitlab-org/my-project/issues?label_name[]=Foo%20bar'); + }); + }); + + describe('labelStyle', () => { + it('returns object with `color` & `backgroundColor` properties from label.textColor & label.color', () => { + const label = { + textColor: '#FFFFFF', + color: '#BADA55', + }; + const styleObj = vm.labelStyle(label); + + expect(styleObj.color).toBe(label.textColor); + expect(styleObj.backgroundColor).toBe(label.color); + }); + }); + }); + + describe('template', () => { + it('renders component container element with classes `hide-collapsed value issuable-show-labels`', () => { + expect(vm.$el.classList.contains('hide-collapsed', 'value', 'issuable-show-labels')).toBe(true); + }); + + it('render slot content inside component when `labels` prop is empty', () => { + const vmEmptyLabels = createComponent([]); + expect(vmEmptyLabels.$el.querySelector('.text-secondary').innerText.trim()).toBe(mockConfig.emptyValueText); + vmEmptyLabels.$destroy(); + }); + + it('renders label element with filter URL', () => { + expect(vm.$el.querySelector('a').getAttribute('href')).toBe('/gitlab-org/my-project/issues?label_name[]=Foo%20Label'); + }); + + it('renders label element with tooltip and styles based on label details', () => { + const labelEl = vm.$el.querySelector('a span.label.color-label'); + expect(labelEl).not.toBeNull(); + expect(labelEl.dataset.placement).toBe('bottom'); + expect(labelEl.dataset.container).toBe('body'); + expect(labelEl.dataset.originalTitle).toBe(mockLabels[0].description); + expect(labelEl.getAttribute('style')).toBe('background-color: rgb(186, 218, 85);'); + expect(labelEl.innerText.trim()).toBe(mockLabels[0].title); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data.js new file mode 100644 index 00000000000..e9008c29b22 --- /dev/null +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data.js @@ -0,0 +1,49 @@ +export const mockLabels = [ + { + id: 26, + title: 'Foo Label', + description: 'Foobar', + color: '#BADA55', + text_color: '#FFFFFF', + }, +]; + +export const mockSuggestedColors = [ + '#0033CC', + '#428BCA', + '#44AD8E', + '#A8D695', + '#5CB85C', + '#69D100', + '#004E00', + '#34495E', + '#7F8C8D', + '#A295D6', + '#5843AD', + '#8E44AD', + '#FFECDB', + '#AD4363', + '#D10069', + '#CC0033', + '#FF0000', + '#D9534F', + '#D1D100', + '#F0AD4E', + '#AD8D43', +]; + +export const mockConfig = { + showCreate: true, + abilityName: 'issue', + context: { + labels: mockLabels, + }, + namespace: 'gitlab-org', + updatePath: '/gitlab-org/my-project/issue/1', + labelsPath: '/gitlab-org/my-project/labels.json', + labelsWebUrl: '/gitlab-org/my-project/labels', + labelFilterBasePath: '/gitlab-org/my-project/issues', + canEdit: true, + suggestedColors: mockSuggestedColors, + emptyValueText: 'None', +}; diff --git a/spec/javascripts/vue_shared/components/sidebar/toggle_sidebar_spec.js b/spec/javascripts/vue_shared/components/sidebar/toggle_sidebar_spec.js index 752a9e89d50..c911a129173 100644 --- a/spec/javascripts/vue_shared/components/sidebar/toggle_sidebar_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/toggle_sidebar_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import toggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('toggleSidebar', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js b/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js index a5db0b2c59e..bbd50863069 100644 --- a/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js +++ b/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Skeleton loading container', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js index 6940b04573e..de3bf667fb3 100644 --- a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js +++ b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import stackedProgressBarComponent from '~/vue_shared/components/stacked_progress_bar.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; const createComponent = (config) => { const Component = Vue.extend(stackedProgressBarComponent); diff --git a/spec/javascripts/vue_shared/components/toggle_button_spec.js b/spec/javascripts/vue_shared/components/toggle_button_spec.js index 859995d33fa..71952cc39e0 100644 --- a/spec/javascripts/vue_shared/components/toggle_button_spec.js +++ b/spec/javascripts/vue_shared/components/toggle_button_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import toggleButton from '~/vue_shared/components/toggle_button.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Toggle Button', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js index aa93134f2dd..446f025c127 100644 --- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js +++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import { placeholderImage } from '~/lazy_loader'; import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; const DEFAULT_PROPS = { size: 99, |