diff options
Diffstat (limited to 'spec/frontend/packages_and_registries/dependency_proxy')
4 files changed, 249 insertions, 14 deletions
diff --git a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js index 1f0252965b0..625f00a8666 100644 --- a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js +++ b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js @@ -1,32 +1,40 @@ -import { GlFormInputGroup, GlFormGroup, GlSkeletonLoader, GlSprintf } from '@gitlab/ui'; +import { + GlFormInputGroup, + GlFormGroup, + GlSkeletonLoader, + GlSprintf, + GlEmptyState, +} from '@gitlab/ui'; import { createLocalVue } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { stripTypenames } from 'helpers/graphql_helpers'; import waitForPromises from 'helpers/wait_for_promises'; +import { GRAPHQL_PAGE_SIZE } from '~/packages_and_registries/dependency_proxy/constants'; import DependencyProxyApp from '~/packages_and_registries/dependency_proxy/app.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import ManifestsList from '~/packages_and_registries/dependency_proxy/components/manifests_list.vue'; import getDependencyProxyDetailsQuery from '~/packages_and_registries/dependency_proxy/graphql/queries/get_dependency_proxy_details.query.graphql'; -import { proxyDetailsQuery, proxyData } from './mock_data'; +import { proxyDetailsQuery, proxyData, pagination, proxyManifests } from './mock_data'; const localVue = createLocalVue(); describe('DependencyProxyApp', () => { let wrapper; let apolloProvider; + let resolver; const provideDefaults = { groupPath: 'gitlab-org', dependencyProxyAvailable: true, + noManifestsIllustration: 'noManifestsIllustration', }; - function createComponent({ - provide = provideDefaults, - resolver = jest.fn().mockResolvedValue(proxyDetailsQuery()), - } = {}) { + function createComponent({ provide = provideDefaults } = {}) { localVue.use(VueApollo); const requestHandlers = [[getDependencyProxyDetailsQuery, resolver]]; @@ -53,6 +61,12 @@ describe('DependencyProxyApp', () => { const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader); const findMainArea = () => wrapper.findByTestId('main-area'); const findProxyCountText = () => wrapper.findByTestId('proxy-count'); + const findManifestList = () => wrapper.findComponent(ManifestsList); + const findEmptyState = () => wrapper.findComponent(GlEmptyState); + + beforeEach(() => { + resolver = jest.fn().mockResolvedValue(proxyDetailsQuery()); + }); afterEach(() => { wrapper.destroy(); @@ -78,8 +92,8 @@ describe('DependencyProxyApp', () => { }); it('does not call the graphql endpoint', async () => { - const resolver = jest.fn().mockResolvedValue(proxyDetailsQuery()); - createComponent({ ...createComponentArguments, resolver }); + resolver = jest.fn().mockResolvedValue(proxyDetailsQuery()); + createComponent({ ...createComponentArguments }); await waitForPromises(); @@ -145,14 +159,73 @@ describe('DependencyProxyApp', () => { it('from group has a description with proxy count', () => { expect(findProxyCountText().text()).toBe('Contains 2 blobs of images (1024 Bytes)'); }); + + describe('manifest lists', () => { + describe('when there are no manifests', () => { + beforeEach(() => { + resolver = jest.fn().mockResolvedValue( + proxyDetailsQuery({ + extend: { dependencyProxyManifests: { nodes: [], pageInfo: pagination() } }, + }), + ); + createComponent(); + return waitForPromises(); + }); + + it('shows the empty state message', () => { + expect(findEmptyState().props()).toMatchObject({ + svgPath: provideDefaults.noManifestsIllustration, + title: DependencyProxyApp.i18n.noManifestTitle, + }); + }); + + it('hides the list', () => { + expect(findManifestList().exists()).toBe(false); + }); + }); + + describe('when there are manifests', () => { + it('hides the empty state message', () => { + expect(findEmptyState().exists()).toBe(false); + }); + + it('shows list', () => { + expect(findManifestList().props()).toMatchObject({ + manifests: proxyManifests(), + pagination: stripTypenames(pagination()), + }); + }); + + it('prev-page event on list fetches the previous page', () => { + findManifestList().vm.$emit('prev-page'); + + expect(resolver).toHaveBeenCalledWith({ + before: pagination().startCursor, + first: null, + fullPath: provideDefaults.groupPath, + last: GRAPHQL_PAGE_SIZE, + }); + }); + + it('next-page event on list fetches the next page', () => { + findManifestList().vm.$emit('next-page'); + + expect(resolver).toHaveBeenCalledWith({ + after: pagination().endCursor, + first: GRAPHQL_PAGE_SIZE, + fullPath: provideDefaults.groupPath, + }); + }); + }); + }); }); + describe('when the dependency proxy is disabled', () => { beforeEach(() => { - createComponent({ - resolver: jest - .fn() - .mockResolvedValue(proxyDetailsQuery({ extendSettings: { enabled: false } })), - }); + resolver = jest + .fn() + .mockResolvedValue(proxyDetailsQuery({ extendSettings: { enabled: false } })); + createComponent(); return waitForPromises(); }); diff --git a/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_list_spec.js b/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_list_spec.js new file mode 100644 index 00000000000..9e4c747a1bd --- /dev/null +++ b/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_list_spec.js @@ -0,0 +1,84 @@ +import { GlKeysetPagination } from '@gitlab/ui'; +import { stripTypenames } from 'helpers/graphql_helpers'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import ManifestRow from '~/packages_and_registries/dependency_proxy/components/manifest_row.vue'; + +import Component from '~/packages_and_registries/dependency_proxy/components/manifests_list.vue'; +import { + proxyManifests, + pagination, +} from 'jest/packages_and_registries/dependency_proxy/mock_data'; + +describe('Manifests List', () => { + let wrapper; + + const defaultProps = { + manifests: proxyManifests(), + pagination: stripTypenames(pagination()), + }; + + const createComponent = (propsData = defaultProps) => { + wrapper = shallowMountExtended(Component, { + propsData, + }); + }; + + const findRows = () => wrapper.findAllComponents(ManifestRow); + const findPagination = () => wrapper.findComponent(GlKeysetPagination); + + afterEach(() => { + wrapper.destroy(); + }); + + it('has the correct title', () => { + createComponent(); + + expect(wrapper.text()).toContain(Component.i18n.listTitle); + }); + + it('shows a row for every manifest', () => { + createComponent(); + + expect(findRows().length).toBe(defaultProps.manifests.length); + }); + + it('binds a manifest to each row', () => { + createComponent(); + + expect(findRows().at(0).props()).toMatchObject({ + manifest: defaultProps.manifests[0], + }); + }); + + describe('pagination', () => { + it('is hidden when there is no next or prev pages', () => { + createComponent({ ...defaultProps, pagination: {} }); + + expect(findPagination().exists()).toBe(false); + }); + + it('has the correct props', () => { + createComponent(); + + expect(findPagination().props()).toMatchObject({ + ...defaultProps.pagination, + }); + }); + + it('emits the next-page event', () => { + createComponent(); + + findPagination().vm.$emit('next'); + + expect(wrapper.emitted('next-page')).toEqual([[]]); + }); + + it('emits the prev-page event', () => { + createComponent(); + + findPagination().vm.$emit('prev'); + + expect(wrapper.emitted('prev-page')).toEqual([[]]); + }); + }); +}); diff --git a/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_row_spec.js b/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_row_spec.js new file mode 100644 index 00000000000..b7cbd875497 --- /dev/null +++ b/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_row_spec.js @@ -0,0 +1,59 @@ +import { GlSprintf } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import ListItem from '~/vue_shared/components/registry/list_item.vue'; +import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import Component from '~/packages_and_registries/dependency_proxy/components/manifest_row.vue'; +import { proxyManifests } from 'jest/packages_and_registries/dependency_proxy/mock_data'; + +describe('Manifest Row', () => { + let wrapper; + + const defaultProps = { + manifest: proxyManifests()[0], + }; + + const createComponent = (propsData = defaultProps) => { + wrapper = shallowMountExtended(Component, { + propsData, + stubs: { + GlSprintf, + TimeagoTooltip, + ListItem, + }, + }); + }; + + const findListItem = () => wrapper.findComponent(ListItem); + const findCachedMessages = () => wrapper.findByTestId('cached-message'); + const findTimeAgoTooltip = () => wrapper.findComponent(TimeagoTooltip); + + beforeEach(() => { + createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('has a list item', () => { + expect(findListItem().exists()).toBe(true); + }); + + it('displays the name', () => { + expect(wrapper.text()).toContain('alpine'); + }); + + it('displays the version', () => { + expect(wrapper.text()).toContain('latest'); + }); + + it('displays the cached time', () => { + expect(findCachedMessages().text()).toContain('Cached'); + }); + + it('has a time ago tooltip component', () => { + expect(findTimeAgoTooltip().props()).toMatchObject({ + time: defaultProps.manifest.createdAt, + }); + }); +}); diff --git a/spec/frontend/packages_and_registries/dependency_proxy/mock_data.js b/spec/frontend/packages_and_registries/dependency_proxy/mock_data.js index 23d42e109f9..8bad22b5287 100644 --- a/spec/frontend/packages_and_registries/dependency_proxy/mock_data.js +++ b/spec/frontend/packages_and_registries/dependency_proxy/mock_data.js @@ -7,7 +7,21 @@ export const proxyData = () => ({ export const proxySettings = (extend = {}) => ({ enabled: true, ...extend }); -export const proxyDetailsQuery = ({ extendSettings = {} } = {}) => ({ +export const proxyManifests = () => [ + { createdAt: '2021-09-22T09:45:28Z', imageName: 'alpine:latest' }, + { createdAt: '2021-09-21T09:45:28Z', imageName: 'alpine:stable' }, +]; + +export const pagination = (extend) => ({ + endCursor: 'eyJpZCI6IjIwNSIsIm5hbWUiOiJteS9jb21wYW55L2FwcC9teS1hcHAifQ', + hasNextPage: true, + hasPreviousPage: true, + startCursor: 'eyJpZCI6IjI0NyIsIm5hbWUiOiJ2ZXJzaW9uX3Rlc3QxIn0', + __typename: 'PageInfo', + ...extend, +}); + +export const proxyDetailsQuery = ({ extendSettings = {}, extend } = {}) => ({ data: { group: { ...proxyData(), @@ -16,6 +30,11 @@ export const proxyDetailsQuery = ({ extendSettings = {} } = {}) => ({ ...proxySettings(extendSettings), __typename: 'DependencyProxySetting', }, + dependencyProxyManifests: { + nodes: proxyManifests(), + pageInfo: pagination(), + }, + ...extend, }, }, }); |