diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-07 18:09:19 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-07 18:09:19 +0000 |
commit | 3290d46655f07d7ae3dca788d6df9f326972ffd8 (patch) | |
tree | 0d24713e1592cdd3583257f14a52d46a22539ed1 /spec/frontend | |
parent | c6b3ec3f56fa32a0e0ed3de0d0878d25f1adaddf (diff) | |
download | gitlab-ce-3290d46655f07d7ae3dca788d6df9f326972ffd8.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
8 files changed, 273 insertions, 138 deletions
diff --git a/spec/frontend/monitoring/components/charts/time_series_spec.js b/spec/frontend/monitoring/components/charts/time_series_spec.js index 84b74ef659e..f2478a583dc 100644 --- a/spec/frontend/monitoring/components/charts/time_series_spec.js +++ b/spec/frontend/monitoring/components/charts/time_series_spec.js @@ -65,7 +65,7 @@ describe('Time series component', () => { store = createStore(); store.commit( - `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`, + `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`, metricsDashboardPayload, ); diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js index f2c3b199481..f0b510a01f4 100644 --- a/spec/frontend/monitoring/components/dashboard_spec.js +++ b/spec/frontend/monitoring/components/dashboard_spec.js @@ -202,7 +202,7 @@ describe('Dashboard', () => { createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] }); wrapper.vm.$store.commit( - `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`, + `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`, metricsDashboardPayload, ); wrapper.vm.$store.commit( diff --git a/spec/frontend/monitoring/init_utils.js b/spec/frontend/monitoring/init_utils.js index 36c654ba7b3..55b6199fdfc 100644 --- a/spec/frontend/monitoring/init_utils.js +++ b/spec/frontend/monitoring/init_utils.js @@ -32,7 +32,7 @@ export const propsData = { export const setupComponentStore = wrapper => { wrapper.vm.$store.commit( - `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`, + `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`, metricsDashboardPayload, ); diff --git a/spec/frontend/monitoring/store/actions_spec.js b/spec/frontend/monitoring/store/actions_spec.js index 9f0b4d16fc1..7c559aed2c5 100644 --- a/spec/frontend/monitoring/store/actions_spec.js +++ b/spec/frontend/monitoring/store/actions_spec.js @@ -5,13 +5,13 @@ import axios from '~/lib/utils/axios_utils'; import statusCodes from '~/lib/utils/http_status'; import * as commonUtils from '~/lib/utils/common_utils'; import createFlash from '~/flash'; +import { defaultTimeRange } from '~/vue_shared/constants'; import store from '~/monitoring/stores'; import * as types from '~/monitoring/stores/mutation_types'; import { fetchDashboard, receiveMetricsDashboardSuccess, - receiveMetricsDashboardFailure, fetchDeploymentsData, fetchEnvironmentsData, fetchPrometheusMetrics, @@ -77,42 +77,40 @@ describe('Monitoring store actions', () => { }); describe('fetchDeploymentsData', () => { - it('commits RECEIVE_DEPLOYMENTS_DATA_SUCCESS on error', done => { - const dispatch = jest.fn(); + it('dispatches receiveDeploymentsDataSuccess on success', () => { const { state } = store; state.deploymentsEndpoint = '/success'; mock.onGet(state.deploymentsEndpoint).reply(200, { deployments: deploymentData, }); - fetchDeploymentsData({ + + return testAction( + fetchDeploymentsData, + null, state, - dispatch, - }) - .then(() => { - expect(dispatch).toHaveBeenCalledWith('receiveDeploymentsDataSuccess', deploymentData); - done(); - }) - .catch(done.fail); + [], + [{ type: 'receiveDeploymentsDataSuccess', payload: deploymentData }], + ); }); - it('commits RECEIVE_DEPLOYMENTS_DATA_FAILURE on error', done => { - const dispatch = jest.fn(); + it('dispatches receiveDeploymentsDataFailure on error', () => { const { state } = store; state.deploymentsEndpoint = '/error'; mock.onGet(state.deploymentsEndpoint).reply(500); - fetchDeploymentsData({ + + return testAction( + fetchDeploymentsData, + null, state, - dispatch, - }) - .then(() => { - expect(dispatch).toHaveBeenCalledWith('receiveDeploymentsDataFailure'); - done(); - }) - .catch(done.fail); + [], + [{ type: 'receiveDeploymentsDataFailure' }], + () => { + expect(createFlash).toHaveBeenCalled(); + }, + ); }); }); describe('fetchEnvironmentsData', () => { - const dispatch = jest.fn(); const { state } = store; state.projectPath = 'gitlab-org/gitlab-test'; @@ -164,15 +162,19 @@ describe('Monitoring store actions', () => { state.environmentsSearchTerm = searchTerm; mockMutate.mockReturnValue(Promise.resolve()); - return fetchEnvironmentsData({ + return testAction( + fetchEnvironmentsData, + null, state, - dispatch, - }).then(() => { - expect(mockMutate).toHaveBeenCalledWith(mutationVariables); - }); + [], + [{ type: 'requestEnvironmentsData' }, { type: 'receiveEnvironmentsDataFailure' }], + () => { + expect(mockMutate).toHaveBeenCalledWith(mutationVariables); + }, + ); }); - it('commits RECEIVE_ENVIRONMENTS_DATA_SUCCESS on success', () => { + it('dispatches receiveEnvironmentsDataSuccess on success', () => { jest.spyOn(gqClient, 'mutate').mockReturnValue( Promise.resolve({ data: { @@ -185,26 +187,31 @@ describe('Monitoring store actions', () => { }), ); - return fetchEnvironmentsData({ + return testAction( + fetchEnvironmentsData, + null, state, - dispatch, - }).then(() => { - expect(dispatch).toHaveBeenCalledWith( - 'receiveEnvironmentsDataSuccess', - parseEnvironmentsResponse(environmentData, state.projectPath), - ); - }); + [], + [ + { type: 'requestEnvironmentsData' }, + { + type: 'receiveEnvironmentsDataSuccess', + payload: parseEnvironmentsResponse(environmentData, state.projectPath), + }, + ], + ); }); - it('commits RECEIVE_ENVIRONMENTS_DATA_FAILURE on error', () => { + it('dispatches receiveEnvironmentsDataFailure on error', () => { jest.spyOn(gqClient, 'mutate').mockReturnValue(Promise.reject()); - return fetchEnvironmentsData({ + return testAction( + fetchEnvironmentsData, + null, state, - dispatch, - }).then(() => { - expect(dispatch).toHaveBeenCalledWith('receiveEnvironmentsDataFailure'); - }); + [], + [{ type: 'requestEnvironmentsData' }, { type: 'receiveEnvironmentsDataFailure' }], + ); }); }); @@ -266,27 +273,24 @@ describe('Monitoring store actions', () => { state = storeState(); state.dashboardEndpoint = '/dashboard'; }); - it('on success, dispatches receive and success actions', done => { - const params = {}; + + it('on success, dispatches receive and success actions', () => { document.body.dataset.page = 'projects:environments:metrics'; mock.onGet(state.dashboardEndpoint).reply(200, response); - fetchDashboard( - { - state, - commit, - dispatch, - }, - params, - ) - .then(() => { - expect(dispatch).toHaveBeenCalledWith('requestMetricsDashboard'); - expect(dispatch).toHaveBeenCalledWith('receiveMetricsDashboardSuccess', { - response, - params, - }); - done(); - }) - .catch(done.fail); + + return testAction( + fetchDashboard, + null, + state, + [], + [ + { type: 'requestMetricsDashboard' }, + { + type: 'receiveMetricsDashboardSuccess', + payload: { response }, + }, + ], + ); }); describe('on failure', () => { @@ -299,7 +303,7 @@ describe('Monitoring store actions', () => { }; }); - it('dispatches a failure action', done => { + it('dispatches a failure', done => { result() .then(() => { expect(commit).toHaveBeenCalledWith( @@ -351,31 +355,22 @@ describe('Monitoring store actions', () => { let commit; let dispatch; let state; + beforeEach(() => { commit = jest.fn(); dispatch = jest.fn(); state = storeState(); }); - it('stores groups ', () => { - const params = {}; + + it('stores groups', () => { const response = metricsDashboardResponse; - receiveMetricsDashboardSuccess( - { - state, - commit, - dispatch, - }, - { - response, - params, - }, - ); + receiveMetricsDashboardSuccess({ state, commit, dispatch }, { response }); expect(commit).toHaveBeenCalledWith( - types.RECEIVE_METRICS_DATA_SUCCESS, + types.RECEIVE_METRICS_DASHBOARD_SUCCESS, metricsDashboardResponse.dashboard, ); - expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetrics', params); + expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetrics'); }); it('sets the dashboards loaded from the repository', () => { const params = {}; @@ -395,29 +390,7 @@ describe('Monitoring store actions', () => { expect(commit).toHaveBeenCalledWith(types.SET_ALL_DASHBOARDS, dashboardGitResponse); }); }); - describe('receiveMetricsDashboardFailure', () => { - let commit; - beforeEach(() => { - commit = jest.fn(); - }); - it('commits failure action', () => { - receiveMetricsDashboardFailure({ - commit, - }); - expect(commit).toHaveBeenCalledWith(types.RECEIVE_METRICS_DATA_FAILURE, undefined); - }); - it('commits failure action with error', () => { - receiveMetricsDashboardFailure( - { - commit, - }, - 'uh-oh', - ); - expect(commit).toHaveBeenCalledWith(types.RECEIVE_METRICS_DATA_FAILURE, 'uh-oh'); - }); - }); describe('fetchPrometheusMetrics', () => { - const params = {}; let commit; let dispatch; let state; @@ -427,13 +400,15 @@ describe('Monitoring store actions', () => { commit = jest.fn(); dispatch = jest.fn(); state = storeState(); + + state.timeRange = defaultTimeRange; }); it('commits empty state when state.groups is empty', done => { const getters = { metricsWithData: () => [], }; - fetchPrometheusMetrics({ state, commit, dispatch, getters }, params) + fetchPrometheusMetrics({ state, commit, dispatch, getters }) .then(() => { expect(Tracking.event).toHaveBeenCalledWith( document.body.dataset.page, @@ -444,7 +419,9 @@ describe('Monitoring store actions', () => { value: 0, }, ); - expect(dispatch).not.toHaveBeenCalled(); + expect(dispatch).toHaveBeenCalledTimes(1); + expect(dispatch).toHaveBeenCalledWith('fetchDeploymentsData'); + expect(createFlash).not.toHaveBeenCalled(); done(); }) @@ -460,11 +437,15 @@ describe('Monitoring store actions', () => { metricsWithData: () => [metric.id], }; - fetchPrometheusMetrics({ state, commit, dispatch, getters }, params) + fetchPrometheusMetrics({ state, commit, dispatch, getters }) .then(() => { expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetric', { metric, - params, + defaultQueryParams: { + start_time: expect.any(String), + end_time: expect.any(String), + step: expect.any(Number), + }, }); expect(Tracking.event).toHaveBeenCalledWith( @@ -487,16 +468,22 @@ describe('Monitoring store actions', () => { state.dashboard.panelGroups = metricsDashboardViewModel.panelGroups; const metric = state.dashboard.panelGroups[0].panels[0].metrics[0]; + dispatch.mockResolvedValueOnce(); // fetchDeploymentsData // Mock having one out of four metrics failing dispatch.mockRejectedValueOnce(new Error('Error fetching this metric')); dispatch.mockResolvedValue(); - fetchPrometheusMetrics({ state, commit, dispatch }, params) + fetchPrometheusMetrics({ state, commit, dispatch }) .then(() => { - expect(dispatch).toHaveBeenCalledTimes(9); // one per metric + expect(dispatch).toHaveBeenCalledTimes(10); // one per metric plus 1 for deployments + expect(dispatch).toHaveBeenCalledWith('fetchDeploymentsData'); expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetric', { metric, - params, + defaultQueryParams: { + start_time: expect.any(String), + end_time: expect.any(String), + step: expect.any(Number), + }, }); expect(createFlash).toHaveBeenCalledTimes(1); @@ -508,9 +495,10 @@ describe('Monitoring store actions', () => { }); }); describe('fetchPrometheusMetric', () => { - const params = { + const defaultQueryParams = { start_time: '2019-08-06T12:40:02.184Z', end_time: '2019-08-06T20:40:02.184Z', + step: 60, }; let metric; let state; @@ -532,7 +520,7 @@ describe('Monitoring store actions', () => { testAction( fetchPrometheusMetric, - { metric, params }, + { metric, defaultQueryParams }, state, [ { @@ -569,7 +557,7 @@ describe('Monitoring store actions', () => { testAction( fetchPrometheusMetric, - { metric, params }, + { metric, defaultQueryParams }, state, [ { @@ -611,7 +599,7 @@ describe('Monitoring store actions', () => { testAction( fetchPrometheusMetric, - { metric, params }, + { metric, defaultQueryParams }, state, [ { @@ -646,7 +634,7 @@ describe('Monitoring store actions', () => { testAction( fetchPrometheusMetric, - { metric, params }, + { metric, defaultQueryParams }, state, [ { @@ -682,7 +670,7 @@ describe('Monitoring store actions', () => { testAction( fetchPrometheusMetric, - { metric, params }, + { metric, defaultQueryParams }, state, [ { diff --git a/spec/frontend/monitoring/store/getters_spec.js b/spec/frontend/monitoring/store/getters_spec.js index bc62ada1034..40341d32cf5 100644 --- a/spec/frontend/monitoring/store/getters_spec.js +++ b/spec/frontend/monitoring/store/getters_spec.js @@ -51,7 +51,7 @@ describe('Monitoring store Getters', () => { setupState({ dashboard: { panelGroups: [] }, }); - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload); groups = state.dashboard.panelGroups; }); @@ -60,21 +60,21 @@ describe('Monitoring store Getters', () => { }); it('on an empty metric with no result, returns NO_DATA', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload); mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedEmptyThroughputResult); expect(getMetricStates()).toEqual([metricStates.NO_DATA]); }); it('on a metric with a result, returns OK', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload); mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture); expect(getMetricStates()).toEqual([metricStates.OK]); }); it('on a metric with an error, returns an error', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload); mutations[types.RECEIVE_METRIC_RESULT_FAILURE](state, { metricId: groups[0].panels[0].metrics[0].metricId, }); @@ -83,7 +83,7 @@ describe('Monitoring store Getters', () => { }); it('on multiple metrics with results, returns OK', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload); mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture); mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixtureStatusCode); @@ -94,7 +94,7 @@ describe('Monitoring store Getters', () => { expect(getMetricStates(state.dashboard.panelGroups[2].key)).toEqual([]); }); it('on multiple metrics errors', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload); mutations[types.RECEIVE_METRIC_RESULT_FAILURE](state, { metricId: groups[0].panels[0].metrics[0].metricId, @@ -113,7 +113,7 @@ describe('Monitoring store Getters', () => { }); it('on multiple metrics with errors', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload); // An success in 1 group mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture); @@ -175,27 +175,27 @@ describe('Monitoring store Getters', () => { }); it('no loaded metric returns empty', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload); expect(metricsWithData()).toEqual([]); }); it('an empty metric, returns empty', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload); mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedEmptyThroughputResult); expect(metricsWithData()).toEqual([]); }); it('a metric with results, it returns a metric', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload); mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture); expect(metricsWithData()).toEqual([mockedQueryResultFixture.metricId]); }); it('multiple metrics with results, it return multiple metrics', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload); mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture); mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixtureStatusCode); @@ -206,7 +206,7 @@ describe('Monitoring store Getters', () => { }); it('multiple metrics with results, it returns metrics filtered by group', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, metricsDashboardPayload); mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture); mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixtureStatusCode); @@ -291,7 +291,7 @@ describe('Monitoring store Getters', () => { }); it('return no metrics when dashboard is not persisted', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, mockData); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, mockData); metricsSavedToDb = getters.metricsSavedToDb(state); expect(metricsSavedToDb).toEqual([]); @@ -304,7 +304,7 @@ describe('Monitoring store Getters', () => { metric.metric_id = id; - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, mockData); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, mockData); metricsSavedToDb = getters.metricsSavedToDb(state); expect(metricsSavedToDb).toEqual([`${id}_${metric.id}`]); @@ -321,7 +321,7 @@ describe('Monitoring store Getters', () => { metric1.metric_id = id1; metric2.metric_id = id2; - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, mockData); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, mockData); metricsSavedToDb = getters.metricsSavedToDb(state); expect(metricsSavedToDb).toEqual([`${id1}_${metric1.id}`, `${id2}_${metric2.id}`]); diff --git a/spec/frontend/monitoring/store/mutations_spec.js b/spec/frontend/monitoring/store/mutations_spec.js index 6f1a81782f3..21a27a443af 100644 --- a/spec/frontend/monitoring/store/mutations_spec.js +++ b/spec/frontend/monitoring/store/mutations_spec.js @@ -20,7 +20,7 @@ describe('Monitoring mutations', () => { stateCopy = state(); }); - describe('RECEIVE_METRICS_DATA_SUCCESS', () => { + describe('RECEIVE_METRICS_DASHBOARD_SUCCESS', () => { let payload; const getGroups = () => stateCopy.dashboard.panelGroups; @@ -29,7 +29,7 @@ describe('Monitoring mutations', () => { payload = metricsDashboardPayload; }); it('adds a key to the group', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](stateCopy, payload); const groups = getGroups(); expect(groups[0].key).toBe('system-metrics-kubernetes-0'); @@ -37,7 +37,7 @@ describe('Monitoring mutations', () => { expect(groups[2].key).toBe('response-metrics-nginx-ingress-2'); }); it('normalizes values', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](stateCopy, payload); const expectedLabel = 'Pod average (MB)'; const { label, queryRange } = getGroups()[0].panels[2].metrics[0]; @@ -45,7 +45,7 @@ describe('Monitoring mutations', () => { expect(queryRange.length).toBeGreaterThan(0); }); it('contains six groups, with panels with a metric each', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](stateCopy, payload); const groups = getGroups(); @@ -61,7 +61,7 @@ describe('Monitoring mutations', () => { expect(groups[1].panels[0].metrics).toHaveLength(1); }); it('assigns metrics a metric id', () => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](stateCopy, payload); const groups = getGroups(); @@ -195,7 +195,7 @@ describe('Monitoring mutations', () => { describe('REQUEST_METRIC_RESULT', () => { beforeEach(() => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboard); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](stateCopy, dashboard); }); it('stores a loading state on a metric', () => { expect(stateCopy.showEmptyState).toBe(true); @@ -218,7 +218,7 @@ describe('Monitoring mutations', () => { describe('RECEIVE_METRIC_RESULT_SUCCESS', () => { beforeEach(() => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboard); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](stateCopy, dashboard); }); it('clears empty state', () => { expect(stateCopy.showEmptyState).toBe(true); @@ -251,7 +251,7 @@ describe('Monitoring mutations', () => { describe('RECEIVE_METRIC_RESULT_FAILURE', () => { beforeEach(() => { - mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, dashboard); + mutations[types.RECEIVE_METRICS_DASHBOARD_SUCCESS](stateCopy, dashboard); }); it('maintains the loading state when a metric fails', () => { expect(stateCopy.showEmptyState).toBe(true); diff --git a/spec/frontend/notes/components/sort_discussion_spec.js b/spec/frontend/notes/components/sort_discussion_spec.js index 724c77eee3d..575f1057db2 100644 --- a/spec/frontend/notes/components/sort_discussion_spec.js +++ b/spec/frontend/notes/components/sort_discussion_spec.js @@ -1,6 +1,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; import SortDiscussion from '~/notes/components/sort_discussion.vue'; +import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import createStore from '~/notes/stores'; import { ASC, DESC } from '~/notes/constants'; import Tracking from '~/tracking'; @@ -21,6 +22,8 @@ describe('Sort Discussion component', () => { }); }; + const findLocalStorageSync = () => wrapper.find(LocalStorageSync); + beforeEach(() => { store = createStore(); jest.spyOn(Tracking, 'event'); @@ -31,6 +34,22 @@ describe('Sort Discussion component', () => { wrapper = null; }); + describe('default', () => { + beforeEach(() => { + createComponent(); + }); + + it('has local storage sync', () => { + expect(findLocalStorageSync().exists()).toBe(true); + }); + + it('calls setDiscussionSortDirection when update is emitted', () => { + findLocalStorageSync().vm.$emit('input', ASC); + + expect(store.dispatch).toHaveBeenCalledWith('setDiscussionSortDirection', ASC); + }); + }); + describe('when asc', () => { describe('when the dropdown is clicked', () => { it('calls the right actions', () => { diff --git a/spec/frontend/vue_shared/components/local_storage_sync_spec.js b/spec/frontend/vue_shared/components/local_storage_sync_spec.js new file mode 100644 index 00000000000..5470171a21e --- /dev/null +++ b/spec/frontend/vue_shared/components/local_storage_sync_spec.js @@ -0,0 +1,128 @@ +import { shallowMount } from '@vue/test-utils'; +import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; + +describe('Local Storage Sync', () => { + let wrapper; + + const createComponent = ({ props = {}, slots = {} } = {}) => { + wrapper = shallowMount(LocalStorageSync, { + propsData: props, + slots, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + localStorage.clear(); + }); + + it('is a renderless component', () => { + const html = '<div class="test-slot"></div>'; + createComponent({ + props: { + storageKey: 'key', + }, + slots: { + default: html, + }, + }); + + expect(wrapper.html()).toBe(html); + }); + + describe('localStorage empty', () => { + const storageKey = 'issue_list_order'; + + it('does not emit input event', () => { + createComponent({ + props: { + storageKey, + value: 'ascending', + }, + }); + + expect(wrapper.emitted('input')).toBeFalsy(); + }); + + it('saves updated value to localStorage', () => { + createComponent({ + props: { + storageKey, + value: 'ascending', + }, + }); + + const newValue = 'descending'; + wrapper.setProps({ + value: newValue, + }); + + return wrapper.vm.$nextTick().then(() => { + expect(localStorage.getItem(storageKey)).toBe(newValue); + }); + }); + + it('does not save default value', () => { + const value = 'ascending'; + + createComponent({ + props: { + storageKey, + value, + }, + }); + + expect(localStorage.getItem(storageKey)).toBe(null); + }); + }); + + describe('localStorage has saved value', () => { + const storageKey = 'issue_list_order_by'; + const savedValue = 'last_updated'; + + beforeEach(() => { + localStorage.setItem(storageKey, savedValue); + }); + + it('emits input event with saved value', () => { + createComponent({ + props: { + storageKey, + value: 'ascending', + }, + }); + + expect(wrapper.emitted('input')[0][0]).toBe(savedValue); + }); + + it('does not overwrite localStorage with prop value', () => { + createComponent({ + props: { + storageKey, + value: 'created', + }, + }); + + expect(localStorage.getItem(storageKey)).toBe(savedValue); + }); + + it('updating the value updates localStorage', () => { + createComponent({ + props: { + storageKey, + value: 'created', + }, + }); + + const newValue = 'last_updated'; + wrapper.setProps({ + value: newValue, + }); + + return wrapper.vm.$nextTick().then(() => { + expect(localStorage.getItem(storageKey)).toBe(newValue); + }); + }); + }); +}); |