Skip to content

G
gitlab-ce
Commit 203d137d authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by Olena Horal-Koretska
Browse files
Options

Remove obsolete component from old package app

parent d2167efa
Hide whitespace changes
Inline Side-by-side
Showing with 26 additions and 2607 deletions
app/assets/javascripts/packages/details/components/additional_metadata.vue deleted 100644 → 0
View file @ d2167efa
<script>
import { GlLink, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
import { PackageType } from '../../shared/constants';
export default {
i18n: {
sourceText: s__('PackageRegistry|Source project located at %{link}'),
licenseText: s__('PackageRegistry|License information located at %{link}'),
recipeText: s__('PackageRegistry|Recipe: %{recipe}'),
appGroup: s__('PackageRegistry|App group: %{group}'),
appName: s__('PackageRegistry|App name: %{name}'),
},
components: {
DetailsRow,
GlLink,
GlSprintf,
},
props: {
packageEntity: {
type: Object,
required: true,
},
},
computed: {
showMetadata() {
const visibilityConditions = {
[PackageType.NUGET]: this.packageEntity.nuget_metadatum,
[PackageType.CONAN]: this.packageEntity.conan_metadatum,
[PackageType.MAVEN]: this.packageEntity.maven_metadatum,
};
return visibilityConditions[this.packageEntity.package_type];
},
},
};
</script>
<template>
<div v-if="showMetadata">
<h3 class="gl-font-lg" data-testid="title">{{ __('Additional Metadata') }}</h3>
<div class="gl-bg-gray-50 gl-inset-border-1-gray-100 gl-rounded-base" data-testid="main">
<template v-if="packageEntity.nuget_metadatum">
<details-row icon="project" padding="gl-p-4" dashed data-testid="nuget-source">
<gl-sprintf :message="$options.i18n.sourceText">
<template #link>
<gl-link :href="packageEntity.nuget_metadatum.project_url" target="_blank">{{
packageEntity.nuget_metadatum.project_url
}}</gl-link>
</template>
</gl-sprintf>
</details-row>
<details-row icon="license" padding="gl-p-4" data-testid="nuget-license">
<gl-sprintf :message="$options.i18n.licenseText">
<template #link>
<gl-link :href="packageEntity.nuget_metadatum.license_url" target="_blank">{{
packageEntity.nuget_metadatum.license_url
}}</gl-link>
</template>
</gl-sprintf>
</details-row>
</template>
<details-row
v-else-if="packageEntity.conan_metadatum"
icon="information-o"
padding="gl-p-4"
data-testid="conan-recipe"
>
<gl-sprintf :message="$options.i18n.recipeText">
<template #recipe>{{ packageEntity.name }}</template>
</gl-sprintf>
</details-row>
<template v-else-if="packageEntity.maven_metadatum">
<details-row icon="information-o" padding="gl-p-4" dashed data-testid="maven-app">
<gl-sprintf :message="$options.i18n.appName">
<template #name>
<strong>{{ packageEntity.maven_metadatum.app_name }}</strong>
</template>
</gl-sprintf>
</details-row>
<details-row icon="information-o" padding="gl-p-4" data-testid="maven-group">
<gl-sprintf :message="$options.i18n.appGroup">
<template #group>
<strong>{{ packageEntity.maven_metadatum.app_group }}</strong>
</template>
</gl-sprintf>
</details-row>
</template>
</div>
</div>
</template>
app/assets/javascripts/packages/details/components/app.vue
View file @ 203d137d
<script> <script>
import { import {
GlBadge,
GlButton, GlButton,
GlModal, GlModal,
GlModalDirective, GlModalDirective,
...@@ -14,36 +13,30 @@ import { mapActions, mapState } from 'vuex'; ...@@ -14,36 +13,30 @@ import { mapActions, mapState } from 'vuex';
import { numberToHumanSize } from '~/lib/utils/number_utils'; import { numberToHumanSize } from '~/lib/utils/number_utils';
import { objectToQuery } from '~/lib/utils/url_utility'; import { objectToQuery } from '~/lib/utils/url_utility';
import { s__, __ } from '~/locale'; import { s__, __ } from '~/locale';
import TerraformTitle from '~/packages_and_registries/infrastructure_registry/components/details_title.vue';
import TerraformInstallation from '~/packages_and_registries/infrastructure_registry/components/terraform_installation.vue';
import Tracking from '~/tracking'; import Tracking from '~/tracking';
import PackageListRow from '../../shared/components/package_list_row.vue'; import PackageListRow from '../../shared/components/package_list_row.vue';
import PackagesListLoader from '../../shared/components/packages_list_loader.vue'; import PackagesListLoader from '../../shared/components/packages_list_loader.vue';
import { PackageType, TrackingActions, SHOW_DELETE_SUCCESS_ALERT } from '../../shared/constants'; import { TrackingActions, SHOW_DELETE_SUCCESS_ALERT } from '../../shared/constants';
import { packageTypeToTrackCategory } from '../../shared/utils'; import { packageTypeToTrackCategory } from '../../shared/utils';
import AdditionalMetadata from './additional_metadata.vue';
import DependencyRow from './dependency_row.vue';
import InstallationCommands from './installation_commands.vue';
import PackageFiles from './package_files.vue'; import PackageFiles from './package_files.vue';
import PackageHistory from './package_history.vue'; import PackageHistory from './package_history.vue';
export default { export default {
name: 'PackagesApp', name: 'PackagesApp',
components: { components: {
GlBadge,
GlButton, GlButton,
GlEmptyState, GlEmptyState,
GlModal, GlModal,
GlTab, GlTab,
GlTabs, GlTabs,
GlSprintf, GlSprintf,
PackageTitle: () => import('./package_title.vue'), TerraformTitle,
TerraformTitle: () =>
import('~/packages_and_registries/infrastructure_registry/components/details_title.vue'),
PackagesListLoader, PackagesListLoader,
PackageListRow, PackageListRow,
DependencyRow,
PackageHistory, PackageHistory,
AdditionalMetadata, TerraformInstallation,
InstallationCommands,
PackageFiles, PackageFiles,
}, },
directives: { directives: {
...@@ -51,12 +44,6 @@ export default { ...@@ -51,12 +44,6 @@ export default {
GlModal: GlModalDirective, GlModal: GlModalDirective,
}, },
mixins: [Tracking.mixin()], mixins: [Tracking.mixin()],
inject: {
titleComponent: {
default: 'PackageTitle',
from: 'titleComponent',
},
},
trackingActions: { ...TrackingActions }, trackingActions: { ...TrackingActions },
data() { data() {
return { return {
...@@ -87,15 +74,6 @@ export default { ...@@ -87,15 +74,6 @@ export default {
hasVersions() { hasVersions() {
return this.packageEntity.versions?.length > 0; return this.packageEntity.versions?.length > 0;
}, },
packageDependencies() {
return this.packageEntity.dependency_links || [];
},
showDependencies() {
return this.packageEntity.package_type === PackageType.NUGET;
},
showFiles() {
return this.packageEntity?.package_type !== PackageType.COMPOSER;
},
}, },
methods: { methods: {
...mapActions(['deletePackage', 'fetchPackageVersions', 'deletePackageFile']), ...mapActions(['deletePackage', 'fetchPackageVersions', 'deletePackageFile']),
...@@ -167,7 +145,7 @@ export default { ...@@ -167,7 +145,7 @@ export default {
/> />
<div v-else class="packages-app"> <div v-else class="packages-app">
<component :is="titleComponent"> <terraform-title>
<template #delete-button> <template #delete-button>
<gl-button <gl-button
v-if="canDelete" v-if="canDelete"
...@@ -180,24 +158,16 @@ export default { ...@@ -180,24 +158,16 @@ export default {
{{ __('Delete') }} {{ __('Delete') }}
</gl-button> </gl-button>
</template> </template>
</component> </terraform-title>
<gl-tabs> <gl-tabs>
<gl-tab :title="__('Detail')"> <gl-tab :title="__('Detail')">
<div data-qa-selector="package_information_content"> <div data-qa-selector="package_information_content">
<package-history :package-entity="packageEntity" :project-name="projectName" /> <package-history :package-entity="packageEntity" :project-name="projectName" />
<terraform-installation />
<installation-commands
:package-entity="packageEntity"
:npm-path="npmPath"
:npm-help-path="npmHelpPath"
/>
<additional-metadata :package-entity="packageEntity" />
</div> </div>
<package-files <package-files
v-if="showFiles"
:package-files="packageFiles" :package-files="packageFiles"
:can-delete="canDelete" :can-delete="canDelete"
@download-file="track($options.trackingActions.PULL_PACKAGE)" @download-file="track($options.trackingActions.PULL_PACKAGE)"
...@@ -205,27 +175,6 @@ export default { ...@@ -205,27 +175,6 @@ export default {
/> />
</gl-tab> </gl-tab>
<gl-tab v-if="showDependencies" title-item-class="js-dependencies-tab">
<template #title>
<span>{{ __('Dependencies') }}</span>
<gl-badge size="sm" data-testid="dependencies-badge">{{
packageDependencies.length
}}</gl-badge>
</template>
<template v-if="packageDependencies.length > 0">
<dependency-row
v-for="(dep, index) in packageDependencies"
:key="index"
:dependency="dep"
/>
</template>
<p v-else class="gl-mt-3" data-testid="no-dependencies-message">
{{ s__('PackageRegistry|This NuGet package has no dependencies.') }}
</p>
</gl-tab>
<gl-tab <gl-tab
:title="__('Other versions')" :title="__('Other versions')"
title-item-class="js-versions-tab" title-item-class="js-versions-tab"
...@@ -254,7 +203,6 @@ export default { ...@@ -254,7 +203,6 @@ export default {
<gl-modal <gl-modal
ref="deleteModal" ref="deleteModal"
class="js-delete-modal"
modal-id="delete-modal" modal-id="delete-modal"
:action-primary="$options.modal.packageDeletePrimaryAction" :action-primary="$options.modal.packageDeletePrimaryAction"
:action-cancel="$options.modal.cancelAction" :action-cancel="$options.modal.cancelAction"
......
app/assets/javascripts/packages/details/components/composer_installation.vue deleted 100644 → 0
View file @ d2167efa
<script>
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mapGetters, mapState } from 'vuex';
import { s__ } from '~/locale';
import InstallationTitle from '~/packages/details/components/installation_title.vue';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import { TrackingActions, TrackingLabels } from '../constants';
export default {
name: 'ComposerInstallation',
components: {
InstallationTitle,
CodeInstruction,
GlLink,
GlSprintf,
},
computed: {
...mapState(['composerHelpPath']),
...mapGetters(['composerRegistryInclude', 'composerPackageInclude', 'groupExists']),
},
i18n: {
registryInclude: s__('PackageRegistry|Add composer registry'),
copyRegistryInclude: s__('PackageRegistry|Copy registry include'),
packageInclude: s__('PackageRegistry|Install package version'),
copyPackageInclude: s__('PackageRegistry|Copy require package include'),
infoLine: s__(
'PackageRegistry|For more information on Composer packages in GitLab, %{linkStart}see the documentation.%{linkEnd}',
),
},
trackingActions: { ...TrackingActions },
TrackingLabels,
installOptions: [{ value: 'composer', label: s__('PackageRegistry|Show Composer commands') }],
};
</script>
<template>
<div v-if="groupExists" data-testid="root-node">
<installation-title package-type="composer" :options="$options.installOptions" />
<code-instruction
:label="$options.i18n.registryInclude"
:instruction="composerRegistryInclude"
:copy-text="$options.i18n.copyRegistryInclude"
:tracking-action="$options.trackingActions.COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
data-testid="registry-include"
/>
<code-instruction
:label="$options.i18n.packageInclude"
:instruction="composerPackageInclude"
:copy-text="$options.i18n.copyPackageInclude"
:tracking-action="$options.trackingActions.COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
data-testid="package-include"
/>
<span data-testid="help-text">
<gl-sprintf :message="$options.i18n.infoLine">
<template #link="{ content }">
<gl-link :href="composerHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</span>
</div>
</template>
app/assets/javascripts/packages/details/components/conan_installation.vue deleted 100644 → 0
View file @ d2167efa
<script>
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mapGetters, mapState } from 'vuex';
import { s__ } from '~/locale';
import InstallationTitle from '~/packages/details/components/installation_title.vue';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import { TrackingActions, TrackingLabels } from '../constants';
export default {
name: 'ConanInstallation',
components: {
InstallationTitle,
CodeInstruction,
GlLink,
GlSprintf,
},
computed: {
...mapState(['conanHelpPath']),
...mapGetters(['conanInstallationCommand', 'conanSetupCommand']),
},
i18n: {
helpText: s__(
'PackageRegistry|For more information on the Conan registry, %{linkStart}see the documentation%{linkEnd}.',
),
},
trackingActions: { ...TrackingActions },
TrackingLabels,
installOptions: [{ value: 'conan', label: s__('PackageRegistry|Show Conan commands') }],
};
</script>
<template>
<div>
<installation-title package-type="conan" :options="$options.installOptions" />
<code-instruction
:label="s__('PackageRegistry|Conan Command')"
:instruction="conanInstallationCommand"
:copy-text="s__('PackageRegistry|Copy Conan Command')"
:tracking-action="$options.trackingActions.COPY_CONAN_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
<code-instruction
:label="s__('PackageRegistry|Add Conan Remote')"
:instruction="conanSetupCommand"
:copy-text="s__('PackageRegistry|Copy Conan Setup Command')"
:tracking-action="$options.trackingActions.COPY_CONAN_SETUP_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="conanHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</template>
app/assets/javascripts/packages/details/components/dependency_row.vue deleted 100644 → 0
View file @ d2167efa
<script>
export default {
name: 'DependencyRow',
props: {
dependency: {
type: Object,
required: true,
},
},
computed: {
showVersion() {
return Boolean(this.dependency.version_pattern);
},
},
};
</script>
<template>
<div class="gl-responsive-table-row">
<div class="table-section section-50">
<strong class="gl-text-body">{{ dependency.name }}</strong>
<span v-if="dependency.target_framework" data-testid="target-framework"
>({{ dependency.target_framework }})</span
>
</div>
<div
v-if="showVersion"
class="table-section section-50 gl-display-flex gl-md-justify-content-end"
data-testid="version-pattern"
>
<span class="gl-text-body">{{ dependency.version_pattern }}</span>
</div>
</div>
</template>
app/assets/javascripts/packages/details/components/installation_commands.vue deleted 100644 → 0
View file @ d2167efa
<script>
import TerraformInstallation from '~/packages_and_registries/infrastructure_registry/components/terraform_installation.vue';
import { PackageType, TERRAFORM_PACKAGE_TYPE } from '../../shared/constants';
import ComposerInstallation from './composer_installation.vue';
import ConanInstallation from './conan_installation.vue';
import MavenInstallation from './maven_installation.vue';
import NpmInstallation from './npm_installation.vue';
import NugetInstallation from './nuget_installation.vue';
import PypiInstallation from './pypi_installation.vue';
export default {
name: 'InstallationCommands',
components: {
[PackageType.CONAN]: ConanInstallation,
[PackageType.MAVEN]: MavenInstallation,
[PackageType.NPM]: NpmInstallation,
[PackageType.NUGET]: NugetInstallation,
[PackageType.PYPI]: PypiInstallation,
[PackageType.COMPOSER]: ComposerInstallation,
[TERRAFORM_PACKAGE_TYPE]: TerraformInstallation,
},
props: {
packageEntity: {
type: Object,
required: true,
},
npmPath: {
type: String,
required: false,
default: '',
},
npmHelpPath: {
type: String,
required: false,
default: '',
},
},
computed: {
installationComponent() {
return this.$options.components[this.packageEntity.package_type];
},
},
};
</script>
<template>
<div v-if="installationComponent">
<component
:is="installationComponent"
:name="packageEntity.name"
:registry-url="npmPath"
:help-url="npmHelpPath"
/>
</div>
</template>
app/assets/javascripts/packages/details/components/installation_title.vue deleted 100644 → 0
View file @ d2167efa
<script>
import PersistedDropdownSelection from '~/vue_shared/components/registry/persisted_dropdown_selection.vue';
export default {
name: 'InstallationTitle',
components: {
PersistedDropdownSelection,
},
props: {
packageType: {
type: String,
required: true,
},
options: {
type: Array,
required: true,
},
},
computed: {
storageKey() {
return `package_${this.packageType}_installation_instructions`;
},
},
};
</script>
<template>
<div class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
<h3 class="gl-font-lg">{{ __('Installation') }}</h3>
<div>
<persisted-dropdown-selection
:storage-key="storageKey"
:options="options"
@change="$emit('change', $event)"
/>
</div>
</div>
</template>
app/assets/javascripts/packages/details/components/maven_installation.vue deleted 100644 → 0
View file @ d2167efa
<script>
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mapGetters, mapState } from 'vuex';
import { s__ } from '~/locale';
import InstallationTitle from '~/packages/details/components/installation_title.vue';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import { TrackingActions, TrackingLabels } from '../constants';
export default {
name: 'MavenInstallation',
components: {
InstallationTitle,
CodeInstruction,
GlLink,
GlSprintf,
},
data() {
return {
instructionType: 'maven',
};
},
computed: {
...mapState(['mavenHelpPath']),
...mapGetters([
'mavenInstallationXml',
'mavenInstallationCommand',
'mavenSetupXml',
'gradleGroovyInstalCommand',
'gradleGroovyAddSourceCommand',
'gradleKotlinInstalCommand',
'gradleKotlinAddSourceCommand',
]),
showMaven() {
return this.instructionType === 'maven';
},
showGroovy() {
return this.instructionType === 'groovy';
},
},
i18n: {
xmlText: s__(
`PackageRegistry|Copy and paste this inside your %{codeStart}pom.xml%{codeEnd} %{codeStart}dependencies%{codeEnd} block.`,
),
setupText: s__(
`PackageRegistry|If you haven't already done so, you will need to add the below to your %{codeStart}pom.xml%{codeEnd} file.`,
),
helpText: s__(
'PackageRegistry|For more information on the Maven registry, %{linkStart}see the documentation%{linkEnd}.',
),
},
trackingActions: { ...TrackingActions },
TrackingLabels,
installOptions: [
{ value: 'maven', label: s__('PackageRegistry|Maven XML') },
{ value: 'groovy', label: s__('PackageRegistry|Gradle Groovy DSL') },
{ value: 'kotlin', label: s__('PackageRegistry|Gradle Kotlin DSL') },
],
};
</script>
<template>
<div>
<installation-title
package-type="maven"
:options="$options.installOptions"
@change="instructionType = $event"
/>
<template v-if="showMaven">
<p>
<gl-sprintf :message="$options.i18n.xmlText">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</p>
<code-instruction
:instruction="mavenInstallationXml"
:copy-text="s__('PackageRegistry|Copy Maven XML')"
:tracking-action="$options.trackingActions.COPY_MAVEN_XML"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
multiline
/>
<code-instruction
:label="s__('PackageRegistry|Maven Command')"
:instruction="mavenInstallationCommand"
:copy-text="s__('PackageRegistry|Copy Maven command')"
:tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<h3 class="gl-font-lg">{{ s__('PackageRegistry|Registry setup') }}</h3>
<p>
<gl-sprintf :message="$options.i18n.setupText">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</p>
<code-instruction
:instruction="mavenSetupXml"
:copy-text="s__('PackageRegistry|Copy Maven registry XML')"
:tracking-action="$options.trackingActions.COPY_MAVEN_SETUP"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
multiline
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</template>
<template v-else-if="showGroovy">
<code-instruction
class="gl-mb-5"
:label="s__('PackageRegistry|Gradle Groovy DSL install command')"
:instruction="gradleGroovyInstalCommand"
:copy-text="s__('PackageRegistry|Copy Gradle Groovy DSL install command')"
:tracking-action="$options.trackingActions.COPY_GRADLE_INSTALL_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<code-instruction
:label="s__('PackageRegistry|Add Gradle Groovy DSL repository command')"
:instruction="gradleGroovyAddSourceCommand"
:copy-text="s__('PackageRegistry|Copy add Gradle Groovy DSL repository command')"
:tracking-action="$options.trackingActions.COPY_GRADLE_ADD_TO_SOURCE_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
multiline
/>
</template>
<template v-else>
<code-instruction
class="gl-mb-5"
:label="s__('PackageRegistry|Gradle Kotlin DSL install command')"
:instruction="gradleKotlinInstalCommand"
:copy-text="s__('PackageRegistry|Copy Gradle Kotlin DSL install command')"
:tracking-action="$options.trackingActions.COPY_KOTLIN_INSTALL_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<code-instruction
:label="s__('PackageRegistry|Add Gradle Kotlin DSL repository command')"
:instruction="gradleKotlinAddSourceCommand"
:copy-text="s__('PackageRegistry|Copy add Gradle Kotlin DSL repository command')"
:tracking-action="$options.trackingActions.COPY_KOTLIN_ADD_TO_SOURCE_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
multiline
/>
</template>
</div>
</template>
app/assets/javascripts/packages/details/components/npm_installation.vue deleted 100644 → 0
View file @ d2167efa
<script>
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mapGetters, mapState } from 'vuex';
import { s__ } from '~/locale';
import InstallationTitle from '~/packages/details/components/installation_title.vue';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import { NpmManager, TrackingActions, TrackingLabels } from '../constants';
export default {
name: 'NpmInstallation',
components: {
InstallationTitle,
CodeInstruction,
GlLink,
GlSprintf,
},
data() {
return {
instructionType: 'npm',
};
},
computed: {
...mapState(['npmHelpPath']),
...mapGetters(['npmInstallationCommand', 'npmSetupCommand']),
npmCommand() {
return this.npmInstallationCommand(NpmManager.NPM);
},
npmSetup() {
return this.npmSetupCommand(NpmManager.NPM);
},
yarnCommand() {
return this.npmInstallationCommand(NpmManager.YARN);
},
yarnSetupCommand() {
return this.npmSetupCommand(NpmManager.YARN);
},
showNpm() {
return this.instructionType === 'npm';
},
},
i18n: {
helpText: s__(
'PackageRegistry|You may also need to setup authentication using an auth token. %{linkStart}See the documentation%{linkEnd} to find out more.',
),
},
trackingActions: { ...TrackingActions },
TrackingLabels,
installOptions: [
{ value: 'npm', label: s__('PackageRegistry|Show NPM commands') },
{ value: 'yarn', label: s__('PackageRegistry|Show Yarn commands') },
],
};
</script>
<template>
<div>
<installation-title
package-type="npm"
:options="$options.installOptions"
@change="instructionType = $event"
/>
<code-instruction
v-if="showNpm"
:instruction="npmCommand"
:copy-text="s__('PackageRegistry|Copy npm command')"
:tracking-action="$options.trackingActions.COPY_NPM_INSTALL_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<code-instruction
v-else
:instruction="yarnCommand"
:copy-text="s__('PackageRegistry|Copy yarn command')"
:tracking-action="$options.trackingActions.COPY_YARN_INSTALL_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
<code-instruction
v-if="showNpm"
:instruction="npmSetup"
:copy-text="s__('PackageRegistry|Copy npm setup command')"
:tracking-action="$options.trackingActions.COPY_NPM_SETUP_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<code-instruction
v-else
:instruction="yarnSetupCommand"
:copy-text="s__('PackageRegistry|Copy yarn setup command')"
:tracking-action="$options.trackingActions.COPY_YARN_SETUP_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="npmHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</template>
app/assets/javascripts/packages/details/components/nuget_installation.vue deleted 100644 → 0
View file @ d2167efa
<script>
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mapGetters, mapState } from 'vuex';
import { s__ } from '~/locale';
import InstallationTitle from '~/packages/details/components/installation_title.vue';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import { TrackingActions, TrackingLabels } from '../constants';
export default {
name: 'NugetInstallation',
components: {
InstallationTitle,
CodeInstruction,
GlLink,
GlSprintf,
},
computed: {
...mapState(['nugetHelpPath']),
...mapGetters(['nugetInstallationCommand', 'nugetSetupCommand']),
},
i18n: {
helpText: s__(
'PackageRegistry|For more information on the NuGet registry, %{linkStart}see the documentation%{linkEnd}.',
),
},
trackingActions: { ...TrackingActions },
TrackingLabels,
installOptions: [{ value: 'nuget', label: s__('PackageRegistry|Show Nuget commands') }],
};
</script>
<template>
<div>
<installation-title package-type="nuget" :options="$options.installOptions" />
<code-instruction
:label="s__('PackageRegistry|NuGet Command')"
:instruction="nugetInstallationCommand"
:copy-text="s__('PackageRegistry|Copy NuGet Command')"
:tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
<code-instruction
:label="s__('PackageRegistry|Add NuGet Source')"
:instruction="nugetSetupCommand"
:copy-text="s__('PackageRegistry|Copy NuGet Setup Command')"
:tracking-action="$options.trackingActions.COPY_NUGET_SETUP_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="nugetHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</template>
app/assets/javascripts/packages/details/components/package_title.vue deleted 100644 → 0
View file @ d2167efa
<script>
/* eslint-disable vue/v-slot-style */
import { GlIcon, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui';
import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
import { mapState, mapGetters } from 'vuex';
import { numberToHumanSize } from '~/lib/utils/number_utils';
import { __ } from '~/locale';
import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
import TitleArea from '~/vue_shared/components/registry/title_area.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import PackageTags from '../../shared/components/package_tags.vue';
export default {
name: 'PackageTitle',
components: {
TitleArea,
GlIcon,
GlSprintf,
PackageTags,
MetadataItem,
GlBadge,
},
directives: {
GlTooltip: GlTooltipDirective,
},
mixins: [timeagoMixin],
i18n: {
packageInfo: __('v%{version} published %{timeAgo}'),
},
data() {
return {
isDesktop: true,
};
},
computed: {
...mapState(['packageEntity', 'packageFiles']),
...mapGetters(['packageTypeDisplay', 'packagePipeline', 'packageIcon']),
hasTagsToDisplay() {
return Boolean(this.packageEntity.tags && this.packageEntity.tags.length);
},
totalSize() {
return numberToHumanSize(this.packageFiles.reduce((acc, p) => acc + p.size, 0));
},
},
mounted() {
this.isDesktop = GlBreakpointInstance.isDesktop();
},
methods: {
dynamicSlotName(index) {
return `metadata-tag${index}`;
},
},
};
</script>
<template>
<title-area :title="packageEntity.name" :avatar="packageIcon" data-qa-selector="package_title">
<template #sub-header>
<gl-icon name="eye" class="gl-mr-3" />
<gl-sprintf :message="$options.i18n.packageInfo">
<template #version>
{{ packageEntity.version }}
</template>
<template #timeAgo>
<span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)">
&nbsp;{{ timeFormatted(packageEntity.created_at) }}
</span>
</template>
</gl-sprintf>
</template>
<template v-if="packageTypeDisplay" #metadata-type>
<metadata-item data-testid="package-type" icon="package" :text="packageTypeDisplay" />
</template>
<template #metadata-size>
<metadata-item data-testid="package-size" icon="disk" :text="totalSize" />
</template>
<template v-if="packagePipeline" #metadata-pipeline>
<metadata-item
data-testid="pipeline-project"
icon="review-list"
:text="packagePipeline.project.name"
:link="packagePipeline.project.web_url"
/>
</template>
<template v-if="packagePipeline" #metadata-ref>
<metadata-item data-testid="package-ref" icon="branch" :text="packagePipeline.ref" />
</template>
<template v-if="isDesktop && hasTagsToDisplay" #metadata-tags>
<package-tags :tag-display-limit="2" :tags="packageEntity.tags" hide-label />
</template>
<!-- we need to duplicate the package tags on mobile to ensure proper styling inside the flex wrap -->
<template
v-for="(tag, index) in packageEntity.tags"
v-else-if="hasTagsToDisplay"
v-slot:[dynamicSlotName(index)]
>
<gl-badge :key="index" class="gl-my-1" data-testid="tag-badge" variant="info" size="sm">
{{ tag.name }}
</gl-badge>
</template>
<template #right-actions>
<slot name="delete-button"></slot>
</template>
</title-area>
</template>
app/assets/javascripts/packages/details/components/pypi_installation.vue deleted 100644 → 0
View file @ d2167efa
<script>
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mapGetters, mapState } from 'vuex';
import { s__ } from '~/locale';
import InstallationTitle from '~/packages/details/components/installation_title.vue';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import { TrackingActions, TrackingLabels } from '../constants';
export default {
name: 'PyPiInstallation',
components: {
InstallationTitle,
CodeInstruction,
GlLink,
GlSprintf,
},
computed: {
...mapState(['pypiHelpPath']),
...mapGetters(['pypiPipCommand', 'pypiSetupCommand']),
},
i18n: {
setupText: s__(
`PackageRegistry|If you haven't already done so, you will need to add the below to your %{codeStart}.pypirc%{codeEnd} file.`,
),
helpText: s__(
'PackageRegistry|For more information on the PyPi registry, %{linkStart}see the documentation%{linkEnd}.',
),
},
trackingActions: { ...TrackingActions },
TrackingLabels,
installOptions: [{ value: 'pypi', label: s__('PackageRegistry|Show PyPi commands') }],
};
</script>
<template>
<div>
<installation-title package-type="pypi" :options="$options.installOptions" />
<code-instruction
:label="s__('PackageRegistry|Pip Command')"
:instruction="pypiPipCommand"
:copy-text="s__('PackageRegistry|Copy Pip command')"
data-testid="pip-command"
:tracking-action="$options.trackingActions.COPY_PIP_INSTALL_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
<p>
<gl-sprintf :message="$options.i18n.setupText">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</p>
<code-instruction
:instruction="pypiSetupCommand"
:copy-text="s__('PackageRegistry|Copy .pypirc content')"
data-testid="pypi-setup-content"
multiline
:tracking-action="$options.trackingActions.COPY_PYPI_SETUP_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="pypiHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</template>
spec/features/projects/infrastructure_registry_spec.rb
View file @ 203d137d
...@@ -45,10 +45,8 @@ RSpec.describe 'Infrastructure Registry' do ...@@ -45,10 +45,8 @@ RSpec.describe 'Infrastructure Registry' do
expect(page).to have_css('.packages-app h1[data-testid="title"]', text: terraform_module.name) expect(page).to have_css('.packages-app h1[data-testid="title"]', text: terraform_module.name)
page.within(%Q([name="#{terraform_module.name}"])) do expect(page).to have_content('Provision instructions')
expect(page).to have_content('Provision instructions') expect(page).to have_content('Registry setup')
expect(page).to have_content('Registry setup')
end
end end
end end
......
spec/frontend/packages/details/components/__snapshots__/conan_installation_spec.js.snap deleted 100644 → 0
View file @ d2167efa
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ConanInstallation renders all the messages 1`] = `
<div>
<installation-title-stub
options="[object Object]"
packagetype="conan"
/>
<code-instruction-stub
copytext="Copy Conan Command"
instruction="foo/command"
label="Conan Command"
trackingaction="copy_conan_command"
trackinglabel="code_instruction"
/>
<h3
class="gl-font-lg"
>
Registry setup
</h3>
<code-instruction-stub
copytext="Copy Conan Setup Command"
instruction="foo/setup"
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}."
/>
</div>
`;
spec/frontend/packages/details/components/__snapshots__/dependency_row_spec.js.snap deleted 100644 → 0
View file @ d2167efa
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DependencyRow renders full dependency 1`] = `
<div
class="gl-responsive-table-row"
>
<div
class="table-section section-50"
>
<strong
class="gl-text-body"
>
Test.Dependency
</strong>
<span
data-testid="target-framework"
>
(.NETStandard2.0)
</span>
</div>
<div
class="table-section section-50 gl-display-flex gl-md-justify-content-end"
data-testid="version-pattern"
>
<span
class="gl-text-body"
>
2.3.7
</span>
</div>
</div>
`;
spec/frontend/packages/details/components/__snapshots__/maven_installation_spec.js.snap deleted 100644 → 0
View file @ d2167efa
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MavenInstallation groovy renders all the messages 1`] = `
<div>
<installation-title-stub
options="[object Object],[object Object],[object Object]"
packagetype="maven"
/>
<code-instruction-stub
class="gl-mb-5"
copytext="Copy Gradle Groovy DSL install command"
instruction="foo/gradle/groovy/install"
label="Gradle Groovy DSL install command"
trackingaction="copy_gradle_install_command"
trackinglabel="code_instruction"
/>
<code-instruction-stub
copytext="Copy add Gradle Groovy DSL repository command"
instruction="foo/gradle/groovy/add/source"
label="Add Gradle Groovy DSL repository command"
multiline="true"
trackingaction="copy_gradle_add_to_source_command"
trackinglabel="code_instruction"
/>
</div>
`;
exports[`MavenInstallation kotlin renders all the messages 1`] = `
<div>
<installation-title-stub
options="[object Object],[object Object],[object Object]"
packagetype="maven"
/>
<code-instruction-stub
class="gl-mb-5"
copytext="Copy Gradle Kotlin DSL install command"
instruction="foo/gradle/kotlin/install"
label="Gradle Kotlin DSL install command"
trackingaction="copy_kotlin_install_command"
trackinglabel="code_instruction"
/>
<code-instruction-stub
copytext="Copy add Gradle Kotlin DSL repository command"
instruction="foo/gradle/kotlin/add/source"
label="Add Gradle Kotlin DSL repository command"
multiline="true"
trackingaction="copy_kotlin_add_to_source_command"
trackinglabel="code_instruction"
/>
</div>
`;
exports[`MavenInstallation maven renders all the messages 1`] = `
<div>
<installation-title-stub
options="[object Object],[object Object],[object Object]"
packagetype="maven"
/>
<p>
<gl-sprintf-stub
message="Copy and paste this inside your %{codeStart}pom.xml%{codeEnd} %{codeStart}dependencies%{codeEnd} block."
/>
</p>
<code-instruction-stub
copytext="Copy Maven XML"
instruction="foo/xml"
label=""
multiline="true"
trackingaction="copy_maven_xml"
trackinglabel="code_instruction"
/>
<code-instruction-stub
copytext="Copy Maven command"
instruction="foo/command"
label="Maven Command"
trackingaction="copy_maven_command"
trackinglabel="code_instruction"
/>
<h3
class="gl-font-lg"
>
Registry setup
</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."
/>
</p>
<code-instruction-stub
copytext="Copy Maven registry XML"
instruction="foo/setup"
label=""
multiline="true"
trackingaction="copy_maven_setup_xml"
trackinglabel="code_instruction"
/>
<gl-sprintf-stub
message="For more information on the Maven registry, %{linkStart}see the documentation%{linkEnd}."
/>
</div>
`;
spec/frontend/packages/details/components/__snapshots__/npm_installation_spec.js.snap deleted 100644 → 0
View file @ d2167efa
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NpmInstallation renders all the messages 1`] = `
<div>
<installation-title-stub
options="[object Object],[object Object]"
packagetype="npm"
/>
<code-instruction-stub
copytext="Copy npm command"
instruction="npm i @Test/package"
label=""
trackingaction="copy_npm_install_command"
trackinglabel="code_instruction"
/>
<h3
class="gl-font-lg"
>
Registry setup
</h3>
<code-instruction-stub
copytext="Copy npm setup command"
instruction="echo @Test:registry=undefined/ >> .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."
/>
</div>
`;
spec/frontend/packages/details/components/__snapshots__/nuget_installation_spec.js.snap deleted 100644 → 0
View file @ d2167efa
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NugetInstallation renders all the messages 1`] = `
<div>
<installation-title-stub
options="[object Object]"
packagetype="nuget"
/>
<code-instruction-stub
copytext="Copy NuGet Command"
instruction="foo/command"
label="NuGet Command"
trackingaction="copy_nuget_install_command"
trackinglabel="code_instruction"
/>
<h3
class="gl-font-lg"
>
Registry setup
</h3>
<code-instruction-stub
copytext="Copy NuGet Setup Command"
instruction="foo/setup"
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}."
/>
</div>
`;
spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap deleted 100644 → 0
View file @ d2167efa
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PackageTitle renders with tags 1`] = `
<div
class="gl-display-flex gl-flex-direction-column"
data-qa-selector="package_title"
>
<div
class="gl-display-flex gl-justify-content-space-between gl-py-3"
>
<div
class="gl-flex-direction-column gl-flex-grow-1"
>
<div
class="gl-display-flex"
>
<!---->
<div
class="gl-display-flex gl-flex-direction-column"
>
<h1
class="gl-font-size-h1 gl-mt-3 gl-mb-2"
data-testid="title"
>
Test package
</h1>
<div
class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-mt-1"
>
<gl-icon-stub
class="gl-mr-3"
name="eye"
size="16"
/>
<gl-sprintf-stub
message="v%{version} published %{timeAgo}"
/>
</div>
</div>
</div>
<div
class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mt-3"
>
<div
class="gl-display-flex gl-align-items-center gl-mr-5"
>
<metadata-item-stub
data-testid="package-type"
icon="package"
link=""
size="s"
text="maven"
texttooltip=""
/>
</div>
<div
class="gl-display-flex gl-align-items-center gl-mr-5"
>
<metadata-item-stub
data-testid="package-size"
icon="disk"
link=""
size="s"
text="300 bytes"
texttooltip=""
/>
</div>
<div
class="gl-display-flex gl-align-items-center gl-mr-5"
>
<package-tags-stub
hidelabel="true"
tagdisplaylimit="2"
tags="[object Object],[object Object],[object Object],[object Object]"
/>
</div>
</div>
</div>
<!---->
</div>
<p />
</div>
`;
exports[`PackageTitle renders without tags 1`] = `
<div
class="gl-display-flex gl-flex-direction-column"
data-qa-selector="package_title"
>
<div
class="gl-display-flex gl-justify-content-space-between gl-py-3"
>
<div
class="gl-flex-direction-column gl-flex-grow-1"
>
<div
class="gl-display-flex"
>
<!---->
<div
class="gl-display-flex gl-flex-direction-column"
>
<h1
class="gl-font-size-h1 gl-mt-3 gl-mb-2"
data-testid="title"
>
Test package
</h1>
<div
class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-mt-1"
>
<gl-icon-stub
class="gl-mr-3"
name="eye"
size="16"
/>
<gl-sprintf-stub
message="v%{version} published %{timeAgo}"
/>
</div>
</div>
</div>
<div
class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mt-3"
>
<div
class="gl-display-flex gl-align-items-center gl-mr-5"
>
<metadata-item-stub
data-testid="package-type"
icon="package"
link=""
size="s"
text="maven"
texttooltip=""
/>
</div>
<div
class="gl-display-flex gl-align-items-center gl-mr-5"
>
<metadata-item-stub
data-testid="package-size"
icon="disk"
link=""
size="s"
text="300 bytes"
texttooltip=""
/>
</div>
</div>
</div>
<!---->
</div>
<p />
</div>
`;
spec/frontend/packages/details/components/__snapshots__/pypi_installation_spec.js.snap deleted 100644 → 0
View file @ d2167efa
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PypiInstallation renders all the messages 1`] = `
<div>
<installation-title-stub
options="[object Object]"
packagetype="pypi"
/>
<code-instruction-stub
copytext="Copy Pip command"
data-testid="pip-command"
instruction="pip install"
label="Pip Command"
trackingaction="copy_pip_install_command"
trackinglabel="code_instruction"
/>
<h3
class="gl-font-lg"
>
Registry setup
</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."
/>
</p>
<code-instruction-stub
copytext="Copy .pypirc content"
data-testid="pypi-setup-content"
instruction="python setup"
label=""
multiline="true"
trackingaction="copy_pypi_setup_command"
trackinglabel="code_instruction"
/>
<gl-sprintf-stub
message="For more information on the PyPi registry, %{linkStart}see the documentation%{linkEnd}."
/>
</div>
`;
spec/frontend/packages/details/components/additional_metadata_spec.js deleted 100644 → 0
View file @ d2167efa
import { GlLink, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import component from '~/packages/details/components/additional_metadata.vue';
import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
import { mavenPackage, conanPackage, nugetPackage, npmPackage } from '../../mock_data';
describe('Package Additional Metadata', () => {
let wrapper;
const defaultProps = {
packageEntity: { ...mavenPackage },
};
const mountComponent = (props) => {
wrapper = shallowMount(component, {
propsData: { ...defaultProps, ...props },
stubs: {
DetailsRow,
GlSprintf,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const findTitle = () => wrapper.find('[data-testid="title"]');
const findMainArea = () => wrapper.find('[data-testid="main"]');
const findNugetSource = () => wrapper.find('[data-testid="nuget-source"]');
const findNugetLicense = () => wrapper.find('[data-testid="nuget-license"]');
const findConanRecipe = () => wrapper.find('[data-testid="conan-recipe"]');
const findMavenApp = () => wrapper.find('[data-testid="maven-app"]');
const findMavenGroup = () => wrapper.find('[data-testid="maven-group"]');
const findElementLink = (container) => container.find(GlLink);
it('has the correct title', () => {
mountComponent();
const title = findTitle();
expect(title.exists()).toBe(true);
expect(title.text()).toBe('Additional Metadata');
});
describe.each`
packageEntity | visible | metadata
${mavenPackage} | ${true} | ${'maven_metadatum'}
${conanPackage} | ${true} | ${'conan_metadatum'}
${nugetPackage} | ${true} | ${'nuget_metadatum'}
${npmPackage} | ${false} | ${null}
`('Component visibility', ({ packageEntity, visible, metadata }) => {
it(`Is ${visible} that the component markup is visible when the package is ${packageEntity.package_type}`, () => {
mountComponent({ packageEntity });
expect(findTitle().exists()).toBe(visible);
expect(findMainArea().exists()).toBe(visible);
});
it(`The component is hidden if ${metadata} is missing`, () => {
mountComponent({ packageEntity: { ...packageEntity, [metadata]: null } });
expect(findTitle().exists()).toBe(false);
expect(findMainArea().exists()).toBe(false);
});
});
describe('nuget metadata', () => {
beforeEach(() => {
mountComponent({ packageEntity: nugetPackage });
});
it.each`
name | finderFunction | text | link | icon
${'source'} | ${findNugetSource} | ${'Source project located at project-foo-url'} | ${'project_url'} | ${'project'}
${'license'} | ${findNugetLicense} | ${'License information located at license-foo-url'} | ${'license_url'} | ${'license'}
`('$name element', ({ finderFunction, text, link, icon }) => {
const element = finderFunction();
expect(element.exists()).toBe(true);
expect(element.text()).toBe(text);
expect(element.props('icon')).toBe(icon);
expect(findElementLink(element).attributes('href')).toBe(nugetPackage.nuget_metadatum[link]);
});
});
describe('conan metadata', () => {
beforeEach(() => {
mountComponent({ packageEntity: conanPackage });
});
it.each`
name | finderFunction | text | icon
${'recipe'} | ${findConanRecipe} | ${'Recipe: conan-package/1.0.0@conan+conan-package/stable'} | ${'information-o'}
`('$name element', ({ finderFunction, text, icon }) => {
const element = finderFunction();
expect(element.exists()).toBe(true);
expect(element.text()).toBe(text);
expect(element.props('icon')).toBe(icon);
});
});
describe('maven metadata', () => {
beforeEach(() => {
mountComponent();
});
it.each`
name | finderFunction | text | icon
${'app'} | ${findMavenApp} | ${'App name: test-app'} | ${'information-o'}
${'group'} | ${findMavenGroup} | ${'App group: com.test.app'} | ${'information-o'}
`('$name element', ({ finderFunction, text, icon }) => {
const element = finderFunction();
expect(element.exists()).toBe(true);
expect(element.text()).toBe(text);
expect(element.props('icon')).toBe(icon);
});
});
});
spec/frontend/packages/details/components/app_spec.js
View file @ 203d137d
...@@ -5,28 +5,19 @@ import Vuex from 'vuex'; ...@@ -5,28 +5,19 @@ import Vuex from 'vuex';
import { useMockLocationHelper } from 'helpers/mock_window_location_helper'; import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
import stubChildren from 'helpers/stub_children'; import stubChildren from 'helpers/stub_children';
import AdditionalMetadata from '~/packages/details/components/additional_metadata.vue';
import PackagesApp from '~/packages/details/components/app.vue'; import PackagesApp from '~/packages/details/components/app.vue';
import DependencyRow from '~/packages/details/components/dependency_row.vue';
import InstallationCommands from '~/packages/details/components/installation_commands.vue';
import PackageFiles from '~/packages/details/components/package_files.vue'; import PackageFiles from '~/packages/details/components/package_files.vue';
import PackageHistory from '~/packages/details/components/package_history.vue'; import PackageHistory from '~/packages/details/components/package_history.vue';
import PackageTitle from '~/packages/details/components/package_title.vue';
import * as getters from '~/packages/details/store/getters'; import * as getters from '~/packages/details/store/getters';
import PackageListRow from '~/packages/shared/components/package_list_row.vue'; import PackageListRow from '~/packages/shared/components/package_list_row.vue';
import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue'; import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue';
import { TrackingActions } from '~/packages/shared/constants'; import { TrackingActions } from '~/packages/shared/constants';
import * as SharedUtils from '~/packages/shared/utils'; import * as SharedUtils from '~/packages/shared/utils';
import TerraformTitle from '~/packages_and_registries/infrastructure_registry/components/details_title.vue';
import TerraformInstallation from '~/packages_and_registries/infrastructure_registry/components/terraform_installation.vue';
import Tracking from '~/tracking'; import Tracking from '~/tracking';
import { import { mavenPackage, mavenFiles, npmPackage } from '../../mock_data';
composerPackage,
conanPackage,
mavenPackage,
mavenFiles,
npmPackage,
nugetPackage,
} from '../../mock_data';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -73,7 +64,7 @@ describe('PackagesApp', () => { ...@@ -73,7 +64,7 @@ describe('PackagesApp', () => {
store, store,
stubs: { stubs: {
...stubChildren(PackagesApp), ...stubChildren(PackagesApp),
PackageTitle: false, TerraformTitle: false,
TitleArea: false, TitleArea: false,
GlButton: false, GlButton: false,
GlModal: false, GlModal: false,
...@@ -84,23 +75,18 @@ describe('PackagesApp', () => { ...@@ -84,23 +75,18 @@ describe('PackagesApp', () => {
}); });
} }
const packageTitle = () => wrapper.find(PackageTitle); const packageTitle = () => wrapper.findComponent(TerraformTitle);
const emptyState = () => wrapper.find(GlEmptyState); const emptyState = () => wrapper.findComponent(GlEmptyState);
const deleteButton = () => wrapper.find('.js-delete-button'); const deleteButton = () => wrapper.find('.js-delete-button');
const findDeleteModal = () => wrapper.find({ ref: 'deleteModal' }); const findDeleteModal = () => wrapper.find({ ref: 'deleteModal' });
const findDeleteFileModal = () => wrapper.find({ ref: 'deleteFileModal' }); const findDeleteFileModal = () => wrapper.find({ ref: 'deleteFileModal' });
const versionsTab = () => wrapper.find('.js-versions-tab > a'); const versionsTab = () => wrapper.find('.js-versions-tab > a');
const packagesLoader = () => wrapper.find(PackagesListLoader); const packagesLoader = () => wrapper.findComponent(PackagesListLoader);
const packagesVersionRows = () => wrapper.findAll(PackageListRow); const packagesVersionRows = () => wrapper.findAllComponents(PackageListRow);
const noVersionsMessage = () => wrapper.find('[data-testid="no-versions-message"]'); const noVersionsMessage = () => wrapper.find('[data-testid="no-versions-message"]');
const dependenciesTab = () => wrapper.find('.js-dependencies-tab > a'); const findPackageHistory = () => wrapper.findComponent(PackageHistory);
const dependenciesCountBadge = () => wrapper.find('[data-testid="dependencies-badge"]'); const findTerraformInstallation = () => wrapper.findComponent(TerraformInstallation);
const noDependenciesMessage = () => wrapper.find('[data-testid="no-dependencies-message"]'); const findPackageFiles = () => wrapper.findComponent(PackageFiles);
const dependencyRows = () => wrapper.findAll(DependencyRow);
const findPackageHistory = () => wrapper.find(PackageHistory);
const findAdditionalMetadata = () => wrapper.find(AdditionalMetadata);
const findInstallationCommands = () => wrapper.find(InstallationCommands);
const findPackageFiles = () => wrapper.find(PackageFiles);
afterEach(() => { afterEach(() => {
wrapper.destroy(); wrapper.destroy();
...@@ -129,21 +115,10 @@ describe('PackagesApp', () => { ...@@ -129,21 +115,10 @@ describe('PackagesApp', () => {
expect(findPackageHistory().props('projectName')).toEqual(wrapper.vm.projectName); expect(findPackageHistory().props('projectName')).toEqual(wrapper.vm.projectName);
}); });
it('additional metadata has the right props', () => { it('terraform installation exists', () => {
createComponent(); createComponent();
expect(findAdditionalMetadata().exists()).toBe(true);
expect(findAdditionalMetadata().props('packageEntity')).toEqual(wrapper.vm.packageEntity);
});
it('installation commands has the right props', () => {
createComponent();
expect(findInstallationCommands().exists()).toBe(true);
expect(findInstallationCommands().props('packageEntity')).toEqual(wrapper.vm.packageEntity);
});
it('hides the files table if package type is COMPOSER', () => { expect(findTerraformInstallation().exists()).toBe(true);
createComponent({ packageEntity: composerPackage });
expect(findPackageFiles().exists()).toBe(false);
}); });
describe('deleting packages', () => { describe('deleting packages', () => {
...@@ -198,45 +173,6 @@ describe('PackagesApp', () => { ...@@ -198,45 +173,6 @@ describe('PackagesApp', () => {
}); });
}); });
describe('dependency links', () => {
it('does not show the dependency links for a non nuget package', () => {
createComponent();
expect(dependenciesTab().exists()).toBe(false);
});
it('shows the dependencies tab with 0 count when a nuget package with no dependencies', () => {
createComponent({
packageEntity: {
...nugetPackage,
dependency_links: [],
},
});
return wrapper.vm.$nextTick(() => {
const dependenciesBadge = dependenciesCountBadge();
expect(dependenciesTab().exists()).toBe(true);
expect(dependenciesBadge.exists()).toBe(true);
expect(dependenciesBadge.text()).toBe('0');
expect(noDependenciesMessage().exists()).toBe(true);
});
});
it('renders the correct number of dependency rows for a nuget package', () => {
createComponent({ packageEntity: nugetPackage });
return wrapper.vm.$nextTick(() => {
const dependenciesBadge = dependenciesCountBadge();
expect(dependenciesTab().exists()).toBe(true);
expect(dependenciesBadge.exists()).toBe(true);
expect(dependenciesBadge.text()).toBe(nugetPackage.dependency_links.length.toString());
expect(dependencyRows()).toHaveLength(nugetPackage.dependency_links.length);
});
});
});
describe('tracking and delete', () => { describe('tracking and delete', () => {
describe('delete package', () => { describe('delete package', () => {
const originalReferrer = document.referrer; const originalReferrer = document.referrer;
...@@ -305,9 +241,9 @@ describe('PackagesApp', () => { ...@@ -305,9 +241,9 @@ describe('PackagesApp', () => {
}); });
it('tracking category calls packageTypeToTrackCategory', () => { it('tracking category calls packageTypeToTrackCategory', () => {
createComponent({ packageEntity: conanPackage }); createComponent({ packageEntity: npmPackage });
expect(wrapper.vm.tracking.category).toBe(category); expect(wrapper.vm.tracking.category).toBe(category);
expect(utilSpy).toHaveBeenCalledWith('conan'); expect(utilSpy).toHaveBeenCalledWith('npm');
}); });
it(`delete button on delete modal call event with ${TrackingActions.DELETE_PACKAGE}`, () => { it(`delete button on delete modal call event with ${TrackingActions.DELETE_PACKAGE}`, () => {
...@@ -371,7 +307,7 @@ describe('PackagesApp', () => { ...@@ -371,7 +307,7 @@ describe('PackagesApp', () => {
}); });
it(`file download link call event with ${TrackingActions.PULL_PACKAGE}`, () => { it(`file download link call event with ${TrackingActions.PULL_PACKAGE}`, () => {
createComponent({ packageEntity: conanPackage }); createComponent({ packageEntity: npmPackage });
findPackageFiles().vm.$emit('download-file'); findPackageFiles().vm.$emit('download-file');
expect(eventSpy).toHaveBeenCalledWith( expect(eventSpy).toHaveBeenCalledWith(
......
spec/frontend/packages/details/components/composer_installation_spec.js deleted 100644 → 0
View file @ d2167efa
import { GlSprintf, GlLink } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import { registryUrl as composerHelpPath } from 'jest/packages/details/mock_data';
import { composerPackage as packageEntity } from 'jest/packages/mock_data';
import ComposerInstallation from '~/packages/details/components/composer_installation.vue';
import InstallationTitle from '~/packages/details/components/installation_title.vue';
import { TrackingActions } from '~/packages/details/constants';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('ComposerInstallation', () => {
let wrapper;
let store;
const composerRegistryIncludeStr = 'foo/registry';
const composerPackageIncludeStr = 'foo/package';
const createStore = (groupExists = true) => {
store = new Vuex.Store({
state: { packageEntity, composerHelpPath },
getters: {
composerRegistryInclude: () => composerRegistryIncludeStr,
composerPackageInclude: () => composerPackageIncludeStr,
groupExists: () => groupExists,
},
});
};
const findRootNode = () => wrapper.find('[data-testid="root-node"]');
const findRegistryInclude = () => wrapper.find('[data-testid="registry-include"]');
const findPackageInclude = () => wrapper.find('[data-testid="package-include"]');
const findHelpText = () => wrapper.find('[data-testid="help-text"]');
const findHelpLink = () => wrapper.find(GlLink);
const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
function createComponent() {
wrapper = shallowMount(ComposerInstallation, {
localVue,
store,
stubs: {
GlSprintf,
},
});
}
afterEach(() => {
wrapper.destroy();
});
describe('install command switch', () => {
it('has the installation title component', () => {
createStore();
createComponent();
expect(findInstallationTitle().exists()).toBe(true);
expect(findInstallationTitle().props()).toMatchObject({
packageType: 'composer',
options: [{ value: 'composer', label: 'Show Composer commands' }],
});
});
});
describe('registry include command', () => {
beforeEach(() => {
createStore();
createComponent();
});
it('uses code_instructions', () => {
const registryIncludeCommand = findRegistryInclude();
expect(registryIncludeCommand.exists()).toBe(true);
expect(registryIncludeCommand.props()).toMatchObject({
instruction: composerRegistryIncludeStr,
copyText: 'Copy registry include',
trackingAction: TrackingActions.COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND,
});
});
it('has the correct title', () => {
expect(findRegistryInclude().props('label')).toBe('Add composer registry');
});
});
describe('package include command', () => {
beforeEach(() => {
createStore();
createComponent();
});
it('uses code_instructions', () => {
const registryIncludeCommand = findPackageInclude();
expect(registryIncludeCommand.exists()).toBe(true);
expect(registryIncludeCommand.props()).toMatchObject({
instruction: composerPackageIncludeStr,
copyText: 'Copy require package include',
trackingAction: TrackingActions.COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND,
});
});
it('has the correct title', () => {
expect(findPackageInclude().props('label')).toBe('Install package version');
});
it('has the correct help text', () => {
expect(findHelpText().text()).toBe(
'For more information on Composer packages in GitLab, see the documentation.',
);
expect(findHelpLink().attributes()).toMatchObject({
href: composerHelpPath,
target: '_blank',
});
});
});
describe('root node', () => {
it('is normally rendered', () => {
createStore();
createComponent();
expect(findRootNode().exists()).toBe(true);
});
it('is not rendered when the group does not exist', () => {
createStore(false);
createComponent();
expect(findRootNode().exists()).toBe(false);
});
});
});
spec/frontend/packages/details/components/conan_installation_spec.js deleted 100644 → 0
View file @ d2167efa
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import ConanInstallation from '~/packages/details/components/conan_installation.vue';
import InstallationTitle from '~/packages/details/components/installation_title.vue';
import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
import { conanPackage as packageEntity } from '../../mock_data';
import { registryUrl as conanPath } from '../mock_data';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('ConanInstallation', () => {
let wrapper;
const conanInstallationCommandStr = 'foo/command';
const conanSetupCommandStr = 'foo/setup';
const store = new Vuex.Store({
state: {
packageEntity,
conanPath,
},
getters: {
conanInstallationCommand: () => conanInstallationCommandStr,
conanSetupCommand: () => conanSetupCommandStr,
},
});
const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
function createComponent() {
wrapper = shallowMount(ConanInstallation, {
localVue,
store,
});
}
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('renders all the messages', () => {
expect(wrapper.element).toMatchSnapshot();
});
describe('install command switch', () => {
it('has the installation title component', () => {
expect(findInstallationTitle().exists()).toBe(true);
expect(findInstallationTitle().props()).toMatchObject({
packageType: 'conan',
options: [{ value: 'conan', label: 'Show Conan commands' }],
});
});
});
describe('installation commands', () => {
it('renders the correct command', () => {
expect(findCodeInstructions().at(0).props('instruction')).toBe(conanInstallationCommandStr);
});
});
describe('setup commands', () => {
it('renders the correct command', () => {
expect(findCodeInstructions().at(1).props('instruction')).toBe(conanSetupCommandStr);
});
});
});
spec/frontend/packages/details/components/dependency_row_spec.js deleted 100644 → 0
View file @ d2167efa
import { shallowMount } from '@vue/test-utils';
import DependencyRow from '~/packages/details/components/dependency_row.vue';
import { dependencyLinks } from '../../mock_data';
describe('DependencyRow', () => {
let wrapper;
const { withoutFramework, withoutVersion, fullLink } = dependencyLinks;
function createComponent({ dependencyLink = fullLink } = {}) {
wrapper = shallowMount(DependencyRow, {
propsData: {
dependency: dependencyLink,
},
});
}
const dependencyVersion = () => wrapper.find('[data-testid="version-pattern"]');
const dependencyFramework = () => wrapper.find('[data-testid="target-framework"]');
afterEach(() => {
wrapper.destroy();
});
describe('renders', () => {
it('full dependency', () => {
createComponent();
expect(wrapper.element).toMatchSnapshot();
});
});
describe('version', () => {
it('does not render any version information when not supplied', () => {
createComponent({ dependencyLink: withoutVersion });
expect(dependencyVersion().exists()).toBe(false);
});
it('does render version info when it exists', () => {
createComponent();
expect(dependencyVersion().exists()).toBe(true);
expect(dependencyVersion().text()).toBe(fullLink.version_pattern);
});
});
describe('target framework', () => {
it('does not render any framework information when not supplied', () => {
createComponent({ dependencyLink: withoutFramework });
expect(dependencyFramework().exists()).toBe(false);
});
it('does render framework info when it exists', () => {
createComponent();
expect(dependencyFramework().exists()).toBe(true);
expect(dependencyFramework().text()).toBe(`(${fullLink.target_framework})`);
});
});
});
spec/frontend/packages/details/components/installation_title_spec.js deleted 100644 → 0
View file @ d2167efa
import { shallowMount } from '@vue/test-utils';
import InstallationTitle from '~/packages/details/components/installation_title.vue';
import PersistedDropdownSelection from '~/vue_shared/components/registry/persisted_dropdown_selection.vue';
describe('InstallationTitle', () => {
let wrapper;
const defaultProps = { packageType: 'foo', options: [{ value: 'foo', label: 'bar' }] };
const findPersistedDropdownSelection = () => wrapper.findComponent(PersistedDropdownSelection);
const findTitle = () => wrapper.find('h3');
function createComponent({ props = {} } = {}) {
wrapper = shallowMount(InstallationTitle, {
propsData: {
...defaultProps,
...props,
},
});
}
afterEach(() => {
wrapper.destroy();
});
it('has a title', () => {
createComponent();
expect(findTitle().exists()).toBe(true);
expect(findTitle().text()).toBe('Installation');
});
describe('persisted dropdown selection', () => {
it('exists', () => {
createComponent();
expect(findPersistedDropdownSelection().exists()).toBe(true);
});
it('has the correct props', () => {
createComponent();
expect(findPersistedDropdownSelection().props()).toMatchObject({
storageKey: 'package_foo_installation_instructions',
options: defaultProps.options,
});
});
it('on change event emits a change event', () => {
createComponent();
findPersistedDropdownSelection().vm.$emit('change', 'baz');
expect(wrapper.emitted('change')).toEqual([['baz']]);
});
});
});
spec/frontend/packages/details/components/installations_commands_spec.js deleted 100644 → 0
View file @ d2167efa
import { shallowMount } from '@vue/test-utils';
import ComposerInstallation from '~/packages/details/components/composer_installation.vue';
import ConanInstallation from '~/packages/details/components/conan_installation.vue';
import InstallationCommands from '~/packages/details/components/installation_commands.vue';
import MavenInstallation from '~/packages/details/components/maven_installation.vue';
import NpmInstallation from '~/packages/details/components/npm_installation.vue';
import NugetInstallation from '~/packages/details/components/nuget_installation.vue';
import PypiInstallation from '~/packages/details/components/pypi_installation.vue';
import TerraformInstallation from '~/packages_and_registries/infrastructure_registry/components/terraform_installation.vue';
import {
conanPackage,
mavenPackage,
npmPackage,
nugetPackage,
pypiPackage,
composerPackage,
terraformModule,
} from '../../mock_data';
describe('InstallationCommands', () => {
let wrapper;
function createComponent(propsData) {
wrapper = shallowMount(InstallationCommands, {
propsData,
});
}
const npmInstallation = () => wrapper.find(NpmInstallation);
const mavenInstallation = () => wrapper.find(MavenInstallation);
const conanInstallation = () => wrapper.find(ConanInstallation);
const nugetInstallation = () => wrapper.find(NugetInstallation);
const pypiInstallation = () => wrapper.find(PypiInstallation);
const composerInstallation = () => wrapper.find(ComposerInstallation);
const terraformInstallation = () => wrapper.findComponent(TerraformInstallation);
afterEach(() => {
wrapper.destroy();
});
describe('installation instructions', () => {
describe.each`
packageEntity | selector
${conanPackage} | ${conanInstallation}
${mavenPackage} | ${mavenInstallation}
${npmPackage} | ${npmInstallation}
${nugetPackage} | ${nugetInstallation}
${pypiPackage} | ${pypiInstallation}
${composerPackage} | ${composerInstallation}
${terraformModule} | ${terraformInstallation}
`('renders', ({ packageEntity, selector }) => {
it(`${packageEntity.package_type} instructions exist`, () => {
createComponent({ packageEntity });
expect(selector()).toExist();
});
});
});
});
spec/frontend/packages/details/components/maven_installation_spec.js deleted 100644 → 0
View file @ d2167efa
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { nextTick } from 'vue';
import Vuex from 'vuex';
import { registryUrl as mavenPath } from 'jest/packages/details/mock_data';
import { mavenPackage as packageEntity } from 'jest/packages/mock_data';
import InstallationTitle from '~/packages/details/components/installation_title.vue';
import MavenInstallation from '~/packages/details/components/maven_installation.vue';
import { TrackingActions } from '~/packages/details/constants';
import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('MavenInstallation', () => {
let wrapper;
const xmlCodeBlock = 'foo/xml';
const mavenCommandStr = 'foo/command';
const mavenSetupXml = 'foo/setup';
const gradleGroovyInstallCommandText = 'foo/gradle/groovy/install';
const gradleGroovyAddSourceCommandText = 'foo/gradle/groovy/add/source';
const gradleKotlinInstallCommandText = 'foo/gradle/kotlin/install';
const gradleKotlinAddSourceCommandText = 'foo/gradle/kotlin/add/source';
const store = new Vuex.Store({
state: {
packageEntity,
mavenPath,
},
getters: {
mavenInstallationXml: () => xmlCodeBlock,
mavenInstallationCommand: () => mavenCommandStr,
mavenSetupXml: () => mavenSetupXml,
gradleGroovyInstalCommand: () => gradleGroovyInstallCommandText,
gradleGroovyAddSourceCommand: () => gradleGroovyAddSourceCommandText,
gradleKotlinInstalCommand: () => gradleKotlinInstallCommandText,
gradleKotlinAddSourceCommand: () => gradleKotlinAddSourceCommandText,
},
});
const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
function createComponent({ data = {} } = {}) {
wrapper = shallowMount(MavenInstallation, {
localVue,
store,
data() {
return data;
},
});
}
afterEach(() => {
wrapper.destroy();
});
describe('install command switch', () => {
it('has the installation title component', () => {
createComponent();
expect(findInstallationTitle().exists()).toBe(true);
expect(findInstallationTitle().props()).toMatchObject({
packageType: 'maven',
options: [
{ value: 'maven', label: 'Maven XML' },
{ value: 'groovy', label: 'Gradle Groovy DSL' },
{ value: 'kotlin', label: 'Gradle Kotlin DSL' },
],
});
});
it('on change event updates the instructions to show', async () => {
createComponent();
expect(findCodeInstructions().at(0).props('instruction')).toBe(xmlCodeBlock);
findInstallationTitle().vm.$emit('change', 'groovy');
await nextTick();
expect(findCodeInstructions().at(0).props('instruction')).toBe(
gradleGroovyInstallCommandText,
);
});
});
describe('maven', () => {
beforeEach(() => {
createComponent();
});
it('renders all the messages', () => {
expect(wrapper.element).toMatchSnapshot();
});
describe('installation commands', () => {
it('renders the correct xml block', () => {
expect(findCodeInstructions().at(0).props()).toMatchObject({
instruction: xmlCodeBlock,
multiline: true,
trackingAction: TrackingActions.COPY_MAVEN_XML,
});
});
it('renders the correct maven command', () => {
expect(findCodeInstructions().at(1).props()).toMatchObject({
instruction: mavenCommandStr,
multiline: false,
trackingAction: TrackingActions.COPY_MAVEN_COMMAND,
});
});
});
describe('setup commands', () => {
it('renders the correct xml block', () => {
expect(findCodeInstructions().at(2).props()).toMatchObject({
instruction: mavenSetupXml,
multiline: true,
trackingAction: TrackingActions.COPY_MAVEN_SETUP,
});
});
});
});
describe('groovy', () => {
beforeEach(() => {
createComponent({ data: { instructionType: 'groovy' } });
});
it('renders all the messages', () => {
expect(wrapper.element).toMatchSnapshot();
});
describe('installation commands', () => {
it('renders the gradle install command', () => {
expect(findCodeInstructions().at(0).props()).toMatchObject({
instruction: gradleGroovyInstallCommandText,
multiline: false,
trackingAction: TrackingActions.COPY_GRADLE_INSTALL_COMMAND,
});
});
});
describe('setup commands', () => {
it('renders the correct gradle command', () => {
expect(findCodeInstructions().at(1).props()).toMatchObject({
instruction: gradleGroovyAddSourceCommandText,
multiline: true,
trackingAction: TrackingActions.COPY_GRADLE_ADD_TO_SOURCE_COMMAND,
});
});
});
});
describe('kotlin', () => {
beforeEach(() => {
createComponent({ data: { instructionType: 'kotlin' } });
});
it('renders all the messages', () => {
expect(wrapper.element).toMatchSnapshot();
});
describe('installation commands', () => {
it('renders the gradle install command', () => {
expect(findCodeInstructions().at(0).props()).toMatchObject({
instruction: gradleKotlinInstallCommandText,
multiline: false,
trackingAction: TrackingActions.COPY_KOTLIN_INSTALL_COMMAND,
});
});
});
describe('setup commands', () => {
it('renders the correct gradle command', () => {
expect(findCodeInstructions().at(1).props()).toMatchObject({
instruction: gradleKotlinAddSourceCommandText,
multiline: true,
trackingAction: TrackingActions.COPY_KOTLIN_ADD_TO_SOURCE_COMMAND,
});
});
});
});
});
spec/frontend/packages/details/components/npm_installation_spec.js deleted 100644 → 0
View file @ d2167efa
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { nextTick } from 'vue';
import Vuex from 'vuex';
import { registryUrl as nugetPath } from 'jest/packages/details/mock_data';
import { npmPackage as packageEntity } from 'jest/packages/mock_data';
import InstallationTitle from '~/packages/details/components/installation_title.vue';
import NpmInstallation from '~/packages/details/components/npm_installation.vue';
import { TrackingActions } from '~/packages/details/constants';
import { npmInstallationCommand, npmSetupCommand } from '~/packages/details/store/getters';
import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('NpmInstallation', () => {
let wrapper;
const npmInstallationCommandLabel = 'npm i @Test/package';
const yarnInstallationCommandLabel = 'yarn add @Test/package';
const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
function createComponent({ data = {} } = {}) {
const store = new Vuex.Store({
state: {
packageEntity,
nugetPath,
},
getters: {
npmInstallationCommand,
npmSetupCommand,
},
});
wrapper = shallowMount(NpmInstallation, {
localVue,
store,
data() {
return data;
},
});
}
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('renders all the messages', () => {
expect(wrapper.element).toMatchSnapshot();
});
describe('install command switch', () => {
it('has the installation title component', () => {
expect(findInstallationTitle().exists()).toBe(true);
expect(findInstallationTitle().props()).toMatchObject({
packageType: 'npm',
options: [
{ value: 'npm', label: 'Show NPM commands' },
{ value: 'yarn', label: 'Show Yarn commands' },
],
});
});
it('on change event updates the instructions to show', async () => {
createComponent();
expect(findCodeInstructions().at(0).props('instruction')).toBe(npmInstallationCommandLabel);
findInstallationTitle().vm.$emit('change', 'yarn');
await nextTick();
expect(findCodeInstructions().at(0).props('instruction')).toBe(yarnInstallationCommandLabel);
});
});
describe('npm', () => {
beforeEach(() => {
createComponent();
});
it('renders the correct installation command', () => {
expect(findCodeInstructions().at(0).props()).toMatchObject({
instruction: npmInstallationCommandLabel,
multiline: false,
trackingAction: TrackingActions.COPY_NPM_INSTALL_COMMAND,
});
});
it('renders the correct setup command', () => {
expect(findCodeInstructions().at(1).props()).toMatchObject({
instruction: 'echo @Test:registry=undefined/ >> .npmrc',
multiline: false,
trackingAction: TrackingActions.COPY_NPM_SETUP_COMMAND,
});
});
});
describe('yarn', () => {
beforeEach(() => {
createComponent({ data: { instructionType: 'yarn' } });
});
it('renders the correct setup command', () => {
expect(findCodeInstructions().at(0).props()).toMatchObject({
instruction: yarnInstallationCommandLabel,
multiline: false,
trackingAction: TrackingActions.COPY_YARN_INSTALL_COMMAND,
});
});
it('renders the correct registry command', () => {
expect(findCodeInstructions().at(1).props()).toMatchObject({
instruction: 'echo \\"@Test:registry\\" \\"undefined/\\" >> .yarnrc',
multiline: false,
trackingAction: TrackingActions.COPY_YARN_SETUP_COMMAND,
});
});
});
});
spec/frontend/packages/details/components/nuget_installation_spec.js deleted 100644 → 0
View file @ d2167efa
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import { registryUrl as nugetPath } from 'jest/packages/details/mock_data';
import { nugetPackage as packageEntity } from 'jest/packages/mock_data';
import InstallationTitle from '~/packages/details/components/installation_title.vue';
import NugetInstallation from '~/packages/details/components/nuget_installation.vue';
import { TrackingActions } from '~/packages/details/constants';
import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('NugetInstallation', () => {
let wrapper;
const nugetInstallationCommandStr = 'foo/command';
const nugetSetupCommandStr = 'foo/setup';
const store = new Vuex.Store({
state: {
packageEntity,
nugetPath,
},
getters: {
nugetInstallationCommand: () => nugetInstallationCommandStr,
nugetSetupCommand: () => nugetSetupCommandStr,
},
});
const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
function createComponent() {
wrapper = shallowMount(NugetInstallation, {
localVue,
store,
});
}
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('renders all the messages', () => {
expect(wrapper.element).toMatchSnapshot();
});
describe('install command switch', () => {
it('has the installation title component', () => {
expect(findInstallationTitle().exists()).toBe(true);
expect(findInstallationTitle().props()).toMatchObject({
packageType: 'nuget',
options: [{ value: 'nuget', label: 'Show Nuget commands' }],
});
});
});
describe('installation commands', () => {
it('renders the correct command', () => {
expect(findCodeInstructions().at(0).props()).toMatchObject({
instruction: nugetInstallationCommandStr,
trackingAction: TrackingActions.COPY_NUGET_INSTALL_COMMAND,
});
});
});
describe('setup commands', () => {
it('renders the correct command', () => {
expect(findCodeInstructions().at(1).props()).toMatchObject({
instruction: nugetSetupCommandStr,
trackingAction: TrackingActions.COPY_NUGET_SETUP_COMMAND,
});
});
});
});
spec/frontend/packages/details/components/package_title_spec.js deleted 100644 → 0
View file @ d2167efa
import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import PackageTitle from '~/packages/details/components/package_title.vue';
import PackageTags from '~/packages/shared/components/package_tags.vue';
import TitleArea from '~/vue_shared/components/registry/title_area.vue';
import {
conanPackage,
mavenFiles,
mavenPackage,
mockTags,
npmFiles,
npmPackage,
nugetPackage,
} from '../../mock_data';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('PackageTitle', () => {
let wrapper;
let store;
function createComponent({
packageEntity = mavenPackage,
packageFiles = mavenFiles,
icon = null,
} = {}) {
store = new Vuex.Store({
state: {
packageEntity,
packageFiles,
},
getters: {
packageTypeDisplay: ({ packageEntity: { package_type: type } }) => type,
packagePipeline: ({ packageEntity: { pipeline = null } }) => pipeline,
packageIcon: () => icon,
},
});
wrapper = shallowMount(PackageTitle, {
localVue,
store,
stubs: {
TitleArea,
},
});
return wrapper.vm.$nextTick();
}
const findTitleArea = () => wrapper.find(TitleArea);
const packageType = () => wrapper.find('[data-testid="package-type"]');
const packageSize = () => wrapper.find('[data-testid="package-size"]');
const pipelineProject = () => wrapper.find('[data-testid="pipeline-project"]');
const packageRef = () => wrapper.find('[data-testid="package-ref"]');
const packageTags = () => wrapper.find(PackageTags);
const packageBadges = () => wrapper.findAll('[data-testid="tag-badge"]');
afterEach(() => {
wrapper.destroy();
});
describe('renders', () => {
it('without tags', async () => {
await createComponent();
expect(wrapper.element).toMatchSnapshot();
});
it('with tags', async () => {
await createComponent({ packageEntity: { ...mavenPackage, tags: mockTags } });
expect(wrapper.element).toMatchSnapshot();
});
it('with tags on mobile', async () => {
jest.spyOn(GlBreakpointInstance, 'isDesktop').mockReturnValue(false);
await createComponent({ packageEntity: { ...mavenPackage, tags: mockTags } });
await wrapper.vm.$nextTick();
expect(packageBadges()).toHaveLength(mockTags.length);
});
});
describe('package title', () => {
it('is correctly bound', async () => {
await createComponent();
expect(findTitleArea().props('title')).toBe('Test package');
});
});
describe('package icon', () => {
const fakeSrc = 'a-fake-src';
it('binds an icon when provided one from vuex', async () => {
await createComponent({ icon: fakeSrc });
expect(findTitleArea().props('avatar')).toBe(fakeSrc);
});
it('do not binds an icon when not provided one', async () => {
await createComponent();
expect(findTitleArea().props('avatar')).toBe(null);
});
});
describe.each`
packageEntity | text
${conanPackage} | ${'conan'}
${mavenPackage} | ${'maven'}
${npmPackage} | ${'npm'}
${nugetPackage} | ${'nuget'}
`(`package type`, ({ packageEntity, text }) => {
beforeEach(() => createComponent({ packageEntity }));
it(`${packageEntity.package_type} should render from Vuex getters ${text}`, () => {
expect(packageType().props()).toEqual(expect.objectContaining({ text, icon: 'package' }));
});
});
describe('calculates the package size', () => {
it('correctly calculates when there is only 1 file', async () => {
await createComponent({ packageEntity: npmPackage, packageFiles: npmFiles });
expect(packageSize().props()).toMatchObject({ text: '200 bytes', icon: 'disk' });
});
it('correctly calulates when there are multiple files', async () => {
await createComponent();
expect(packageSize().props('text')).toBe('300 bytes');
});
});
describe('package tags', () => {
it('displays the package-tags component when the package has tags', async () => {
await createComponent({
packageEntity: {
...npmPackage,
tags: mockTags,
},
});
expect(packageTags().exists()).toBe(true);
});
it('does not display the package-tags component when there are no tags', async () => {
await createComponent();
expect(packageTags().exists()).toBe(false);
});
});
describe('package ref', () => {
it('does not display the ref if missing', async () => {
await createComponent();
expect(packageRef().exists()).toBe(false);
});
it('correctly shows the package ref if there is one', async () => {
await createComponent({ packageEntity: npmPackage });
expect(packageRef().props()).toMatchObject({
text: npmPackage.pipeline.ref,
icon: 'branch',
});
});
});
describe('pipeline project', () => {
it('does not display the project if missing', async () => {
await createComponent();
expect(pipelineProject().exists()).toBe(false);
});
it('correctly shows the pipeline project if there is one', async () => {
await createComponent({ packageEntity: npmPackage });
expect(pipelineProject().props()).toMatchObject({
text: npmPackage.pipeline.project.name,
icon: 'review-list',
link: npmPackage.pipeline.project.web_url,
});
});
});
});
spec/frontend/packages/details/components/pypi_installation_spec.js deleted 100644 → 0
View file @ d2167efa
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import { pypiPackage as packageEntity } from 'jest/packages/mock_data';
import InstallationTitle from '~/packages/details/components/installation_title.vue';
import PypiInstallation from '~/packages/details/components/pypi_installation.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('PypiInstallation', () => {
let wrapper;
const pipCommandStr = 'pip install';
const pypiSetupStr = 'python setup';
const store = new Vuex.Store({
state: {
packageEntity,
pypiHelpPath: 'foo',
},
getters: {
pypiPipCommand: () => pipCommandStr,
pypiSetupCommand: () => pypiSetupStr,
},
});
const pipCommand = () => wrapper.find('[data-testid="pip-command"]');
const setupInstruction = () => wrapper.find('[data-testid="pypi-setup-content"]');
const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
function createComponent() {
wrapper = shallowMount(PypiInstallation, {
localVue,
store,
});
}
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
describe('install command switch', () => {
it('has the installation title component', () => {
expect(findInstallationTitle().exists()).toBe(true);
expect(findInstallationTitle().props()).toMatchObject({
packageType: 'pypi',
options: [{ value: 'pypi', label: 'Show PyPi commands' }],
});
});
});
it('renders all the messages', () => {
expect(wrapper.element).toMatchSnapshot();
});
describe('installation commands', () => {
it('renders the correct pip command', () => {
expect(pipCommand().props('instruction')).toBe(pipCommandStr);
});
});
describe('setup commands', () => {
it('renders the correct setup block', () => {
expect(setupInstruction().props('instruction')).toBe(pypiSetupStr);
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7