diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/url_sync_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/url_sync_spec.js | 80 |
1 files changed, 48 insertions, 32 deletions
diff --git a/spec/frontend/vue_shared/components/url_sync_spec.js b/spec/frontend/vue_shared/components/url_sync_spec.js index acda1a64a75..30a7439579f 100644 --- a/spec/frontend/vue_shared/components/url_sync_spec.js +++ b/spec/frontend/vue_shared/components/url_sync_spec.js @@ -1,7 +1,10 @@ import { shallowMount } from '@vue/test-utils'; -import { historyPushState } from '~/lib/utils/common_utils'; +import { historyPushState, historyReplaceState } from '~/lib/utils/common_utils'; import { mergeUrlParams, setUrlParams } from '~/lib/utils/url_utility'; -import UrlSyncComponent, { URL_SET_PARAMS_STRATEGY } from '~/vue_shared/components/url_sync.vue'; +import UrlSyncComponent, { + URL_SET_PARAMS_STRATEGY, + HISTORY_REPLACE_UPDATE_METHOD, +} from '~/vue_shared/components/url_sync.vue'; jest.mock('~/lib/utils/url_utility', () => ({ mergeUrlParams: jest.fn((query, url) => `urlParams: ${JSON.stringify(query)} ${url}`), @@ -10,6 +13,7 @@ jest.mock('~/lib/utils/url_utility', () => ({ jest.mock('~/lib/utils/common_utils', () => ({ historyPushState: jest.fn(), + historyReplaceState: jest.fn(), })); describe('url sync component', () => { @@ -18,14 +22,12 @@ describe('url sync component', () => { const findButton = () => wrapper.find('button'); - const createComponent = ({ - query = mockQuery, - scopedSlots, - slots, - urlParamsUpdateStrategy, - } = {}) => { + const createComponent = ({ props = {}, scopedSlots, slots } = {}) => { wrapper = shallowMount(UrlSyncComponent, { - propsData: { query, ...(urlParamsUpdateStrategy && { urlParamsUpdateStrategy }) }, + propsData: { + query: mockQuery, + ...props, + }, scopedSlots, slots, }); @@ -35,32 +37,27 @@ describe('url sync component', () => { wrapper.destroy(); }); - const expectUrlSyncFactory = ( + const expectUrlSyncWithMergeUrlParams = ( query, times, - urlParamsUpdateStrategy, - urlOptions, - urlReturnValue, + mergeUrlParamsReturnValue, + historyMethod = historyPushState, ) => { - expect(urlParamsUpdateStrategy).toHaveBeenCalledTimes(times); - expect(urlParamsUpdateStrategy).toHaveBeenCalledWith(query, window.location.href, urlOptions); - - expect(historyPushState).toHaveBeenCalledTimes(times); - expect(historyPushState).toHaveBeenCalledWith(urlReturnValue); - }; + expect(mergeUrlParams).toHaveBeenCalledTimes(times); + expect(mergeUrlParams).toHaveBeenCalledWith(query, window.location.href, { + spreadArrays: true, + }); - const expectUrlSyncWithMergeUrlParams = (query, times, mergeUrlParamsReturnValue) => { - expectUrlSyncFactory( - query, - times, - mergeUrlParams, - { spreadArrays: true }, - mergeUrlParamsReturnValue, - ); + expect(historyMethod).toHaveBeenCalledTimes(times); + expect(historyMethod).toHaveBeenCalledWith(mergeUrlParamsReturnValue); }; const expectUrlSyncWithSetUrlParams = (query, times, setUrlParamsReturnValue) => { - expectUrlSyncFactory(query, times, setUrlParams, true, setUrlParamsReturnValue); + expect(setUrlParams).toHaveBeenCalledTimes(times); + expect(setUrlParams).toHaveBeenCalledWith(query, window.location.href, true, true, true); + + expect(historyPushState).toHaveBeenCalledTimes(times); + expect(historyPushState).toHaveBeenCalledWith(setUrlParamsReturnValue); }; describe('with query as a props', () => { @@ -86,13 +83,32 @@ describe('url sync component', () => { describe('with url-params-update-strategy equals to URL_SET_PARAMS_STRATEGY', () => { it('uses setUrlParams to generate URL', () => { createComponent({ - urlParamsUpdateStrategy: URL_SET_PARAMS_STRATEGY, + props: { + urlParamsUpdateStrategy: URL_SET_PARAMS_STRATEGY, + }, }); expectUrlSyncWithSetUrlParams(mockQuery, 1, setUrlParams.mock.results[0].value); }); }); + describe('with history-update-method equals to HISTORY_REPLACE_UPDATE_METHOD', () => { + it('uses historyReplaceState to update the URL', () => { + createComponent({ + props: { + historyUpdateMethod: HISTORY_REPLACE_UPDATE_METHOD, + }, + }); + + expectUrlSyncWithMergeUrlParams( + mockQuery, + 1, + mergeUrlParams.mock.results[0].value, + historyReplaceState, + ); + }); + }); + describe('with scoped slot', () => { const scopedSlots = { default: ` @@ -101,13 +117,13 @@ describe('url sync component', () => { }; it('renders the scoped slot', () => { - createComponent({ query: null, scopedSlots }); + createComponent({ props: { query: null }, scopedSlots }); expect(findButton().exists()).toBe(true); }); it('syncs the url with the scoped slots function', () => { - createComponent({ query: null, scopedSlots }); + createComponent({ props: { query: null }, scopedSlots }); findButton().trigger('click'); @@ -121,7 +137,7 @@ describe('url sync component', () => { }; it('renders the default slot', () => { - createComponent({ query: null, slots }); + createComponent({ props: { query: null }, slots }); expect(findButton().exists()).toBe(true); }); |