diff options
Diffstat (limited to 'spec/frontend/packages/list/components')
5 files changed, 7 insertions, 291 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 index dbebdeeb452..67e2594d29f 100644 --- 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 @@ -2,11 +2,11 @@ exports[`packages_list_app renders 1`] = ` <div> - <div - help-url="foo" + <infrastructure-title-stub + helpurl="foo" /> - <div /> + <infrastructure-search-stub /> <div> <section diff --git a/spec/frontend/packages/list/components/packages_list_app_spec.js b/spec/frontend/packages/list/components/packages_list_app_spec.js index b94192c531c..5f7555a3a2b 100644 --- a/spec/frontend/packages/list/components/packages_list_app_spec.js +++ b/spec/frontend/packages/list/components/packages_list_app_spec.js @@ -9,6 +9,7 @@ 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'); @@ -26,18 +27,9 @@ describe('packages_list_app', () => { }; const GlLoadingIcon = { name: 'gl-loading-icon', template: '<div>loading</div>' }; - // we need to manually stub dynamic imported components because shallowMount is not able to stub them automatically. See: https://github.com/vuejs/vue-test-utils/issues/1279 - const PackageSearch = { name: 'PackageSearch', template: '<div></div>' }; - const PackageTitle = { name: 'PackageTitle', template: '<div></div>' }; - const InfrastructureTitle = { name: 'InfrastructureTitle', template: '<div></div>' }; - const InfrastructureSearch = { name: 'InfrastructureSearch', template: '<div></div>' }; - const emptyListHelpUrl = 'helpUrl'; const findEmptyState = () => wrapper.find(GlEmptyState); const findListComponent = () => wrapper.find(PackageList); - const findPackageSearch = () => wrapper.find(PackageSearch); - const findPackageTitle = () => wrapper.find(PackageTitle); - const findInfrastructureTitle = () => wrapper.find(InfrastructureTitle); const findInfrastructureSearch = () => wrapper.find(InfrastructureSearch); const createStore = (filter = []) => { @@ -66,10 +58,6 @@ describe('packages_list_app', () => { PackageList, GlSprintf, GlLink, - PackageSearch, - PackageTitle, - InfrastructureTitle, - InfrastructureSearch, }, provide, }); @@ -191,48 +179,23 @@ describe('packages_list_app', () => { }); }); - describe('Package Search', () => { + describe('Search', () => { it('exists', () => { mountComponent(); - expect(findPackageSearch().exists()).toBe(true); + expect(findInfrastructureSearch().exists()).toBe(true); }); it('on update fetches data from the store', () => { mountComponent(); store.dispatch.mockClear(); - findPackageSearch().vm.$emit('update'); + findInfrastructureSearch().vm.$emit('update'); expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList'); }); }); - describe('Infrastructure config', () => { - it('defaults to package registry components', () => { - mountComponent(); - - expect(findPackageSearch().exists()).toBe(true); - expect(findPackageTitle().exists()).toBe(true); - - expect(findInfrastructureTitle().exists()).toBe(false); - expect(findInfrastructureSearch().exists()).toBe(false); - }); - - it('mount different component based on the provided values', () => { - mountComponent({ - titleComponent: 'InfrastructureTitle', - searchComponent: 'InfrastructureSearch', - }); - - expect(findPackageSearch().exists()).toBe(false); - expect(findPackageTitle().exists()).toBe(false); - - expect(findInfrastructureTitle().exists()).toBe(true); - expect(findInfrastructureSearch().exists()).toBe(true); - }); - }); - describe('delete alert handling', () => { const originalLocation = window.location.href; const search = `?${SHOW_DELETE_SUCCESS_ALERT}=true`; diff --git a/spec/frontend/packages/list/components/packages_search_spec.js b/spec/frontend/packages/list/components/packages_search_spec.js deleted file mode 100644 index 30fad74b493..00000000000 --- a/spec/frontend/packages/list/components/packages_search_spec.js +++ /dev/null @@ -1,128 +0,0 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; -import Vuex from 'vuex'; -import component from '~/packages/list/components/package_search.vue'; -import PackageTypeToken from '~/packages/list/components/tokens/package_type_token.vue'; -import { sortableFields } from '~/packages/list/utils'; -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); - -describe('Package Search', () => { - let wrapper; - let store; - - const findRegistrySearch = () => wrapper.findComponent(RegistrySearch); - const findUrlSync = () => wrapper.findComponent(UrlSync); - - const createStore = (isGroupPage) => { - const state = { - config: { - isGroupPage, - }, - sorting: { - orderBy: 'version', - sort: 'desc', - }, - filter: [], - }; - store = new Vuex.Store({ - state, - }); - store.dispatch = jest.fn(); - }; - - const mountComponent = (isGroupPage = false) => { - createStore(isGroupPage); - - wrapper = shallowMount(component, { - localVue, - store, - stubs: { - UrlSync, - }, - }); - }; - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - it('has a registry search component', () => { - mountComponent(); - - expect(findRegistrySearch().exists()).toBe(true); - expect(findRegistrySearch().props()).toMatchObject({ - filter: store.state.filter, - sorting: store.state.sorting, - tokens: expect.arrayContaining([ - expect.objectContaining({ token: PackageTypeToken, type: 'type', icon: 'package' }), - ]), - sortableFields: sortableFields(), - }); - }); - - it.each` - isGroupPage | page - ${false} | ${'project'} - ${true} | ${'group'} - `('in a $page page binds the right props', ({ isGroupPage }) => { - mountComponent(isGroupPage); - - expect(findRegistrySearch().props()).toMatchObject({ - filter: store.state.filter, - sorting: store.state.sorting, - tokens: expect.arrayContaining([ - expect.objectContaining({ token: PackageTypeToken, type: 'type', icon: 'package' }), - ]), - sortableFields: sortableFields(isGroupPage), - }); - }); - - it('on sorting:changed emits update event and calls vuex setSorting', () => { - const payload = { sort: 'foo' }; - - mountComponent(); - - findRegistrySearch().vm.$emit('sorting:changed', payload); - - expect(store.dispatch).toHaveBeenCalledWith('setSorting', payload); - expect(wrapper.emitted('update')).toEqual([[]]); - }); - - it('on filter:changed calls vuex setFilter', () => { - const payload = ['foo']; - - mountComponent(); - - findRegistrySearch().vm.$emit('filter:changed', payload); - - expect(store.dispatch).toHaveBeenCalledWith('setFilter', payload); - }); - - it('on filter:submit emits update event', () => { - mountComponent(); - - findRegistrySearch().vm.$emit('filter:submit'); - - expect(wrapper.emitted('update')).toEqual([[]]); - }); - - it('has a UrlSync component', () => { - mountComponent(); - - expect(findUrlSync().exists()).toBe(true); - }); - - it('on query:changed calls updateQuery from UrlSync', () => { - jest.spyOn(UrlSync.methods, 'updateQuery').mockImplementation(() => {}); - - mountComponent(); - - findRegistrySearch().vm.$emit('query:changed'); - - expect(UrlSync.methods.updateQuery).toHaveBeenCalled(); - }); -}); diff --git a/spec/frontend/packages/list/components/packages_title_spec.js b/spec/frontend/packages/list/components/packages_title_spec.js deleted file mode 100644 index a17f72e3133..00000000000 --- a/spec/frontend/packages/list/components/packages_title_spec.js +++ /dev/null @@ -1,71 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import { LIST_INTRO_TEXT, LIST_TITLE_TEXT } from '~/packages/list//constants'; -import PackageTitle from '~/packages/list/components/package_title.vue'; -import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue'; -import TitleArea from '~/vue_shared/components/registry/title_area.vue'; - -describe('PackageTitle', () => { - let wrapper; - let store; - - const findTitleArea = () => wrapper.find(TitleArea); - const findMetadataItem = () => wrapper.find(MetadataItem); - - const mountComponent = (propsData = { helpUrl: 'foo' }) => { - wrapper = shallowMount(PackageTitle, { - store, - propsData, - stubs: { - TitleArea, - }, - }); - }; - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - describe('title area', () => { - it('exists', () => { - mountComponent(); - - expect(findTitleArea().exists()).toBe(true); - }); - - it('has the correct props', () => { - mountComponent(); - - expect(findTitleArea().props()).toMatchObject({ - title: LIST_TITLE_TEXT, - infoMessages: [{ text: LIST_INTRO_TEXT, link: 'foo' }], - }); - }); - }); - - describe.each` - count | exist | text - ${null} | ${false} | ${''} - ${undefined} | ${false} | ${''} - ${0} | ${true} | ${'0 Packages'} - ${1} | ${true} | ${'1 Package'} - ${2} | ${true} | ${'2 Packages'} - `('when count is $count metadata item', ({ count, exist, text }) => { - beforeEach(() => { - mountComponent({ count, helpUrl: 'foo' }); - }); - - it(`is ${exist} that it exists`, () => { - expect(findMetadataItem().exists()).toBe(exist); - }); - - if (exist) { - it('has the correct props', () => { - expect(findMetadataItem().props()).toMatchObject({ - icon: 'package', - text, - }); - }); - } - }); -}); diff --git a/spec/frontend/packages/list/components/tokens/package_type_token_spec.js b/spec/frontend/packages/list/components/tokens/package_type_token_spec.js deleted file mode 100644 index b0cbe34f0b9..00000000000 --- a/spec/frontend/packages/list/components/tokens/package_type_token_spec.js +++ /dev/null @@ -1,48 +0,0 @@ -import { GlFilteredSearchToken, GlFilteredSearchSuggestion } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; -import component from '~/packages/list/components/tokens/package_type_token.vue'; -import { PACKAGE_TYPES } from '~/packages/list/constants'; - -describe('packages_filter', () => { - let wrapper; - - const findFilteredSearchToken = () => wrapper.find(GlFilteredSearchToken); - const findFilteredSearchSuggestions = () => wrapper.findAll(GlFilteredSearchSuggestion); - - const mountComponent = ({ attrs, listeners } = {}) => { - wrapper = shallowMount(component, { - attrs, - listeners, - }); - }; - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - it('it binds all of his attrs to filtered search token', () => { - mountComponent({ attrs: { foo: 'bar' } }); - - expect(findFilteredSearchToken().attributes('foo')).toBe('bar'); - }); - - it('it binds all of his events to filtered search token', () => { - const clickListener = jest.fn(); - mountComponent({ listeners: { click: clickListener } }); - - findFilteredSearchToken().vm.$emit('click'); - - expect(clickListener).toHaveBeenCalled(); - }); - - it.each(PACKAGE_TYPES.map((p, index) => [p, index]))( - 'displays a suggestion for %p', - (packageType, index) => { - mountComponent(); - const item = findFilteredSearchSuggestions().at(index); - expect(item.text()).toBe(packageType.title); - expect(item.props('value')).toBe(packageType.type); - }, - ); -}); |