diff options
Diffstat (limited to 'spec/frontend/packages_and_registries/package_registry/components')
17 files changed, 186 insertions, 501 deletions
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/conan_installation_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/conan_installation_spec.js.snap index e9f80d5f512..b3d0d88be4d 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/conan_installation_spec.js.snap +++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/conan_installation_spec.js.snap @@ -23,14 +23,18 @@ exports[`ConanInstallation renders all the messages 1`] = ` <code-instruction-stub copytext="Copy Conan Setup Command" - instruction="conan remote add gitlab conanPath" + instruction="conan remote add gitlab http://gdk.test:3000/api/v4/projects/1/packages/conan" label="Add Conan Remote" trackingaction="copy_conan_setup_command" trackinglabel="code_instruction" /> - - <gl-sprintf-stub - message="For more information on the Conan registry, %{linkStart}see the documentation%{linkEnd}." - /> + For more information on the Conan registry, + <gl-link-stub + href="/help/user/packages/conan_repository/index" + target="_blank" + > + see the documentation + </gl-link-stub> + . </div> `; diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/file_sha_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/file_sha_spec.js.snap index 881d441e116..f95564e3fad 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/file_sha_spec.js.snap +++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/file_sha_spec.js.snap @@ -15,11 +15,14 @@ exports[`FileSha renders 1`] = ` foo <gl-button-stub - aria-label="Copy this value" + aria-label="Copy SHA" + aria-live="polite" buttontextclasses="" category="tertiary" + data-clipboard-handle-tooltip="false" data-clipboard-text="foo" icon="copy-to-clipboard" + id="clipboard-button-1" size="small" title="Copy SHA" variant="default" diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/maven_installation_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/maven_installation_spec.js.snap index 4865b8205ab..67f1906f6fd 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/maven_installation_spec.js.snap +++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/maven_installation_spec.js.snap @@ -19,7 +19,7 @@ exports[`MavenInstallation groovy renders all the messages 1`] = ` <code-instruction-stub copytext="Copy add Gradle Groovy DSL repository command" instruction="maven { - url 'mavenPath' + url 'http://gdk.test:3000/api/v4/projects/1/packages/maven' }" label="Add Gradle Groovy DSL repository command" multiline="true" @@ -47,7 +47,7 @@ exports[`MavenInstallation kotlin renders all the messages 1`] = ` <code-instruction-stub copytext="Copy add Gradle Kotlin DSL repository command" - instruction="maven(\\"mavenPath\\")" + instruction="maven(\\"http://gdk.test:3000/api/v4/projects/1/packages/maven\\")" label="Add Gradle Kotlin DSL repository command" multiline="true" trackingaction="copy_kotlin_add_to_source_command" @@ -64,9 +64,15 @@ exports[`MavenInstallation maven renders all the messages 1`] = ` /> <p> - <gl-sprintf-stub - message="Copy and paste this inside your %{codeStart}pom.xml%{codeEnd} %{codeStart}dependencies%{codeEnd} block." - /> + Copy and paste this inside your + <code> + pom.xml + </code> + + <code> + dependencies + </code> + block. </p> <code-instruction-stub @@ -97,9 +103,11 @@ exports[`MavenInstallation maven renders all the messages 1`] = ` </h3> <p> - <gl-sprintf-stub - message="If you haven't already done so, you will need to add the below to your %{codeStart}pom.xml%{codeEnd} file." - /> + If you haven't already done so, you will need to add the below to your + <code> + pom.xml + </code> + file. </p> <code-instruction-stub @@ -107,19 +115,19 @@ exports[`MavenInstallation maven renders all the messages 1`] = ` instruction="<repositories> <repository> <id>gitlab-maven</id> - <url>mavenPath</url> + <url>http://gdk.test:3000/api/v4/projects/1/packages/maven</url> </repository> </repositories> <distributionManagement> <repository> <id>gitlab-maven</id> - <url>mavenPath</url> + <url>http://gdk.test:3000/api/v4/projects/1/packages/maven</url> </repository> <snapshotRepository> <id>gitlab-maven</id> - <url>mavenPath</url> + <url>http://gdk.test:3000/api/v4/projects/1/packages/maven</url> </snapshotRepository> </distributionManagement>" label="" @@ -127,9 +135,13 @@ exports[`MavenInstallation maven renders all the messages 1`] = ` trackingaction="copy_maven_setup_xml" trackinglabel="code_instruction" /> - - <gl-sprintf-stub - message="For more information on the Maven registry, %{linkStart}see the documentation%{linkEnd}." - /> + For more information on the Maven registry, + <gl-link-stub + href="/help/user/packages/maven_repository/index" + target="_blank" + > + see the documentation + </gl-link-stub> + . </div> `; diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/npm_installation_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/npm_installation_spec.js.snap index d5649e39561..4520ae9c328 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/npm_installation_spec.js.snap +++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/npm_installation_spec.js.snap @@ -32,14 +32,18 @@ exports[`NpmInstallation renders all the messages 1`] = ` <code-instruction-stub copytext="Copy npm setup command" - instruction="echo @gitlab-org:registry=npmPath/ >> .npmrc" + instruction="echo @gitlab-org:registry=npmInstanceUrl/ >> .npmrc" label="" trackingaction="copy_npm_setup_command" trackinglabel="code_instruction" /> - - <gl-sprintf-stub - message="You may also need to setup authentication using an auth token. %{linkStart}See the documentation%{linkEnd} to find out more." - /> + You may also need to setup authentication using an auth token. + <gl-link-stub + href="/help/user/packages/npm_registry/index" + target="_blank" + > + See the documentation + </gl-link-stub> + to find out more. </div> `; diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/nuget_installation_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/nuget_installation_spec.js.snap index 29ddd7b77ed..92930a6309a 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/nuget_installation_spec.js.snap +++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/nuget_installation_spec.js.snap @@ -23,14 +23,18 @@ exports[`NugetInstallation renders all the messages 1`] = ` <code-instruction-stub copytext="Copy NuGet Setup Command" - instruction="nuget source Add -Name \\"GitLab\\" -Source \\"nugetPath\\" -UserName <your_username> -Password <your_token>" + instruction="nuget source Add -Name \\"GitLab\\" -Source \\"http://gdk.test:3000/api/v4/projects/1/packages/nuget/index.json\\" -UserName <your_username> -Password <your_token>" label="Add NuGet Source" trackingaction="copy_nuget_setup_command" trackinglabel="code_instruction" /> - - <gl-sprintf-stub - message="For more information on the NuGet registry, %{linkStart}see the documentation%{linkEnd}." - /> + For more information on the NuGet registry, + <gl-link-stub + href="/help/user/packages/nuget_repository/index" + target="_blank" + > + see the documentation + </gl-link-stub> + . </div> `; diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap index 158bbbc3463..06ae8645101 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap +++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap @@ -10,7 +10,7 @@ exports[`PypiInstallation renders all the messages 1`] = ` <code-instruction-stub copytext="Copy Pip command" data-testid="pip-command" - instruction="pip install @gitlab-org/package-15 --extra-index-url pypiPath" + instruction="pip install @gitlab-org/package-15 --extra-index-url http://__token__:<your_personal_token>@gdk.test:3000/api/v4/projects/1/packages/pypi/simple" label="Pip Command" trackingaction="copy_pip_install_command" trackinglabel="code_instruction" @@ -23,16 +23,18 @@ exports[`PypiInstallation renders all the messages 1`] = ` </h3> <p> - <gl-sprintf-stub - message="If you haven't already done so, you will need to add the below to your %{codeStart}.pypirc%{codeEnd} file." - /> + If you haven't already done so, you will need to add the below to your + <code> + .pypirc + </code> + file. </p> <code-instruction-stub copytext="Copy .pypirc content" data-testid="pypi-setup-content" instruction="[gitlab] -repository = pypiSetupPath +repository = http://gdk.test:3000/api/v4/projects/1/packages/pypi username = __token__ password = <your personal access token>" label="" @@ -40,9 +42,13 @@ password = <your personal access token>" trackingaction="copy_pypi_setup_command" trackinglabel="code_instruction" /> - - <gl-sprintf-stub - message="For more information on the PyPi registry, %{linkStart}see the documentation%{linkEnd}." - /> + For more information on the PyPi registry, + <gl-link-stub + href="/help/user/packages/pypi_repository/index" + target="_blank" + > + see the documentation + </gl-link-stub> + . </div> `; diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/app_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/app_spec.js deleted file mode 100644 index 0bea84693f6..00000000000 --- a/spec/frontend/packages_and_registries/package_registry/components/details/app_spec.js +++ /dev/null @@ -1,408 +0,0 @@ -import { GlEmptyState, GlBadge, GlTabs, GlTab } from '@gitlab/ui'; -import { createLocalVue } from '@vue/test-utils'; -import { nextTick } from 'vue'; -import VueApollo from 'vue-apollo'; -import createMockApollo from 'helpers/mock_apollo_helper'; -import { useMockLocationHelper } from 'helpers/mock_window_location_helper'; -import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import waitForPromises from 'helpers/wait_for_promises'; -import createFlash from '~/flash'; - -import AdditionalMetadata from '~/packages_and_registries/package_registry/components/details/additional_metadata.vue'; -import PackagesApp from '~/packages_and_registries/package_registry/components/details/app.vue'; -import DependencyRow from '~/packages_and_registries/package_registry/components/details/dependency_row.vue'; -import InstallationCommands from '~/packages_and_registries/package_registry/components/details/installation_commands.vue'; -import PackageFiles from '~/packages_and_registries/package_registry/components/details/package_files.vue'; -import PackageHistory from '~/packages_and_registries/package_registry/components/details/package_history.vue'; -import PackageTitle from '~/packages_and_registries/package_registry/components/details/package_title.vue'; -import VersionRow from '~/packages_and_registries/package_registry/components/details/version_row.vue'; -import DeletePackage from '~/packages_and_registries/package_registry/components/functional/delete_package.vue'; -import { - FETCH_PACKAGE_DETAILS_ERROR_MESSAGE, - PACKAGE_TYPE_COMPOSER, - DELETE_PACKAGE_FILE_SUCCESS_MESSAGE, - DELETE_PACKAGE_FILE_ERROR_MESSAGE, - PACKAGE_TYPE_NUGET, -} from '~/packages_and_registries/package_registry/constants'; - -import destroyPackageFileMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package_file.mutation.graphql'; -import getPackageDetails from '~/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql'; -import { - packageDetailsQuery, - packageData, - packageVersions, - dependencyLinks, - emptyPackageDetailsQuery, - packageFiles, - packageDestroyFileMutation, - packageDestroyFileMutationError, -} from '../../mock_data'; - -jest.mock('~/flash'); -useMockLocationHelper(); - -const localVue = createLocalVue(); - -describe('PackagesApp', () => { - let wrapper; - let apolloProvider; - - const provide = { - packageId: '111', - titleComponent: 'PackageTitle', - projectName: 'projectName', - canDelete: 'canDelete', - svgPath: 'svgPath', - npmPath: 'npmPath', - npmHelpPath: 'npmHelpPath', - projectListUrl: 'projectListUrl', - groupListUrl: 'groupListUrl', - }; - - function createComponent({ - resolver = jest.fn().mockResolvedValue(packageDetailsQuery()), - fileDeleteMutationResolver = jest.fn().mockResolvedValue(packageDestroyFileMutation()), - } = {}) { - localVue.use(VueApollo); - - const requestHandlers = [ - [getPackageDetails, resolver], - [destroyPackageFileMutation, fileDeleteMutationResolver], - ]; - apolloProvider = createMockApollo(requestHandlers); - - wrapper = shallowMountExtended(PackagesApp, { - localVue, - apolloProvider, - provide, - stubs: { - PackageTitle, - DeletePackage, - GlModal: { - template: '<div></div>', - methods: { - show: jest.fn(), - }, - }, - GlTabs, - GlTab, - }, - }); - } - - const findEmptyState = () => wrapper.findComponent(GlEmptyState); - const findPackageTitle = () => wrapper.findComponent(PackageTitle); - const findPackageHistory = () => wrapper.findComponent(PackageHistory); - const findAdditionalMetadata = () => wrapper.findComponent(AdditionalMetadata); - const findInstallationCommands = () => wrapper.findComponent(InstallationCommands); - const findDeleteModal = () => wrapper.findByTestId('delete-modal'); - const findDeleteButton = () => wrapper.findByTestId('delete-package'); - const findPackageFiles = () => wrapper.findComponent(PackageFiles); - const findDeleteFileModal = () => wrapper.findByTestId('delete-file-modal'); - const findVersionRows = () => wrapper.findAllComponents(VersionRow); - const noVersionsMessage = () => wrapper.findByTestId('no-versions-message'); - const findDependenciesCountBadge = () => wrapper.findComponent(GlBadge); - const findNoDependenciesMessage = () => wrapper.findByTestId('no-dependencies-message'); - const findDependencyRows = () => wrapper.findAllComponents(DependencyRow); - const findDeletePackage = () => wrapper.findComponent(DeletePackage); - - afterEach(() => { - wrapper.destroy(); - }); - - it('renders an empty state component', async () => { - createComponent({ resolver: jest.fn().mockResolvedValue(emptyPackageDetailsQuery) }); - - await waitForPromises(); - - expect(findEmptyState().exists()).toBe(true); - }); - - it('renders the app and displays the package title', async () => { - createComponent(); - - await waitForPromises(); - - expect(findPackageTitle().exists()).toBe(true); - expect(findPackageTitle().props()).toMatchObject({ - packageEntity: expect.objectContaining(packageData()), - }); - }); - - it('emits an error message if the load fails', async () => { - createComponent({ resolver: jest.fn().mockRejectedValue() }); - - await waitForPromises(); - - expect(createFlash).toHaveBeenCalledWith( - expect.objectContaining({ - message: FETCH_PACKAGE_DETAILS_ERROR_MESSAGE, - }), - ); - }); - - it('renders history and has the right props', async () => { - createComponent(); - - await waitForPromises(); - - expect(findPackageHistory().exists()).toBe(true); - expect(findPackageHistory().props()).toMatchObject({ - packageEntity: expect.objectContaining(packageData()), - projectName: provide.projectName, - }); - }); - - it('renders additional metadata and has the right props', async () => { - createComponent(); - - await waitForPromises(); - - expect(findAdditionalMetadata().exists()).toBe(true); - expect(findAdditionalMetadata().props()).toMatchObject({ - packageEntity: expect.objectContaining(packageData()), - }); - }); - - it('renders installation commands and has the right props', async () => { - createComponent(); - - await waitForPromises(); - - expect(findInstallationCommands().exists()).toBe(true); - expect(findInstallationCommands().props()).toMatchObject({ - packageEntity: expect.objectContaining(packageData()), - }); - }); - - describe('delete package', () => { - const originalReferrer = document.referrer; - const setReferrer = (value = provide.projectName) => { - Object.defineProperty(document, 'referrer', { - value, - configurable: true, - }); - }; - - afterEach(() => { - Object.defineProperty(document, 'referrer', { - value: originalReferrer, - configurable: true, - }); - }); - - it('shows the delete confirmation modal when delete is clicked', async () => { - createComponent(); - - await waitForPromises(); - - await findDeleteButton().trigger('click'); - - expect(findDeleteModal().exists()).toBe(true); - }); - - describe('successful request', () => { - it('when referrer contains project name calls window.replace with project url', async () => { - setReferrer(); - - createComponent(); - - await waitForPromises(); - - findDeletePackage().vm.$emit('end'); - - expect(window.location.replace).toHaveBeenCalledWith( - 'projectListUrl?showSuccessDeleteAlert=true', - ); - }); - - it('when referrer does not contain project name calls window.replace with group url', async () => { - setReferrer('baz'); - - createComponent(); - - await waitForPromises(); - - findDeletePackage().vm.$emit('end'); - - expect(window.location.replace).toHaveBeenCalledWith( - 'groupListUrl?showSuccessDeleteAlert=true', - ); - }); - }); - }); - - describe('package files', () => { - it('renders the package files component and has the right props', async () => { - const expectedFile = { ...packageFiles()[0] }; - // eslint-disable-next-line no-underscore-dangle - delete expectedFile.__typename; - createComponent(); - - await waitForPromises(); - - expect(findPackageFiles().exists()).toBe(true); - - expect(findPackageFiles().props('packageFiles')[0]).toMatchObject(expectedFile); - }); - - it('does not render the package files table when the package is composer', async () => { - createComponent({ - resolver: jest - .fn() - .mockResolvedValue(packageDetailsQuery({ packageType: PACKAGE_TYPE_COMPOSER })), - }); - - await waitForPromises(); - - expect(findPackageFiles().exists()).toBe(false); - }); - - describe('deleting a file', () => { - const [fileToDelete] = packageFiles(); - - const doDeleteFile = () => { - findPackageFiles().vm.$emit('delete-file', fileToDelete); - - findDeleteFileModal().vm.$emit('primary'); - - return waitForPromises(); - }; - - it('opens a confirmation modal', async () => { - createComponent(); - - await waitForPromises(); - - findPackageFiles().vm.$emit('delete-file', fileToDelete); - - await nextTick(); - - expect(findDeleteFileModal().exists()).toBe(true); - }); - - it('confirming on the modal deletes the file and shows a success message', async () => { - const resolver = jest.fn().mockResolvedValue(packageDetailsQuery()); - createComponent({ resolver }); - - await waitForPromises(); - - await doDeleteFile(); - - expect(createFlash).toHaveBeenCalledWith( - expect.objectContaining({ - message: DELETE_PACKAGE_FILE_SUCCESS_MESSAGE, - }), - ); - // we are re-fetching the package details, so we expect the resolver to have been called twice - expect(resolver).toHaveBeenCalledTimes(2); - }); - - describe('errors', () => { - it('shows an error when the mutation request fails', async () => { - createComponent({ fileDeleteMutationResolver: jest.fn().mockRejectedValue() }); - await waitForPromises(); - - await doDeleteFile(); - - expect(createFlash).toHaveBeenCalledWith( - expect.objectContaining({ - message: DELETE_PACKAGE_FILE_ERROR_MESSAGE, - }), - ); - }); - - it('shows an error when the mutation request returns an error payload', async () => { - createComponent({ - fileDeleteMutationResolver: jest - .fn() - .mockResolvedValue(packageDestroyFileMutationError()), - }); - await waitForPromises(); - - await doDeleteFile(); - - expect(createFlash).toHaveBeenCalledWith( - expect.objectContaining({ - message: DELETE_PACKAGE_FILE_ERROR_MESSAGE, - }), - ); - }); - }); - }); - }); - - describe('versions', () => { - it('displays the correct version count when the package has versions', async () => { - createComponent(); - - await waitForPromises(); - - expect(findVersionRows()).toHaveLength(packageVersions().length); - }); - - it('binds the correct props', async () => { - const [versionPackage] = packageVersions(); - // eslint-disable-next-line no-underscore-dangle - delete versionPackage.__typename; - delete versionPackage.tags; - - createComponent(); - - await waitForPromises(); - - expect(findVersionRows().at(0).props()).toMatchObject({ - packageEntity: expect.objectContaining(versionPackage), - }); - }); - - it('displays the no versions message when there are none', async () => { - createComponent({ - resolver: jest.fn().mockResolvedValue(packageDetailsQuery({ versions: { nodes: [] } })), - }); - - await waitForPromises(); - - expect(noVersionsMessage().exists()).toBe(true); - }); - }); - describe('dependency links', () => { - it('does not show the dependency links for a non nuget package', async () => { - createComponent(); - - expect(findDependenciesCountBadge().exists()).toBe(false); - }); - - it('shows the dependencies tab with 0 count when a nuget package with no dependencies', async () => { - createComponent({ - resolver: jest.fn().mockResolvedValue( - packageDetailsQuery({ - packageType: PACKAGE_TYPE_NUGET, - dependencyLinks: { nodes: [] }, - }), - ), - }); - - await waitForPromises(); - - expect(findDependenciesCountBadge().exists()).toBe(true); - expect(findDependenciesCountBadge().text()).toBe('0'); - expect(findNoDependenciesMessage().exists()).toBe(true); - }); - - it('renders the correct number of dependency rows for a nuget package', async () => { - createComponent({ - resolver: jest.fn().mockResolvedValue( - packageDetailsQuery({ - packageType: PACKAGE_TYPE_NUGET, - }), - ), - }); - await waitForPromises(); - - expect(findDependenciesCountBadge().exists()).toBe(true); - expect(findDependenciesCountBadge().text()).toBe(dependencyLinks().length.toString()); - expect(findDependencyRows()).toHaveLength(dependencyLinks().length); - }); - }); -}); diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/composer_installation_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/composer_installation_spec.js index aedf20e873a..0aba8f7efc7 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/composer_installation_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/composer_installation_spec.js @@ -7,6 +7,7 @@ import { TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND, TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND, PACKAGE_TYPE_COMPOSER, + COMPOSER_HELP_PATH, } from '~/packages_and_registries/package_registry/constants'; const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_COMPOSER }; @@ -24,9 +25,6 @@ describe('ComposerInstallation', () => { function createComponent(groupListUrl = 'groupListUrl') { wrapper = shallowMountExtended(ComposerInstallation, { provide: { - composerHelpPath: 'composerHelpPath', - composerConfigRepositoryName: 'composerConfigRepositoryName', - composerPath: 'composerPath', groupListUrl, }, propsData: { packageEntity }, @@ -61,7 +59,7 @@ describe('ComposerInstallation', () => { const registryIncludeCommand = findRegistryInclude(); expect(registryIncludeCommand.exists()).toBe(true); expect(registryIncludeCommand.props()).toMatchObject({ - instruction: `composer config repositories.composerConfigRepositoryName '{"type": "composer", "url": "composerPath"}'`, + instruction: `composer config repositories.${packageEntity.composerConfigRepositoryUrl} '{"type": "composer", "url": "${packageEntity.composerUrl}"}'`, copyText: 'Copy registry include', trackingAction: TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND, }); @@ -96,7 +94,7 @@ describe('ComposerInstallation', () => { 'For more information on Composer packages in GitLab, see the documentation.', ); expect(findHelpLink().attributes()).toMatchObject({ - href: 'composerHelpPath', + href: COMPOSER_HELP_PATH, target: '_blank', }); }); diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/conan_installation_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/conan_installation_spec.js index 6b642cc21b7..bf9425def9a 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/conan_installation_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/conan_installation_spec.js @@ -1,8 +1,12 @@ +import { GlLink, GlSprintf } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { packageData } from 'jest/packages_and_registries/package_registry/mock_data'; import ConanInstallation from '~/packages_and_registries/package_registry/components/details/conan_installation.vue'; import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue'; -import { PACKAGE_TYPE_CONAN } from '~/packages_and_registries/package_registry/constants'; +import { + PACKAGE_TYPE_CONAN, + CONAN_HELP_PATH, +} from '~/packages_and_registries/package_registry/constants'; import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue'; const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_CONAN }; @@ -12,16 +16,16 @@ describe('ConanInstallation', () => { const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions); const findInstallationTitle = () => wrapper.findComponent(InstallationTitle); + const findSetupDocsLink = () => wrapper.findComponent(GlLink); function createComponent() { wrapper = shallowMountExtended(ConanInstallation, { - provide: { - conanHelpPath: 'conanHelpPath', - conanPath: 'conanPath', - }, propsData: { packageEntity, }, + stubs: { + GlSprintf, + }, }); } @@ -58,8 +62,15 @@ describe('ConanInstallation', () => { describe('setup commands', () => { it('renders the correct command', () => { expect(findCodeInstructions().at(1).props('instruction')).toBe( - 'conan remote add gitlab conanPath', + `conan remote add gitlab ${packageEntity.conanUrl}`, ); }); + + it('has a link to the docs', () => { + expect(findSetupDocsLink().attributes()).toMatchObject({ + href: CONAN_HELP_PATH, + target: '_blank', + }); + }); }); }); diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/file_sha_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/file_sha_spec.js index ebfbbe5b864..feed7a7c46c 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/file_sha_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/file_sha_spec.js @@ -4,6 +4,8 @@ import FileSha from '~/packages_and_registries/package_registry/components/detai import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import DetailsRow from '~/vue_shared/components/registry/details_row.vue'; +jest.mock('lodash/uniqueId', () => (prefix) => (prefix ? `${prefix}1` : 1)); + describe('FileSha', () => { let wrapper; diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/maven_installation_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/maven_installation_spec.js index eed7e903833..fc60039db30 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/maven_installation_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/maven_installation_spec.js @@ -1,3 +1,4 @@ +import { GlLink, GlSprintf } from '@gitlab/ui'; import { nextTick } from 'vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; @@ -16,6 +17,7 @@ import { TRACKING_ACTION_COPY_KOTLIN_INSTALL_COMMAND, TRACKING_ACTION_COPY_KOTLIN_ADD_TO_SOURCE_COMMAND, PACKAGE_TYPE_MAVEN, + MAVEN_HELP_PATH, } from '~/packages_and_registries/package_registry/constants'; import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue'; @@ -28,9 +30,6 @@ describe('MavenInstallation', () => { metadata: mavenMetadata(), }; - const mavenHelpPath = 'mavenHelpPath'; - const mavenPath = 'mavenPath'; - const xmlCodeBlock = `<dependency> <groupId>appGroup</groupId> <artifactId>appName</artifactId> @@ -40,43 +39,43 @@ describe('MavenInstallation', () => { const mavenSetupXml = `<repositories> <repository> <id>gitlab-maven</id> - <url>${mavenPath}</url> + <url>${packageEntity.mavenUrl}</url> </repository> </repositories> <distributionManagement> <repository> <id>gitlab-maven</id> - <url>${mavenPath}</url> + <url>${packageEntity.mavenUrl}</url> </repository> <snapshotRepository> <id>gitlab-maven</id> - <url>${mavenPath}</url> + <url>${packageEntity.mavenUrl}</url> </snapshotRepository> </distributionManagement>`; const gradleGroovyInstallCommandText = `implementation 'appGroup:appName:appVersion'`; const gradleGroovyAddSourceCommandText = `maven { - url '${mavenPath}' + url '${packageEntity.mavenUrl}' }`; const gradleKotlinInstallCommandText = `implementation("appGroup:appName:appVersion")`; - const gradleKotlinAddSourceCommandText = `maven("${mavenPath}")`; + const gradleKotlinAddSourceCommandText = `maven("${packageEntity.mavenUrl}")`; const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions); const findInstallationTitle = () => wrapper.findComponent(InstallationTitle); + const findSetupDocsLink = () => wrapper.findComponent(GlLink); function createComponent({ data = {} } = {}) { wrapper = shallowMountExtended(MavenInstallation, { - provide: { - mavenHelpPath, - mavenPath, - }, propsData: { packageEntity, }, data() { return data; }, + stubs: { + GlSprintf, + }, }); } @@ -148,6 +147,13 @@ describe('MavenInstallation', () => { trackingAction: TRACKING_ACTION_COPY_MAVEN_SETUP, }); }); + + it('has a setup link', () => { + expect(findSetupDocsLink().attributes()).toMatchObject({ + href: MAVEN_HELP_PATH, + target: '_blank', + }); + }); }); }); diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/npm_installation_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/npm_installation_spec.js index b89410ede13..8c0e2d948ca 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/npm_installation_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/npm_installation_spec.js @@ -1,4 +1,4 @@ -import { GlFormRadioGroup } from '@gitlab/ui'; +import { GlLink, GlSprintf, GlFormRadioGroup } from '@gitlab/ui'; import { nextTick } from 'vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; @@ -15,6 +15,7 @@ import { YARN_PACKAGE_MANAGER, PROJECT_PACKAGE_ENDPOINT_TYPE, INSTANCE_PACKAGE_ENDPOINT_TYPE, + NPM_HELP_PATH, } from '~/packages_and_registries/package_registry/constants'; import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue'; @@ -29,13 +30,12 @@ describe('NpmInstallation', () => { const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions); const findInstallationTitle = () => wrapper.findComponent(InstallationTitle); const findEndPointTypeSector = () => wrapper.findComponent(GlFormRadioGroup); + const findSetupDocsLink = () => wrapper.findComponent(GlLink); function createComponent({ data = {} } = {}) { wrapper = shallowMountExtended(NpmInstallation, { provide: { - npmHelpPath: 'npmHelpPath', - npmPath: 'npmPath', - npmProjectPath: 'npmProjectPath', + npmInstanceUrl: 'npmInstanceUrl', }, propsData: { packageEntity, @@ -43,6 +43,7 @@ describe('NpmInstallation', () => { data() { return data; }, + stubs: { GlSprintf }, }); } @@ -58,6 +59,13 @@ describe('NpmInstallation', () => { expect(wrapper.element).toMatchSnapshot(); }); + it('has a setup link', () => { + expect(findSetupDocsLink().attributes()).toMatchObject({ + href: NPM_HELP_PATH, + target: '_blank', + }); + }); + describe('endpoint type selector', () => { it('has the endpoint type selector', () => { expect(findEndPointTypeSector().exists()).toBe(true); @@ -109,7 +117,7 @@ describe('NpmInstallation', () => { it('renders the correct setup command', () => { expect(findCodeInstructions().at(1).props()).toMatchObject({ - instruction: 'echo @gitlab-org:registry=npmPath/ >> .npmrc', + instruction: 'echo @gitlab-org:registry=npmInstanceUrl/ >> .npmrc', multiline: false, trackingAction: TRACKING_ACTION_COPY_NPM_SETUP_COMMAND, }); @@ -121,7 +129,7 @@ describe('NpmInstallation', () => { await nextTick(); expect(findCodeInstructions().at(1).props()).toMatchObject({ - instruction: `echo @gitlab-org:registry=npmProjectPath/ >> .npmrc`, + instruction: `echo @gitlab-org:registry=${packageEntity.npmUrl}/ >> .npmrc`, multiline: false, trackingAction: TRACKING_ACTION_COPY_NPM_SETUP_COMMAND, }); @@ -131,7 +139,7 @@ describe('NpmInstallation', () => { await nextTick(); expect(findCodeInstructions().at(1).props()).toMatchObject({ - instruction: `echo @gitlab-org:registry=npmPath/ >> .npmrc`, + instruction: `echo @gitlab-org:registry=npmInstanceUrl/ >> .npmrc`, multiline: false, trackingAction: TRACKING_ACTION_COPY_NPM_SETUP_COMMAND, }); @@ -153,7 +161,7 @@ describe('NpmInstallation', () => { it('renders the correct registry command', () => { expect(findCodeInstructions().at(1).props()).toMatchObject({ - instruction: 'echo \\"@gitlab-org:registry\\" \\"npmPath/\\" >> .yarnrc', + instruction: 'echo \\"@gitlab-org:registry\\" \\"npmInstanceUrl/\\" >> .yarnrc', multiline: false, trackingAction: TRACKING_ACTION_COPY_YARN_SETUP_COMMAND, }); @@ -165,7 +173,7 @@ describe('NpmInstallation', () => { await nextTick(); expect(findCodeInstructions().at(1).props()).toMatchObject({ - instruction: `echo \\"@gitlab-org:registry\\" \\"npmProjectPath/\\" >> .yarnrc`, + instruction: `echo \\"@gitlab-org:registry\\" \\"${packageEntity.npmUrl}/\\" >> .yarnrc`, multiline: false, trackingAction: TRACKING_ACTION_COPY_YARN_SETUP_COMMAND, }); @@ -175,7 +183,7 @@ describe('NpmInstallation', () => { await nextTick(); expect(findCodeInstructions().at(1).props()).toMatchObject({ - instruction: 'echo \\"@gitlab-org:registry\\" \\"npmPath/\\" >> .yarnrc', + instruction: 'echo \\"@gitlab-org:registry\\" \\"npmInstanceUrl/\\" >> .yarnrc', multiline: false, trackingAction: TRACKING_ACTION_COPY_YARN_SETUP_COMMAND, }); diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/nuget_installation_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/nuget_installation_spec.js index c48a3f07299..d324d43258c 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/nuget_installation_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/nuget_installation_spec.js @@ -1,3 +1,4 @@ +import { GlLink, GlSprintf } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { packageData } from 'jest/packages_and_registries/package_registry/mock_data'; import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue'; @@ -6,6 +7,7 @@ import { TRACKING_ACTION_COPY_NUGET_INSTALL_COMMAND, TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND, PACKAGE_TYPE_NUGET, + NUGET_HELP_PATH, } from '~/packages_and_registries/package_registry/constants'; import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue'; @@ -15,21 +17,18 @@ describe('NugetInstallation', () => { let wrapper; const nugetInstallationCommandStr = 'nuget install @gitlab-org/package-15 -Source "GitLab"'; - const nugetSetupCommandStr = - 'nuget source Add -Name "GitLab" -Source "nugetPath" -UserName <your_username> -Password <your_token>'; + const nugetSetupCommandStr = `nuget source Add -Name "GitLab" -Source "${packageEntity.nugetUrl}" -UserName <your_username> -Password <your_token>`; const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions); const findInstallationTitle = () => wrapper.findComponent(InstallationTitle); + const findSetupDocsLink = () => wrapper.findComponent(GlLink); function createComponent() { wrapper = shallowMountExtended(NugetInstallation, { - provide: { - nugetHelpPath: 'nugetHelpPath', - nugetPath: 'nugetPath', - }, propsData: { packageEntity, }, + stubs: { GlSprintf }, }); } @@ -71,5 +70,12 @@ describe('NugetInstallation', () => { trackingAction: TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND, }); }); + + it('it has docs link', () => { + expect(findSetupDocsLink().attributes()).toMatchObject({ + href: NUGET_HELP_PATH, + target: '_blank', + }); + }); }); }); diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/package_files_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/package_files_spec.js index 042b2026199..f8a4ba8f3bc 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/package_files_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/package_files_spec.js @@ -28,8 +28,8 @@ describe('Package Files', () => { const createComponent = ({ packageFiles = [file], canDelete = true } = {}) => { wrapper = mountExtended(PackageFiles, { - provide: { canDelete }, propsData: { + canDelete, packageFiles, }, stubs: { diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/pypi_installation_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/pypi_installation_spec.js index 410c1b65348..f2fef6436a6 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/pypi_installation_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/pypi_installation_spec.js @@ -1,3 +1,4 @@ +import { GlLink, GlSprintf } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { packageData } from 'jest/packages_and_registries/package_registry/mock_data'; import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue'; @@ -6,6 +7,7 @@ import { PACKAGE_TYPE_PYPI, TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND, TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND, + PYPI_HELP_PATH, } from '~/packages_and_registries/package_registry/constants'; const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_PYPI }; @@ -13,9 +15,9 @@ const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_PYPI }; describe('PypiInstallation', () => { let wrapper; - const pipCommandStr = 'pip install @gitlab-org/package-15 --extra-index-url pypiPath'; + const pipCommandStr = `pip install @gitlab-org/package-15 --extra-index-url ${packageEntity.pypiUrl}`; const pypiSetupStr = `[gitlab] -repository = pypiSetupPath +repository = ${packageEntity.pypiSetupUrl} username = __token__ password = <your personal access token>`; @@ -23,17 +25,16 @@ password = <your personal access token>`; const setupInstruction = () => wrapper.findByTestId('pypi-setup-content'); const findInstallationTitle = () => wrapper.findComponent(InstallationTitle); + const findSetupDocsLink = () => wrapper.findComponent(GlLink); function createComponent() { wrapper = shallowMountExtended(PypiInstallation, { - provide: { - pypiHelpPath: 'pypiHelpPath', - pypiPath: 'pypiPath', - pypiSetupPath: 'pypiSetupPath', - }, propsData: { packageEntity, }, + stubs: { + GlSprintf, + }, }); } @@ -76,5 +77,12 @@ password = <your personal access token>`; trackingAction: TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND, }); }); + + it('has a link to the docs', () => { + expect(findSetupDocsLink().attributes()).toMatchObject({ + href: PYPI_HELP_PATH, + target: '_blank', + }); + }); }); }); diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap index 165ee962417..18a99f70756 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap +++ b/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap @@ -22,16 +22,20 @@ exports[`packages_list_row renders 1`] = ` <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0" > - <gl-link-stub + <router-link-stub + ariacurrentvalue="page" class="gl-text-body gl-min-w-0" data-qa-selector="package_link" - href="http://gdk.test:3000/gitlab-org/gitlab-test/-/packages/111" + data-testid="details-link" + event="click" + tag="a" + to="[object Object]" > <gl-truncate-stub position="end" text="@gitlab-org/package-15" /> - </gl-link-stub> + </router-link-stub> <!----> diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js b/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js index 292667ec47c..9467a613b2a 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js @@ -1,7 +1,11 @@ -import { GlLink, GlSprintf } from '@gitlab/ui'; +import { GlSprintf } from '@gitlab/ui'; +import { createLocalVue } from '@vue/test-utils'; +import VueRouter from 'vue-router'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; + import PackagesListRow from '~/packages_and_registries/package_registry/components/list/package_list_row.vue'; import PackagePath from '~/packages_and_registries/shared/components/package_path.vue'; import PackageTags from '~/packages_and_registries/shared/components/package_tags.vue'; @@ -13,6 +17,9 @@ import { PACKAGE_ERROR_STATUS } from '~/packages_and_registries/package_registry import ListItem from '~/vue_shared/components/registry/list_item.vue'; import { packageData, packagePipelines, packageProject, packageTags } from '../../mock_data'; +const localVue = createLocalVue(); +localVue.use(VueRouter); + describe('packages_list_row', () => { let wrapper; @@ -28,7 +35,7 @@ describe('packages_list_row', () => { const findDeleteButton = () => wrapper.findByTestId('action-delete'); const findPackageIconAndName = () => wrapper.find(PackageIconAndName); const findListItem = () => wrapper.findComponent(ListItem); - const findPackageLink = () => wrapper.findComponent(GlLink); + const findPackageLink = () => wrapper.findByTestId('details-link'); const findWarningIcon = () => wrapper.findByTestId('warning-icon'); const findLeftSecondaryInfos = () => wrapper.findByTestId('left-secondary-infos'); const findPublishMethod = () => wrapper.findComponent(PublishMethod); @@ -40,6 +47,7 @@ describe('packages_list_row', () => { provide = defaultProvide, } = {}) => { wrapper = shallowMountExtended(PackagesListRow, { + localVue, provide, stubs: { ListItem, @@ -63,6 +71,15 @@ describe('packages_list_row', () => { expect(wrapper.element).toMatchSnapshot(); }); + it('has a link to navigate to the details page', () => { + mountComponent(); + + expect(findPackageLink().props()).toMatchObject({ + event: 'click', + to: { name: 'details', params: { id: getIdFromGraphQLId(packageWithoutTags.id) } }, + }); + }); + describe('tags', () => { it('renders package tags when a package has tags', () => { mountComponent({ packageEntity: packageWithTags }); @@ -120,7 +137,7 @@ describe('packages_list_row', () => { }); it('details link is disabled', () => { - expect(findPackageLink().attributes('disabled')).toBe('true'); + expect(findPackageLink().props('event')).toBe(''); }); it('has a warning icon', () => { |