diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-06-16 18:25:58 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-06-16 18:25:58 +0000 |
commit | a5f4bba440d7f9ea47046a0a561d49adf0a1e6d4 (patch) | |
tree | fb69158581673816a8cd895f9d352dcb3c678b1e /spec/frontend/jobs | |
parent | d16b2e8639e99961de6ddc93909f3bb5c1445ba1 (diff) | |
download | gitlab-ce-a5f4bba440d7f9ea47046a0a561d49adf0a1e6d4.tar.gz |
Add latest changes from gitlab-org/gitlab@14-0-stable-eev14.0.0-rc42
Diffstat (limited to 'spec/frontend/jobs')
-rw-r--r-- | spec/frontend/jobs/components/table/job_table_app_spec.js | 90 |
1 files changed, 84 insertions, 6 deletions
diff --git a/spec/frontend/jobs/components/table/job_table_app_spec.js b/spec/frontend/jobs/components/table/job_table_app_spec.js index 9d1135e26c8..482d0df4e9a 100644 --- a/spec/frontend/jobs/components/table/job_table_app_spec.js +++ b/spec/frontend/jobs/components/table/job_table_app_spec.js @@ -1,4 +1,4 @@ -import { GlSkeletonLoader, GlAlert, GlEmptyState } from '@gitlab/ui'; +import { GlSkeletonLoader, GlAlert, GlEmptyState, GlPagination } from '@gitlab/ui'; import { createLocalVue, mount, shallowMount } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; @@ -25,6 +25,10 @@ describe('Job table app', () => { const findTabs = () => wrapper.findComponent(JobsTableTabs); const findAlert = () => wrapper.findComponent(GlAlert); const findEmptyState = () => wrapper.findComponent(GlEmptyState); + const findPagination = () => wrapper.findComponent(GlPagination); + + const findPrevious = () => findPagination().findAll('.page-item').at(0); + const findNext = () => findPagination().findAll('.page-item').at(1); const createMockApolloProvider = (handler) => { const requestHandlers = [[getJobsQuery, handler]]; @@ -32,8 +36,17 @@ describe('Job table app', () => { return createMockApollo(requestHandlers); }; - const createComponent = (handler = successHandler, mountFn = shallowMount) => { + const createComponent = ({ + handler = successHandler, + mountFn = shallowMount, + data = {}, + } = {}) => { wrapper = mountFn(JobsTableApp, { + data() { + return { + ...data, + }; + }, provide: { projectPath, }, @@ -52,6 +65,7 @@ describe('Job table app', () => { expect(findSkeletonLoader().exists()).toBe(true); expect(findTable().exists()).toBe(false); + expect(findPagination().exists()).toBe(false); }); }); @@ -65,9 +79,10 @@ describe('Job table app', () => { it('should display the jobs table with data', () => { expect(findTable().exists()).toBe(true); expect(findSkeletonLoader().exists()).toBe(false); + expect(findPagination().exists()).toBe(true); }); - it('should retfech jobs query on fetchJobsByStatus event', async () => { + it('should refetch jobs query on fetchJobsByStatus event', async () => { jest.spyOn(wrapper.vm.$apollo.queries.jobs, 'refetch').mockImplementation(jest.fn()); expect(wrapper.vm.$apollo.queries.jobs.refetch).toHaveBeenCalledTimes(0); @@ -78,9 +93,72 @@ describe('Job table app', () => { }); }); + describe('pagination', () => { + it('should disable the next page button on the last page', async () => { + createComponent({ + handler: successHandler, + mountFn: mount, + data: { + pagination: { + currentPage: 3, + }, + jobs: { + pageInfo: { + hasPreviousPage: true, + startCursor: 'abc', + endCursor: 'bcd', + }, + }, + }, + }); + + await wrapper.vm.$nextTick(); + + wrapper.setData({ + jobs: { + pageInfo: { + hasNextPage: false, + }, + }, + }); + + await wrapper.vm.$nextTick(); + + expect(findPrevious().exists()).toBe(true); + expect(findNext().exists()).toBe(true); + expect(findNext().classes('disabled')).toBe(true); + }); + + it('should disable the previous page button on the first page', async () => { + createComponent({ + handler: successHandler, + mountFn: mount, + data: { + pagination: { + currentPage: 1, + }, + jobs: { + pageInfo: { + hasNextPage: true, + hasPreviousPage: false, + startCursor: 'abc', + endCursor: 'bcd', + }, + }, + }, + }); + + await wrapper.vm.$nextTick(); + + expect(findPrevious().exists()).toBe(true); + expect(findPrevious().classes('disabled')).toBe(true); + expect(findNext().exists()).toBe(true); + }); + }); + describe('error state', () => { it('should show an alert if there is an error fetching the data', async () => { - createComponent(failedHandler); + createComponent({ handler: failedHandler }); await waitForPromises(); @@ -90,7 +168,7 @@ describe('Job table app', () => { describe('empty state', () => { it('should display empty state if there are no jobs and tab scope is null', async () => { - createComponent(emptyHandler, mount); + createComponent({ handler: emptyHandler, mountFn: mount }); await waitForPromises(); @@ -99,7 +177,7 @@ describe('Job table app', () => { }); it('should not display empty state if there are jobs and tab scope is not null', async () => { - createComponent(successHandler, mount); + createComponent({ handler: successHandler, mountFn: mount }); await waitForPromises(); |