136 lines
3.5 KiB
JavaScript
136 lines
3.5 KiB
JavaScript
|
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();
|
||
|
});
|
||
|
});
|