diff options
Diffstat (limited to 'spec/frontend/registry/explorer/pages/list_spec.js')
| -rw-r--r-- | spec/frontend/registry/explorer/pages/list_spec.js | 341 |
1 files changed, 218 insertions, 123 deletions
diff --git a/spec/frontend/registry/explorer/pages/list_spec.js b/spec/frontend/registry/explorer/pages/list_spec.js index b24422adb03..7d32a667011 100644 --- a/spec/frontend/registry/explorer/pages/list_spec.js +++ b/spec/frontend/registry/explorer/pages/list_spec.js @@ -1,5 +1,7 @@ -import { shallowMount } from '@vue/test-utils'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import VueApollo from 'vue-apollo'; import { GlSkeletonLoader, GlSprintf, GlAlert, GlSearchBoxByClick } from '@gitlab/ui'; +import createMockApollo from 'jest/helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; import Tracking from '~/tracking'; import component from '~/registry/explorer/pages/list.vue'; @@ -9,27 +11,35 @@ import ProjectEmptyState from '~/registry/explorer/components/list_page/project_ import RegistryHeader from '~/registry/explorer/components/list_page/registry_header.vue'; import ImageList from '~/registry/explorer/components/list_page/image_list.vue'; import TitleArea from '~/vue_shared/components/registry/title_area.vue'; -import { createStore } from '~/registry/explorer/stores/'; -import { - SET_MAIN_LOADING, - SET_IMAGES_LIST_SUCCESS, - SET_PAGINATION, - SET_INITIAL_STATE, -} from '~/registry/explorer/stores/mutation_types'; + import { DELETE_IMAGE_SUCCESS_MESSAGE, DELETE_IMAGE_ERROR_MESSAGE, IMAGE_REPOSITORY_LIST_LABEL, SEARCH_PLACEHOLDER_TEXT, } from '~/registry/explorer/constants'; -import { imagesListResponse } from '../mock_data'; + +import getProjectContainerRepositoriesQuery from '~/registry/explorer/graphql/queries/get_project_container_repositories.query.graphql'; +import getGroupContainerRepositoriesQuery from '~/registry/explorer/graphql/queries/get_group_container_repositories.query.graphql'; +import deleteContainerRepositoryMutation from '~/registry/explorer/graphql/mutations/delete_container_repository.mutation.graphql'; + +import { + graphQLImageListMock, + graphQLImageDeleteMock, + deletedContainerRepository, + graphQLImageDeleteMockError, + graphQLEmptyImageListMock, + graphQLEmptyGroupImageListMock, + pageInfo, +} from '../mock_data'; import { GlModal, GlEmptyState } from '../stubs'; import { $toast } from '../../shared/mocks'; +const localVue = createLocalVue(); + describe('List Page', () => { let wrapper; - let dispatchSpy; - let store; + let apolloProvider; const findDeleteModal = () => wrapper.find(GlModal); const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader); @@ -47,9 +57,31 @@ describe('List Page', () => { const findSearchBox = () => wrapper.find(GlSearchBoxByClick); const findEmptySearchMessage = () => wrapper.find('[data-testid="emptySearch"]'); - const mountComponent = ({ mocks } = {}) => { + const waitForApolloRequestRender = async () => { + await waitForPromises(); + await wrapper.vm.$nextTick(); + }; + + const mountComponent = ({ + mocks, + resolver = jest.fn().mockResolvedValue(graphQLImageListMock), + groupResolver = jest.fn().mockResolvedValue(graphQLImageListMock), + mutationResolver = jest.fn().mockResolvedValue(graphQLImageDeleteMock), + config = {}, + } = {}) => { + localVue.use(VueApollo); + + const requestHandlers = [ + [getProjectContainerRepositoriesQuery, resolver], + [getGroupContainerRepositoriesQuery, groupResolver], + [deleteContainerRepositoryMutation, mutationResolver], + ]; + + apolloProvider = createMockApollo(requestHandlers); + wrapper = shallowMount(component, { - store, + localVue, + apolloProvider, stubs: { GlModal, GlEmptyState, @@ -64,42 +96,27 @@ describe('List Page', () => { }, ...mocks, }, + provide() { + return { + config, + }; + }, }); }; - beforeEach(() => { - store = createStore(); - dispatchSpy = jest.spyOn(store, 'dispatch'); - dispatchSpy.mockResolvedValue(); - store.commit(SET_IMAGES_LIST_SUCCESS, imagesListResponse.data); - store.commit(SET_PAGINATION, imagesListResponse.headers); - }); - afterEach(() => { wrapper.destroy(); }); - describe('API calls', () => { - it.each` - imageList | name | called - ${[]} | ${'foo'} | ${['requestImagesList']} - ${imagesListResponse.data} | ${undefined} | ${['requestImagesList']} - ${imagesListResponse.data} | ${'foo'} | ${undefined} - `( - 'with images equal $imageList and name $name dispatch calls $called', - ({ imageList, name, called }) => { - store.commit(SET_IMAGES_LIST_SUCCESS, imageList); - dispatchSpy.mockClear(); - mountComponent({ mocks: { $route: { name } } }); - - expect(dispatchSpy.mock.calls[0]).toEqual(called); - }, - ); - }); - - it('contains registry header', () => { + it('contains registry header', async () => { mountComponent(); + + await waitForApolloRequestRender(); + expect(findRegistryHeader().exists()).toBe(true); + expect(findRegistryHeader().props()).toMatchObject({ + imagesCount: 2, + }); }); describe('connection error', () => { @@ -109,88 +126,100 @@ describe('List Page', () => { helpPagePath: 'bar', }; - beforeEach(() => { - store.commit(SET_INITIAL_STATE, config); - mountComponent(); - }); - - afterEach(() => { - store.commit(SET_INITIAL_STATE, {}); - }); - it('should show an empty state', () => { + mountComponent({ config }); + expect(findEmptyState().exists()).toBe(true); }); it('empty state should have an svg-path', () => { - expect(findEmptyState().attributes('svg-path')).toBe(config.containersErrorImage); + mountComponent({ config }); + + expect(findEmptyState().props('svgPath')).toBe(config.containersErrorImage); }); it('empty state should have a description', () => { - expect(findEmptyState().html()).toContain('connection error'); + mountComponent({ config }); + + expect(findEmptyState().props('title')).toContain('connection error'); }); it('should not show the loading or default state', () => { + mountComponent({ config }); + expect(findSkeletonLoader().exists()).toBe(false); expect(findImageList().exists()).toBe(false); }); }); describe('isLoading is true', () => { - beforeEach(() => { - store.commit(SET_MAIN_LOADING, true); + it('shows the skeleton loader', () => { mountComponent(); - }); - - afterEach(() => store.commit(SET_MAIN_LOADING, false)); - it('shows the skeleton loader', () => { expect(findSkeletonLoader().exists()).toBe(true); }); it('imagesList is not visible', () => { + mountComponent(); + expect(findImageList().exists()).toBe(false); }); it('cli commands is not visible', () => { + mountComponent(); + expect(findCliCommands().exists()).toBe(false); }); }); describe('list is empty', () => { - beforeEach(() => { - store.commit(SET_IMAGES_LIST_SUCCESS, []); - mountComponent(); - return waitForPromises(); - }); + describe('project page', () => { + const resolver = jest.fn().mockResolvedValue(graphQLEmptyImageListMock); - it('cli commands is not visible', () => { - expect(findCliCommands().exists()).toBe(false); - }); + it('cli commands is not visible', async () => { + mountComponent({ resolver }); - it('project empty state is visible', () => { - expect(findProjectEmptyState().exists()).toBe(true); - }); + await waitForApolloRequestRender(); - describe('is group page is true', () => { - beforeEach(() => { - store.commit(SET_INITIAL_STATE, { isGroupPage: true }); - mountComponent(); + expect(findCliCommands().exists()).toBe(false); }); - afterEach(() => { - store.commit(SET_INITIAL_STATE, { isGroupPage: undefined }); + it('project empty state is visible', async () => { + mountComponent({ resolver }); + + await waitForApolloRequestRender(); + + expect(findProjectEmptyState().exists()).toBe(true); }); + }); + describe('group page', () => { + const groupResolver = jest.fn().mockResolvedValue(graphQLEmptyGroupImageListMock); + + const config = { + isGroupPage: true, + }; + + it('group empty state is visible', async () => { + mountComponent({ groupResolver, config }); + + await waitForApolloRequestRender(); - it('group empty state is visible', () => { expect(findGroupEmptyState().exists()).toBe(true); }); - it('cli commands is not visible', () => { + it('cli commands is not visible', async () => { + mountComponent({ groupResolver, config }); + + await waitForApolloRequestRender(); + expect(findCliCommands().exists()).toBe(false); }); - it('list header is not visible', () => { + it('list header is not visible', async () => { + mountComponent({ groupResolver, config }); + + await waitForApolloRequestRender(); + expect(findListHeader().exists()).toBe(false); }); }); @@ -198,55 +227,91 @@ describe('List Page', () => { describe('list is not empty', () => { describe('unfiltered state', () => { - beforeEach(() => { + it('quick start is visible', async () => { mountComponent(); - }); - it('quick start is visible', () => { + await waitForApolloRequestRender(); + expect(findCliCommands().exists()).toBe(true); }); - it('list component is visible', () => { + it('list component is visible', async () => { + mountComponent(); + + await waitForApolloRequestRender(); + expect(findImageList().exists()).toBe(true); }); - it('list header is visible', () => { + it('list header is visible', async () => { + mountComponent(); + + await waitForApolloRequestRender(); + const header = findListHeader(); expect(header.exists()).toBe(true); expect(header.text()).toBe(IMAGE_REPOSITORY_LIST_LABEL); }); describe('delete image', () => { - const itemToDelete = { path: 'bar' }; - it('should call deleteItem when confirming deletion', () => { - dispatchSpy.mockResolvedValue(); - findImageList().vm.$emit('delete', itemToDelete); - expect(wrapper.vm.itemToDelete).toEqual(itemToDelete); + const deleteImage = async () => { + await wrapper.vm.$nextTick(); + + findImageList().vm.$emit('delete', deletedContainerRepository); findDeleteModal().vm.$emit('ok'); - expect(store.dispatch).toHaveBeenCalledWith( - 'requestDeleteImage', - wrapper.vm.itemToDelete, + + await waitForApolloRequestRender(); + }; + + it('should call deleteItem when confirming deletion', async () => { + const mutationResolver = jest.fn().mockResolvedValue(graphQLImageDeleteMock); + mountComponent({ mutationResolver }); + + await deleteImage(); + + expect(wrapper.vm.itemToDelete).toEqual(deletedContainerRepository); + expect(mutationResolver).toHaveBeenCalledWith({ id: deletedContainerRepository.id }); + + const updatedImage = findImageList() + .props('images') + .find(i => i.id === deletedContainerRepository.id); + + expect(updatedImage.status).toBe(deletedContainerRepository.status); + }); + + it('should show a success alert when delete request is successful', async () => { + const mutationResolver = jest.fn().mockResolvedValue(graphQLImageDeleteMock); + mountComponent({ mutationResolver }); + + await deleteImage(); + + const alert = findDeleteAlert(); + expect(alert.exists()).toBe(true); + expect(alert.text().replace(/\s\s+/gm, ' ')).toBe( + DELETE_IMAGE_SUCCESS_MESSAGE.replace('%{title}', wrapper.vm.itemToDelete.path), ); }); - it('should show a success alert when delete request is successful', () => { - dispatchSpy.mockResolvedValue(); - findImageList().vm.$emit('delete', itemToDelete); - expect(wrapper.vm.itemToDelete).toEqual(itemToDelete); - return wrapper.vm.handleDeleteImage().then(() => { + describe('when delete request fails it shows an alert', () => { + it('user recoverable error', async () => { + const mutationResolver = jest.fn().mockResolvedValue(graphQLImageDeleteMockError); + mountComponent({ mutationResolver }); + + await deleteImage(); + const alert = findDeleteAlert(); expect(alert.exists()).toBe(true); expect(alert.text().replace(/\s\s+/gm, ' ')).toBe( - DELETE_IMAGE_SUCCESS_MESSAGE.replace('%{title}', wrapper.vm.itemToDelete.path), + DELETE_IMAGE_ERROR_MESSAGE.replace('%{title}', wrapper.vm.itemToDelete.path), ); }); - }); - it('should show an error alert when delete request fails', () => { - dispatchSpy.mockRejectedValue(); - findImageList().vm.$emit('delete', itemToDelete); - expect(wrapper.vm.itemToDelete).toEqual(itemToDelete); - return wrapper.vm.handleDeleteImage().then(() => { + it('network error', async () => { + const mutationResolver = jest.fn().mockRejectedValue(); + mountComponent({ mutationResolver }); + + await deleteImage(); + const alert = findDeleteAlert(); expect(alert.exists()).toBe(true); expect(alert.text().replace(/\s\s+/gm, ' ')).toBe( @@ -258,38 +323,68 @@ describe('List Page', () => { }); describe('search', () => { - it('has a search box element', () => { + const doSearch = async () => { + await waitForApolloRequestRender(); + findSearchBox().vm.$emit('submit', 'centos6'); + await wrapper.vm.$nextTick(); + }; + + it('has a search box element', async () => { mountComponent(); + + await waitForApolloRequestRender(); + const searchBox = findSearchBox(); expect(searchBox.exists()).toBe(true); expect(searchBox.attributes('placeholder')).toBe(SEARCH_PLACEHOLDER_TEXT); }); - it('performs a search', () => { - mountComponent(); - findSearchBox().vm.$emit('submit', 'foo'); - expect(store.dispatch).toHaveBeenCalledWith('requestImagesList', { - name: 'foo', - }); + it('performs a search', async () => { + const resolver = jest.fn().mockResolvedValue(graphQLImageListMock); + mountComponent({ resolver }); + + await doSearch(); + + expect(resolver).toHaveBeenCalledWith(expect.objectContaining({ name: 'centos6' })); }); - it('when search result is empty displays an empty search message', () => { - mountComponent(); - store.commit(SET_IMAGES_LIST_SUCCESS, []); - return wrapper.vm.$nextTick().then(() => { - expect(findEmptySearchMessage().exists()).toBe(true); - }); + it('when search result is empty displays an empty search message', async () => { + const resolver = jest.fn().mockResolvedValue(graphQLImageListMock); + mountComponent({ resolver }); + + resolver.mockResolvedValue(graphQLEmptyImageListMock); + + await doSearch(); + + expect(findEmptySearchMessage().exists()).toBe(true); }); }); describe('pagination', () => { - it('pageChange event triggers the appropriate store function', () => { - mountComponent(); - findImageList().vm.$emit('pageChange', 2); - expect(store.dispatch).toHaveBeenCalledWith('requestImagesList', { - pagination: { page: 2 }, - name: wrapper.vm.search, - }); + it('prev-page event triggers a fetchMore request', async () => { + const resolver = jest.fn().mockResolvedValue(graphQLImageListMock); + mountComponent({ resolver }); + + await waitForApolloRequestRender(); + + findImageList().vm.$emit('prev-page'); + + expect(resolver).toHaveBeenCalledWith( + expect.objectContaining({ first: null, before: pageInfo.startCursor }), + ); + }); + + it('next-page event triggers a fetchMore request', async () => { + const resolver = jest.fn().mockResolvedValue(graphQLImageListMock); + mountComponent({ resolver }); + + await waitForApolloRequestRender(); + + findImageList().vm.$emit('next-page'); + + expect(resolver).toHaveBeenCalledWith( + expect.objectContaining({ after: pageInfo.endCursor }), + ); }); }); }); @@ -324,11 +419,11 @@ describe('List Page', () => { beforeEach(() => { jest.spyOn(Tracking, 'event'); - dispatchSpy.mockResolvedValue(); }); it('send an event when delete button is clicked', () => { findImageList().vm.$emit('delete', {}); + testTrackingCall('click_button'); }); |