diff options
Diffstat (limited to 'spec/frontend/import_projects/components/page_query_param_sync_spec.js')
-rw-r--r-- | spec/frontend/import_projects/components/page_query_param_sync_spec.js | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/spec/frontend/import_projects/components/page_query_param_sync_spec.js b/spec/frontend/import_projects/components/page_query_param_sync_spec.js new file mode 100644 index 00000000000..be19ecca1ba --- /dev/null +++ b/spec/frontend/import_projects/components/page_query_param_sync_spec.js @@ -0,0 +1,87 @@ +import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; +import { TEST_HOST } from 'helpers/test_constants'; + +import PageQueryParamSync from '~/import_projects/components/page_query_param_sync.vue'; + +describe('PageQueryParamSync', () => { + let originalPushState; + let originalAddEventListener; + let originalRemoveEventListener; + + const pushStateMock = jest.fn(); + const addEventListenerMock = jest.fn(); + const removeEventListenerMock = jest.fn(); + + beforeAll(() => { + window.location.search = ''; + originalPushState = window.pushState; + + window.history.pushState = pushStateMock; + + originalAddEventListener = window.addEventListener; + window.addEventListener = addEventListenerMock; + + originalRemoveEventListener = window.removeEventListener; + window.removeEventListener = removeEventListenerMock; + }); + + afterAll(() => { + window.history.pushState = originalPushState; + window.addEventListener = originalAddEventListener; + window.removeEventListener = originalRemoveEventListener; + }); + + let wrapper; + beforeEach(() => { + wrapper = shallowMount(PageQueryParamSync, { + propsData: { page: 3 }, + }); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('calls push state with page number when page is updated and differs from 1', async () => { + wrapper.setProps({ page: 2 }); + + await nextTick(); + + const { calls } = pushStateMock.mock; + expect(calls).toHaveLength(1); + expect(calls[0][2]).toBe(`${TEST_HOST}/?page=2`); + }); + + it('calls push state without page number when page is updated and is 1', async () => { + wrapper.setProps({ page: 1 }); + + await nextTick(); + + const { calls } = pushStateMock.mock; + expect(calls).toHaveLength(1); + expect(calls[0][2]).toBe(`${TEST_HOST}/`); + }); + + it('subscribes to popstate event on create', () => { + expect(addEventListenerMock).toHaveBeenCalledWith('popstate', expect.any(Function)); + }); + + it('unsubscribes from popstate event when destroyed', () => { + const [, fn] = addEventListenerMock.mock.calls[0]; + + wrapper.destroy(); + + expect(removeEventListenerMock).toHaveBeenCalledWith('popstate', fn); + }); + + it('emits popstate event when popstate is triggered', async () => { + const [, fn] = addEventListenerMock.mock.calls[0]; + + delete window.location; + window.location = new URL(`${TEST_HOST}/?page=5`); + fn(); + + expect(wrapper.emitted().popstate[0]).toStrictEqual([5]); + }); +}); |