spec/frontend/import_projects/components/page_query_param_sync_spec.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
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]);
  });
});