diff options
Diffstat (limited to 'spec/frontend/packages_and_registries/infrastructure_registry/components/list')
5 files changed, 82 insertions, 64 deletions
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap index 7cdf21dde46..d82af8f9e63 100644 --- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap @@ -3,6 +3,7 @@ exports[`packages_list_app renders 1`] = ` <div> <infrastructure-title-stub + count="1" helpurl="foo" /> @@ -37,8 +38,8 @@ exports[`packages_list_app renders 1`] = ` class="gl-font-size-h-display gl-line-height-36 h4" > - There are no packages yet - + There are no packages yet + </h1> <p diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js index b519ab00d06..e5230417c78 100644 --- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js @@ -1,11 +1,11 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import component from '~/packages_and_registries/infrastructure_registry/list/components/infrastructure_search.vue'; import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue'; import UrlSync from '~/vue_shared/components/url_sync.vue'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('Infrastructure Search', () => { let wrapper; @@ -48,7 +48,6 @@ describe('Infrastructure Search', () => { createStore(isGroupPage); wrapper = shallowMount(component, { - localVue, store, stubs: { UrlSync, diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js index b0e586f189a..72d08d5683b 100644 --- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js @@ -10,7 +10,9 @@ describe('Infrastructure Title', () => { const findTitleArea = () => wrapper.find(TitleArea); const findMetadataItem = () => wrapper.find(MetadataItem); - const mountComponent = (propsData = { helpUrl: 'foo' }) => { + const exampleProps = { helpUrl: 'http://example.gitlab.com/help' }; + + const mountComponent = (propsData = exampleProps) => { wrapper = shallowMount(component, { store, propsData, @@ -26,23 +28,36 @@ describe('Infrastructure Title', () => { }); describe('title area', () => { - it('exists', () => { + beforeEach(() => { mountComponent(); + }); + it('exists', () => { expect(findTitleArea().exists()).toBe(true); }); - it('has the correct props', () => { - mountComponent(); + it('has the correct title', () => { + expect(findTitleArea().props('title')).toBe('Infrastructure Registry'); + }); + + describe('with no modules', () => { + it('has no info message', () => { + expect(findTitleArea().props('infoMessages')).toStrictEqual([]); + }); + }); + + describe('with at least one module', () => { + beforeEach(() => { + mountComponent({ ...exampleProps, count: 1 }); + }); - expect(findTitleArea().props()).toMatchObject({ - title: 'Infrastructure Registry', - infoMessages: [ + it('has an info message', () => { + expect(findTitleArea().props('infoMessages')).toStrictEqual([ { text: 'Publish and share your modules. %{docLinkStart}More information%{docLinkEnd}', - link: 'foo', + link: exampleProps.helpUrl, }, - ], + ]); }); }); }); @@ -51,15 +66,15 @@ describe('Infrastructure Title', () => { count | exist | text ${null} | ${false} | ${''} ${undefined} | ${false} | ${''} - ${0} | ${true} | ${'0 Modules'} + ${0} | ${false} | ${''} ${1} | ${true} | ${'1 Module'} ${2} | ${true} | ${'2 Modules'} `('when count is $count metadata item', ({ count, exist, text }) => { beforeEach(() => { - mountComponent({ count, helpUrl: 'foo' }); + mountComponent({ ...exampleProps, count }); }); - it(`is ${exist} that it exists`, () => { + it(exist ? 'exists' : 'does not exist', () => { expect(findMetadataItem().exists()).toBe(exist); }); diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js index cad75d2a858..31616e0b2f5 100644 --- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js @@ -1,5 +1,6 @@ import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import setWindowLocation from 'helpers/set_window_location_helper'; import createFlash from '~/flash'; @@ -17,8 +18,7 @@ import InfrastructureSearch from '~/packages_and_registries/infrastructure_regis jest.mock('~/lib/utils/common_utils'); jest.mock('~/flash'); -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('packages_list_app', () => { let wrapper; @@ -35,7 +35,7 @@ describe('packages_list_app', () => { const findListComponent = () => wrapper.find(PackageList); const findInfrastructureSearch = () => wrapper.find(InfrastructureSearch); - const createStore = (filter = []) => { + const createStore = ({ filter = [], packageCount = 0 } = {}) => { store = new Vuex.Store({ state: { isLoading: false, @@ -46,6 +46,9 @@ describe('packages_list_app', () => { packageHelpUrl: 'foo', }, filter, + pagination: { + total: packageCount, + }, }, }); store.dispatch = jest.fn(); @@ -53,7 +56,6 @@ describe('packages_list_app', () => { const mountComponent = (provide) => { wrapper = shallowMount(PackageListApp, { - localVue, store, stubs: { GlEmptyState, @@ -69,6 +71,7 @@ describe('packages_list_app', () => { beforeEach(() => { createStore(); jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue({}); + mountComponent(); }); afterEach(() => { @@ -76,30 +79,26 @@ describe('packages_list_app', () => { }); it('renders', () => { + createStore({ packageCount: 1 }); mountComponent(); + expect(wrapper.element).toMatchSnapshot(); }); - it('call requestPackagesList on page:changed', () => { - mountComponent(); - store.dispatch.mockClear(); - + it('calls requestPackagesList on page:changed', () => { const list = findListComponent(); list.vm.$emit('page:changed', 1); expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList', { page: 1 }); }); - it('call requestDeletePackage on package:delete', () => { - mountComponent(); - + it('calls requestDeletePackage on package:delete', () => { 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(); - + it('calls requestPackagesList only once on render', () => { expect(store.dispatch).toHaveBeenCalledTimes(3); expect(store.dispatch).toHaveBeenNthCalledWith(1, 'setSorting', expect.any(Object)); expect(store.dispatch).toHaveBeenNthCalledWith(2, 'setFilter', expect.any(Array)); @@ -114,9 +113,12 @@ describe('packages_list_app', () => { orderBy: 'created', }; - it('calls setSorting with the query string based sorting', () => { + beforeEach(() => { + createStore(); jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue(defaultQueryParamsMock); + }); + it('calls setSorting with the query string based sorting', () => { mountComponent(); expect(store.dispatch).toHaveBeenNthCalledWith(1, 'setSorting', { @@ -126,8 +128,6 @@ describe('packages_list_app', () => { }); it('calls setFilter with the query string based filters', () => { - jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue(defaultQueryParamsMock); - mountComponent(); expect(store.dispatch).toHaveBeenNthCalledWith(2, 'setFilter', [ @@ -151,8 +151,6 @@ describe('packages_list_app', () => { describe('empty state', () => { it('generate the correct empty list link', () => { - mountComponent(); - const link = findListComponent().find(GlLink); expect(link.attributes('href')).toBe(emptyListHelpUrl); @@ -160,8 +158,6 @@ describe('packages_list_app', () => { }); it('includes the right content on the default tab', () => { - mountComponent(); - const heading = findEmptyState().find('h1'); expect(heading.text()).toBe('There are no packages yet'); @@ -170,7 +166,7 @@ describe('packages_list_app', () => { describe('filter without results', () => { beforeEach(() => { - createStore([{ type: 'something' }]); + createStore({ filter: [{ type: 'something' }] }); mountComponent(); }); @@ -182,20 +178,30 @@ describe('packages_list_app', () => { }); }); - describe('Search', () => { - it('exists', () => { - mountComponent(); - - expect(findInfrastructureSearch().exists()).toBe(true); + describe('search', () => { + describe('with no packages', () => { + it('does not exist', () => { + expect(findInfrastructureSearch().exists()).toBe(false); + }); }); - it('on update fetches data from the store', () => { - mountComponent(); - store.dispatch.mockClear(); + describe('with packages', () => { + beforeEach(() => { + createStore({ packageCount: 1 }); + mountComponent(); + }); - findInfrastructureSearch().vm.$emit('update'); + it('exists', () => { + expect(findInfrastructureSearch().exists()).toBe(true); + }); - expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList'); + it('on update fetches data from the store', () => { + store.dispatch.mockClear(); + + findInfrastructureSearch().vm.$emit('update'); + + expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList'); + }); }); }); diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js index 26569f20e94..fed82653016 100644 --- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js @@ -1,5 +1,6 @@ import { GlTable, GlPagination, GlModal } from '@gitlab/ui'; -import { mount, createLocalVue } from '@vue/test-utils'; +import { mount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import { last } from 'lodash'; import Vuex from 'vuex'; import stubChildren from 'helpers/stub_children'; @@ -11,8 +12,7 @@ import { TRACK_CATEGORY } from '~/packages_and_registries/infrastructure_registr import Tracking from '~/tracking'; import { packageList } from '../../mock_data'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('packages_list', () => { let wrapper; @@ -61,7 +61,6 @@ describe('packages_list', () => { createStore(isGroupPage, packages, isLoading); wrapper = mount(PackagesList, { - localVue, store, stubs: { ...stubChildren(PackagesList), @@ -121,16 +120,15 @@ describe('packages_list', () => { mountComponent(); }); - it('setItemToBeDeleted sets itemToBeDeleted and open the modal', () => { + it('setItemToBeDeleted sets itemToBeDeleted and open the modal', async () => { 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(); - }); + await nextTick(); + expect(wrapper.vm.itemToBeDeleted).toEqual(item); + expect(mockModalShow).toHaveBeenCalled(); }); it('deleteItemConfirmation resets itemToBeDeleted', () => { @@ -141,15 +139,14 @@ describe('packages_list', () => { expect(wrapper.vm.itemToBeDeleted).toEqual(null); }); - it('deleteItemConfirmation emit package:delete', () => { + it('deleteItemConfirmation emit package:delete', async () => { const itemToBeDeleted = { id: 2 }; // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // eslint-disable-next-line no-restricted-syntax wrapper.setData({ itemToBeDeleted }); wrapper.vm.deleteItemConfirmation(); - return wrapper.vm.$nextTick(() => { - expect(wrapper.emitted('package:delete')[0]).toEqual([itemToBeDeleted]); - }); + await nextTick(); + expect(wrapper.emitted('package:delete')[0]).toEqual([itemToBeDeleted]); }); it('deleteItemCanceled resets itemToBeDeleted', () => { |