Skip to content

G
gitlab-ce
Commit f98d2f4f authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Merge branch '201730-refactoring-package-installation-instructions-part-1' into 'master' 

Refactor package install instructions to use state and getters

See merge request gitlab-org/gitlab!24860
parents 4376e173 53f12503
Hide whitespace changes
Inline Side-by-side
Showing with 332 additions and 405 deletions
ee/app/assets/javascripts/packages/details/components/app.vue
View file @ f98d2f4f
......@@ -47,56 +47,16 @@ export default {
},
mixins: [timeagoMixin, Tracking.mixin()],
trackingActions: { ...TrackingActions },
props: {
canDelete: {
type: Boolean,
default: false,
required: true,
},
destroyPath: {
type: String,
default: '',
required: true,
},
emptySvgPath: {
type: String,
required: true,
},
npmPath: {
type: String,
required: true,
},
npmHelpPath: {
type: String,
required: true,
},
mavenPath: {
type: String,
required: true,
},
mavenHelpPath: {
type: String,
required: true,
},
conanPath: {
type: String,
required: true,
},
conanHelpPath: {
type: String,
required: true,
},
nugetPath: {
type: String,
required: true,
},
nugetHelpPath: {
type: String,
required: true,
},
},
computed: {
...mapState(['packageEntity', 'packageFiles']),
...mapState([
'packageEntity',
'packageFiles',
'canDelete',
'destroyPath',
'svgPath',
'npmPath',
'npmHelpPath',
]),
isNpmPackage() {
return this.packageEntity.package_type === PackageType.NPM;
},
......@@ -210,8 +170,7 @@ export default {
v-if="!isValidPackage"
:title="s__('PackageRegistry|Unable to load package')"
:description="s__('PackageRegistry|There was a problem fetching the details for this package.')"
:svg-path="emptySvgPath"
class="js-package-empty-state"
:svg-path="svgPath"
/>
<div v-else class="packages-app">
......@@ -249,26 +208,9 @@ export default {
:help-url="npmHelpPath"
/>
<maven-installation
v-else-if="isMavenPackage"
:maven-metadata="packageEntity.maven_metadatum"
:registry-url="mavenPath"
:help-url="mavenHelpPath"
/>
<conan-installation
v-else-if="isConanPackage"
:package-entity="packageEntity"
:registry-url="conanPath"
:help-url="conanHelpPath"
/>
<nuget-installation
v-else-if="isNugetPackage"
:package-entity="packageEntity"
:registry-url="nugetPath"
:help-url="nugetHelpPath"
/>
<maven-installation v-else-if="isMavenPackage" />
<conan-installation v-else-if="isConanPackage" />
<nuget-installation v-else-if="isNugetPackage" />
</div>
</div>
......
ee/app/assets/javascripts/packages/details/components/conan_installation.vue
View file @ f98d2f4f
<script>
import { GlTab, GlTabs } from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui';
import { s__ } from '~/locale';
import CodeInstruction from './code_instruction.vue';
import Tracking from '~/tracking';
import { TrackingActions, TrackingLabels } from '../constants';
import { generateConanRecipe, trackInstallationTabChange } from '../utils';
import { trackInstallationTabChange } from '../utils';
import { mapGetters, mapState } from 'vuex';
export default {
name: 'ConanInstallation',
components: {
CodeInstruction,
GlLink,
GlSprintf,
GlTab,
GlTabs,
},
......@@ -19,48 +22,14 @@ export default {
}),
trackInstallationTabChange,
],
props: {
heading: {
type: String,
default: s__('PackageRegistry|Package installation'),
required: false,
},
packageEntity: {
type: Object,
required: true,
},
registryUrl: {
type: String,
required: true,
},
helpUrl: {
type: String,
required: true,
},
},
computed: {
conanCommand() {
const recipe = generateConanRecipe(this.packageEntity);
// eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
return `conan install ${recipe} --remote=gitlab`;
},
setupCommand() {
// eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
return `conan remote add gitlab ${this.registryUrl}`;
},
helpText() {
return sprintf(
s__(
`PackageRegistry|For more information on the Conan registry, %{linkStart}see the documentation%{linkEnd}.`,
),
{
linkStart: `<a href="${this.helpUrl}" target="_blank" rel="noopener noreferer">`,
linkEnd: '</a>',
},
false,
);
},
...mapState(['conanHelpPath']),
...mapGetters(['conanInstallationCommand', 'conanSetupCommand']),
},
i18n: {
helpText: s__(
'PackageRegistry|For more information on the Conan registry, %{linkStart}see the documentation%{linkEnd}.',
),
},
trackingActions: { ...TrackingActions },
};
......@@ -73,7 +42,7 @@ export default {
<div class="prepend-left-default append-right-default">
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Conan Command') }}</p>
<code-instruction
:instruction="conanCommand"
:instruction="conanInstallationCommand"
:copy-text="s__('PackageRegistry|Copy Conan Command')"
class="js-conan-command"
:tracking-action="$options.trackingActions.COPY_CONAN_COMMAND"
......@@ -86,12 +55,16 @@ export default {
{{ s__('PackageRegistry|Add Conan Remote') }}
</p>
<code-instruction
:instruction="setupCommand"
:instruction="conanSetupCommand"
:copy-text="s__('PackageRegistry|Copy Conan Setup Command')"
class="js-conan-setup"
:tracking-action="$options.trackingActions.COPY_CONAN_SETUP_COMMAND"
/>
<p v-html="helpText"></p>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="conanHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</gl-tab>
</gl-tabs>
......
ee/app/assets/javascripts/packages/details/components/maven_installation.vue
View file @ f98d2f4f
<script>
import { GlTab, GlTabs } from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui';
import { s__ } from '~/locale';
import CodeInstruction from './code_instruction.vue';
import Tracking from '~/tracking';
import { TrackingActions, TrackingLabels } from '../constants';
import { trackInstallationTabChange } from '../utils';
import { mapGetters, mapState } from 'vuex';
export default {
name: 'MavenInstallation',
components: {
CodeInstruction,
GlLink,
GlSprintf,
GlTab,
GlTabs,
},
......@@ -19,104 +22,19 @@ export default {
}),
trackInstallationTabChange,
],
props: {
heading: {
type: String,
default: s__('PackageRegistry|Package installation'),
required: false,
},
mavenMetadata: {
type: Object,
required: true,
},
registryUrl: {
type: String,
required: true,
},
helpUrl: {
type: String,
required: true,
},
},
computed: {
mavenData() {
const {
app_group: appGroup = '',
app_name: appName = '',
app_version: appVersion = '',
} = this.mavenMetadata;
return {
appGroup,
appName,
appVersion,
};
},
mavenXml() {
return `<dependency>
<groupId>${this.mavenData.appGroup}</groupId>
<artifactId>${this.mavenData.appName}</artifactId>
<version>${this.mavenData.appVersion}</version>
</dependency>`;
},
mavenCommand() {
const { appGroup: group, appName: name, appVersion: version } = this.mavenData;
return `mvn dependency:get -Dartifact=${group}:${name}:${version}`;
},
mavenSetupXml() {
return `<repositories>
<repository>
<id>gitlab-maven</id>
<url>${this.registryUrl}</url>
</repository>
</repositories>
<distributionManagement>
<repository>
<id>gitlab-maven</id>
<url>${this.registryUrl}</url>
</repository>
<snapshotRepository>
<id>gitlab-maven</id>
<url>${this.registryUrl}</url>
</snapshotRepository>
</distributionManagement>`;
},
helpText() {
return sprintf(
s__(
`PackageRegistry|For more information on the Maven registry, %{linkStart}see the documentation%{linkEnd}.`,
),
{
linkStart: `<a href="${this.helpUrl}" target="_blank" rel="noopener noreferer">`,
linkEnd: '</a>',
},
false,
);
},
...mapState(['mavenHelpPath']),
...mapGetters(['mavenInstallationXml', 'mavenInstallationCommand', 'mavenSetupXml']),
},
i18n: {
xmlText: sprintf(
s__(
`PackageRegistry|Copy and paste this inside your %{codeStart}pom.xml%{codeEnd} %{codeStart}dependencies%{codeEnd} block.`,
),
{
codeStart: `<code>`,
codeEnd: '</code>',
},
false,
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.`,
),
setupText: sprintf(
s__(
`PackageRegistry|If you haven't already done so, you will need to add the below to your %{codeStart}pom.xml%{codeEnd} file.`,
),
{
codeStart: `<code>`,
codeEnd: '</code>',
},
false,
helpText: s__(
'PackageRegistry|For more information on the Maven registry, %{linkStart}see the documentation%{linkEnd}.',
),
},
trackingActions: { ...TrackingActions },
......@@ -129,9 +47,15 @@ export default {
<gl-tab :title="s__('PackageRegistry|Installation')" title-item-class="js-installation-tab">
<div class="prepend-left-default append-right-default">
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Maven XML') }}</p>
<p v-html="$options.i18n.xmlText"></p>
<p>
<gl-sprintf :message="$options.i18n.xmlText">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</p>
<code-instruction
:instruction="mavenXml"
:instruction="mavenInstallationXml"
:copy-text="s__('PackageRegistry|Copy Maven XML')"
class="js-maven-xml"
multiline
......@@ -142,7 +66,7 @@ export default {
{{ s__('PackageRegistry|Maven Command') }}
</p>
<code-instruction
:instruction="mavenCommand"
:instruction="mavenInstallationCommand"
:copy-text="s__('PackageRegistry|Copy Maven command')"
class="js-maven-command"
:tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND"
......@@ -151,7 +75,13 @@ export default {
</gl-tab>
<gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
<div class="prepend-left-default append-right-default">
<p v-html="$options.i18n.setupText"></p>
<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')"
......@@ -159,7 +89,11 @@ export default {
multiline
:tracking-action="$options.trackingActions.COPY_MAVEN_SETUP"
/>
<p v-html="helpText"></p>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</gl-tab>
</gl-tabs>
......
ee/app/assets/javascripts/packages/details/components/nuget_installation.vue
View file @ f98d2f4f
<script>
import { GlTab, GlTabs } from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui';
import { s__ } from '~/locale';
import CodeInstruction from './code_instruction.vue';
import Tracking from '~/tracking';
import { TrackingActions, TrackingLabels } from '../constants';
import { trackInstallationTabChange } from '../utils';
import { mapGetters, mapState } from 'vuex';
export default {
name: 'NugetInstallation',
components: {
CodeInstruction,
GlLink,
GlSprintf,
GlTab,
GlTabs,
},
......@@ -19,39 +22,14 @@ export default {
}),
trackInstallationTabChange,
],
props: {
packageEntity: {
type: Object,
required: true,
},
registryUrl: {
type: String,
required: true,
},
helpUrl: {
type: String,
required: true,
},
},
computed: {
nugetCommand() {
return `nuget install ${this.packageEntity.name} -Source "GitLab"`;
},
setupCommand() {
return `nuget source Add -Name "GitLab" -Source "${this.registryUrl}" -UserName <your_username> -Password <your_token>`;
},
helpText() {
return sprintf(
s__(
`PackageRegistry|For more information on the NuGet registry, %{linkStart}see the documentation%{linkEnd}.`,
),
{
linkStart: `<a href="${this.helpUrl}" target="_blank" rel="noopener noreferer">`,
linkEnd: '</a>',
},
false,
);
},
...mapState(['nugetHelpPath']),
...mapGetters(['nugetInstallationCommand', 'nugetSetupCommand']),
},
i18n: {
helpText: s__(
'PackageRegistry|For more information on the NuGet registry, %{linkStart}see the documentation%{linkEnd}.',
),
},
trackingActions: { ...TrackingActions },
};
......@@ -64,7 +42,7 @@ export default {
<div class="prepend-left-default append-right-default">
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|NuGet Command') }}</p>
<code-instruction
:instruction="nugetCommand"
:instruction="nugetInstallationCommand"
:copy-text="s__('PackageRegistry|Copy NuGet Command')"
class="js-nuget-command"
:tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND"
......@@ -77,12 +55,16 @@ export default {
{{ s__('PackageRegistry|Add NuGet Source') }}
</p>
<code-instruction
:instruction="setupCommand"
:instruction="nugetSetupCommand"
:copy-text="s__('PackageRegistry|Copy NuGet Setup Command')"
class="js-nuget-setup"
:tracking-action="$options.trackingActions.COPY_NUGET_SETUP_COMMAND"
/>
<p v-html="helpText"></p>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="nugetHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</gl-tab>
</gl-tabs>
......
ee/app/assets/javascripts/packages/details/index.js
View file @ f98d2f4f
......@@ -6,52 +6,29 @@ import createStore from './store';
Vue.use(Translate);
export default () => {
const { dataset } = document.querySelector('#js-vue-packages-detail');
const packageEntity = JSON.parse(dataset.package);
const packageFiles = JSON.parse(dataset.packageFiles);
const canDelete = dataset.canDelete === 'true';
const el = document.querySelector('#js-vue-packages-detail');
const {
package: packageJson,
packageFiles: packageFilesJson,
canDelete: canDeleteStr,
...rest
} = el.dataset;
const packageEntity = JSON.parse(packageJson);
const packageFiles = JSON.parse(packageFilesJson);
const canDelete = canDeleteStr === 'true';
const store = createStore({ packageEntity, packageFiles });
const store = createStore({ packageEntity, packageFiles, canDelete, ...rest });
store.dispatch('fetchPipelineInfo');
// eslint-disable-next-line no-new
new Vue({
el: '#js-vue-packages-detail',
el,
components: {
PackagesApp,
},
store,
data() {
return {
canDelete,
destroyPath: dataset.destroyPath,
emptySvgPath: dataset.svgPath,
npmPath: dataset.npmPath,
npmHelpPath: dataset.npmHelpPath,
mavenPath: dataset.mavenPath,
mavenHelpPath: dataset.mavenHelpPath,
conanPath: dataset.conanPath,
conanHelpPath: dataset.conanHelpPath,
nugetPath: dataset.nugetPath,
nugetHelpPath: dataset.nugetHelpPath,
};
},
render(createElement) {
return createElement('packages-app', {
props: {
canDelete: this.canDelete,
destroyPath: this.destroyPath,
emptySvgPath: this.emptySvgPath,
npmPath: this.npmPath,
npmHelpPath: this.npmHelpPath,
mavenPath: this.mavenPath,
mavenHelpPath: this.mavenHelpPath,
conanPath: this.conanPath,
conanHelpPath: this.conanHelpPath,
nugetPath: this.nugetPath,
nugetHelpPath: this.nugetHelpPath,
},
});
return createElement('packages-app');
},
});
};
ee/app/assets/javascripts/packages/details/store/getters.js
View file @ f98d2f4f
import { s__ } from '~/locale';
import { generateConanRecipe } from '../utils';
export const packageHasPipeline = ({ packageEntity }) => {
if (packageEntity?.build_info?.pipeline_id) {
......@@ -23,3 +24,63 @@ export const packageTypeDisplay = ({ packageEntity }) => {
return null;
}
};
export const conanInstallationCommand = ({ packageEntity }) => {
const recipe = generateConanRecipe(packageEntity);
// eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
return `conan install ${recipe} --remote=gitlab`;
};
export const conanSetupCommand = ({ conanPath }) =>
// eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
`conan remote add gitlab ${conanPath}`;
export const mavenInstallationXml = ({ packageEntity = {} }) => {
const {
app_group: appGroup = '',
app_name: appName = '',
app_version: appVersion = '',
} = packageEntity.maven_metadatum;
return `<dependency>
<groupId>${appGroup}</groupId>
<artifactId>${appName}</artifactId>
<version>${appVersion}</version>
</dependency>`;
};
export const mavenInstallationCommand = ({ packageEntity = {} }) => {
const {
app_group: group = '',
app_name: name = '',
app_version: version = '',
} = packageEntity.maven_metadatum;
return `mvn dependency:get -Dartifact=${group}:${name}:${version}`;
};
export const mavenSetupXml = ({ mavenPath }) => `<repositories>
<repository>
<id>gitlab-maven</id>
<url>${mavenPath}</url>
</repository>
</repositories>
<distributionManagement>
<repository>
<id>gitlab-maven</id>
<url>${mavenPath}</url>
</repository>
<snapshotRepository>
<id>gitlab-maven</id>
<url>${mavenPath}</url>
</snapshotRepository>
</distributionManagement>`;
export const nugetInstallationCommand = ({ packageEntity }) =>
`nuget install ${packageEntity.name} -Source "GitLab"`;
export const nugetSetupCommand = ({ nugetPath }) =>
`nuget source Add -Name "GitLab" -Source "${nugetPath}" -UserName <your_username> -Password <your_token>`;
ee/spec/frontend/packages/details/components/app_spec.js
View file @ f98d2f4f
import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils';
import { GlModal } from '@gitlab/ui';
import { GlEmptyState, GlModal } from '@gitlab/ui';
import Tracking from '~/tracking';
import PackagesApp from 'ee/packages/details/components/app.vue';
import PackageTitle from 'ee/packages/details/components/package_title.vue';
......@@ -19,6 +19,7 @@ import {
npmFiles,
nugetPackage,
} from '../../mock_data';
import stubChildren from 'helpers/stub_children';
const localVue = createLocalVue();
localVue.use(Vuex);
......@@ -27,25 +28,7 @@ describe('PackagesApp', () => {
let wrapper;
let store;
const defaultProps = {
canDelete: true,
destroyPath: 'destroy-package-path',
emptySvgPath: 'empty-illustration',
npmPath: 'foo',
npmHelpPath: 'foo',
mavenPath: 'foo',
mavenHelpPath: 'foo',
conanPath: 'foo',
conanHelpPath: 'foo',
nugetPath: 'foo',
nugetHelpPath: 'foo',
};
function createComponent(packageEntity = mavenPackage, packageFiles = mavenFiles) {
const propsData = {
...defaultProps,
};
store = new Vuex.Store({
state: {
isLoading: false,
......@@ -53,22 +36,29 @@ describe('PackagesApp', () => {
packageFiles,
pipelineInfo: {},
pipelineError: null,
},
getters: {
packageHasPipeline: () => packageEntity.build_info && packageEntity.build_info.pipeline_id,
packageTypeDisplay: () => {},
canDelete: true,
destroyPath: 'destroy-package-path',
emptySvgPath: 'empty-illustration',
npmPath: 'foo',
npmHelpPath: 'foo',
},
});
wrapper = mount(PackagesApp, {
localVue,
propsData,
store,
stubs: {
...stubChildren(PackagesApp),
GlButton: false,
GlLink: false,
GlModal: false,
GlTable: false,
},
});
}
const packageTitle = () => wrapper.find(PackageTitle);
const emptyState = () => wrapper.find('.js-package-empty-state');
const emptyState = () => wrapper.find(GlEmptyState);
const allPackageInformation = () => wrapper.findAll(PackageInformation);
const packageInformation = index => allPackageInformation().at(index);
const npmInstallation = () => wrapper.find(NpmInstallation);
......
ee/spec/frontend/packages/details/components/conan_installation_spec.js
View file @ f98d2f4f
import { mount } from '@vue/test-utils';
import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils';
import ConanInstallation from 'ee/packages/details/components/conan_installation.vue';
import { generateConanRecipe } from 'ee/packages/details/utils';
import { conanPackage } from '../../mock_data';
import { registryUrl } from '../mock_data';
import { conanPackage as packageEntity } from '../../mock_data';
import { registryUrl as conanPath } from '../mock_data';
import { TrackingActions, TrackingLabels } from 'ee/packages/details/constants';
import Tracking from '~/tracking';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('ConanInstallation', () => {
let wrapper;
const defaultProps = {
packageEntity: conanPackage,
registryUrl,
helpUrl: 'foo',
};
const recipe = generateConanRecipe(conanPackage);
const conanInstallationCommandStr = `conan install ${recipe} --remote=gitlab`;
const conanSetupCommandStr = `conan remote add gitlab ${registryUrl}`;
const conanInstallationCommandStr = 'foo/command';
const conanSetupCommandStr = 'foo/setup';
const store = new Vuex.Store({
state: {
packageEntity,
conanPath,
},
getters: {
conanInstallationCommand: () => conanInstallationCommandStr,
conanSetupCommand: () => conanSetupCommandStr,
},
});
const installationTab = () => wrapper.find('.js-installation-tab > a');
const setupTab = () => wrapper.find('.js-setup-tab > a');
const conanInstallationCommand = () => wrapper.find('.js-conan-command > input');
const conanSetupCommand = () => wrapper.find('.js-conan-setup > input');
function createComponent(props = {}) {
const propsData = {
...defaultProps,
...props,
};
function createComponent() {
wrapper = mount(ConanInstallation, {
propsData,
localVue,
store,
});
}
......
ee/spec/frontend/packages/details/components/maven_installation_spec.js
View file @ f98d2f4f
import { mount } from '@vue/test-utils';
import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils';
import MavenInstallation from 'ee/packages/details/components/maven_installation.vue';
import { TrackingActions, TrackingLabels } from 'ee/packages/details/constants';
import {
generateMavenCommand,
generateXmlCodeBlock,
generateMavenSetupXml,
mavenMetadata,
registryUrl,
} from '../mock_data';
import { registryUrl as mavenPath } from '../mock_data';
import { mavenPackage as packageEntity } from '../../mock_data';
import Tracking from '~/tracking';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('MavenInstallation', () => {
let wrapper;
const defaultProps = {
mavenMetadata,
registryUrl,
helpUrl: 'foo',
};
const mavenCommandStr = generateMavenCommand(mavenMetadata);
const xmlCodeBlock = generateXmlCodeBlock(mavenMetadata);
const mavenSetupXml = generateMavenSetupXml();
const xmlCodeBlock = 'foo/xml';
const mavenCommandStr = 'foo/command';
const mavenSetupXml = 'foo/setup';
const store = new Vuex.Store({
state: {
packageEntity,
mavenPath,
},
getters: {
mavenInstallationXml: () => xmlCodeBlock,
mavenInstallationCommand: () => mavenCommandStr,
mavenSetupXml: () => mavenSetupXml,
},
});
const installationTab = () => wrapper.find('.js-installation-tab > a');
const setupTab = () => wrapper.find('.js-setup-tab > a');
......@@ -29,14 +34,10 @@ describe('MavenInstallation', () => {
const mavenCommand = () => wrapper.find('.js-maven-command > input');
const xmlSetup = () => wrapper.find('.js-maven-setup-xml > pre');
function createComponent(props = {}) {
const propsData = {
...defaultProps,
...props,
};
function createComponent() {
wrapper = mount(MavenInstallation, {
propsData,
localVue,
store,
});
}
......@@ -48,26 +49,6 @@ describe('MavenInstallation', () => {
if (wrapper) wrapper.destroy();
});
describe('with empty maven metadata', () => {
beforeEach(() => {
createComponent({
mavenMetadata: {},
});
});
it('renders empty strings in the xml block', () => {
const emptyXmlBlock = generateXmlCodeBlock({});
expect(xmlCode().text()).toBe(emptyXmlBlock);
});
it('renders empty strings in the command block', () => {
const emptyMavenCommand = generateMavenCommand({});
expect(mavenCommand().element.value).toBe(emptyMavenCommand);
});
});
describe('installation commands', () => {
it('renders the correct xml block', () => {
expect(xmlCode().text()).toBe(xmlCodeBlock);
......
ee/spec/frontend/packages/details/components/nuget_installation_spec.js
View file @ f98d2f4f
import { mount } from '@vue/test-utils';
import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils';
import NugetInstallation from 'ee/packages/details/components/nuget_installation.vue';
import { nugetPackage } from '../../mock_data';
import { registryUrl } from '../mock_data';
import { nugetPackage as packageEntity } from '../../mock_data';
import { registryUrl as nugetPath } from '../mock_data';
import { TrackingActions, TrackingLabels } from 'ee/packages/details/constants';
import Tracking from '~/tracking';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('NugetInstallation', () => {
let wrapper;
const defaultProps = {
packageEntity: nugetPackage,
registryUrl,
helpUrl: 'foo',
};
const nugetInstallationCommandStr = `nuget install ${nugetPackage.name} -Source "GitLab"`;
const nugetSetupCommandStr = `nuget source Add -Name "GitLab" -Source "${registryUrl}" -UserName <your_username> -Password <your_token>`;
const nugetInstallationCommandStr = 'foo/command';
const nugetSetupCommandStr = 'foo/setup';
const store = new Vuex.Store({
state: {
packageEntity,
nugetPath,
},
getters: {
nugetInstallationCommand: () => nugetInstallationCommandStr,
nugetSetupCommand: () => nugetSetupCommandStr,
},
});
const installationTab = () => wrapper.find('.js-installation-tab > a');
const setupTab = () => wrapper.find('.js-setup-tab > a');
const nugetInstallationCommand = () => wrapper.find('.js-nuget-command > input');
const nugetSetupCommand = () => wrapper.find('.js-nuget-setup > input');
function createComponent(props = {}) {
const propsData = {
...defaultProps,
...props,
};
function createComponent() {
wrapper = mount(NugetInstallation, {
propsData,
localVue,
store,
});
}
......
ee/spec/frontend/packages/details/store/getters_spec.js
View file @ f98d2f4f
import { packageHasPipeline, packageTypeDisplay } from 'ee/packages/details/store/getters';
import {
conanInstallationCommand,
conanSetupCommand,
packageHasPipeline,
packageTypeDisplay,
mavenInstallationXml,
mavenInstallationCommand,
mavenSetupXml,
nugetInstallationCommand,
nugetSetupCommand,
} from 'ee/packages/details/store/getters';
import {
conanPackage,
npmPackage,
......@@ -6,6 +16,13 @@ import {
mockPipelineInfo,
mavenPackage as packageWithoutBuildInfo,
} from '../../mock_data';
import {
generateMavenCommand,
generateXmlCodeBlock,
generateMavenSetupXml,
registryUrl,
} from '../mock_data';
import { generateConanRecipe } from 'ee/packages/details/utils';
describe('Getters PackageDetails Store', () => {
let state;
......@@ -16,12 +33,29 @@ describe('Getters PackageDetails Store', () => {
packageEntity: packageWithoutBuildInfo,
pipelineInfo: mockPipelineInfo,
pipelineError: mockPipelineError,
conanPath: registryUrl,
mavenPath: registryUrl,
nugetPath: registryUrl,
};
const setupState = (testState = defaultState) => {
state = testState;
const setupState = (testState = {}) => {
state = {
...defaultState,
...testState,
};
};
const recipe = generateConanRecipe(conanPackage);
const conanInstallationCommandStr = `conan install ${recipe} --remote=gitlab`;
const conanSetupCommandStr = `conan remote add gitlab ${registryUrl}`;
const mavenCommandStr = generateMavenCommand(packageWithoutBuildInfo.maven_metadatum);
const mavenInstallationXmlBlock = generateXmlCodeBlock(packageWithoutBuildInfo.maven_metadatum);
const mavenSetupXmlBlock = generateMavenSetupXml();
const nugetInstallationCommandStr = `nuget install ${nugetPackage.name} -Source "GitLab"`;
const nugetSetupCommandStr = `nuget source Add -Name "GitLab" -Source "${registryUrl}" -UserName <your_username> -Password <your_token>`;
describe('packageHasPipeline', () => {
it('should return true when build_info and pipeline_id exist', () => {
setupState({
......@@ -53,4 +87,52 @@ describe('Getters PackageDetails Store', () => {
});
});
});
describe('conan string getters', () => {
it('gets the correct conanInstallationCommand', () => {
setupState({ packageEntity: conanPackage });
expect(conanInstallationCommand(state)).toEqual(conanInstallationCommandStr);
});
it('gets the correct conanSetupCommand', () => {
setupState({ packageEntity: conanPackage });
expect(conanSetupCommand(state)).toEqual(conanSetupCommandStr);
});
});
describe('maven string getters', () => {
it('gets the correct mavenInstallationXml', () => {
setupState();
expect(mavenInstallationXml(state)).toEqual(mavenInstallationXmlBlock);
});
it('gets the correct mavenInstallationCommand', () => {
setupState();
expect(mavenInstallationCommand(state)).toEqual(mavenCommandStr);
});
it('gets the correct mavenSetupXml', () => {
setupState();
expect(mavenSetupXml(state)).toEqual(mavenSetupXmlBlock);
});
});
describe('nuget string getters', () => {
it('gets the correct nugetInstallationCommand', () => {
setupState({ packageEntity: nugetPackage });
expect(nugetInstallationCommand(state)).toEqual(nugetInstallationCommandStr);
});
it('gets the correct nugetSetupCommand', () => {
setupState({ packageEntity: nugetPackage });
expect(nugetSetupCommand(state)).toEqual(nugetSetupCommandStr);
});
});
});
locale/gitlab.pot
View file @ f98d2f4f
......@@ -13363,9 +13363,6 @@ msgstr ""
msgid "PackageRegistry|NuGet Command"
msgstr ""
msgid "PackageRegistry|Package installation"
msgstr ""
msgid "PackageRegistry|Registry Setup"
msgstr ""
......
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