Skip to content

G
gitlab-ce
Commit 4f3af541 authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Merge branch '225665-create-shared-components-for-package-and-container-registry-3' into 'master' 

Move code_instruction component to registry

See merge request gitlab-org/gitlab!41565
parents a4a25c0a d8bdc515
Hide whitespace changes
Inline Side-by-side
Showing with 307 additions and 305 deletions
app/assets/javascripts/packages/details/components/composer_installation.vue
View file @ 4f3af541
......@@ -2,8 +2,8 @@
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mapGetters, mapState } from 'vuex';
import { s__ } from '~/locale';
import CodeInstruction from './code_instruction.vue';
import { TrackingActions } from '../constants';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import { TrackingActions, TrackingLabels } from '../constants';
export default {
name: 'ComposerInstallation',
......@@ -26,28 +26,30 @@ export default {
),
},
trackingActions: { ...TrackingActions },
TrackingLabels,
};
</script>
<template>
<div>
<h3 class="gl-font-lg">{{ __('Installation') }}</h3>
<h4 class="gl-font-base" data-testid="registry-include-title">
{{ $options.i18n.registryInclude }}
</h4>
<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"
/>
<h4 class="gl-font-base" data-testid="package-include-title">
{{ $options.i18n.packageInclude }}
</h4>
<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">
......
app/assets/javascripts/packages/details/components/conan_installation.vue
View file @ 4f3af541
......@@ -2,8 +2,8 @@
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mapGetters, mapState } from 'vuex';
import { s__ } from '~/locale';
import CodeInstruction from './code_instruction.vue';
import { TrackingActions } from '../constants';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import { TrackingActions, TrackingLabels } from '../constants';
export default {
name: 'ConanInstallation',
......@@ -22,30 +22,30 @@ export default {
),
},
trackingActions: { ...TrackingActions },
TrackingLabels,
};
</script>
<template>
<div>
<h3 class="gl-font-lg">{{ __('Installation') }}</h3>
<h4 class="gl-font-base">
{{ s__('PackageRegistry|Conan Command') }}
</h4>
<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>
<h4 class="gl-font-base">
{{ s__('PackageRegistry|Add Conan Remote') }}
</h4>
<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 }">
......
app/assets/javascripts/packages/details/components/maven_installation.vue
View file @ 4f3af541
......@@ -2,8 +2,8 @@
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mapGetters, mapState } from 'vuex';
import { s__ } from '~/locale';
import CodeInstruction from './code_instruction.vue';
import { TrackingActions } from '../constants';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import { TrackingActions, TrackingLabels } from '../constants';
export default {
name: 'MavenInstallation',
......@@ -28,6 +28,7 @@ export default {
),
},
trackingActions: { ...TrackingActions },
TrackingLabels,
};
</script>
......@@ -35,9 +36,6 @@ export default {
<div>
<h3 class="gl-font-lg">{{ __('Installation') }}</h3>
<h4 class="gl-font-base">
{{ s__('PackageRegistry|Maven XML') }}
</h4>
<p>
<gl-sprintf :message="$options.i18n.xmlText">
<template #code="{ content }">
......@@ -45,20 +43,22 @@ export default {
</template>
</gl-sprintf>
</p>
<code-instruction
:label="s__('PackageRegistry|Maven XML')"
:instruction="mavenInstallationXml"
:copy-text="s__('PackageRegistry|Copy Maven XML')"
multiline
:tracking-action="$options.trackingActions.COPY_MAVEN_XML"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<h4 class="gl-font-base">
{{ s__('PackageRegistry|Maven Command') }}
</h4>
<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">{{ __('Registry setup') }}</h3>
......@@ -74,6 +74,7 @@ export default {
:copy-text="s__('PackageRegistry|Copy Maven registry XML')"
multiline
:tracking-action="$options.trackingActions.COPY_MAVEN_SETUP"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
......
app/assets/javascripts/packages/details/components/npm_installation.vue
View file @ 4f3af541
......@@ -2,8 +2,8 @@
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mapGetters, mapState } from 'vuex';
import { s__ } from '~/locale';
import CodeInstruction from './code_instruction.vue';
import { NpmManager, TrackingActions } from '../constants';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import { NpmManager, TrackingActions, TrackingLabels } from '../constants';
export default {
name: 'NpmInstallation',
......@@ -34,41 +34,46 @@ export default {
),
},
trackingActions: { ...TrackingActions },
TrackingLabels,
};
</script>
<template>
<div>
<h3 class="gl-font-lg">{{ __('Installation') }}</h3>
<h4 class="gl-font-base">{{ s__('PackageRegistry|npm command') }}</h4>
<code-instruction
:label="s__('PackageRegistry|npm command')"
:instruction="npmCommand"
:copy-text="s__('PackageRegistry|Copy npm command')"
:tracking-action="$options.trackingActions.COPY_NPM_INSTALL_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<h4 class="gl-font-base">{{ s__('PackageRegistry|yarn command') }}</h4>
<code-instruction
:label="s__('PackageRegistry|yarn command')"
: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>
<h4 class="gl-font-base">{{ s__('PackageRegistry|npm command') }}</h4>
<code-instruction
:label="s__('PackageRegistry|npm command')"
:instruction="npmSetup"
:copy-text="s__('PackageRegistry|Copy npm setup command')"
:tracking-action="$options.trackingActions.COPY_NPM_SETUP_COMMAND"
:tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
/>
<h4 class="gl-font-base">{{ s__('PackageRegistry|yarn command') }}</h4>
<code-instruction
:label="s__('PackageRegistry|yarn command')"
: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">
......
app/assets/javascripts/packages/details/components/nuget_installation.vue
View file @ 4f3af541
......@@ -2,8 +2,8 @@
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mapGetters, mapState } from 'vuex';
import { s__ } from '~/locale';
import CodeInstruction from './code_instruction.vue';
import { TrackingActions } from '../constants';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import { TrackingActions, TrackingLabels } from '../constants';
export default {
name: 'NugetInstallation',
......@@ -22,29 +22,28 @@ export default {
),
},
trackingActions: { ...TrackingActions },
TrackingLabels,
};
</script>
<template>
<div>
<h3 class="gl-font-lg">{{ __('Installation') }}</h3>
<h4 class="gl-font-base">
{{ s__('PackageRegistry|NuGet Command') }}
</h4>
<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>
<h4 class="gl-font-base">
{{ s__('PackageRegistry|Add NuGet Source') }}
</h4>
<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 }">
......
app/assets/javascripts/packages/details/components/pypi_installation.vue
View file @ 4f3af541
......@@ -2,8 +2,8 @@
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mapGetters, mapState } from 'vuex';
import { s__ } from '~/locale';
import CodeInstruction from './code_instruction.vue';
import { TrackingActions } from '../constants';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import { TrackingActions, TrackingLabels } from '../constants';
export default {
name: 'PyPiInstallation',
......@@ -25,6 +25,7 @@ export default {
),
},
trackingActions: { ...TrackingActions },
TrackingLabels,
};
</script>
......@@ -32,15 +33,13 @@ export default {
<div>
<h3 class="gl-font-lg">{{ __('Installation') }}</h3>
<h4 class="gl-font-base">
{{ s__('PackageRegistry|Pip Command') }}
</h4>
<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>
......@@ -58,6 +57,7 @@ export default {
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 }">
......
app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
View file @ 4f3af541
<script>
import { GlDeprecatedDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
import { GlDeprecatedDropdown } from '@gitlab/ui';
import { mapGetters } from 'vuex';
import Tracking from '~/tracking';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import {
QUICK_START,
LOGIN_COMMAND_LABEL,
......@@ -13,22 +13,23 @@ import {
COPY_PUSH_TITLE,
} from '../../constants/index';
const trackingLabel = 'quickstart_dropdown';
export default {
components: {
GlDeprecatedDropdown,
GlFormGroup,
GlFormInputGroup,
ClipboardButton,
CodeInstruction,
},
mixins: [Tracking.mixin({ label: 'quickstart_dropdown' })],
mixins: [Tracking.mixin({ label: trackingLabel })],
trackingLabel,
i18n: {
dropdownTitle: QUICK_START,
loginCommandLabel: LOGIN_COMMAND_LABEL,
copyLoginTitle: COPY_LOGIN_TITLE,
buildCommandLabel: BUILD_COMMAND_LABEL,
copyBuildTitle: COPY_BUILD_TITLE,
pushCommandLabel: PUSH_COMMAND_LABEL,
copyPushTitle: COPY_PUSH_TITLE,
QUICK_START,
LOGIN_COMMAND_LABEL,
COPY_LOGIN_TITLE,
BUILD_COMMAND_LABEL,
COPY_BUILD_TITLE,
PUSH_COMMAND_LABEL,
COPY_PUSH_TITLE,
},
computed: {
...mapGetters(['dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand']),
......@@ -37,7 +38,7 @@ export default {
</script>
<template>
<gl-deprecated-dropdown
:text="$options.i18n.dropdownTitle"
:text="$options.i18n.QUICK_START"
variant="primary"
size="sm"
right
......@@ -45,59 +46,30 @@ export default {
>
<!-- This li is used as a container since gl-dropdown produces a root ul, this mimics the functionality exposed by b-dropdown-form -->
<li role="presentation" class="px-2 py-1 dropdown-menu-large">
<form>
<gl-form-group
label-size="sm"
label-for="docker-login-btn"
:label="$options.i18n.loginCommandLabel"
>
<gl-form-input-group id="docker-login-btn" :value="dockerLoginCommand" readonly>
<template #append>
<clipboard-button
class="border"
:text="dockerLoginCommand"
:title="$options.i18n.copyLoginTitle"
@click.native="track('click_copy_login')"
/>
</template>
</gl-form-input-group>
</gl-form-group>
<code-instruction
:label="$options.i18n.LOGIN_COMMAND_LABEL"
:instruction="dockerLoginCommand"
:copy-text="$options.i18n.COPY_LOGIN_TITLE"
tracking-action="click_copy_login"
:tracking-label="$options.trackingLabel"
/>
<gl-form-group
label-size="sm"
label-for="docker-build-btn"
:label="$options.i18n.buildCommandLabel"
>
<gl-form-input-group id="docker-build-btn" :value="dockerBuildCommand" readonly>
<template #append>
<clipboard-button
class="border"
:text="dockerBuildCommand"
:title="$options.i18n.copyBuildTitle"
@click.native="track('click_copy_build')"
/>
</template>
</gl-form-input-group>
</gl-form-group>
<code-instruction
:label="$options.i18n.BUILD_COMMAND_LABEL"
:instruction="dockerBuildCommand"
:copy-text="$options.i18n.COPY_BUILD_TITLE"
tracking-action="click_copy_build"
:tracking-label="$options.trackingLabel"
/>
<gl-form-group
class="mb-0"
label-size="sm"
label-for="docker-push-btn"
:label="$options.i18n.pushCommandLabel"
>
<gl-form-input-group id="docker-push-btn" :value="dockerPushCommand" readonly>
<template #append>
<clipboard-button
class="border"
:text="dockerPushCommand"
:title="$options.i18n.copyPushTitle"
@click.native="track('click_copy_push')"
/>
</template>
</gl-form-input-group>
</gl-form-group>
</form>
<code-instruction
class="mb-0"
:label="$options.i18n.PUSH_COMMAND_LABEL"
:instruction="dockerPushCommand"
:copy-text="$options.i18n.COPY_PUSH_TITLE"
tracking-action="click_copy_push"
:tracking-label="$options.trackingLabel"
/>
</li>
</gl-deprecated-dropdown>
</template>
app/assets/javascripts/packages/details/components/code_instruction.vue → app/assets/javascripts/vue_shared/components/registry/code_instruction.vue
View file @ 4f3af541
<script>
import { uniqueId } from 'lodash';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import Tracking from '~/tracking';
import { TrackingLabels } from '../constants';
export default {
name: 'CodeInstruction',
components: {
ClipboardButton,
},
mixins: [
Tracking.mixin({
label: TrackingLabels.CODE_INSTRUCTION,
}),
],
mixins: [Tracking.mixin()],
props: {
label: {
type: String,
required: false,
default: '',
},
instruction: {
type: String,
required: true,
......@@ -32,32 +33,50 @@ export default {
required: false,
default: '',
},
trackingLabel: {
type: String,
required: false,
default: '',
},
},
created() {
this.uniqueId = uniqueId();
},
methods: {
trackCopy() {
if (this.trackingAction) {
this.track(this.trackingAction);
this.track(this.trackingAction, { label: this.trackingLabel });
}
},
generateFormId(name) {
return `${name}_${this.uniqueId}`;
},
},
};
</script>
<template>
<div v-if="!multiline" class="input-group gl-mb-3">
<input
:value="instruction"
type="text"
class="form-control gl-font-monospace js-instruction-input"
readonly
@copy="trackCopy"
/>
<span class="input-group-append js-instruction-button" @click="trackCopy">
<clipboard-button :text="instruction" :title="copyText" class="input-group-text" />
</span>
<div v-if="!multiline" class="gl-mb-3">
<label v-if="label" :for="generateFormId('instruction-input')">{{ label }}</label>
<div class="input-group gl-mb-3">
<input
:id="generateFormId('instruction-input')"
:value="instruction"
type="text"
class="form-control gl-font-monospace"
data-testid="instruction-input"
readonly
@copy="trackCopy"
/>
<span class="input-group-append" data-testid="instruction-button" @click="trackCopy">
<clipboard-button :text="instruction" :title="copyText" class="input-group-text" />
</span>
</div>
</div>
<div v-else>
<pre class="js-instruction-pre" @copy="trackCopy">{{ instruction }}</pre>
<pre class="gl-font-monospace" data-testid="multiline-instruction" @copy="trackCopy">{{
instruction
}}</pre>
</div>
</template>
spec/frontend/packages/details/components/__snapshots__/code_instruction_spec.js.snap deleted 100644 → 0
View file @ a4a25c0a
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Package code instruction multiline to match the snapshot 1`] = `
<div>
<pre
class="js-instruction-pre"
>
this is some
multiline text
</pre>
</div>
`;
exports[`Package code instruction single line to match the default snapshot 1`] = `
<div
class="input-group gl-mb-3"
>
<input
class="form-control gl-font-monospace js-instruction-input"
readonly="readonly"
type="text"
/>
<span
class="input-group-append js-instruction-button"
>
<button
class="btn input-group-text btn-secondary btn-md btn-default"
data-clipboard-text="npm i @my-package"
title="Copy npm install command"
type="button"
>
<!---->
<svg
class="gl-icon s16"
data-testid="copy-to-clipboard-icon"
>
<use
href="#copy-to-clipboard"
/>
</svg>
</button>
</span>
</div>
`;
spec/frontend/packages/details/components/__snapshots__/conan_installation_spec.js.snap
View file @ 4f3af541
......@@ -8,18 +8,12 @@ exports[`ConanInstallation renders all the messages 1`] = `
Installation
</h3>
<h4
class="gl-font-base"
>
Conan Command
</h4>
<code-instruction-stub
copytext="Copy Conan Command"
instruction="foo/command"
label="Conan Command"
trackingaction="copy_conan_command"
trackinglabel="code_instruction"
/>
<h3
......@@ -28,18 +22,12 @@ exports[`ConanInstallation renders all the messages 1`] = `
Registry setup
</h3>
<h4
class="gl-font-base"
>
Add Conan Remote
</h4>
<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
......
spec/frontend/packages/details/components/__snapshots__/maven_installation_spec.js.snap
View file @ 4f3af541
......@@ -8,14 +8,6 @@ exports[`MavenInstallation renders all the messages 1`] = `
Installation
</h3>
<h4
class="gl-font-base"
>
Maven XML
</h4>
<p>
<gl-sprintf-stub
message="Copy and paste this inside your %{codeStart}pom.xml%{codeEnd} %{codeStart}dependencies%{codeEnd} block."
......@@ -25,22 +17,18 @@ exports[`MavenInstallation renders all the messages 1`] = `
<code-instruction-stub
copytext="Copy Maven XML"
instruction="foo/xml"
label="Maven XML"
multiline="true"
trackingaction="copy_maven_xml"
trackinglabel="code_instruction"
/>
<h4
class="gl-font-base"
>
Maven Command
</h4>
<code-instruction-stub
copytext="Copy Maven command"
instruction="foo/command"
label="Maven Command"
trackingaction="copy_maven_command"
trackinglabel="code_instruction"
/>
<h3
......@@ -58,8 +46,10 @@ exports[`MavenInstallation renders all the messages 1`] = `
<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
......
spec/frontend/packages/details/components/__snapshots__/npm_installation_spec.js.snap
View file @ 4f3af541
......@@ -8,28 +8,20 @@ exports[`NpmInstallation renders all the messages 1`] = `
Installation
</h3>
<h4
class="gl-font-base"
>
npm command
</h4>
<code-instruction-stub
copytext="Copy npm command"
instruction="npm i @Test/package"
label="npm command"
trackingaction="copy_npm_install_command"
trackinglabel="code_instruction"
/>
<h4
class="gl-font-base"
>
yarn command
</h4>
<code-instruction-stub
copytext="Copy yarn command"
instruction="yarn add @Test/package"
label="yarn command"
trackingaction="copy_yarn_install_command"
trackinglabel="code_instruction"
/>
<h3
......@@ -38,28 +30,20 @@ exports[`NpmInstallation renders all the messages 1`] = `
Registry setup
</h3>
<h4
class="gl-font-base"
>
npm command
</h4>
<code-instruction-stub
copytext="Copy npm setup command"
instruction="echo @Test:registry=undefined >> .npmrc"
label="npm command"
trackingaction="copy_npm_setup_command"
trackinglabel="code_instruction"
/>
<h4
class="gl-font-base"
>
yarn command
</h4>
<code-instruction-stub
copytext="Copy yarn setup command"
instruction="echo \\\\\\"@Test:registry\\\\\\" \\\\\\"undefined\\\\\\" >> .yarnrc"
label="yarn command"
trackingaction="copy_yarn_setup_command"
trackinglabel="code_instruction"
/>
<gl-sprintf-stub
......
spec/frontend/packages/details/components/__snapshots__/nuget_installation_spec.js.snap
View file @ 4f3af541
......@@ -8,18 +8,12 @@ exports[`NugetInstallation renders all the messages 1`] = `
Installation
</h3>
<h4
class="gl-font-base"
>
NuGet Command
</h4>
<code-instruction-stub
copytext="Copy NuGet Command"
instruction="foo/command"
label="NuGet Command"
trackingaction="copy_nuget_install_command"
trackinglabel="code_instruction"
/>
<h3
......@@ -28,18 +22,12 @@ exports[`NugetInstallation renders all the messages 1`] = `
Registry setup
</h3>
<h4
class="gl-font-base"
>
Add NuGet Source
</h4>
<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
......
spec/frontend/packages/details/components/__snapshots__/pypi_installation_spec.js.snap
View file @ 4f3af541
......@@ -8,19 +8,13 @@ exports[`PypiInstallation renders all the messages 1`] = `
Installation
</h3>
<h4
class="gl-font-base"
>
Pip Command
</h4>
<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
......@@ -39,8 +33,10 @@ exports[`PypiInstallation renders all the messages 1`] = `
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
......
spec/frontend/packages/details/components/composer_installation_spec.js
View file @ 4f3af541
......@@ -4,7 +4,7 @@ import { GlSprintf, GlLink } from '@gitlab/ui';
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 CodeInstructions from '~/packages/details/components/code_instruction.vue';
import { TrackingActions } from '~/packages/details/constants';
const localVue = createLocalVue();
......@@ -27,9 +27,8 @@ describe('ComposerInstallation', () => {
},
});
const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
const findRegistryIncludeTitle = () => wrapper.find('[data-testid="registry-include-title"]');
const findPackageIncludeTitle = () => wrapper.find('[data-testid="package-include-title"]');
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);
......@@ -53,7 +52,7 @@ describe('ComposerInstallation', () => {
describe('registry include command', () => {
it('uses code_instructions', () => {
const registryIncludeCommand = findCodeInstructions().at(0);
const registryIncludeCommand = findRegistryInclude();
expect(registryIncludeCommand.exists()).toBe(true);
expect(registryIncludeCommand.props()).toMatchObject({
instruction: composerRegistryIncludeStr,
......@@ -63,13 +62,13 @@ describe('ComposerInstallation', () => {
});
it('has the correct title', () => {
expect(findRegistryIncludeTitle().text()).toBe('composer.json registry include');
expect(findRegistryInclude().props('label')).toBe('composer.json registry include');
});
});
describe('package include command', () => {
it('uses code_instructions', () => {
const registryIncludeCommand = findCodeInstructions().at(1);
const registryIncludeCommand = findPackageInclude();
expect(registryIncludeCommand.exists()).toBe(true);
expect(registryIncludeCommand.props()).toMatchObject({
instruction: composerPackageIncludeStr,
......@@ -79,7 +78,7 @@ describe('ComposerInstallation', () => {
});
it('has the correct title', () => {
expect(findPackageIncludeTitle().text()).toBe('composer.json require package include');
expect(findPackageInclude().props('label')).toBe('composer.json require package include');
});
it('has the correct help text', () => {
......
spec/frontend/packages/details/components/conan_installation_spec.js
View file @ 4f3af541
import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import ConanInstallation from '~/packages/details/components/conan_installation.vue';
import CodeInstructions from '~/packages/details/components/code_instruction.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';
......
spec/frontend/packages/details/components/maven_installation_spec.js
View file @ 4f3af541
......@@ -3,7 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import { registryUrl as mavenPath } from 'jest/packages/details/mock_data';
import { mavenPackage as packageEntity } from 'jest/packages/mock_data';
import MavenInstallation from '~/packages/details/components/maven_installation.vue';
import CodeInstructions from '~/packages/details/components/code_instruction.vue';
import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
import { TrackingActions } from '~/packages/details/constants';
const localVue = createLocalVue();
......
spec/frontend/packages/details/components/npm_installation_spec.js
View file @ 4f3af541
......@@ -3,7 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import { npmPackage as packageEntity } from 'jest/packages/mock_data';
import { registryUrl as nugetPath } from 'jest/packages/details/mock_data';
import NpmInstallation from '~/packages/details/components/npm_installation.vue';
import CodeInstructions from '~/packages/details/components/code_instruction.vue';
import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
import { TrackingActions } from '~/packages/details/constants';
import { npmInstallationCommand, npmSetupCommand } from '~/packages/details/store/getters';
......
spec/frontend/packages/details/components/nuget_installation_spec.js
View file @ 4f3af541
......@@ -3,7 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import { nugetPackage as packageEntity } from 'jest/packages/mock_data';
import { registryUrl as nugetPath } from 'jest/packages/details/mock_data';
import NugetInstallation from '~/packages/details/components/nuget_installation.vue';
import CodeInstructions from '~/packages/details/components/code_instruction.vue';
import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
import { TrackingActions } from '~/packages/details/constants';
const localVue = createLocalVue();
......
spec/frontend/registry/explorer/components/list_page/cli_commands_spec.js
View file @ 4f3af541
import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils';
import { GlDeprecatedDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
import { GlDeprecatedDropdown } from '@gitlab/ui';
import Tracking from '~/tracking';
import * as getters from '~/registry/explorer/stores/getters';
import QuickstartDropdown from '~/registry/explorer/components/list_page/cli_commands.vue';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import {
QUICK_START,
......@@ -24,7 +24,7 @@ describe('cli_commands', () => {
let store;
const findDropdownButton = () => wrapper.find(GlDeprecatedDropdown);
const findFormGroups = () => wrapper.findAll(GlFormGroup);
const findCodeInstruction = () => wrapper.findAll(CodeInstruction);
const mountComponent = () => {
store = new Vuex.Store({
......@@ -67,54 +67,29 @@ describe('cli_commands', () => {
});
describe.each`
index | id | labelText | titleText | getter | trackedEvent
${0} | ${'docker-login-btn'} | ${LOGIN_COMMAND_LABEL} | ${COPY_LOGIN_TITLE} | ${'dockerLoginCommand'} | ${'click_copy_login'}
${1} | ${'docker-build-btn'} | ${BUILD_COMMAND_LABEL} | ${COPY_BUILD_TITLE} | ${'dockerBuildCommand'} | ${'click_copy_build'}
${2} | ${'docker-push-btn'} | ${PUSH_COMMAND_LABEL} | ${COPY_PUSH_TITLE} | ${'dockerPushCommand'} | ${'click_copy_push'}
`('form group at $index', ({ index, id, labelText, titleText, getter, trackedEvent }) => {
let formGroup;
const findFormInputGroup = parent => parent.find(GlFormInputGroup);
const findClipboardButton = parent => parent.find(ClipboardButton);
index | labelText | titleText | getter | trackedEvent
${0} | ${LOGIN_COMMAND_LABEL} | ${COPY_LOGIN_TITLE} | ${'dockerLoginCommand'} | ${'click_copy_login'}
${1} | ${BUILD_COMMAND_LABEL} | ${COPY_BUILD_TITLE} | ${'dockerBuildCommand'} | ${'click_copy_build'}
${2} | ${PUSH_COMMAND_LABEL} | ${COPY_PUSH_TITLE} | ${'dockerPushCommand'} | ${'click_copy_push'}
`('code instructions at $index', ({ index, labelText, titleText, getter, trackedEvent }) => {
let codeInstruction;
beforeEach(() => {
formGroup = findFormGroups().at(index);
codeInstruction = findCodeInstruction().at(index);
});
it('exists', () => {
expect(formGroup.exists()).toBe(true);
});
it(`has a label ${labelText}`, () => {
expect(formGroup.text()).toBe(labelText);
});
it(`contains a form input group with ${id} id and with value equal to ${getter} getter`, () => {
const formInputGroup = findFormInputGroup(formGroup);
expect(formInputGroup.exists()).toBe(true);
expect(formInputGroup.attributes('id')).toBe(id);
expect(formInputGroup.props('value')).toBe(store.getters[getter]);
});
it(`contains a clipboard button with title of ${titleText} and text equal to ${getter} getter`, () => {
const clipBoardButton = findClipboardButton(formGroup);
expect(clipBoardButton.exists()).toBe(true);
expect(clipBoardButton.props('title')).toBe(titleText);
expect(clipBoardButton.props('text')).toBe(store.getters[getter]);
expect(codeInstruction.exists()).toBe(true);
});
it('clipboard button tracks click event', () => {
const clipBoardButton = findClipboardButton(formGroup);
clipBoardButton.trigger('click');
/* This expect to be called with first argument undefined so that
* the function internally can default to document.body.dataset.page
* https://docs.gitlab.com/ee/telemetry/frontend.html#tracking-within-vue-components
*/
expect(Tracking.event).toHaveBeenCalledWith(
undefined,
trackedEvent,
expect.objectContaining({ label: 'quickstart_dropdown' }),
);
it(`has the correct props`, () => {
expect(codeInstruction.props()).toMatchObject({
label: labelText,
instruction: store.getters[getter],
copyText: titleText,
trackingAction: trackedEvent,
trackingLabel: 'quickstart_dropdown',
});
});
});
});
spec/frontend/vue_shared/components/registry/__snapshots__/code_instruction_spec.js.snap 0 → 100644
View file @ 4f3af541
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Package code instruction multiline to match the snapshot 1`] = `
<div>
<pre
class="gl-font-monospace"
data-testid="multiline-instruction"
>
this is some
multiline text
</pre>
</div>
`;
exports[`Package code instruction single line to match the default snapshot 1`] = `
<div
class="gl-mb-3"
>
<label
for="instruction-input_2"
>
foo_label
</label>
<div
class="input-group gl-mb-3"
>
<input
class="form-control gl-font-monospace"
data-testid="instruction-input"
id="instruction-input_2"
readonly="readonly"
type="text"
/>
<span
class="input-group-append"
data-testid="instruction-button"
>
<button
class="btn input-group-text btn-secondary btn-md btn-default"
data-clipboard-text="npm i @my-package"
title="Copy npm install command"
type="button"
>
<!---->
<svg
class="gl-icon s16"
data-testid="copy-to-clipboard-icon"
>
<use
href="#copy-to-clipboard"
/>
</svg>
</button>
</span>
</div>
</div>
`;
spec/frontend/packages/details/components/code_instruction_spec.js → spec/frontend/vue_shared/components/registry/code_instruction_spec.js
View file @ 4f3af541
import { mount } from '@vue/test-utils';
import CodeInstruction from '~/packages/details/components/code_instruction.vue';
import { TrackingLabels } from '~/packages/details/constants';
import Tracking from '~/tracking';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
describe('Package code instruction', () => {
let wrapper;
......@@ -20,16 +20,20 @@ describe('Package code instruction', () => {
});
}
const findInstructionInput = () => wrapper.find('.js-instruction-input');
const findInstructionPre = () => wrapper.find('.js-instruction-pre');
const findInstructionButton = () => wrapper.find('.js-instruction-button');
const findCopyButton = () => wrapper.find(ClipboardButton);
const findInputElement = () => wrapper.find('[data-testid="instruction-input"]');
const findMultilineInstruction = () => wrapper.find('[data-testid="multiline-instruction"]');
afterEach(() => {
wrapper.destroy();
});
describe('single line', () => {
beforeEach(() => createComponent());
beforeEach(() =>
createComponent({
label: 'foo_label',
}),
);
it('to match the default snapshot', () => {
expect(wrapper.element).toMatchSnapshot();
......@@ -41,6 +45,7 @@ describe('Package code instruction', () => {
createComponent({
instruction: 'this is some\nmultiline text',
copyText: 'Copy the command',
label: 'foo_label',
multiline: true,
}),
);
......@@ -53,7 +58,7 @@ describe('Package code instruction', () => {
describe('tracking', () => {
let eventSpy;
const trackingAction = 'test_action';
const label = TrackingLabels.CODE_INSTRUCTION;
const trackingLabel = 'foo_label';
beforeEach(() => {
eventSpy = jest.spyOn(Tracking, 'event');
......@@ -61,7 +66,7 @@ describe('Package code instruction', () => {
it('should not track when no trackingAction is provided', () => {
createComponent();
findInstructionButton().trigger('click');
findCopyButton().trigger('click');
expect(eventSpy).toHaveBeenCalledTimes(0);
});
......@@ -70,22 +75,23 @@ describe('Package code instruction', () => {
beforeEach(() =>
createComponent({
trackingAction,
trackingLabel,
}),
);
it('should track when copying from the input', () => {
findInstructionInput().trigger('copy');
findInputElement().trigger('copy');
expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, {
label,
label: trackingLabel,
});
});
it('should track when the copy button is pressed', () => {
findInstructionButton().trigger('click');
findCopyButton().trigger('click');
expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, {
label,
label: trackingLabel,
});
});
});
......@@ -94,15 +100,16 @@ describe('Package code instruction', () => {
beforeEach(() =>
createComponent({
trackingAction,
trackingLabel,
multiline: true,
}),
);
it('should track when copying from the multiline pre element', () => {
findInstructionPre().trigger('copy');
findMultilineInstruction().trigger('copy');
expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, {
label,
label: trackingLabel,
});
});
});
......
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