diff options
Diffstat (limited to 'spec/frontend/packages_and_registries/infrastructure_registry/components/infrastructure_search_spec.js')
-rw-r--r-- | spec/frontend/packages_and_registries/infrastructure_registry/components/infrastructure_search_spec.js | 135 |
1 files changed, 135 insertions, 0 deletions
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/infrastructure_search_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/infrastructure_search_spec.js new file mode 100644 index 00000000000..119b678cc37 --- /dev/null +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/infrastructure_search_spec.js @@ -0,0 +1,135 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import component from '~/packages_and_registries/infrastructure_registry/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); + +describe('Infrastructure Search', () => { + let wrapper; + let store; + + const sortableFields = () => [ + { orderBy: 'name', label: 'Name' }, + { orderBy: 'version', label: 'Version' }, + { orderBy: 'created_at', label: 'Published' }, + ]; + + const groupSortableFields = () => [ + { orderBy: 'name', label: 'Name' }, + { orderBy: 'project_path', label: 'Project' }, + { orderBy: 'version', label: 'Version' }, + { orderBy: 'created_at', label: 'Published' }, + ]; + + 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: [], + sortableFields: sortableFields(), + }); + }); + + it.each` + isGroupPage | page | fields + ${false} | ${'project'} | ${sortableFields()} + ${true} | ${'group'} | ${groupSortableFields()} + `('in a $page page binds the right props', ({ isGroupPage, fields }) => { + mountComponent(isGroupPage); + + expect(findRegistrySearch().props()).toMatchObject({ + filter: store.state.filter, + sorting: store.state.sorting, + tokens: [], + sortableFields: fields, + }); + }); + + 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(); + }); +}); |