diff options
Diffstat (limited to 'spec/frontend/registry/explorer/pages')
| -rw-r--r-- | spec/frontend/registry/explorer/pages/details_spec.js | 198 | ||||
| -rw-r--r-- | spec/frontend/registry/explorer/pages/index_spec.js | 36 | ||||
| -rw-r--r-- | spec/frontend/registry/explorer/pages/list_spec.js | 269 |
3 files changed, 315 insertions, 188 deletions
diff --git a/spec/frontend/registry/explorer/pages/details_spec.js b/spec/frontend/registry/explorer/pages/details_spec.js index 15aa5008413..93098403a28 100644 --- a/spec/frontend/registry/explorer/pages/details_spec.js +++ b/spec/frontend/registry/explorer/pages/details_spec.js @@ -1,15 +1,21 @@ import { mount } from '@vue/test-utils'; -import { GlTable, GlPagination, GlSkeletonLoader } from '@gitlab/ui'; +import { GlTable, GlPagination, GlSkeletonLoader, GlAlert, GlLink } from '@gitlab/ui'; import Tracking from '~/tracking'; import stubChildren from 'helpers/stub_children'; import component from '~/registry/explorer/pages/details.vue'; -import store from '~/registry/explorer/stores/'; -import { SET_MAIN_LOADING } from '~/registry/explorer/stores/mutation_types/'; +import { createStore } from '~/registry/explorer/stores/'; +import { + SET_MAIN_LOADING, + SET_INITIAL_STATE, + SET_TAGS_LIST_SUCCESS, + SET_TAGS_PAGINATION, +} from '~/registry/explorer/stores/mutation_types/'; import { DELETE_TAG_SUCCESS_MESSAGE, DELETE_TAG_ERROR_MESSAGE, DELETE_TAGS_SUCCESS_MESSAGE, DELETE_TAGS_ERROR_MESSAGE, + ADMIN_GARBAGE_COLLECTION_TIP, } from '~/registry/explorer/constants'; import { tagsListResponse } from '../mock_data'; import { GlModal } from '../stubs'; @@ -18,6 +24,7 @@ import { $toast } from '../../shared/mocks'; describe('Details Page', () => { let wrapper; let dispatchSpy; + let store; const findDeleteModal = () => wrapper.find(GlModal); const findPagination = () => wrapper.find(GlPagination); @@ -30,6 +37,8 @@ describe('Details Page', () => { const findAllCheckboxes = () => wrapper.findAll('.js-row-checkbox'); const findCheckedCheckboxes = () => findAllCheckboxes().filter(c => c.attributes('checked')); const findFirsTagColumn = () => wrapper.find('.js-tag-column'); + const findFirstTagNameText = () => wrapper.find('[data-testid="rowNameText"]'); + const findAlert = () => wrapper.find(GlAlert); const routeId = window.btoa(JSON.stringify({ name: 'foo', tags_path: 'bar' })); @@ -55,13 +64,17 @@ describe('Details Page', () => { }; beforeEach(() => { + store = createStore(); dispatchSpy = jest.spyOn(store, 'dispatch'); - store.dispatch('receiveTagsListSuccess', tagsListResponse); + dispatchSpy.mockResolvedValue(); + store.commit(SET_TAGS_LIST_SUCCESS, tagsListResponse.data); + store.commit(SET_TAGS_PAGINATION, tagsListResponse.headers); jest.spyOn(Tracking, 'event'); }); afterEach(() => { wrapper.destroy(); + wrapper = null; }); describe('when isLoading is true', () => { @@ -130,10 +143,6 @@ describe('Details Page', () => { }); describe('row checkbox', () => { - beforeEach(() => { - mountComponent(); - }); - it('if selected adds item to selectedItems', () => { findFirstRowItem('rowCheckbox').vm.$emit('change'); return wrapper.vm.$nextTick().then(() => { @@ -240,15 +249,24 @@ describe('Details Page', () => { }); }); - describe('tag cell', () => { + describe('name cell', () => { + it('tag column has a tooltip with the tag name', () => { + mountComponent(); + expect(findFirstTagNameText().attributes('title')).toBe(tagsListResponse.data[0].name); + }); + describe('on desktop viewport', () => { beforeEach(() => { mountComponent(); }); - it('has class w-25', () => { + it('table header has class w-25', () => { expect(findFirsTagColumn().classes()).toContain('w-25'); }); + + it('tag column has the mw-m class', () => { + expect(findFirstRowItem('rowName').classes()).toContain('mw-m'); + }); }); describe('on mobile viewport', () => { @@ -260,9 +278,28 @@ describe('Details Page', () => { }); }); - it('does not has class w-25', () => { + it('table header does not have class w-25', () => { expect(findFirsTagColumn().classes()).not.toContain('w-25'); }); + + it('tag column has the gl-justify-content-end class', () => { + expect(findFirstRowItem('rowName').classes()).toContain('gl-justify-content-end'); + }); + }); + }); + + describe('last updated cell', () => { + let timeCell; + + beforeEach(() => { + timeCell = findFirstRowItem('rowTime'); + }); + + it('displays the time in string format', () => { + expect(timeCell.text()).toBe('2 years ago'); + }); + it('has a tooltip timestamp', () => { + expect(timeCell.attributes('title')).toBe('Sep 19, 2017 1:45pm GMT+0000'); }); }); }); @@ -328,25 +365,9 @@ describe('Details Page', () => { }); // itemsToBeDeleted is not represented in the DOM, is used as parking variable between selected and deleted items expect(wrapper.vm.itemsToBeDeleted).toEqual([]); + expect(wrapper.vm.selectedItems).toEqual([]); expect(findCheckedCheckboxes()).toHaveLength(0); }); - - it('show success toast on successful delete', () => { - return wrapper.vm.handleSingleDelete(0).then(() => { - expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_TAG_SUCCESS_MESSAGE, { - type: 'success', - }); - }); - }); - - it('show error toast on erred delete', () => { - dispatchSpy.mockRejectedValue(); - return wrapper.vm.handleSingleDelete(0).then(() => { - expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_TAG_ERROR_MESSAGE, { - type: 'error', - }); - }); - }); }); describe('when multiple elements are selected', () => { @@ -365,23 +386,6 @@ describe('Details Page', () => { expect(wrapper.vm.itemsToBeDeleted).toEqual([]); expect(findCheckedCheckboxes()).toHaveLength(0); }); - - it('show success toast on successful delete', () => { - return wrapper.vm.handleMultipleDelete(0).then(() => { - expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_TAGS_SUCCESS_MESSAGE, { - type: 'success', - }); - }); - }); - - it('show error toast on erred delete', () => { - dispatchSpy.mockRejectedValue(); - return wrapper.vm.handleMultipleDelete(0).then(() => { - expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_TAGS_ERROR_MESSAGE, { - type: 'error', - }); - }); - }); }); }); @@ -395,4 +399,108 @@ describe('Details Page', () => { }); }); }); + + describe('Delete alert', () => { + const config = { + garbageCollectionHelpPagePath: 'foo', + }; + + describe('when the user is an admin', () => { + beforeEach(() => { + store.commit(SET_INITIAL_STATE, { ...config, isAdmin: true }); + }); + + afterEach(() => { + store.commit(SET_INITIAL_STATE, config); + }); + + describe.each` + deleteType | successTitle | errorTitle + ${'handleSingleDelete'} | ${DELETE_TAG_SUCCESS_MESSAGE} | ${DELETE_TAG_ERROR_MESSAGE} + ${'handleMultipleDelete'} | ${DELETE_TAGS_SUCCESS_MESSAGE} | ${DELETE_TAGS_ERROR_MESSAGE} + `('behaves correctly on $deleteType', ({ deleteType, successTitle, errorTitle }) => { + describe('when delete is successful', () => { + beforeEach(() => { + dispatchSpy.mockResolvedValue(); + mountComponent(); + return wrapper.vm[deleteType]('foo'); + }); + + it('alert exists', () => { + expect(findAlert().exists()).toBe(true); + }); + + it('alert body contains admin tip', () => { + expect( + findAlert() + .text() + .replace(/\s\s+/gm, ' '), + ).toBe(ADMIN_GARBAGE_COLLECTION_TIP.replace(/%{\w+}/gm, '')); + }); + + it('alert body contains link', () => { + const alertLink = findAlert().find(GlLink); + expect(alertLink.exists()).toBe(true); + expect(alertLink.attributes('href')).toBe(config.garbageCollectionHelpPagePath); + }); + + it('alert title is appropriate', () => { + expect(findAlert().attributes('title')).toBe(successTitle); + }); + }); + + describe('when delete is not successful', () => { + beforeEach(() => { + mountComponent(); + dispatchSpy.mockRejectedValue(); + return wrapper.vm[deleteType]('foo'); + }); + + it('alert exist and text is appropriate', () => { + expect(findAlert().exists()).toBe(true); + expect(findAlert().text()).toBe(errorTitle); + }); + }); + }); + }); + + describe.each` + deleteType | successTitle | errorTitle + ${'handleSingleDelete'} | ${DELETE_TAG_SUCCESS_MESSAGE} | ${DELETE_TAG_ERROR_MESSAGE} + ${'handleMultipleDelete'} | ${DELETE_TAGS_SUCCESS_MESSAGE} | ${DELETE_TAGS_ERROR_MESSAGE} + `( + 'when the user is not an admin alert behaves correctly on $deleteType', + ({ deleteType, successTitle, errorTitle }) => { + beforeEach(() => { + store.commit('SET_INITIAL_STATE', { ...config }); + }); + + describe('when delete is successful', () => { + beforeEach(() => { + dispatchSpy.mockResolvedValue(); + mountComponent(); + return wrapper.vm[deleteType]('foo'); + }); + + it('alert exist and text is appropriate', () => { + expect(findAlert().exists()).toBe(true); + expect(findAlert().text()).toBe(successTitle); + }); + }); + + describe('when delete is not successful', () => { + beforeEach(() => { + mountComponent(); + dispatchSpy.mockRejectedValue(); + return wrapper.vm[deleteType]('foo'); + }); + + it('alert exist and text is appropriate', () => { + expect(findAlert().exists()).toBe(true); + expect(findAlert().text()).toBe(errorTitle); + }); + }); + }, + ); + }); }); diff --git a/spec/frontend/registry/explorer/pages/index_spec.js b/spec/frontend/registry/explorer/pages/index_spec.js index f52e7d67866..b558727ed5e 100644 --- a/spec/frontend/registry/explorer/pages/index_spec.js +++ b/spec/frontend/registry/explorer/pages/index_spec.js @@ -1,62 +1,26 @@ import { shallowMount } from '@vue/test-utils'; -import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui'; import component from '~/registry/explorer/pages/index.vue'; import store from '~/registry/explorer/stores/'; describe('List Page', () => { let wrapper; - let dispatchSpy; const findRouterView = () => wrapper.find({ ref: 'router-view' }); - const findAlert = () => wrapper.find(GlAlert); - const findLink = () => wrapper.find(GlLink); const mountComponent = () => { wrapper = shallowMount(component, { store, stubs: { RouterView: true, - GlSprintf, }, }); }; beforeEach(() => { - dispatchSpy = jest.spyOn(store, 'dispatch'); mountComponent(); }); it('has a router view', () => { expect(findRouterView().exists()).toBe(true); }); - - describe('garbageCollectionTip alert', () => { - beforeEach(() => { - store.dispatch('setInitialState', { isAdmin: true, garbageCollectionHelpPagePath: 'foo' }); - store.dispatch('setShowGarbageCollectionTip', true); - }); - - afterEach(() => { - store.dispatch('setInitialState', {}); - store.dispatch('setShowGarbageCollectionTip', false); - }); - - it('is visible when the user is an admin and the user performed a delete action', () => { - expect(findAlert().exists()).toBe(true); - }); - - it('on dismiss disappears ', () => { - findAlert().vm.$emit('dismiss'); - expect(dispatchSpy).toHaveBeenCalledWith('setShowGarbageCollectionTip', false); - return wrapper.vm.$nextTick().then(() => { - expect(findAlert().exists()).toBe(false); - }); - }); - - it('contains a link to the docs', () => { - const link = findLink(); - expect(link.exists()).toBe(true); - expect(link.attributes('href')).toBe(store.state.config.garbageCollectionHelpPagePath); - }); - }); }); diff --git a/spec/frontend/registry/explorer/pages/list_spec.js b/spec/frontend/registry/explorer/pages/list_spec.js index f69b849521d..97742b9e9b3 100644 --- a/spec/frontend/registry/explorer/pages/list_spec.js +++ b/spec/frontend/registry/explorer/pages/list_spec.js @@ -1,47 +1,53 @@ -import VueRouter from 'vue-router'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; -import { GlPagination, GlSkeletonLoader, GlSprintf, GlAlert } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import { GlSkeletonLoader, GlSprintf, GlAlert, GlSearchBoxByClick } from '@gitlab/ui'; import Tracking from '~/tracking'; +import waitForPromises from 'helpers/wait_for_promises'; import component from '~/registry/explorer/pages/list.vue'; import QuickstartDropdown from '~/registry/explorer/components/quickstart_dropdown.vue'; import GroupEmptyState from '~/registry/explorer/components/group_empty_state.vue'; import ProjectEmptyState from '~/registry/explorer/components/project_empty_state.vue'; import ProjectPolicyAlert from '~/registry/explorer/components/project_policy_alert.vue'; -import store from '~/registry/explorer/stores/'; -import { SET_MAIN_LOADING } from '~/registry/explorer/stores/mutation_types/'; +import ImageList from '~/registry/explorer/components/image_list.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 { GlModal, GlEmptyState } from '../stubs'; import { $toast } from '../../shared/mocks'; -const localVue = createLocalVue(); -localVue.use(VueRouter); - describe('List Page', () => { let wrapper; let dispatchSpy; + let store; - const findDeleteBtn = () => wrapper.find({ ref: 'deleteImageButton' }); const findDeleteModal = () => wrapper.find(GlModal); const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader); const findImagesList = () => wrapper.find({ ref: 'imagesList' }); - const findRowItems = () => wrapper.findAll({ ref: 'rowItem' }); + const findEmptyState = () => wrapper.find(GlEmptyState); - const findDetailsLink = () => wrapper.find({ ref: 'detailsLink' }); - const findClipboardButton = () => wrapper.find({ ref: 'clipboardButton' }); - const findPagination = () => wrapper.find(GlPagination); + const findQuickStartDropdown = () => wrapper.find(QuickstartDropdown); const findProjectEmptyState = () => wrapper.find(ProjectEmptyState); const findGroupEmptyState = () => wrapper.find(GroupEmptyState); const findProjectPolicyAlert = () => wrapper.find(ProjectPolicyAlert); const findDeleteAlert = () => wrapper.find(GlAlert); + const findImageList = () => wrapper.find(ImageList); + const findListHeader = () => wrapper.find('[data-testid="listHeader"]'); + const findSearchBox = () => wrapper.find(GlSearchBoxByClick); + const findEmptySearchMessage = () => wrapper.find('[data-testid="emptySearch"]'); - beforeEach(() => { + const mountComponent = ({ mocks } = {}) => { wrapper = shallowMount(component, { - localVue, store, stubs: { GlModal, @@ -50,10 +56,20 @@ describe('List Page', () => { }, mocks: { $toast, + $route: { + name: 'foo', + }, + ...mocks, }, }); + }; + + beforeEach(() => { + store = createStore(); dispatchSpy = jest.spyOn(store, 'dispatch'); - store.dispatch('receiveImagesListSuccess', imagesListResponse); + dispatchSpy.mockResolvedValue(); + store.commit(SET_IMAGES_LIST_SUCCESS, imagesListResponse.data); + store.commit(SET_PAGINATION, imagesListResponse.headers); }); afterEach(() => { @@ -61,17 +77,38 @@ describe('List Page', () => { }); describe('Expiration policy notification', () => { + beforeEach(() => { + mountComponent(); + }); it('shows up on project page', () => { expect(findProjectPolicyAlert().exists()).toBe(true); }); it('does show up on group page', () => { - store.dispatch('setInitialState', { isGroupPage: true }); + store.commit(SET_INITIAL_STATE, { isGroupPage: true }); return wrapper.vm.$nextTick().then(() => { expect(findProjectPolicyAlert().exists()).toBe(false); }); }); }); + 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); + }, + ); + }); + describe('connection error', () => { const config = { characterError: true, @@ -79,12 +116,13 @@ describe('List Page', () => { helpPagePath: 'bar', }; - beforeAll(() => { - store.dispatch('setInitialState', config); + beforeEach(() => { + store.commit(SET_INITIAL_STATE, config); + mountComponent(); }); - afterAll(() => { - store.dispatch('setInitialState', {}); + afterEach(() => { + store.commit(SET_INITIAL_STATE, {}); }); it('should show an empty state', () => { @@ -106,9 +144,12 @@ describe('List Page', () => { }); describe('isLoading is true', () => { - beforeAll(() => store.commit(SET_MAIN_LOADING, true)); + beforeEach(() => { + store.commit(SET_MAIN_LOADING, true); + mountComponent(); + }); - afterAll(() => store.commit(SET_MAIN_LOADING, false)); + afterEach(() => store.commit(SET_MAIN_LOADING, false)); it('shows the skeleton loader', () => { expect(findSkeletonLoader().exists()).toBe(true); @@ -125,7 +166,9 @@ describe('List Page', () => { describe('list is empty', () => { beforeEach(() => { - store.dispatch('receiveImagesListSuccess', { data: [] }); + store.commit(SET_IMAGES_LIST_SUCCESS, []); + mountComponent(); + return waitForPromises(); }); it('quick start is not visible', () => { @@ -137,12 +180,13 @@ describe('List Page', () => { }); describe('is group page is true', () => { - beforeAll(() => { - store.dispatch('setInitialState', { isGroupPage: true }); + beforeEach(() => { + store.commit(SET_INITIAL_STATE, { isGroupPage: true }); + mountComponent(); }); - afterAll(() => { - store.dispatch('setInitialState', { isGroupPage: undefined }); + afterEach(() => { + store.commit(SET_INITIAL_STATE, { isGroupPage: undefined }); }); it('group empty state is visible', () => { @@ -152,50 +196,39 @@ describe('List Page', () => { it('quick start is not visible', () => { expect(findQuickStartDropdown().exists()).toBe(false); }); + + it('list header is not visible', () => { + expect(findListHeader().exists()).toBe(false); + }); }); }); describe('list is not empty', () => { - it('quick start is visible', () => { - expect(findQuickStartDropdown().exists()).toBe(true); - }); - - describe('listElement', () => { - let listElements; - let firstElement; - + describe('unfiltered state', () => { beforeEach(() => { - listElements = findRowItems(); - [firstElement] = store.state.images; + mountComponent(); }); - it('contains one list element for each image', () => { - expect(listElements.length).toBe(store.state.images.length); + it('quick start is visible', () => { + expect(findQuickStartDropdown().exists()).toBe(true); }); - it('contains a link to the details page', () => { - const link = findDetailsLink(); - expect(link.html()).toContain(firstElement.path); - expect(link.props('to').name).toBe('details'); + it('list component is visible', () => { + expect(findImageList().exists()).toBe(true); }); - it('contains a clipboard button', () => { - const button = findClipboardButton(); - expect(button.exists()).toBe(true); - expect(button.props('text')).toBe(firstElement.location); - expect(button.props('title')).toBe(firstElement.location); + it('list header is visible', () => { + const header = findListHeader(); + expect(header.exists()).toBe(true); + expect(header.text()).toBe(IMAGE_REPOSITORY_LIST_LABEL); }); describe('delete image', () => { - it('should be possible to delete a repo', () => { - const deleteBtn = findDeleteBtn(); - expect(deleteBtn.exists()).toBe(true); - }); - + const itemToDelete = { path: 'bar' }; it('should call deleteItem when confirming deletion', () => { dispatchSpy.mockResolvedValue(); - findDeleteBtn().vm.$emit('click'); - expect(wrapper.vm.itemToDelete).not.toEqual({}); + findImageList().vm.$emit('delete', itemToDelete); + expect(wrapper.vm.itemToDelete).toEqual(itemToDelete); findDeleteModal().vm.$emit('ok'); expect(store.dispatch).toHaveBeenCalledWith( 'requestDeleteImage', @@ -205,8 +238,8 @@ describe('List Page', () => { it('should show a success alert when delete request is successful', () => { dispatchSpy.mockResolvedValue(); - findDeleteBtn().vm.$emit('click'); - expect(wrapper.vm.itemToDelete).not.toEqual({}); + findImageList().vm.$emit('delete', itemToDelete); + expect(wrapper.vm.itemToDelete).toEqual(itemToDelete); return wrapper.vm.handleDeleteImage().then(() => { const alert = findDeleteAlert(); expect(alert.exists()).toBe(true); @@ -218,8 +251,8 @@ describe('List Page', () => { it('should show an error alert when delete request fails', () => { dispatchSpy.mockRejectedValue(); - findDeleteBtn().vm.$emit('click'); - expect(wrapper.vm.itemToDelete).not.toEqual({}); + findImageList().vm.$emit('delete', itemToDelete); + expect(wrapper.vm.itemToDelete).toEqual(itemToDelete); return wrapper.vm.handleDeleteImage().then(() => { const alert = findDeleteAlert(); expect(alert.exists()).toBe(true); @@ -229,71 +262,93 @@ describe('List Page', () => { }); }); }); + }); - describe('pagination', () => { - it('exists', () => { - expect(findPagination().exists()).toBe(true); - }); + describe('search', () => { + it('has a search box element', () => { + mountComponent(); + const searchBox = findSearchBox(); + expect(searchBox.exists()).toBe(true); + expect(searchBox.attributes('placeholder')).toBe(SEARCH_PLACEHOLDER_TEXT); + }); - it('is wired to the correct pagination props', () => { - const pagination = findPagination(); - expect(pagination.props('perPage')).toBe(store.state.pagination.perPage); - expect(pagination.props('totalItems')).toBe(store.state.pagination.total); - expect(pagination.props('value')).toBe(store.state.pagination.page); + it('performs a search', () => { + mountComponent(); + findSearchBox().vm.$emit('submit', 'foo'); + expect(store.dispatch).toHaveBeenCalledWith('requestImagesList', { + name: 'foo', }); + }); - it('fetch the data from the API when the v-model changes', () => { - dispatchSpy.mockReturnValue(); - wrapper.setData({ currentPage: 2 }); - return wrapper.vm.$nextTick().then(() => { - expect(store.dispatch).toHaveBeenCalledWith('requestImagesList', { page: 2 }); - }); + 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); }); }); }); - describe('modal', () => { - it('exists', () => { - expect(findDeleteModal().exists()).toBe(true); - }); - - it('contains a description with the path of the item to delete', () => { - wrapper.setData({ itemToDelete: { path: 'foo' } }); - return wrapper.vm.$nextTick().then(() => { - expect(findDeleteModal().html()).toContain('foo'); + 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, }); }); }); + }); - describe('tracking', () => { - const testTrackingCall = action => { - expect(Tracking.event).toHaveBeenCalledWith(undefined, action, { - label: 'registry_repository_delete', - }); - }; + describe('modal', () => { + beforeEach(() => { + mountComponent(); + }); - beforeEach(() => { - jest.spyOn(Tracking, 'event'); - dispatchSpy.mockResolvedValue(); - }); + it('exists', () => { + expect(findDeleteModal().exists()).toBe(true); + }); - it('send an event when delete button is clicked', () => { - const deleteBtn = findDeleteBtn(); - deleteBtn.vm.$emit('click'); - testTrackingCall('click_button'); + it('contains a description with the path of the item to delete', () => { + wrapper.setData({ itemToDelete: { path: 'foo' } }); + return wrapper.vm.$nextTick().then(() => { + expect(findDeleteModal().html()).toContain('foo'); }); + }); + }); - it('send an event when cancel is pressed on modal', () => { - const deleteModal = findDeleteModal(); - deleteModal.vm.$emit('cancel'); - testTrackingCall('cancel_delete'); - }); + describe('tracking', () => { + beforeEach(() => { + mountComponent(); + }); - it('send an event when confirm is clicked on modal', () => { - const deleteModal = findDeleteModal(); - deleteModal.vm.$emit('ok'); - testTrackingCall('confirm_delete'); + const testTrackingCall = action => { + expect(Tracking.event).toHaveBeenCalledWith(undefined, action, { + label: 'registry_repository_delete', }); + }; + + beforeEach(() => { + jest.spyOn(Tracking, 'event'); + dispatchSpy.mockResolvedValue(); + }); + + it('send an event when delete button is clicked', () => { + findImageList().vm.$emit('delete', {}); + testTrackingCall('click_button'); + }); + + it('send an event when cancel is pressed on modal', () => { + const deleteModal = findDeleteModal(); + deleteModal.vm.$emit('cancel'); + testTrackingCall('cancel_delete'); + }); + + it('send an event when confirm is clicked on modal', () => { + const deleteModal = findDeleteModal(); + deleteModal.vm.$emit('ok'); + testTrackingCall('confirm_delete'); }); }); }); |