diff options
Diffstat (limited to 'spec/frontend/import_entities/import_groups/components/import_table_spec.js')
-rw-r--r-- | spec/frontend/import_entities/import_groups/components/import_table_spec.js | 156 |
1 files changed, 151 insertions, 5 deletions
diff --git a/spec/frontend/import_entities/import_groups/components/import_table_spec.js b/spec/frontend/import_entities/import_groups/components/import_table_spec.js index cd184bb65cc..34e2a945333 100644 --- a/spec/frontend/import_entities/import_groups/components/import_table_spec.js +++ b/spec/frontend/import_entities/import_groups/components/import_table_spec.js @@ -1,6 +1,6 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlEmptyState, GlLoadingIcon, GlSearchBoxByClick, GlSprintf } from '@gitlab/ui'; import waitForPromises from 'helpers/wait_for_promises'; import createMockApollo from 'helpers/mock_apollo_helper'; import ImportTableRow from '~/import_entities/import_groups/components/import_table_row.vue'; @@ -8,6 +8,7 @@ import ImportTable from '~/import_entities/import_groups/components/import_table import setTargetNamespaceMutation from '~/import_entities/import_groups/graphql/mutations/set_target_namespace.mutation.graphql'; import setNewNameMutation from '~/import_entities/import_groups/graphql/mutations/set_new_name.mutation.graphql'; import importGroupMutation from '~/import_entities/import_groups/graphql/mutations/import_group.mutation.graphql'; +import PaginationLinks from '~/vue_shared/components/pagination_links.vue'; import { STATUSES } from '~/import_entities/constants'; @@ -20,6 +21,9 @@ describe('import table', () => { let wrapper; let apolloProvider; + const FAKE_GROUP = generateFakeEntry({ id: 1, status: STATUSES.NONE }); + const FAKE_PAGE_INFO = { page: 1, perPage: 20, total: 40, totalPages: 2 }; + const createComponent = ({ bulkImportSourceGroups }) => { apolloProvider = createMockApollo([], { Query: { @@ -34,6 +38,12 @@ describe('import table', () => { }); wrapper = shallowMount(ImportTable, { + propsData: { + sourceUrl: 'https://demo.host', + }, + stubs: { + GlSprintf, + }, localVue, apolloProvider, }); @@ -62,25 +72,50 @@ describe('import table', () => { expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); }); + it('renders message about empty state when no groups are available for import', async () => { + createComponent({ + bulkImportSourceGroups: () => ({ + nodes: [], + pageInfo: FAKE_PAGE_INFO, + }), + }); + await waitForPromises(); + + expect(wrapper.find(GlEmptyState).props().title).toBe('No groups available for import'); + }); + it('renders import row for each group in response', async () => { const FAKE_GROUPS = [ generateFakeEntry({ id: 1, status: STATUSES.NONE }), generateFakeEntry({ id: 2, status: STATUSES.FINISHED }), ]; createComponent({ - bulkImportSourceGroups: () => FAKE_GROUPS, + bulkImportSourceGroups: () => ({ + nodes: FAKE_GROUPS, + pageInfo: FAKE_PAGE_INFO, + }), }); await waitForPromises(); expect(wrapper.findAll(ImportTableRow)).toHaveLength(FAKE_GROUPS.length); }); - describe('converts row events to mutation invocations', () => { - const FAKE_GROUP = generateFakeEntry({ id: 1, status: STATUSES.NONE }); + it('does not render status string when result list is empty', async () => { + createComponent({ + bulkImportSourceGroups: jest.fn().mockResolvedValue({ + nodes: [], + pageInfo: FAKE_PAGE_INFO, + }), + }); + await waitForPromises(); + expect(wrapper.text()).not.toContain('Showing 1-0'); + }); + + describe('converts row events to mutation invocations', () => { beforeEach(() => { createComponent({ - bulkImportSourceGroups: () => [FAKE_GROUP], + bulkImportSourceGroups: () => ({ nodes: [FAKE_GROUP], pageInfo: FAKE_PAGE_INFO }), }); return waitForPromises(); }); @@ -100,4 +135,115 @@ describe('import table', () => { }); }); }); + + describe('pagination', () => { + const bulkImportSourceGroupsQueryMock = jest + .fn() + .mockResolvedValue({ nodes: [FAKE_GROUP], pageInfo: FAKE_PAGE_INFO }); + + beforeEach(() => { + createComponent({ + bulkImportSourceGroups: bulkImportSourceGroupsQueryMock, + }); + return waitForPromises(); + }); + + it('correctly passes pagination info from query', () => { + expect(wrapper.find(PaginationLinks).props().pageInfo).toStrictEqual(FAKE_PAGE_INFO); + }); + + it('updates page when page change is requested', async () => { + const REQUESTED_PAGE = 2; + wrapper.find(PaginationLinks).props().change(REQUESTED_PAGE); + + await waitForPromises(); + expect(bulkImportSourceGroupsQueryMock).toHaveBeenCalledWith( + expect.anything(), + expect.objectContaining({ page: REQUESTED_PAGE }), + expect.anything(), + expect.anything(), + ); + }); + + it('updates status text when page is changed', async () => { + const REQUESTED_PAGE = 2; + bulkImportSourceGroupsQueryMock.mockResolvedValue({ + nodes: [FAKE_GROUP], + pageInfo: { + page: 2, + total: 38, + perPage: 20, + totalPages: 2, + }, + }); + wrapper.find(PaginationLinks).props().change(REQUESTED_PAGE); + await waitForPromises(); + + expect(wrapper.text()).toContain('Showing 21-21 of 38'); + }); + }); + + describe('filters', () => { + const bulkImportSourceGroupsQueryMock = jest + .fn() + .mockResolvedValue({ nodes: [FAKE_GROUP], pageInfo: FAKE_PAGE_INFO }); + + beforeEach(() => { + createComponent({ + bulkImportSourceGroups: bulkImportSourceGroupsQueryMock, + }); + return waitForPromises(); + }); + + const findFilterInput = () => wrapper.find(GlSearchBoxByClick); + + it('properly passes filter to graphql query when search box is submitted', async () => { + createComponent({ + bulkImportSourceGroups: bulkImportSourceGroupsQueryMock, + }); + await waitForPromises(); + + const FILTER_VALUE = 'foo'; + findFilterInput().vm.$emit('submit', FILTER_VALUE); + await waitForPromises(); + + expect(bulkImportSourceGroupsQueryMock).toHaveBeenCalledWith( + expect.anything(), + expect.objectContaining({ filter: FILTER_VALUE }), + expect.anything(), + expect.anything(), + ); + }); + + it('updates status string when search box is submitted', async () => { + createComponent({ + bulkImportSourceGroups: bulkImportSourceGroupsQueryMock, + }); + await waitForPromises(); + + const FILTER_VALUE = 'foo'; + findFilterInput().vm.$emit('submit', FILTER_VALUE); + await waitForPromises(); + + expect(wrapper.text()).toContain('Showing 1-1 of 40 groups matching filter "foo"'); + }); + + it('properly resets filter in graphql query when search box is cleared', async () => { + const FILTER_VALUE = 'foo'; + findFilterInput().vm.$emit('submit', FILTER_VALUE); + await waitForPromises(); + + bulkImportSourceGroupsQueryMock.mockClear(); + await apolloProvider.defaultClient.resetStore(); + findFilterInput().vm.$emit('clear'); + await waitForPromises(); + + expect(bulkImportSourceGroupsQueryMock).toHaveBeenCalledWith( + expect.anything(), + expect.objectContaining({ filter: '' }), + expect.anything(), + expect.anything(), + ); + }); + }); }); |