diff options
Diffstat (limited to 'spec/frontend/packages_and_registries/package_registry')
9 files changed, 204 insertions, 89 deletions
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/additional_metadata_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/additional_metadata_spec.js index 7a71a1cea0f..4f3d780b149 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/additional_metadata_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/additional_metadata_spec.js @@ -1,4 +1,9 @@ +import Vue, { nextTick } from 'vue'; +import VueApollo from 'vue-apollo'; +import { GlAlert } from '@gitlab/ui'; +import * as Sentry from '@sentry/browser'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import createMockApollo from 'helpers/mock_apollo_helper'; import { conanMetadata, mavenMetadata, @@ -6,9 +11,11 @@ import { packageData, composerMetadata, pypiMetadata, + packageMetadataQuery, } from 'jest/packages_and_registries/package_registry/mock_data'; import component from '~/packages_and_registries/package_registry/components/details/additional_metadata.vue'; import { + FETCH_PACKAGE_METADATA_ERROR_MESSAGE, PACKAGE_TYPE_NUGET, PACKAGE_TYPE_CONAN, PACKAGE_TYPE_MAVEN, @@ -16,6 +23,9 @@ import { PACKAGE_TYPE_COMPOSER, PACKAGE_TYPE_PYPI, } from '~/packages_and_registries/package_registry/constants'; +import AdditionalMetadataLoader from '~/packages_and_registries/package_registry/components/details/additional_metadata_loader.vue'; +import waitForPromises from 'helpers/wait_for_promises'; +import getPackageMetadata from '~/packages_and_registries/package_registry/graphql/queries/get_package_metadata.query.graphql'; const mavenPackage = { packageType: PACKAGE_TYPE_MAVEN, metadata: mavenMetadata() }; const conanPackage = { packageType: PACKAGE_TYPE_CONAN, metadata: conanMetadata() }; @@ -24,16 +34,26 @@ const composerPackage = { packageType: PACKAGE_TYPE_COMPOSER, metadata: composer const pypiPackage = { packageType: PACKAGE_TYPE_PYPI, metadata: pypiMetadata() }; const npmPackage = { packageType: PACKAGE_TYPE_NPM, metadata: {} }; -describe('Package Additional Metadata', () => { +Vue.use(VueApollo); + +describe('Package Additional metadata', () => { let wrapper; + let apolloProvider; + const defaultProps = { - packageEntity: { - ...packageData(mavenPackage), - }, + packageId: packageData().id, + packageType: PACKAGE_TYPE_MAVEN, }; - const mountComponent = (props) => { + const mountComponent = ({ + props = {}, + resolver = jest.fn().mockResolvedValue(packageMetadataQuery(mavenPackage)), + } = {}) => { + const requestHandlers = [[getPackageMetadata, resolver]]; + apolloProvider = createMockApollo(requestHandlers); + wrapper = shallowMountExtended(component, { + apolloProvider, propsData: { ...defaultProps, ...props }, stubs: { component: { template: '<div data-testid="component-is"></div>' }, @@ -41,6 +61,10 @@ describe('Package Additional Metadata', () => { }); }; + beforeEach(() => { + jest.spyOn(Sentry, 'captureException').mockImplementation(); + }); + afterEach(() => { wrapper.destroy(); wrapper = null; @@ -49,6 +73,22 @@ describe('Package Additional Metadata', () => { const findTitle = () => wrapper.findByTestId('title'); const findMainArea = () => wrapper.findByTestId('main'); const findComponentIs = () => wrapper.findByTestId('component-is'); + const findAdditionalMetadataLoader = () => wrapper.findComponent(AdditionalMetadataLoader); + const findPackageMetadataAlert = () => wrapper.findComponent(GlAlert); + + it('renders the loading container when loading', () => { + mountComponent(); + + expect(findAdditionalMetadataLoader().exists()).toBe(true); + }); + + it('does not render the loading container once resolved', async () => { + mountComponent(); + await waitForPromises(); + + expect(findAdditionalMetadataLoader().exists()).toBe(false); + expect(Sentry.captureException).not.toHaveBeenCalled(); + }); it('has the correct title', () => { mountComponent(); @@ -56,7 +96,25 @@ describe('Package Additional Metadata', () => { const title = findTitle(); expect(title.exists()).toBe(true); - expect(title.text()).toBe('Additional Metadata'); + expect(title.text()).toMatchInterpolatedText(component.i18n.componentTitle); + }); + + it('does not render gl-alert', () => { + mountComponent(); + + expect(findPackageMetadataAlert().exists()).toBe(false); + }); + + it('renders gl-alert if load fails', async () => { + mountComponent({ resolver: jest.fn().mockRejectedValue() }); + + await waitForPromises(); + + expect(findPackageMetadataAlert().exists()).toBe(true); + expect(findPackageMetadataAlert().text()).toMatchInterpolatedText( + FETCH_PACKAGE_METADATA_ERROR_MESSAGE, + ); + expect(Sentry.captureException).toHaveBeenCalled(); }); it.each` @@ -68,16 +126,22 @@ describe('Package Additional Metadata', () => { ${pypiPackage} | ${true} | ${PACKAGE_TYPE_PYPI} ${npmPackage} | ${false} | ${PACKAGE_TYPE_NPM} `( - `It is $visible that the component is visible when the package is $packageType`, - ({ packageEntity, visible }) => { - mountComponent({ packageEntity }); + `component visibility is $visible when the package is $packageType`, + async ({ packageEntity, visible, packageType }) => { + const resolved = packageMetadataQuery(packageType); + const resolver = jest.fn().mockResolvedValue(resolved); + + mountComponent({ props: { packageType }, resolver }); + + await waitForPromises(); + await nextTick(); expect(findTitle().exists()).toBe(visible); expect(findMainArea().exists()).toBe(visible); expect(findComponentIs().exists()).toBe(visible); if (visible) { - expect(findComponentIs().props('packageEntity')).toEqual(packageEntity); + expect(findComponentIs().props('packageMetadata')).toEqual(packageEntity.metadata); } }, ); diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/composer_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/composer_spec.js index e744680cb9a..bb6846d354f 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/composer_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/composer_spec.js @@ -1,22 +1,16 @@ import { GlSprintf } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import { - packageData, - composerMetadata, -} from 'jest/packages_and_registries/package_registry/mock_data'; +import { composerMetadata } from 'jest/packages_and_registries/package_registry/mock_data'; import component from '~/packages_and_registries/package_registry/components/details/metadata/composer.vue'; -import { PACKAGE_TYPE_COMPOSER } from '~/packages_and_registries/package_registry/constants'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import DetailsRow from '~/vue_shared/components/registry/details_row.vue'; -const composerPackage = { packageType: PACKAGE_TYPE_COMPOSER, metadata: composerMetadata() }; - describe('Composer Metadata', () => { let wrapper; const mountComponent = () => { wrapper = shallowMountExtended(component, { - propsData: { packageEntity: packageData(composerPackage) }, + propsData: { packageMetadata: composerMetadata() }, stubs: { DetailsRow, GlSprintf, diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/conan_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/conan_spec.js index 46593047f1f..e7e47401aa1 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/conan_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/conan_spec.js @@ -1,22 +1,16 @@ import { GlSprintf } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import { - conanMetadata, - packageData, -} from 'jest/packages_and_registries/package_registry/mock_data'; +import { conanMetadata } from 'jest/packages_and_registries/package_registry/mock_data'; import component from '~/packages_and_registries/package_registry/components/details/metadata/conan.vue'; -import { PACKAGE_TYPE_CONAN } from '~/packages_and_registries/package_registry/constants'; import DetailsRow from '~/vue_shared/components/registry/details_row.vue'; -const conanPackage = { packageType: PACKAGE_TYPE_CONAN, metadata: conanMetadata() }; - describe('Conan Metadata', () => { let wrapper; const mountComponent = () => { wrapper = shallowMountExtended(component, { propsData: { - packageEntity: packageData(conanPackage), + packageMetadata: conanMetadata(), }, stubs: { DetailsRow, diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/maven_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/maven_spec.js index bc54cf1cb98..8680d983042 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/maven_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/maven_spec.js @@ -1,24 +1,16 @@ import { GlSprintf } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import { - mavenMetadata, - packageData, -} from 'jest/packages_and_registries/package_registry/mock_data'; +import { mavenMetadata } from 'jest/packages_and_registries/package_registry/mock_data'; import component from '~/packages_and_registries/package_registry/components/details/metadata/maven.vue'; -import { PACKAGE_TYPE_MAVEN } from '~/packages_and_registries/package_registry/constants'; import DetailsRow from '~/vue_shared/components/registry/details_row.vue'; -const mavenPackage = { packageType: PACKAGE_TYPE_MAVEN, metadata: mavenMetadata() }; - describe('Maven Metadata', () => { let wrapper; const mountComponent = () => { wrapper = shallowMountExtended(component, { propsData: { - packageEntity: { - ...packageData(mavenPackage), - }, + packageMetadata: mavenMetadata(), }, stubs: { DetailsRow, diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/nuget_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/nuget_spec.js index f759fe7a81c..af3692023f0 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/nuget_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/nuget_spec.js @@ -1,25 +1,17 @@ import { GlLink, GlSprintf } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import { - nugetMetadata, - packageData, -} from 'jest/packages_and_registries/package_registry/mock_data'; +import { nugetMetadata } from 'jest/packages_and_registries/package_registry/mock_data'; import component from '~/packages_and_registries/package_registry/components/details/metadata/nuget.vue'; -import { PACKAGE_TYPE_NUGET } from '~/packages_and_registries/package_registry/constants'; import DetailsRow from '~/vue_shared/components/registry/details_row.vue'; describe('Nuget Metadata', () => { - let nugetPackage = { packageType: PACKAGE_TYPE_NUGET, metadata: nugetMetadata() }; + let nugetPackageMetadata = { ...nugetMetadata() }; let wrapper; - const mountComponent = () => { + const mountComponent = (props) => { wrapper = shallowMountExtended(component, { - propsData: { - packageEntity: { - ...packageData(nugetPackage), - }, - }, + propsData: { ...props }, stubs: { DetailsRow, GlSprintf, @@ -37,7 +29,7 @@ describe('Nuget Metadata', () => { const findElementLink = (container) => container.findComponent(GlLink); beforeEach(() => { - mountComponent({ packageEntity: nugetPackage }); + mountComponent({ packageMetadata: nugetPackageMetadata }); }); it.each` @@ -49,14 +41,14 @@ describe('Nuget Metadata', () => { expect(element.exists()).toBe(true); expect(element.text()).toBe(text); expect(element.props('icon')).toBe(icon); - expect(findElementLink(element).attributes('href')).toBe(nugetPackage.metadata[link]); + expect(findElementLink(element).attributes('href')).toBe(nugetPackageMetadata[link]); }); describe('without source', () => { beforeAll(() => { - nugetPackage = { - packageType: PACKAGE_TYPE_NUGET, - metadata: { iconUrl: 'iconUrl', licenseUrl: 'licenseUrl' }, + nugetPackageMetadata = { + iconUrl: 'iconUrl', + licenseUrl: 'licenseUrl', }; }); @@ -67,9 +59,9 @@ describe('Nuget Metadata', () => { describe('without license', () => { beforeAll(() => { - nugetPackage = { - packageType: PACKAGE_TYPE_NUGET, - metadata: { iconUrl: 'iconUrl', projectUrl: 'projectUrl' }, + nugetPackageMetadata = { + iconUrl: 'iconUrl', + projectUrl: 'projectUrl', }; }); diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/pypi_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/pypi_spec.js index c4481c3f20b..d7c6ea8379d 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/pypi_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/pypi_spec.js @@ -1,22 +1,17 @@ import { GlSprintf } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import { packageData, pypiMetadata } from 'jest/packages_and_registries/package_registry/mock_data'; +import { pypiMetadata } from 'jest/packages_and_registries/package_registry/mock_data'; import component from '~/packages_and_registries/package_registry/components/details/metadata/pypi.vue'; -import { PACKAGE_TYPE_PYPI } from '~/packages_and_registries/package_registry/constants'; import DetailsRow from '~/vue_shared/components/registry/details_row.vue'; -const pypiPackage = { packageType: PACKAGE_TYPE_PYPI, metadata: pypiMetadata() }; - describe('Package Additional Metadata', () => { let wrapper; const mountComponent = () => { wrapper = shallowMountExtended(component, { propsData: { - packageEntity: { - ...packageData(pypiPackage), - }, + packageMetadata: pypiMetadata(), }, stubs: { DetailsRow, diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/package_history_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/package_history_spec.js index e68916ecb39..f4e6d43812d 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/package_history_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/package_history_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; -import { GlLink, GlSprintf } from '@gitlab/ui'; -import createFlash from '~/flash'; +import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui'; +import * as Sentry from '@sentry/browser'; import { stubComponent } from 'helpers/stub_component'; import createMockApollo from 'helpers/mock_apollo_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; @@ -11,7 +11,6 @@ import { packagePipelinesQuery, } from 'jest/packages_and_registries/package_registry/mock_data'; import { HISTORY_PIPELINES_LIMIT } from '~/packages_and_registries/shared/constants'; -import { FETCH_PACKAGE_PIPELINES_ERROR_MESSAGE } from '~/packages_and_registries/package_registry/constants'; import component from '~/packages_and_registries/package_registry/components/details/package_history.vue'; import PackageHistoryLoader from '~/packages_and_registries/package_registry/components/details/package_history_loader.vue'; import HistoryItem from '~/vue_shared/components/registry/history_item.vue'; @@ -19,7 +18,8 @@ import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import waitForPromises from 'helpers/wait_for_promises'; import getPackagePipelines from '~/packages_and_registries/package_registry/graphql/queries/get_package_pipelines.query.graphql'; -jest.mock('~/flash'); +Vue.use(VueApollo); + describe('Package History', () => { let wrapper; let apolloProvider; @@ -34,12 +34,10 @@ describe('Package History', () => { const createPipelines = (amount) => [...Array(amount)].map((x, index) => packagePipelines({ id: index + 1 })[0]); - const mountComponent = ( - props, + const mountComponent = ({ + props = {}, resolver = jest.fn().mockResolvedValue(packagePipelinesQuery()), - ) => { - Vue.use(VueApollo); - + } = {}) => { const requestHandlers = [[getPackagePipelines, resolver]]; apolloProvider = createMockApollo(requestHandlers); @@ -55,14 +53,20 @@ describe('Package History', () => { }); }; + beforeEach(() => { + jest.spyOn(Sentry, 'captureException').mockImplementation(); + }); + afterEach(() => { wrapper.destroy(); + wrapper = null; }); const findPackageHistoryLoader = () => wrapper.findComponent(PackageHistoryLoader); const findHistoryElement = (testId) => wrapper.findByTestId(testId); const findElementLink = (container) => container.findComponent(GlLink); const findElementTimeAgo = (container) => container.findComponent(TimeAgoTooltip); + const findPackageHistoryAlert = () => wrapper.findComponent(GlAlert); const findTitle = () => wrapper.findByTestId('title'); const findTimeline = () => wrapper.findByTestId('timeline'); @@ -77,6 +81,7 @@ describe('Package History', () => { await waitForPromises(); expect(findPackageHistoryLoader().exists()).toBe(false); + expect(Sentry.captureException).not.toHaveBeenCalled(); }); it('has the correct title', async () => { @@ -101,16 +106,22 @@ describe('Package History', () => { ); }); - it('calls createFlash function if load fails', async () => { - mountComponent({}, jest.fn().mockRejectedValue()); + it('does not render gl-alert', () => { + mountComponent(); + + expect(findPackageHistoryAlert().exists()).toBe(false); + }); + + it('renders gl-alert if load fails', async () => { + mountComponent({ resolver: jest.fn().mockRejectedValue() }); await waitForPromises(); - expect(createFlash).toHaveBeenCalledWith( - expect.objectContaining({ - message: FETCH_PACKAGE_PIPELINES_ERROR_MESSAGE, - }), + expect(findPackageHistoryAlert().exists()).toBe(true); + expect(findPackageHistoryAlert().text()).toEqual( + 'Something went wrong while fetching the package history.', ); + expect(Sentry.captureException).toHaveBeenCalled(); }); describe.each` @@ -132,13 +143,16 @@ describe('Package History', () => { const pipelinesResolver = jest .fn() .mockResolvedValue(packagePipelinesQuery(createPipelines(amount))); - mountComponent( - { + + mountComponent({ + props: { packageEntity, }, - pipelinesResolver, - ); + resolver: pipelinesResolver, + }); + await waitForPromises(); + element = findHistoryElement(name); }); diff --git a/spec/frontend/packages_and_registries/package_registry/mock_data.js b/spec/frontend/packages_and_registries/package_registry/mock_data.js index 3dfcec37ea7..d40feee582f 100644 --- a/spec/frontend/packages_and_registries/package_registry/mock_data.js +++ b/spec/frontend/packages_and_registries/package_registry/mock_data.js @@ -148,6 +148,8 @@ export const conanMetadata = () => ({ recipePath: 'package-8/1.0.0/gitlab-org+gitlab-test/stable', }); +const conanMetadataQuery = () => ({ ...conanMetadata(), __typename: 'ConanMetadata' }); + export const composerMetadata = () => ({ targetSha: 'b83d6e391c22777fca1ed3012fce84f633d7fed0', composerJson: { @@ -156,23 +158,45 @@ export const composerMetadata = () => ({ }, }); +const composerMetadataQuery = () => ({ + ...composerMetadata(), + __typename: 'ComposerMetadata', +}); + export const pypiMetadata = () => ({ + id: 'pypi-1', requiredPython: '1.0.0', }); +const pypiMetadataQuery = () => ({ ...pypiMetadata(), __typename: 'PypiMetadata' }); + export const mavenMetadata = () => ({ + id: 'maven-1', appName: 'appName', appGroup: 'appGroup', appVersion: 'appVersion', path: 'path', }); +const mavenMetadataQuery = () => ({ ...mavenMetadata(), __typename: 'MavenMetadata' }); + export const nugetMetadata = () => ({ + id: 'nuget-1', iconUrl: 'iconUrl', licenseUrl: 'licenseUrl', projectUrl: 'projectUrl', }); +const nugetMetadataQuery = () => ({ ...nugetMetadata(), __typename: 'NugetMetadata' }); + +const packageTypeMetadataQueryMapping = { + CONAN: conanMetadataQuery, + COMPOSER: composerMetadataQuery, + PYPI: pypiMetadataQuery, + MAVEN: mavenMetadataQuery, + NUGET: nugetMetadataQuery, +}; + export const pagination = (extend) => ({ endCursor: 'eyJpZCI6IjIwNSIsIm5hbWUiOiJteS9jb21wYW55L2FwcC9teS1hcHAifQ', hasNextPage: true, @@ -202,6 +226,10 @@ export const packageDetailsQuery = (extendPackage) => ({ nodes: packageTags(), __typename: 'PackageTagConnection', }, + pipelines: { + nodes: packagePipelines(), + __typename: 'PipelineConnection', + }, packageFiles: { nodes: packageFiles(), __typename: 'PackageFileConnection', @@ -240,6 +268,21 @@ export const emptyPackageDetailsQuery = () => ({ }, }); +export const packageMetadataQuery = (packageType) => { + return { + data: { + package: { + id: 'gid://gitlab/Packages::Package/111', + packageType, + metadata: { + ...(packageTypeMetadataQueryMapping[packageType]?.() ?? {}), + }, + __typename: 'PackageDetailsType', + }, + }, + }; +}; + export const packageDestroyMutation = () => ({ data: { destroyPackage: { diff --git a/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js b/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js index a7e31d42c9e..3cadb001c58 100644 --- a/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js @@ -23,6 +23,10 @@ import { DELETE_PACKAGE_FILE_SUCCESS_MESSAGE, DELETE_PACKAGE_FILE_ERROR_MESSAGE, PACKAGE_TYPE_NUGET, + PACKAGE_TYPE_MAVEN, + PACKAGE_TYPE_CONAN, + PACKAGE_TYPE_PYPI, + PACKAGE_TYPE_NPM, } from '~/packages_and_registries/package_registry/constants'; import destroyPackageFileMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package_file.mutation.graphql'; @@ -160,15 +164,38 @@ describe('PackagesApp', () => { }); }); - it('renders additional metadata and has the right props', async () => { - createComponent(); + describe('additional metadata', () => { + it.each` + packageType | visible + ${PACKAGE_TYPE_MAVEN} | ${true} + ${PACKAGE_TYPE_CONAN} | ${true} + ${PACKAGE_TYPE_NUGET} | ${true} + ${PACKAGE_TYPE_COMPOSER} | ${true} + ${PACKAGE_TYPE_PYPI} | ${true} + ${PACKAGE_TYPE_NPM} | ${false} + `( + `It is $visible that the component is visible when the package is $packageType`, + async ({ packageType, visible }) => { + createComponent({ + resolver: jest.fn().mockResolvedValue( + packageDetailsQuery({ + packageType, + }), + ), + }); - await waitForPromises(); + await waitForPromises(); - expect(findAdditionalMetadata().exists()).toBe(true); - expect(findAdditionalMetadata().props()).toMatchObject({ - packageEntity: expect.objectContaining(packageWithoutTypename), - }); + expect(findAdditionalMetadata().exists()).toBe(visible); + + if (visible) { + expect(findAdditionalMetadata().props()).toMatchObject({ + packageId: packageWithoutTypename.id, + packageType, + }); + } + }, + ); }); it('renders installation commands and has the right props', async () => { |