diff options
Diffstat (limited to 'spec/frontend/packages/list')
11 files changed, 250 insertions, 720 deletions
diff --git a/spec/frontend/packages/list/components/__snapshots__/packages_filter_spec.js.snap b/spec/frontend/packages/list/components/__snapshots__/packages_filter_spec.js.snap deleted file mode 100644 index ed77f25916f..00000000000 --- a/spec/frontend/packages/list/components/__snapshots__/packages_filter_spec.js.snap +++ /dev/null @@ -1,14 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`packages_filter renders 1`] = ` -<gl-search-box-by-click-stub - clearable="true" - clearbuttontitle="Clear" - clearrecentsearchestext="Clear recent searches" - closebuttontitle="Close" - norecentsearchestext="You don't have any recent searches" - placeholder="Filter by name" - recentsearchesheader="Recent searches" - value="" -/> -`; 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 b2df1ac5ab6..3f17731584c 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 @@ -6,517 +6,60 @@ exports[`packages_list_app renders 1`] = ` packagehelpurl="foo" /> - <b-tabs-stub - activenavitemclass="gl-tab-nav-item-active gl-tab-nav-item-active-indigo" - class="gl-tabs" - contentclass=",gl-tab-content" - navclass=",gl-tabs-nav" - nofade="true" - nonavstyle="true" - tag="div" - > - <template> - - <b-tab-stub - tag="div" - title="All" - titlelinkclass="gl-tab-nav-item" - > - <template> - <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" - 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> - <!----> - - <!----> - </div> - </div> - </div> - </section> - </div> - </template> - </b-tab-stub> - <b-tab-stub - tag="div" - title="Composer" - titlelinkclass="gl-tab-nav-item" - > - <template> - <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" - 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 Composer 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> - <!----> - - <!----> - </div> - </div> - </div> - </section> - </div> - </template> - </b-tab-stub> - <b-tab-stub - tag="div" - title="Conan" - titlelinkclass="gl-tab-nav-item" - > - <template> - <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" - 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 Conan 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> - <!----> - - <!----> - </div> - </div> - </div> - </section> - </div> - </template> - </b-tab-stub> - <b-tab-stub - tag="div" - title="Generic" - titlelinkclass="gl-tab-nav-item" - > - <template> - <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" - 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 Generic 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> - <!----> - - <!----> - </div> - </div> - </div> - </section> - </div> - </template> - </b-tab-stub> - <b-tab-stub - tag="div" - title="Maven" - titlelinkclass="gl-tab-nav-item" - > - <template> - <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" - 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 Maven 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> - <!----> - - <!----> - </div> - </div> - </div> - </section> - </div> - </template> - </b-tab-stub> - <b-tab-stub - tag="div" - title="NPM" - titlelinkclass="gl-tab-nav-item" + <package-search-stub /> + + <div> + <section + class="row empty-state text-center" + > + <div + class="col-12" > - <template> - <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" - 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 NPM 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> - <!----> - - <!----> - </div> - </div> - </div> - </section> - </div> - </template> - </b-tab-stub> - <b-tab-stub - tag="div" - title="NuGet" - titlelinkclass="gl-tab-nav-item" + <div + class="svg-250 svg-content" + > + <img + alt="" + class="gl-max-w-full" + src="helpSvg" + /> + </div> + </div> + + <div + class="col-12" > - <template> - <div> - <section - class="row empty-state text-center" + <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" > - <div - class="col-12" - > - <div - class="svg-250 svg-content" - > - <img - alt="" - class="gl-max-w-full" - 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 NuGet 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> - <!----> - - <!----> - </div> - </div> - </div> - </section> - </div> - </template> - </b-tab-stub> - <b-tab-stub - tag="div" - title="PyPI" - titlelinkclass="gl-tab-nav-item" - > - <template> + publish and share your packages + </b-link-stub> + with GitLab. + </p> + <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" - 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 PyPI 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> - <!----> - - <!----> - </div> - </div> - </div> - </section> + <!----> + + <!----> </div> - </template> - </b-tab-stub> - </template> - <template> - <div - class="gl-display-flex gl-align-self-center gl-py-2 gl-flex-grow-1 gl-justify-content-end" - > - <package-filter-stub - class="gl-mr-2" - /> - - <package-sort-stub /> + </div> </div> - </template> - </b-tabs-stub> + </section> + </div> </div> `; diff --git a/spec/frontend/packages/list/components/packages_filter_spec.js b/spec/frontend/packages/list/components/packages_filter_spec.js deleted file mode 100644 index b186b5f5e48..00000000000 --- a/spec/frontend/packages/list/components/packages_filter_spec.js +++ /dev/null @@ -1,50 +0,0 @@ -import Vuex from 'vuex'; -import { GlSearchBoxByClick } from '@gitlab/ui'; -import { createLocalVue, shallowMount } from '@vue/test-utils'; -import PackagesFilter from '~/packages/list/components/packages_filter.vue'; - -const localVue = createLocalVue(); -localVue.use(Vuex); - -describe('packages_filter', () => { - let wrapper; - let store; - - const findGlSearchBox = () => wrapper.find(GlSearchBoxByClick); - - const mountComponent = () => { - store = new Vuex.Store(); - store.dispatch = jest.fn(); - - wrapper = shallowMount(PackagesFilter, { - localVue, - store, - }); - }; - - beforeEach(mountComponent); - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - it('renders', () => { - expect(wrapper.element).toMatchSnapshot(); - }); - - describe('emits events', () => { - it('sets the filter value in the store on input', () => { - const searchString = 'foo'; - findGlSearchBox().vm.$emit('input', searchString); - - expect(store.dispatch).toHaveBeenCalledWith('setFilter', searchString); - }); - - it('emits the filter event when search box is submitted', () => { - findGlSearchBox().vm.$emit('submit'); - - expect(wrapper.emitted('filter')).toBeTruthy(); - }); - }); -}); 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 217096f822a..6862d23c4ff 100644 --- a/spec/frontend/packages/list/components/packages_list_app_spec.js +++ b/spec/frontend/packages/list/components/packages_list_app_spec.js @@ -1,11 +1,12 @@ -import Vuex from 'vuex'; +import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui'; import { shallowMount, createLocalVue } from '@vue/test-utils'; -import { GlEmptyState, GlTab, GlTabs, GlSprintf, GlLink } from '@gitlab/ui'; -import * as commonUtils from '~/lib/utils/common_utils'; +import Vuex from 'vuex'; import createFlash from '~/flash'; +import * as commonUtils from '~/lib/utils/common_utils'; +import PackageSearch from '~/packages/list/components/package_search.vue'; import PackageListApp from '~/packages/list/components/packages_list_app.vue'; -import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants'; import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages/list/constants'; +import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants'; jest.mock('~/lib/utils/common_utils'); jest.mock('~/flash'); @@ -26,9 +27,9 @@ describe('packages_list_app', () => { const emptyListHelpUrl = 'helpUrl'; const findEmptyState = () => wrapper.find(GlEmptyState); const findListComponent = () => wrapper.find(PackageList); - const findTabComponent = (index = 0) => wrapper.findAll(GlTab).at(index); + const findPackageSearch = () => wrapper.find(PackageSearch); - const createStore = (filterQuery = '') => { + const createStore = (filter = []) => { store = new Vuex.Store({ state: { isLoading: false, @@ -38,7 +39,7 @@ describe('packages_list_app', () => { emptyListHelpUrl, packageHelpUrl: 'foo', }, - filterQuery, + filter, }, }); store.dispatch = jest.fn(); @@ -52,8 +53,6 @@ describe('packages_list_app', () => { GlEmptyState, GlLoadingIcon, PackageList, - GlTab, - GlTabs, GlSprintf, GlLink, }, @@ -94,6 +93,7 @@ describe('packages_list_app', () => { it('call requestPackagesList on page:changed', () => { mountComponent(); + store.dispatch.mockClear(); const list = findListComponent(); list.vm.$emit('page:changed', 1); @@ -108,41 +108,15 @@ describe('packages_list_app', () => { expect(store.dispatch).toHaveBeenCalledWith('requestDeletePackage', 'foo'); }); - it('calls requestPackagesList on sort:changed', () => { - mountComponent(); - - const list = findListComponent(); - list.vm.$emit('sort:changed'); - expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList'); - }); - it('does not call requestPackagesList two times on render', () => { mountComponent(); expect(store.dispatch).toHaveBeenCalledTimes(1); }); - describe('tab change', () => { - it('calls requestPackagesList when all tab is clicked', () => { - mountComponent(); - - findTabComponent().trigger('click'); - - expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList'); - }); - - it('calls requestPackagesList when a package type tab is clicked', () => { - mountComponent(); - - findTabComponent(1).trigger('click'); - - expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList'); - }); - }); - describe('filter without results', () => { beforeEach(() => { - createStore('foo'); + createStore([{ type: 'something' }]); mountComponent(); }); @@ -154,12 +128,29 @@ describe('packages_list_app', () => { }); }); + describe('Package Search', () => { + it('exists', () => { + mountComponent(); + + expect(findPackageSearch().exists()).toBe(true); + }); + + it('on update fetches data from the store', () => { + mountComponent(); + store.dispatch.mockClear(); + + findPackageSearch().vm.$emit('update'); + + expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList'); + }); + }); + describe('delete alert handling', () => { const { location } = window.location; const search = `?${SHOW_DELETE_SUCCESS_ALERT}=true`; beforeEach(() => { - createStore('foo'); + createStore(); jest.spyOn(commonUtils, 'historyReplaceState').mockImplementation(() => {}); delete window.location; window.location = { diff --git a/spec/frontend/packages/list/components/packages_list_spec.js b/spec/frontend/packages/list/components/packages_list_spec.js index f981cc2851a..b1478a5e6dc 100644 --- a/spec/frontend/packages/list/components/packages_list_spec.js +++ b/spec/frontend/packages/list/components/packages_list_spec.js @@ -1,14 +1,14 @@ -import Vuex from 'vuex'; -import { last } from 'lodash'; 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 Tracking from '~/tracking'; import PackagesList from '~/packages/list/components/packages_list.vue'; -import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue'; import PackagesListRow from '~/packages/shared/components/package_list_row.vue'; -import * as SharedUtils from '~/packages/shared/utils'; +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(); diff --git a/spec/frontend/packages/list/components/packages_search_spec.js b/spec/frontend/packages/list/components/packages_search_spec.js new file mode 100644 index 00000000000..9b62dde8d2b --- /dev/null +++ b/spec/frontend/packages/list/components/packages_search_spec.js @@ -0,0 +1,107 @@ +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 getTableHeaders from '~/packages/list/utils'; +import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('Package Search', () => { + let wrapper; + let store; + + const findRegistrySearch = () => wrapper.find(RegistrySearch); + + 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, + }); + }; + + 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: getTableHeaders(), + }); + }); + + 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: getTableHeaders(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([[]]); + }); +}); diff --git a/spec/frontend/packages/list/components/packages_sort_spec.js b/spec/frontend/packages/list/components/packages_sort_spec.js deleted file mode 100644 index d15ad9bd542..00000000000 --- a/spec/frontend/packages/list/components/packages_sort_spec.js +++ /dev/null @@ -1,90 +0,0 @@ -import Vuex from 'vuex'; -import { GlSorting, GlSortingItem } from '@gitlab/ui'; -import { mount, createLocalVue } from '@vue/test-utils'; -import stubChildren from 'helpers/stub_children'; -import PackagesSort from '~/packages/list/components/packages_sort.vue'; - -const localVue = createLocalVue(); -localVue.use(Vuex); - -describe('packages_sort', () => { - let wrapper; - let store; - let sorting; - let sortingItems; - - const findPackageListSorting = () => wrapper.find(GlSorting); - const findSortingItems = () => wrapper.findAll(GlSortingItem); - - const createStore = (isGroupPage) => { - const state = { - config: { - isGroupPage, - }, - sorting: { - orderBy: 'version', - sort: 'desc', - }, - }; - store = new Vuex.Store({ - state, - }); - store.dispatch = jest.fn(); - }; - - const mountComponent = (isGroupPage = false) => { - createStore(isGroupPage); - - wrapper = mount(PackagesSort, { - localVue, - store, - stubs: { - ...stubChildren(PackagesSort), - GlSortingItem, - }, - }); - }; - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - describe('when is in projects', () => { - beforeEach(() => { - mountComponent(); - sorting = findPackageListSorting(); - sortingItems = findSortingItems(); - }); - - it('has all the sortable items', () => { - expect(sortingItems).toHaveLength(wrapper.vm.sortableFields.length); - }); - - it('on sort change set sorting in vuex and emit event', () => { - sorting.vm.$emit('sortDirectionChange'); - expect(store.dispatch).toHaveBeenCalledWith('setSorting', { sort: 'asc' }); - expect(wrapper.emitted('sort:changed')).toBeTruthy(); - }); - - it('on sort item click set sorting and emit event', () => { - const item = sortingItems.at(0); - const { orderBy } = wrapper.vm.sortableFields[0]; - item.vm.$emit('click'); - expect(store.dispatch).toHaveBeenCalledWith('setSorting', { orderBy }); - expect(wrapper.emitted('sort:changed')).toBeTruthy(); - }); - }); - - describe('when is in group', () => { - beforeEach(() => { - mountComponent(true); - sorting = findPackageListSorting(); - sortingItems = findSortingItems(); - }); - - it('has all the sortable items', () => { - expect(sortingItems).toHaveLength(wrapper.vm.sortableFields.length); - }); - }); -}); diff --git a/spec/frontend/packages/list/components/packages_title_spec.js b/spec/frontend/packages/list/components/packages_title_spec.js index 5e9ebd8ecb0..3716e8daa7c 100644 --- a/spec/frontend/packages/list/components/packages_title_spec.js +++ b/spec/frontend/packages/list/components/packages_title_spec.js @@ -1,8 +1,8 @@ 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 TitleArea from '~/vue_shared/components/registry/title_area.vue'; import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue'; -import { LIST_INTRO_TEXT, LIST_TITLE_TEXT } from '~/packages/list//constants'; +import TitleArea from '~/vue_shared/components/registry/title_area.vue'; describe('PackageTitle', () => { let wrapper; 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 new file mode 100644 index 00000000000..b0cbe34f0b9 --- /dev/null +++ b/spec/frontend/packages/list/components/tokens/package_type_token_spec.js @@ -0,0 +1,48 @@ +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); + }, + ); +}); diff --git a/spec/frontend/packages/list/stores/actions_spec.js b/spec/frontend/packages/list/stores/actions_spec.js index 05e1fe57cae..b5b0177eb4e 100644 --- a/spec/frontend/packages/list/stores/actions_spec.js +++ b/spec/frontend/packages/list/stores/actions_spec.js @@ -3,9 +3,9 @@ import MockAdapter from 'axios-mock-adapter'; import testAction from 'helpers/vuex_action_helper'; import Api from '~/api'; import { deprecatedCreateFlash as createFlash } from '~/flash'; +import { MISSING_DELETE_PATH_ERROR } from '~/packages/list/constants'; import * as actions from '~/packages/list/stores/actions'; import * as types from '~/packages/list/stores/mutation_types'; -import { MISSING_DELETE_PATH_ERROR } from '~/packages/list/constants'; import { DELETE_PACKAGE_ERROR_MESSAGE } from '~/packages/shared/constants'; jest.mock('~/flash.js'); @@ -30,11 +30,13 @@ describe('Actions Package list store', () => { sort: 'asc', orderBy: 'version', }; + + const filter = []; it('should fetch the project packages list when isGroupPage is false', (done) => { testAction( actions.requestPackagesList, undefined, - { config: { isGroupPage: false, resourceId: 1 }, sorting }, + { config: { isGroupPage: false, resourceId: 1 }, sorting, filter }, [], [ { type: 'setLoading', payload: true }, @@ -54,7 +56,7 @@ describe('Actions Package list store', () => { testAction( actions.requestPackagesList, undefined, - { config: { isGroupPage: true, resourceId: 2 }, sorting }, + { config: { isGroupPage: true, resourceId: 2 }, sorting, filter }, [], [ { type: 'setLoading', payload: true }, @@ -70,7 +72,7 @@ describe('Actions Package list store', () => { ); }); - it('should fetch packages of a certain type when selectedType is present', (done) => { + it('should fetch packages of a certain type when a filter with a type is present', (done) => { const packageType = 'maven'; testAction( @@ -79,7 +81,7 @@ describe('Actions Package list store', () => { { config: { isGroupPage: false, resourceId: 1 }, sorting, - selectedType: { type: packageType }, + filter: [{ type: 'type', value: { data: 'maven' } }], }, [], [ @@ -107,7 +109,7 @@ describe('Actions Package list store', () => { testAction( actions.requestPackagesList, undefined, - { config: { isGroupPage: false, resourceId: 2 }, sorting }, + { config: { isGroupPage: false, resourceId: 2 }, sorting, filter }, [], [ { type: 'setLoading', payload: true }, diff --git a/spec/frontend/packages/list/stores/mutations_spec.js b/spec/frontend/packages/list/stores/mutations_spec.js index 0d424a0c011..2ddf3a1da33 100644 --- a/spec/frontend/packages/list/stores/mutations_spec.js +++ b/spec/frontend/packages/list/stores/mutations_spec.js @@ -1,7 +1,7 @@ -import mutations from '~/packages/list/stores/mutations'; +import * as commonUtils from '~/lib/utils/common_utils'; import * as types from '~/packages/list/stores/mutation_types'; +import mutations from '~/packages/list/stores/mutations'; import createState from '~/packages/list/stores/state'; -import * as commonUtils from '~/lib/utils/common_utils'; import { npmPackage, mavenPackage } from '../../mock_data'; describe('Mutations Registry Store', () => { @@ -78,17 +78,10 @@ describe('Mutations Registry Store', () => { }); }); - describe('SET_SELECTED_TYPE', () => { - it('should set the selected type', () => { - mutations[types.SET_SELECTED_TYPE](mockState, { type: 'maven' }); - expect(mockState.selectedType).toEqual({ type: 'maven' }); - }); - }); - describe('SET_FILTER', () => { it('should set the filter query', () => { mutations[types.SET_FILTER](mockState, 'foo'); - expect(mockState.filterQuery).toEqual('foo'); + expect(mockState.filter).toEqual('foo'); }); }); }); |