diff options
Diffstat (limited to 'spec/frontend/packages/list/components')
3 files changed, 0 insertions, 521 deletions
diff --git a/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap b/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap deleted file mode 100644 index 67e2594d29f..00000000000 --- a/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap +++ /dev/null @@ -1,68 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`packages_list_app renders 1`] = ` -<div> - <infrastructure-title-stub - helpurl="foo" - /> - - <infrastructure-search-stub /> - - <div> - <section - class="row empty-state text-center" - > - <div - class="col-12" - > - <div - class="svg-250 svg-content" - > - <img - alt="" - class="gl-max-w-full" - role="img" - src="helpSvg" - /> - </div> - </div> - - <div - class="col-12" - > - <div - class="text-content gl-mx-auto gl-my-0 gl-p-5" - > - <h1 - class="h4" - > - There are no packages yet - </h1> - - <p> - Learn how to - <b-link-stub - class="gl-link" - event="click" - href="helpUrl" - routertag="a" - target="_blank" - > - publish and share your packages - </b-link-stub> - with GitLab. - </p> - - <div - class="gl-display-flex gl-flex-wrap gl-justify-content-center" - > - <!----> - - <!----> - </div> - </div> - </div> - </section> - </div> -</div> -`; diff --git a/spec/frontend/packages/list/components/packages_list_app_spec.js b/spec/frontend/packages/list/components/packages_list_app_spec.js deleted file mode 100644 index 5f7555a3a2b..00000000000 --- a/spec/frontend/packages/list/components/packages_list_app_spec.js +++ /dev/null @@ -1,236 +0,0 @@ -import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; -import Vuex from 'vuex'; -import setWindowLocation from 'helpers/set_window_location_helper'; -import createFlash from '~/flash'; -import * as commonUtils from '~/lib/utils/common_utils'; -import PackageListApp from '~/packages/list/components/packages_list_app.vue'; -import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages/list/constants'; -import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants'; -import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants'; -import * as packageUtils from '~/packages_and_registries/shared/utils'; -import InfrastructureSearch from '~/packages_and_registries/infrastructure_registry/components/infrastructure_search.vue'; - -jest.mock('~/lib/utils/common_utils'); -jest.mock('~/flash'); - -const localVue = createLocalVue(); -localVue.use(Vuex); - -describe('packages_list_app', () => { - let wrapper; - let store; - - const PackageList = { - name: 'package-list', - template: '<div><slot name="empty-state"></slot></div>', - }; - const GlLoadingIcon = { name: 'gl-loading-icon', template: '<div>loading</div>' }; - - const emptyListHelpUrl = 'helpUrl'; - const findEmptyState = () => wrapper.find(GlEmptyState); - const findListComponent = () => wrapper.find(PackageList); - const findInfrastructureSearch = () => wrapper.find(InfrastructureSearch); - - const createStore = (filter = []) => { - store = new Vuex.Store({ - state: { - isLoading: false, - config: { - resourceId: 'project_id', - emptyListIllustration: 'helpSvg', - emptyListHelpUrl, - packageHelpUrl: 'foo', - }, - filter, - }, - }); - store.dispatch = jest.fn(); - }; - - const mountComponent = (provide) => { - wrapper = shallowMount(PackageListApp, { - localVue, - store, - stubs: { - GlEmptyState, - GlLoadingIcon, - PackageList, - GlSprintf, - GlLink, - }, - provide, - }); - }; - - beforeEach(() => { - createStore(); - jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue({}); - }); - - afterEach(() => { - wrapper.destroy(); - }); - - it('renders', () => { - mountComponent(); - expect(wrapper.element).toMatchSnapshot(); - }); - - it('call requestPackagesList on page:changed', () => { - mountComponent(); - store.dispatch.mockClear(); - - const list = findListComponent(); - list.vm.$emit('page:changed', 1); - expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList', { page: 1 }); - }); - - it('call requestDeletePackage on package:delete', () => { - mountComponent(); - - const list = findListComponent(); - list.vm.$emit('package:delete', 'foo'); - expect(store.dispatch).toHaveBeenCalledWith('requestDeletePackage', 'foo'); - }); - - it('does call requestPackagesList only one time on render', () => { - mountComponent(); - - expect(store.dispatch).toHaveBeenCalledTimes(3); - expect(store.dispatch).toHaveBeenNthCalledWith(1, 'setSorting', expect.any(Object)); - expect(store.dispatch).toHaveBeenNthCalledWith(2, 'setFilter', expect.any(Array)); - expect(store.dispatch).toHaveBeenNthCalledWith(3, 'requestPackagesList'); - }); - - describe('url query string handling', () => { - const defaultQueryParamsMock = { - search: [1, 2], - type: 'npm', - sort: 'asc', - orderBy: 'created', - }; - - it('calls setSorting with the query string based sorting', () => { - jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue(defaultQueryParamsMock); - - mountComponent(); - - expect(store.dispatch).toHaveBeenNthCalledWith(1, 'setSorting', { - orderBy: defaultQueryParamsMock.orderBy, - sort: defaultQueryParamsMock.sort, - }); - }); - - it('calls setFilter with the query string based filters', () => { - jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue(defaultQueryParamsMock); - - mountComponent(); - - expect(store.dispatch).toHaveBeenNthCalledWith(2, 'setFilter', [ - { type: 'type', value: { data: defaultQueryParamsMock.type } }, - { type: FILTERED_SEARCH_TERM, value: { data: defaultQueryParamsMock.search[0] } }, - { type: FILTERED_SEARCH_TERM, value: { data: defaultQueryParamsMock.search[1] } }, - ]); - }); - - it('calls setSorting and setFilters with the results of extractFilterAndSorting', () => { - jest - .spyOn(packageUtils, 'extractFilterAndSorting') - .mockReturnValue({ filters: ['foo'], sorting: { sort: 'desc' } }); - - mountComponent(); - - expect(store.dispatch).toHaveBeenNthCalledWith(1, 'setSorting', { sort: 'desc' }); - expect(store.dispatch).toHaveBeenNthCalledWith(2, 'setFilter', ['foo']); - }); - }); - - describe('empty state', () => { - it('generate the correct empty list link', () => { - mountComponent(); - - const link = findListComponent().find(GlLink); - - expect(link.attributes('href')).toBe(emptyListHelpUrl); - expect(link.text()).toBe('publish and share your packages'); - }); - - it('includes the right content on the default tab', () => { - mountComponent(); - - const heading = findEmptyState().find('h1'); - - expect(heading.text()).toBe('There are no packages yet'); - }); - }); - - describe('filter without results', () => { - beforeEach(() => { - createStore([{ type: 'something' }]); - mountComponent(); - }); - - it('should show specific empty message', () => { - expect(findEmptyState().text()).toContain('Sorry, your filter produced no results'); - expect(findEmptyState().text()).toContain( - 'To widen your search, change or remove the filters above', - ); - }); - }); - - describe('Search', () => { - it('exists', () => { - mountComponent(); - - expect(findInfrastructureSearch().exists()).toBe(true); - }); - - it('on update fetches data from the store', () => { - mountComponent(); - store.dispatch.mockClear(); - - findInfrastructureSearch().vm.$emit('update'); - - expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList'); - }); - }); - - describe('delete alert handling', () => { - const originalLocation = window.location.href; - const search = `?${SHOW_DELETE_SUCCESS_ALERT}=true`; - - beforeEach(() => { - createStore(); - jest.spyOn(commonUtils, 'historyReplaceState').mockImplementation(() => {}); - setWindowLocation(search); - }); - - afterEach(() => { - setWindowLocation(originalLocation); - }); - - it(`creates a flash if the query string contains ${SHOW_DELETE_SUCCESS_ALERT}`, () => { - mountComponent(); - - expect(createFlash).toHaveBeenCalledWith({ - message: DELETE_PACKAGE_SUCCESS_MESSAGE, - type: 'notice', - }); - }); - - it('calls historyReplaceState with a clean url', () => { - mountComponent(); - - expect(commonUtils.historyReplaceState).toHaveBeenCalledWith(originalLocation); - }); - - it(`does nothing if the query string does not contain ${SHOW_DELETE_SUCCESS_ALERT}`, () => { - setWindowLocation('?'); - mountComponent(); - - expect(createFlash).not.toHaveBeenCalled(); - expect(commonUtils.historyReplaceState).not.toHaveBeenCalled(); - }); - }); -}); diff --git a/spec/frontend/packages/list/components/packages_list_spec.js b/spec/frontend/packages/list/components/packages_list_spec.js deleted file mode 100644 index b1478a5e6dc..00000000000 --- a/spec/frontend/packages/list/components/packages_list_spec.js +++ /dev/null @@ -1,217 +0,0 @@ -import { GlTable, GlPagination, GlModal } from '@gitlab/ui'; -import { mount, createLocalVue } from '@vue/test-utils'; -import { last } from 'lodash'; -import Vuex from 'vuex'; -import stubChildren from 'helpers/stub_children'; -import PackagesList from '~/packages/list/components/packages_list.vue'; -import PackagesListRow from '~/packages/shared/components/package_list_row.vue'; -import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue'; -import { TrackingActions } from '~/packages/shared/constants'; -import * as SharedUtils from '~/packages/shared/utils'; -import Tracking from '~/tracking'; -import { packageList } from '../../mock_data'; - -const localVue = createLocalVue(); -localVue.use(Vuex); - -describe('packages_list', () => { - let wrapper; - let store; - - const EmptySlotStub = { name: 'empty-slot-stub', template: '<div>bar</div>' }; - - const findPackagesListLoader = () => wrapper.find(PackagesListLoader); - const findPackageListPagination = () => wrapper.find(GlPagination); - const findPackageListDeleteModal = () => wrapper.find(GlModal); - const findEmptySlot = () => wrapper.find(EmptySlotStub); - const findPackagesListRow = () => wrapper.find(PackagesListRow); - - const createStore = (isGroupPage, packages, isLoading) => { - const state = { - isLoading, - packages, - pagination: { - perPage: 1, - total: 1, - page: 1, - }, - config: { - isGroupPage, - }, - sorting: { - orderBy: 'version', - sort: 'desc', - }, - }; - store = new Vuex.Store({ - state, - getters: { - getList: () => packages, - }, - }); - store.dispatch = jest.fn(); - }; - - const mountComponent = ({ - isGroupPage = false, - packages = packageList, - isLoading = false, - ...options - } = {}) => { - createStore(isGroupPage, packages, isLoading); - - wrapper = mount(PackagesList, { - localVue, - store, - stubs: { - ...stubChildren(PackagesList), - GlTable, - GlModal, - }, - ...options, - }); - }; - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - describe('when is loading', () => { - beforeEach(() => { - mountComponent({ - packages: [], - isLoading: true, - }); - }); - - it('shows skeleton loader when loading', () => { - expect(findPackagesListLoader().exists()).toBe(true); - }); - }); - - describe('when is not loading', () => { - beforeEach(() => { - mountComponent(); - }); - - it('does not show skeleton loader when not loading', () => { - expect(findPackagesListLoader().exists()).toBe(false); - }); - }); - - describe('layout', () => { - beforeEach(() => { - mountComponent(); - }); - - it('contains a pagination component', () => { - const sorting = findPackageListPagination(); - expect(sorting.exists()).toBe(true); - }); - - it('contains a modal component', () => { - const sorting = findPackageListDeleteModal(); - expect(sorting.exists()).toBe(true); - }); - }); - - describe('when the user can destroy the package', () => { - beforeEach(() => { - mountComponent(); - }); - - it('setItemToBeDeleted sets itemToBeDeleted and open the modal', () => { - const mockModalShow = jest.spyOn(wrapper.vm.$refs.packageListDeleteModal, 'show'); - const item = last(wrapper.vm.list); - - findPackagesListRow().vm.$emit('packageToDelete', item); - - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.vm.itemToBeDeleted).toEqual(item); - expect(mockModalShow).toHaveBeenCalled(); - }); - }); - - it('deleteItemConfirmation resets itemToBeDeleted', () => { - wrapper.setData({ itemToBeDeleted: 1 }); - wrapper.vm.deleteItemConfirmation(); - expect(wrapper.vm.itemToBeDeleted).toEqual(null); - }); - - it('deleteItemConfirmation emit package:delete', () => { - const itemToBeDeleted = { id: 2 }; - wrapper.setData({ itemToBeDeleted }); - wrapper.vm.deleteItemConfirmation(); - return wrapper.vm.$nextTick(() => { - expect(wrapper.emitted('package:delete')[0]).toEqual([itemToBeDeleted]); - }); - }); - - it('deleteItemCanceled resets itemToBeDeleted', () => { - wrapper.setData({ itemToBeDeleted: 1 }); - wrapper.vm.deleteItemCanceled(); - expect(wrapper.vm.itemToBeDeleted).toEqual(null); - }); - }); - - describe('when the list is empty', () => { - beforeEach(() => { - mountComponent({ - packages: [], - slots: { - 'empty-state': EmptySlotStub, - }, - }); - }); - - it('show the empty slot', () => { - const emptySlot = findEmptySlot(); - expect(emptySlot.exists()).toBe(true); - }); - }); - - describe('pagination component', () => { - let pagination; - let modelEvent; - - beforeEach(() => { - mountComponent(); - pagination = findPackageListPagination(); - // retrieve the event used by v-model, a more sturdy approach than hardcoding it - modelEvent = pagination.vm.$options.model.event; - }); - - it('emits page:changed events when the page changes', () => { - pagination.vm.$emit(modelEvent, 2); - expect(wrapper.emitted('page:changed')).toEqual([[2]]); - }); - }); - - describe('tracking', () => { - let eventSpy; - let utilSpy; - const category = 'foo'; - - beforeEach(() => { - mountComponent(); - eventSpy = jest.spyOn(Tracking, 'event'); - utilSpy = jest.spyOn(SharedUtils, 'packageTypeToTrackCategory').mockReturnValue(category); - wrapper.setData({ itemToBeDeleted: { package_type: 'conan' } }); - }); - - it('tracking category calls packageTypeToTrackCategory', () => { - expect(wrapper.vm.tracking.category).toBe(category); - expect(utilSpy).toHaveBeenCalledWith('conan'); - }); - - it('deleteItemConfirmation calls event', () => { - wrapper.vm.deleteItemConfirmation(); - expect(eventSpy).toHaveBeenCalledWith( - category, - TrackingActions.DELETE_PACKAGE, - expect.any(Object), - ); - }); - }); -}); |