diff options
Diffstat (limited to 'spec/frontend/releases/components/releases_pagination_graphql_spec.js')
-rw-r--r-- | spec/frontend/releases/components/releases_pagination_graphql_spec.js | 175 |
1 files changed, 175 insertions, 0 deletions
diff --git a/spec/frontend/releases/components/releases_pagination_graphql_spec.js b/spec/frontend/releases/components/releases_pagination_graphql_spec.js new file mode 100644 index 00000000000..b01a28eb6c3 --- /dev/null +++ b/spec/frontend/releases/components/releases_pagination_graphql_spec.js @@ -0,0 +1,175 @@ +import Vuex from 'vuex'; +import { mount, createLocalVue } from '@vue/test-utils'; +import createStore from '~/releases/stores'; +import createListModule from '~/releases/stores/modules/list'; +import ReleasesPaginationGraphql from '~/releases/components/releases_pagination_graphql.vue'; +import { historyPushState } from '~/lib/utils/common_utils'; + +jest.mock('~/lib/utils/common_utils', () => ({ + ...jest.requireActual('~/lib/utils/common_utils'), + historyPushState: jest.fn(), +})); + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('~/releases/components/releases_pagination_graphql.vue', () => { + let wrapper; + let listModule; + + const cursors = { + startCursor: 'startCursor', + endCursor: 'endCursor', + }; + + const projectPath = 'my/project'; + + const createComponent = pageInfo => { + listModule = createListModule({ projectPath }); + + listModule.state.graphQlPageInfo = pageInfo; + + listModule.actions.fetchReleasesGraphQl = jest.fn(); + + wrapper = mount(ReleasesPaginationGraphql, { + store: createStore({ + modules: { + list: listModule, + }, + featureFlags: {}, + }), + localVue, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const findPrevButton = () => wrapper.find('[data-testid="prevButton"]'); + const findNextButton = () => wrapper.find('[data-testid="nextButton"]'); + + const expectDisabledPrev = () => { + expect(findPrevButton().attributes().disabled).toBe('disabled'); + }; + const expectEnabledPrev = () => { + expect(findPrevButton().attributes().disabled).toBe(undefined); + }; + const expectDisabledNext = () => { + expect(findNextButton().attributes().disabled).toBe('disabled'); + }; + const expectEnabledNext = () => { + expect(findNextButton().attributes().disabled).toBe(undefined); + }; + + describe('when there is only one page of results', () => { + beforeEach(() => { + createComponent({ + hasPreviousPage: false, + hasNextPage: false, + }); + }); + + it('does not render anything', () => { + expect(wrapper.isEmpty()).toBe(true); + }); + }); + + describe('when there is a next page, but not a previous page', () => { + beforeEach(() => { + createComponent({ + hasPreviousPage: false, + hasNextPage: true, + }); + }); + + it('renders a disabled "Prev" button', () => { + expectDisabledPrev(); + }); + + it('renders an enabled "Next" button', () => { + expectEnabledNext(); + }); + }); + + describe('when there is a previous page, but not a next page', () => { + beforeEach(() => { + createComponent({ + hasPreviousPage: true, + hasNextPage: false, + }); + }); + + it('renders a enabled "Prev" button', () => { + expectEnabledPrev(); + }); + + it('renders an disabled "Next" button', () => { + expectDisabledNext(); + }); + }); + + describe('when there is both a previous page and a next page', () => { + beforeEach(() => { + createComponent({ + hasPreviousPage: true, + hasNextPage: true, + }); + }); + + it('renders a enabled "Prev" button', () => { + expectEnabledPrev(); + }); + + it('renders an enabled "Next" button', () => { + expectEnabledNext(); + }); + }); + + describe('button behavior', () => { + beforeEach(() => { + createComponent({ + hasPreviousPage: true, + hasNextPage: true, + ...cursors, + }); + }); + + describe('next button behavior', () => { + beforeEach(() => { + findNextButton().trigger('click'); + }); + + it('calls fetchReleasesGraphQl with the correct after cursor', () => { + expect(listModule.actions.fetchReleasesGraphQl.mock.calls).toEqual([ + [expect.anything(), { after: cursors.endCursor }], + ]); + }); + + it('calls historyPushState with the new URL', () => { + expect(historyPushState.mock.calls).toEqual([ + [expect.stringContaining(`?after=${cursors.endCursor}`)], + ]); + }); + }); + + describe('previous button behavior', () => { + beforeEach(() => { + findPrevButton().trigger('click'); + }); + + it('calls fetchReleasesGraphQl with the correct before cursor', () => { + expect(listModule.actions.fetchReleasesGraphQl.mock.calls).toEqual([ + [expect.anything(), { before: cursors.startCursor }], + ]); + }); + + it('calls historyPushState with the new URL', () => { + expect(historyPushState.mock.calls).toEqual([ + [expect.stringContaining(`?before=${cursors.startCursor}`)], + ]); + }); + }); + }); +}); |