diff options
Diffstat (limited to 'spec/frontend/packages_and_registries/shared')
9 files changed, 319 insertions, 0 deletions
diff --git a/spec/frontend/packages_and_registries/shared/__snapshots__/publish_method_spec.js.snap b/spec/frontend/packages_and_registries/shared/components/__snapshots__/publish_method_spec.js.snap index 5f243799bae..5f243799bae 100644 --- a/spec/frontend/packages_and_registries/shared/__snapshots__/publish_method_spec.js.snap +++ b/spec/frontend/packages_and_registries/shared/components/__snapshots__/publish_method_spec.js.snap diff --git a/spec/frontend/packages_and_registries/shared/components/__snapshots__/registry_breadcrumb_spec.js.snap b/spec/frontend/packages_and_registries/shared/components/__snapshots__/registry_breadcrumb_spec.js.snap new file mode 100644 index 00000000000..ceae8eebaef --- /dev/null +++ b/spec/frontend/packages_and_registries/shared/components/__snapshots__/registry_breadcrumb_spec.js.snap @@ -0,0 +1,96 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Registry Breadcrumb when is not rootRoute renders 1`] = ` +<nav + aria-label="Breadcrumb" + class="gl-breadcrumbs" +> + + <ol + class="breadcrumb gl-breadcrumb-list" + > + <li + class="breadcrumb-item gl-breadcrumb-item" + > + <a + class="" + href="/" + target="_self" + > + <span> + + </span> + + <span + class="gl-breadcrumb-separator" + data-testid="separator" + > + <span + class="gl-mx-n5" + > + <svg + aria-hidden="true" + class="gl-icon s8" + data-testid="angle-right-icon" + role="img" + > + <use + href="#angle-right" + /> + </svg> + </span> + </span> + </a> + </li> + + <!----> + <li + class="breadcrumb-item gl-breadcrumb-item" + > + <a + class="" + href="#" + target="_self" + > + <span> + + </span> + + <!----> + </a> + </li> + + <!----> + </ol> +</nav> +`; + +exports[`Registry Breadcrumb when is rootRoute renders 1`] = ` +<nav + aria-label="Breadcrumb" + class="gl-breadcrumbs" +> + + <ol + class="breadcrumb gl-breadcrumb-list" + > + <li + class="breadcrumb-item gl-breadcrumb-item" + > + <a + class="" + href="/" + target="_self" + > + <span> + + </span> + + <!----> + </a> + </li> + + <!----> + </ol> +</nav> +`; diff --git a/spec/frontend/packages_and_registries/shared/package_icon_and_name_spec.js b/spec/frontend/packages_and_registries/shared/components/package_icon_and_name_spec.js index d6d1970cb12..d6d1970cb12 100644 --- a/spec/frontend/packages_and_registries/shared/package_icon_and_name_spec.js +++ b/spec/frontend/packages_and_registries/shared/components/package_icon_and_name_spec.js diff --git a/spec/frontend/packages_and_registries/shared/package_path_spec.js b/spec/frontend/packages_and_registries/shared/components/package_path_spec.js index 93425d4f399..93425d4f399 100644 --- a/spec/frontend/packages_and_registries/shared/package_path_spec.js +++ b/spec/frontend/packages_and_registries/shared/components/package_path_spec.js diff --git a/spec/frontend/packages_and_registries/shared/package_tags_spec.js b/spec/frontend/packages_and_registries/shared/components/package_tags_spec.js index 33e96c0775e..33e96c0775e 100644 --- a/spec/frontend/packages_and_registries/shared/package_tags_spec.js +++ b/spec/frontend/packages_and_registries/shared/components/package_tags_spec.js diff --git a/spec/frontend/packages_and_registries/shared/packages_list_loader_spec.js b/spec/frontend/packages_and_registries/shared/components/packages_list_loader_spec.js index 0005162e0bb..0005162e0bb 100644 --- a/spec/frontend/packages_and_registries/shared/packages_list_loader_spec.js +++ b/spec/frontend/packages_and_registries/shared/components/packages_list_loader_spec.js diff --git a/spec/frontend/packages_and_registries/shared/components/persisted_search_spec.js b/spec/frontend/packages_and_registries/shared/components/persisted_search_spec.js new file mode 100644 index 00000000000..bd492a5ae8f --- /dev/null +++ b/spec/frontend/packages_and_registries/shared/components/persisted_search_spec.js @@ -0,0 +1,145 @@ +import { nextTick } from 'vue'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue'; +import component from '~/packages_and_registries/shared/components/persisted_search.vue'; +import UrlSync from '~/vue_shared/components/url_sync.vue'; +import { useMockLocationHelper } from 'helpers/mock_window_location_helper'; +import { getQueryParams, extractFilterAndSorting } from '~/packages_and_registries/shared/utils'; + +jest.mock('~/packages_and_registries/shared/utils'); + +useMockLocationHelper(); + +describe('Persisted Search', () => { + let wrapper; + + const defaultQueryParamsMock = { + filters: ['foo'], + sorting: { sort: 'desc', orderBy: 'test' }, + }; + + const defaultProps = { + sortableFields: [ + { orderBy: 'test', label: 'test' }, + { orderBy: 'foo', label: 'foo' }, + ], + defaultOrder: 'test', + defaultSort: 'asc', + }; + + const findRegistrySearch = () => wrapper.findComponent(RegistrySearch); + const findUrlSync = () => wrapper.findComponent(UrlSync); + + const mountComponent = (propsData = defaultProps) => { + wrapper = shallowMountExtended(component, { + propsData, + stubs: { + UrlSync, + }, + }); + }; + + beforeEach(() => { + extractFilterAndSorting.mockReturnValue(defaultQueryParamsMock); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('has a registry search component', async () => { + mountComponent(); + + await nextTick(); + + expect(findRegistrySearch().exists()).toBe(true); + }); + + it('registry search is mounted after mount', async () => { + mountComponent(); + + expect(findRegistrySearch().exists()).toBe(false); + }); + + it('has a UrlSync component', () => { + mountComponent(); + + expect(findUrlSync().exists()).toBe(true); + }); + + it('on sorting:changed emits update event and update internal sort', async () => { + const payload = { sort: 'desc', orderBy: 'test' }; + + mountComponent(); + + await nextTick(); + + findRegistrySearch().vm.$emit('sorting:changed', payload); + + await nextTick(); + + expect(findRegistrySearch().props('sorting')).toMatchObject(payload); + + // there is always a first call on mounted that emits up default values + expect(wrapper.emitted('update')[1]).toEqual([ + { + filters: ['foo'], + sort: 'TEST_DESC', + }, + ]); + }); + + it('on filter:changed updates the filters', async () => { + const payload = ['foo']; + + mountComponent(); + + await nextTick(); + + findRegistrySearch().vm.$emit('filter:changed', payload); + + await nextTick(); + + expect(findRegistrySearch().props('filter')).toEqual(['foo']); + }); + + it('on filter:submit emits update event', async () => { + mountComponent(); + + await nextTick(); + + findRegistrySearch().vm.$emit('filter:submit'); + + expect(wrapper.emitted('update')[1]).toEqual([ + { + filters: ['foo'], + sort: 'TEST_DESC', + }, + ]); + }); + + it('on query:changed calls updateQuery from UrlSync', async () => { + jest.spyOn(UrlSync.methods, 'updateQuery').mockImplementation(() => {}); + + mountComponent(); + + await nextTick(); + + findRegistrySearch().vm.$emit('query:changed'); + + expect(UrlSync.methods.updateQuery).toHaveBeenCalled(); + }); + + it('sets the component sorting and filtering based on the querystring', async () => { + mountComponent(); + + await nextTick(); + + expect(getQueryParams).toHaveBeenCalled(); + + expect(findRegistrySearch().props()).toMatchObject({ + filter: defaultQueryParamsMock.filters, + sorting: defaultQueryParamsMock.sorting, + }); + }); +}); diff --git a/spec/frontend/packages_and_registries/shared/publish_method_spec.js b/spec/frontend/packages_and_registries/shared/components/publish_method_spec.js index fa8f8f7641a..fa8f8f7641a 100644 --- a/spec/frontend/packages_and_registries/shared/publish_method_spec.js +++ b/spec/frontend/packages_and_registries/shared/components/publish_method_spec.js diff --git a/spec/frontend/packages_and_registries/shared/components/registry_breadcrumb_spec.js b/spec/frontend/packages_and_registries/shared/components/registry_breadcrumb_spec.js new file mode 100644 index 00000000000..6dfe116c285 --- /dev/null +++ b/spec/frontend/packages_and_registries/shared/components/registry_breadcrumb_spec.js @@ -0,0 +1,78 @@ +import { mount } from '@vue/test-utils'; + +import component from '~/packages_and_registries/shared/components/registry_breadcrumb.vue'; + +describe('Registry Breadcrumb', () => { + let wrapper; + const nameGenerator = jest.fn(); + + const routes = [ + { name: 'list', path: '/', meta: { nameGenerator, root: true } }, + { name: 'details', path: '/:id', meta: { nameGenerator } }, + ]; + + const mountComponent = ($route) => { + wrapper = mount(component, { + mocks: { + $route, + $router: { + options: { + routes, + }, + }, + }, + }); + }; + + beforeEach(() => { + nameGenerator.mockClear(); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('when is rootRoute', () => { + beforeEach(() => { + mountComponent(routes[0]); + }); + + it('renders', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + + it('contains only a single router-link to list', () => { + const links = wrapper.findAll('a'); + + expect(links).toHaveLength(1); + expect(links.at(0).attributes('href')).toBe('/'); + }); + + it('the link text is calculated by nameGenerator', () => { + expect(nameGenerator).toHaveBeenCalledTimes(1); + }); + }); + + describe('when is not rootRoute', () => { + beforeEach(() => { + mountComponent(routes[1]); + }); + + it('renders', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + + it('contains two router-links to list and details', () => { + const links = wrapper.findAll('a'); + + expect(links).toHaveLength(2); + expect(links.at(0).attributes('href')).toBe('/'); + expect(links.at(1).attributes('href')).toBe('#'); + }); + + it('the link text is calculated by nameGenerator', () => { + expect(nameGenerator).toHaveBeenCalledTimes(2); + }); + }); +}); |