Skip to content

G
gitlab-ce
Commit 19aa7cb7 authored by Denys Mishunov's avatar Denys Mishunov
Browse files
Options

Merge branch '201730-refactor-package-details-installation-tabs' into 'master' 

Refactor package details installation tabs

See merge request gitlab-org/gitlab!29946
parents 4d41259a bb546f6c
Hide whitespace changes
Inline Side-by-side
Showing with 291 additions and 364 deletions
ee/app/assets/javascripts/packages/details/components/conan_installation.vue
View file @ 19aa7cb7
<script> <script>
import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui'; import { GlLink, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import CodeInstruction from './code_instruction.vue'; import CodeInstruction from './code_instruction.vue';
import Tracking from '~/tracking';
import { TrackingActions, TrackingLabels } from '../constants'; import { TrackingActions, TrackingLabels } from '../constants';
import { trackInstallationTabChange } from '../utils';
import { mapGetters, mapState } from 'vuex'; import { mapGetters, mapState } from 'vuex';
import InstallationTabs from './installation_tabs.vue';
export default { export default {
name: 'ConanInstallation', name: 'ConanInstallation',
...@@ -13,15 +12,8 @@ export default { ...@@ -13,15 +12,8 @@ export default {
CodeInstruction, CodeInstruction,
GlLink, GlLink,
GlSprintf, GlSprintf,
GlTab, InstallationTabs,
GlTabs,
}, },
mixins: [
Tracking.mixin({
label: TrackingLabels.CONAN_INSTALLATION,
}),
trackInstallationTabChange,
],
computed: { computed: {
...mapState(['conanHelpPath']), ...mapState(['conanHelpPath']),
...mapGetters(['conanInstallationCommand', 'conanSetupCommand']), ...mapGetters(['conanInstallationCommand', 'conanSetupCommand']),
...@@ -32,41 +24,37 @@ export default { ...@@ -32,41 +24,37 @@ export default {
), ),
}, },
trackingActions: { ...TrackingActions }, trackingActions: { ...TrackingActions },
trackingLabel: TrackingLabels.CONAN_INSTALLATION,
}; };
</script> </script>
<template> <template>
<div class="append-bottom-default"> <installation-tabs :tracking-label="$options.trackingLabel">
<gl-tabs @input="trackInstallationTabChange"> <template #installation>
<gl-tab :title="s__('PackageRegistry|Installation')" title-item-class="js-installation-tab"> <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Conan Command') }}</p>
<div class="prepend-left-default append-right-default"> <code-instruction
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Conan Command') }}</p> :instruction="conanInstallationCommand"
<code-instruction :copy-text="s__('PackageRegistry|Copy Conan Command')"
:instruction="conanInstallationCommand" class="js-conan-command"
:copy-text="s__('PackageRegistry|Copy Conan Command')" :tracking-action="$options.trackingActions.COPY_CONAN_COMMAND"
class="js-conan-command" />
:tracking-action="$options.trackingActions.COPY_CONAN_COMMAND" </template>
/>
</div> <template #setup>
</gl-tab> <p class="prepend-top-8 font-weight-bold">
<gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab"> {{ s__('PackageRegistry|Add Conan Remote') }}
<div class="prepend-left-default append-right-default"> </p>
<p class="prepend-top-8 font-weight-bold"> <code-instruction
{{ s__('PackageRegistry|Add Conan Remote') }} :instruction="conanSetupCommand"
</p> :copy-text="s__('PackageRegistry|Copy Conan Setup Command')"
<code-instruction class="js-conan-setup"
:instruction="conanSetupCommand" :tracking-action="$options.trackingActions.COPY_CONAN_SETUP_COMMAND"
:copy-text="s__('PackageRegistry|Copy Conan Setup Command')" />
class="js-conan-setup" <gl-sprintf :message="$options.i18n.helpText">
:tracking-action="$options.trackingActions.COPY_CONAN_SETUP_COMMAND" <template #link="{ content }">
/> <gl-link :href="conanHelpPath" target="_blank">{{ content }}</gl-link>
<gl-sprintf :message="$options.i18n.helpText"> </template>
<template #link="{ content }"> </gl-sprintf>
<gl-link :href="conanHelpPath" target="_blank">{{ content }}</gl-link> </template>
</template> </installation-tabs>
</gl-sprintf>
</div>
</gl-tab>
</gl-tabs>
</div>
</template> </template>
ee/app/assets/javascripts/packages/details/components/installation_tabs.vue 0 → 100644
View file @ 19aa7cb7
<script>
import Tracking from '~/tracking';
import { trackInstallationTabChange } from '../utils';
import { GlTab, GlTabs } from '@gitlab/ui';
export default {
name: 'TabWrapper',
components: {
GlTab,
GlTabs,
},
mixins: [Tracking.mixin(), trackInstallationTabChange],
props: {
trackingLabel: {
type: String,
required: true,
},
},
};
</script>
<template>
<div class="append-bottom-default">
<gl-tabs @input="trackInstallationTabChange">
<gl-tab :title="s__('PackageRegistry|Installation')" title-item-class="js-installation-tab">
<div class="prepend-left-default append-right-default">
<slot name="installation"></slot>
</div>
</gl-tab>
<gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
<div class="prepend-left-default append-right-default">
<slot name="setup"></slot>
</div>
</gl-tab>
</gl-tabs>
</div>
</template>
ee/app/assets/javascripts/packages/details/components/maven_installation.vue
View file @ 19aa7cb7
<script> <script>
import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui'; import { GlLink, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import CodeInstruction from './code_instruction.vue'; import CodeInstruction from './code_instruction.vue';
import Tracking from '~/tracking';
import { TrackingActions, TrackingLabels } from '../constants'; import { TrackingActions, TrackingLabels } from '../constants';
import { trackInstallationTabChange } from '../utils';
import { mapGetters, mapState } from 'vuex'; import { mapGetters, mapState } from 'vuex';
import InstallationTabs from './installation_tabs.vue';
export default { export default {
name: 'MavenInstallation', name: 'MavenInstallation',
...@@ -13,15 +12,8 @@ export default { ...@@ -13,15 +12,8 @@ export default {
CodeInstruction, CodeInstruction,
GlLink, GlLink,
GlSprintf, GlSprintf,
GlTab, InstallationTabs,
GlTabs,
}, },
mixins: [
Tracking.mixin({
label: TrackingLabels.MAVEN_INSTALLATION,
}),
trackInstallationTabChange,
],
computed: { computed: {
...mapState(['mavenHelpPath']), ...mapState(['mavenHelpPath']),
...mapGetters(['mavenInstallationXml', 'mavenInstallationCommand', 'mavenSetupXml']), ...mapGetters(['mavenInstallationXml', 'mavenInstallationCommand', 'mavenSetupXml']),
...@@ -38,64 +30,60 @@ export default { ...@@ -38,64 +30,60 @@ export default {
), ),
}, },
trackingActions: { ...TrackingActions }, trackingActions: { ...TrackingActions },
trackingLabel: TrackingLabels.MAVEN_INSTALLATION,
}; };
</script> </script>
<template> <template>
<div class="append-bottom-default"> <installation-tabs :tracking-label="$options.trackingLabel">
<gl-tabs @input="trackInstallationTabChange"> <template #installation>
<gl-tab :title="s__('PackageRegistry|Installation')" title-item-class="js-installation-tab"> <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Maven XML') }}</p>
<div class="prepend-left-default append-right-default"> <p>
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Maven XML') }}</p> <gl-sprintf :message="$options.i18n.xmlText">
<p> <template #code="{ content }">
<gl-sprintf :message="$options.i18n.xmlText"> <code>{{ content }}</code>
<template #code="{ content }"> </template>
<code>{{ content }}</code> </gl-sprintf>
</template> </p>
</gl-sprintf> <code-instruction
</p> :instruction="mavenInstallationXml"
<code-instruction :copy-text="s__('PackageRegistry|Copy Maven XML')"
:instruction="mavenInstallationXml" class="js-maven-xml"
:copy-text="s__('PackageRegistry|Copy Maven XML')" multiline
class="js-maven-xml" :tracking-action="$options.trackingActions.COPY_MAVEN_XML"
multiline />
:tracking-action="$options.trackingActions.COPY_MAVEN_XML"
/>
<p class="prepend-top-default font-weight-bold"> <p class="prepend-top-default font-weight-bold">
{{ s__('PackageRegistry|Maven Command') }} {{ s__('PackageRegistry|Maven Command') }}
</p> </p>
<code-instruction <code-instruction
:instruction="mavenInstallationCommand" :instruction="mavenInstallationCommand"
:copy-text="s__('PackageRegistry|Copy Maven command')" :copy-text="s__('PackageRegistry|Copy Maven command')"
class="js-maven-command" class="js-maven-command"
:tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND" :tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND"
/> />
</div> </template>
</gl-tab>
<gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab"> <template #setup>
<div class="prepend-left-default append-right-default"> <p>
<p> <gl-sprintf :message="$options.i18n.setupText">
<gl-sprintf :message="$options.i18n.setupText"> <template #code="{ content }">
<template #code="{ content }"> <code>{{ content }}</code>
<code>{{ content }}</code> </template>
</template> </gl-sprintf>
</gl-sprintf> </p>
</p> <code-instruction
<code-instruction :instruction="mavenSetupXml"
:instruction="mavenSetupXml" :copy-text="s__('PackageRegistry|Copy Maven registry XML')"
:copy-text="s__('PackageRegistry|Copy Maven registry XML')" class="js-maven-setup-xml"
class="js-maven-setup-xml" multiline
multiline :tracking-action="$options.trackingActions.COPY_MAVEN_SETUP"
:tracking-action="$options.trackingActions.COPY_MAVEN_SETUP" />
/> <gl-sprintf :message="$options.i18n.helpText">
<gl-sprintf :message="$options.i18n.helpText"> <template #link="{ content }">
<template #link="{ content }"> <gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link>
<gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link> </template>
</template> </gl-sprintf>
</gl-sprintf> </template>
</div> </installation-tabs>
</gl-tab>
</gl-tabs>
</div>
</template> </template>
ee/app/assets/javascripts/packages/details/components/npm_installation.vue
View file @ 19aa7cb7
<script> <script>
import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui'; import { GlLink, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import CodeInstruction from './code_instruction.vue'; import CodeInstruction from './code_instruction.vue';
import Tracking from '~/tracking';
import { NpmManager, TrackingActions, TrackingLabels } from '../constants'; import { NpmManager, TrackingActions, TrackingLabels } from '../constants';
import { trackInstallationTabChange } from '../utils';
import { mapGetters, mapState } from 'vuex'; import { mapGetters, mapState } from 'vuex';
import InstallationTabs from './installation_tabs.vue';
export default { export default {
name: 'NpmInstallation', name: 'NpmInstallation',
...@@ -13,15 +12,8 @@ export default { ...@@ -13,15 +12,8 @@ export default {
CodeInstruction, CodeInstruction,
GlLink, GlLink,
GlSprintf, GlSprintf,
GlTab, InstallationTabs,
GlTabs,
}, },
mixins: [
Tracking.mixin({
label: TrackingLabels.NPM_INSTALLATION,
}),
trackInstallationTabChange,
],
computed: { computed: {
...mapState(['npmHelpPath']), ...mapState(['npmHelpPath']),
...mapGetters(['npmInstallationCommand', 'npmSetupCommand']), ...mapGetters(['npmInstallationCommand', 'npmSetupCommand']),
...@@ -44,56 +36,52 @@ export default { ...@@ -44,56 +36,52 @@ export default {
), ),
}, },
trackingActions: { ...TrackingActions }, trackingActions: { ...TrackingActions },
trackingLabel: TrackingLabels.NPM_INSTALLATION,
}; };
</script> </script>
<template> <template>
<div class="append-bottom-default"> <installation-tabs :tracking-label="$options.trackingLabel">
<gl-tabs @input="trackInstallationTabChange"> <template #installation>
<gl-tab :title="s__('PackageRegistry|Installation')" title-item-class="js-installation-tab"> <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
<div class="prepend-left-default append-right-default"> <code-instruction
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p> :instruction="npmCommand"
<code-instruction :copy-text="s__('PackageRegistry|Copy npm command')"
:instruction="npmCommand" class="js-npm-install"
:copy-text="s__('PackageRegistry|Copy npm command')" :tracking-action="$options.trackingActions.COPY_NPM_INSTALL_COMMAND"
class="js-npm-install" />
:tracking-action="$options.trackingActions.COPY_NPM_INSTALL_COMMAND"
/>
<p class="prepend-top-default font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p> <p class="prepend-top-default font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p>
<code-instruction <code-instruction
:instruction="yarnCommand" :instruction="yarnCommand"
:copy-text="s__('PackageRegistry|Copy yarn command')" :copy-text="s__('PackageRegistry|Copy yarn command')"
class="js-yarn-install" class="js-yarn-install"
:tracking-action="$options.trackingActions.COPY_YARN_INSTALL_COMMAND" :tracking-action="$options.trackingActions.COPY_YARN_INSTALL_COMMAND"
/> />
</div> </template>
</gl-tab>
<gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
<div class="prepend-left-default append-right-default">
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
<code-instruction
:instruction="npmSetup"
:copy-text="s__('PackageRegistry|Copy npm setup command')"
class="js-npm-setup"
:tracking-action="$options.trackingActions.COPY_NPM_SETUP_COMMAND"
/>
<p class="prepend-top-default font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p> <template #setup>
<code-instruction <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
:instruction="yarnSetupCommand" <code-instruction
:copy-text="s__('PackageRegistry|Copy yarn setup command')" :instruction="npmSetup"
class="js-yarn-setup" :copy-text="s__('PackageRegistry|Copy npm setup command')"
:tracking-action="$options.trackingActions.COPY_YARN_SETUP_COMMAND" class="js-npm-setup"
/> :tracking-action="$options.trackingActions.COPY_NPM_SETUP_COMMAND"
/>
<gl-sprintf :message="$options.i18n.helpText"> <p class="prepend-top-default font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p>
<template #link="{ content }"> <code-instruction
<gl-link :href="npmHelpPath" target="_blank">{{ content }}</gl-link> :instruction="yarnSetupCommand"
</template> :copy-text="s__('PackageRegistry|Copy yarn setup command')"
</gl-sprintf> class="js-yarn-setup"
</div> :tracking-action="$options.trackingActions.COPY_YARN_SETUP_COMMAND"
</gl-tab> />
</gl-tabs>
</div> <gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="npmHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</template>
</installation-tabs>
</template> </template>
ee/app/assets/javascripts/packages/details/components/nuget_installation.vue
View file @ 19aa7cb7
<script> <script>
import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui'; import { GlLink, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import CodeInstruction from './code_instruction.vue'; import CodeInstruction from './code_instruction.vue';
import Tracking from '~/tracking';
import { TrackingActions, TrackingLabels } from '../constants'; import { TrackingActions, TrackingLabels } from '../constants';
import { trackInstallationTabChange } from '../utils';
import { mapGetters, mapState } from 'vuex'; import { mapGetters, mapState } from 'vuex';
import InstallationTabs from './installation_tabs.vue';
export default { export default {
name: 'NugetInstallation', name: 'NugetInstallation',
...@@ -13,15 +12,8 @@ export default { ...@@ -13,15 +12,8 @@ export default {
CodeInstruction, CodeInstruction,
GlLink, GlLink,
GlSprintf, GlSprintf,
GlTab, InstallationTabs,
GlTabs,
}, },
mixins: [
Tracking.mixin({
label: TrackingLabels.NUGET_INSTALLATION,
}),
trackInstallationTabChange,
],
computed: { computed: {
...mapState(['nugetHelpPath']), ...mapState(['nugetHelpPath']),
...mapGetters(['nugetInstallationCommand', 'nugetSetupCommand']), ...mapGetters(['nugetInstallationCommand', 'nugetSetupCommand']),
...@@ -32,41 +24,37 @@ export default { ...@@ -32,41 +24,37 @@ export default {
), ),
}, },
trackingActions: { ...TrackingActions }, trackingActions: { ...TrackingActions },
trackingLabel: TrackingLabels.NUGET_INSTALLATION,
}; };
</script> </script>
<template> <template>
<div class="append-bottom-default"> <installation-tabs :tracking-label="$options.trackingLabel">
<gl-tabs @input="trackInstallationTabChange"> <template #installation>
<gl-tab :title="s__('PackageRegistry|Installation')" title-item-class="js-installation-tab"> <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|NuGet Command') }}</p>
<div class="prepend-left-default append-right-default"> <code-instruction
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|NuGet Command') }}</p> :instruction="nugetInstallationCommand"
<code-instruction :copy-text="s__('PackageRegistry|Copy NuGet Command')"
:instruction="nugetInstallationCommand" class="js-nuget-command"
:copy-text="s__('PackageRegistry|Copy NuGet Command')" :tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND"
class="js-nuget-command" />
:tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND" </template>
/>
</div> <template #setup>
</gl-tab> <p class="prepend-top-8 font-weight-bold">
<gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab"> {{ s__('PackageRegistry|Add NuGet Source') }}
<div class="prepend-left-default append-right-default"> </p>
<p class="prepend-top-8 font-weight-bold"> <code-instruction
{{ s__('PackageRegistry|Add NuGet Source') }} :instruction="nugetSetupCommand"
</p> :copy-text="s__('PackageRegistry|Copy NuGet Setup Command')"
<code-instruction class="js-nuget-setup"
:instruction="nugetSetupCommand" :tracking-action="$options.trackingActions.COPY_NUGET_SETUP_COMMAND"
:copy-text="s__('PackageRegistry|Copy NuGet Setup Command')" />
class="js-nuget-setup" <gl-sprintf :message="$options.i18n.helpText">
:tracking-action="$options.trackingActions.COPY_NUGET_SETUP_COMMAND" <template #link="{ content }">
/> <gl-link :href="nugetHelpPath" target="_blank">{{ content }}</gl-link>
<gl-sprintf :message="$options.i18n.helpText"> </template>
<template #link="{ content }"> </gl-sprintf>
<gl-link :href="nugetHelpPath" target="_blank">{{ content }}</gl-link> </template>
</template> </installation-tabs>
</gl-sprintf>
</div>
</gl-tab>
</gl-tabs>
</div>
</template> </template>
ee/app/assets/javascripts/packages/details/utils.js
View file @ 19aa7cb7
...@@ -7,7 +7,7 @@ export const trackInstallationTabChange = { ...@@ -7,7 +7,7 @@ export const trackInstallationTabChange = {
methods: { methods: {
trackInstallationTabChange(tabIndex) { trackInstallationTabChange(tabIndex) {
const action = tabIndex === 0 ? TrackingActions.INSTALLATION : TrackingActions.REGISTRY_SETUP; const action = tabIndex === 0 ? TrackingActions.INSTALLATION : TrackingActions.REGISTRY_SETUP;
this.track(action); this.track(action, { label: this.trackingLabel });
}, },
}, },
}; };
......
ee/spec/frontend/packages/details/components/conan_installation_spec.js
View file @ 19aa7cb7
...@@ -3,8 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils'; ...@@ -3,8 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
import ConanInstallation from 'ee/packages/details/components/conan_installation.vue'; import ConanInstallation from 'ee/packages/details/components/conan_installation.vue';
import { conanPackage as packageEntity } from '../../mock_data'; import { conanPackage as packageEntity } from '../../mock_data';
import { registryUrl as conanPath } from '../mock_data'; import { registryUrl as conanPath } from '../mock_data';
import { TrackingActions, TrackingLabels } from 'ee/packages/details/constants'; import { GlTabs } from '@gitlab/ui';
import Tracking from '~/tracking';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -26,8 +25,7 @@ describe('ConanInstallation', () => { ...@@ -26,8 +25,7 @@ describe('ConanInstallation', () => {
}, },
}); });
const installationTab = () => wrapper.find('.js-installation-tab > a'); const findTabs = () => wrapper.find(GlTabs);
const setupTab = () => wrapper.find('.js-setup-tab > a');
const conanInstallationCommand = () => wrapper.find('.js-conan-command > input'); const conanInstallationCommand = () => wrapper.find('.js-conan-command > input');
const conanSetupCommand = () => wrapper.find('.js-conan-setup > input'); const conanSetupCommand = () => wrapper.find('.js-conan-setup > input');
...@@ -46,6 +44,12 @@ describe('ConanInstallation', () => { ...@@ -46,6 +44,12 @@ describe('ConanInstallation', () => {
if (wrapper) wrapper.destroy(); if (wrapper) wrapper.destroy();
}); });
describe('it renders', () => {
it('with GlTabs', () => {
expect(findTabs().exists()).toBe(true);
});
});
describe('installation commands', () => { describe('installation commands', () => {
it('renders the correct command', () => { it('renders the correct command', () => {
expect(conanInstallationCommand().element.value).toBe(conanInstallationCommandStr); expect(conanInstallationCommand().element.value).toBe(conanInstallationCommandStr);
...@@ -57,38 +61,4 @@ describe('ConanInstallation', () => { ...@@ -57,38 +61,4 @@ describe('ConanInstallation', () => {
expect(conanSetupCommand().element.value).toBe(conanSetupCommandStr); expect(conanSetupCommand().element.value).toBe(conanSetupCommandStr);
}); });
}); });
describe('tab change tracking', () => {
let eventSpy;
const label = TrackingLabels.CONAN_INSTALLATION;
beforeEach(() => {
eventSpy = jest.spyOn(Tracking, 'event');
});
it('should track when the setup tab is clicked', () => {
setupTab().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.REGISTRY_SETUP, {
label,
});
});
});
it('should track when the installation tab is clicked', () => {
setupTab().trigger('click');
return wrapper.vm
.$nextTick()
.then(() => {
installationTab().trigger('click');
})
.then(() => {
expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.INSTALLATION, {
label,
});
});
});
});
}); });
ee/spec/frontend/packages/details/components/installation_tabs_spec.js 0 → 100644
View file @ 19aa7cb7
import { mount } from '@vue/test-utils';
import InstallationTabs from 'ee/packages/details/components/installation_tabs.vue';
import Tracking from '~/tracking';
import { TrackingActions } from 'ee/packages/details/constants';
describe('InstallationTabs', () => {
let wrapper;
let eventSpy;
const trackingLabel = 'foo';
function createComponent() {
wrapper = mount(InstallationTabs, {
propsData: {
trackingLabel,
},
});
}
const installationTab = () => wrapper.find('.js-installation-tab > a');
const setupTab = () => wrapper.find('.js-setup-tab > a');
beforeEach(() => {
eventSpy = jest.spyOn(Tracking, 'event');
createComponent();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('tab change tracking', () => {
it('should track when the setup tab is clicked', () => {
setupTab().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.REGISTRY_SETUP, {
label: trackingLabel,
});
});
});
it('should track when the installation tab is clicked', () => {
setupTab().trigger('click');
return wrapper.vm
.$nextTick()
.then(() => {
installationTab().trigger('click');
})
.then(() => {
expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.INSTALLATION, {
label: trackingLabel,
});
});
});
});
});
ee/spec/frontend/packages/details/components/maven_installation_spec.js
View file @ 19aa7cb7
import Vuex from 'vuex'; import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils'; import { mount, createLocalVue } from '@vue/test-utils';
import MavenInstallation from 'ee/packages/details/components/maven_installation.vue'; import MavenInstallation from 'ee/packages/details/components/maven_installation.vue';
import { TrackingActions, TrackingLabels } from 'ee/packages/details/constants';
import { registryUrl as mavenPath } from '../mock_data'; import { registryUrl as mavenPath } from '../mock_data';
import { mavenPackage as packageEntity } from '../../mock_data'; import { mavenPackage as packageEntity } from '../../mock_data';
import Tracking from '~/tracking'; import { GlTabs } from '@gitlab/ui';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -28,8 +27,7 @@ describe('MavenInstallation', () => { ...@@ -28,8 +27,7 @@ describe('MavenInstallation', () => {
}, },
}); });
const installationTab = () => wrapper.find('.js-installation-tab > a'); const findTabs = () => wrapper.find(GlTabs);
const setupTab = () => wrapper.find('.js-setup-tab > a');
const xmlCode = () => wrapper.find('.js-maven-xml > pre'); const xmlCode = () => wrapper.find('.js-maven-xml > pre');
const mavenCommand = () => wrapper.find('.js-maven-command > input'); const mavenCommand = () => wrapper.find('.js-maven-command > input');
const xmlSetup = () => wrapper.find('.js-maven-setup-xml > pre'); const xmlSetup = () => wrapper.find('.js-maven-setup-xml > pre');
...@@ -49,6 +47,12 @@ describe('MavenInstallation', () => { ...@@ -49,6 +47,12 @@ describe('MavenInstallation', () => {
if (wrapper) wrapper.destroy(); if (wrapper) wrapper.destroy();
}); });
describe('it renders', () => {
it('with GlTabs', () => {
expect(findTabs().exists()).toBe(true);
});
});
describe('installation commands', () => { describe('installation commands', () => {
it('renders the correct xml block', () => { it('renders the correct xml block', () => {
expect(xmlCode().text()).toBe(xmlCodeBlock); expect(xmlCode().text()).toBe(xmlCodeBlock);
...@@ -64,37 +68,4 @@ describe('MavenInstallation', () => { ...@@ -64,37 +68,4 @@ describe('MavenInstallation', () => {
expect(xmlSetup().text()).toBe(mavenSetupXml); expect(xmlSetup().text()).toBe(mavenSetupXml);
}); });
}); });
describe('tab change tracking', () => {
let eventSpy;
const label = TrackingLabels.MAVEN_INSTALLATION;
beforeEach(() => {
eventSpy = jest.spyOn(Tracking, 'event');
});
it('should track when the setup tab is clicked', () => {
setupTab().trigger('click');
return wrapper.vm.$nextTick(() => {
expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.REGISTRY_SETUP, {
label,
});
});
});
it('should track when the installation tab is clicked', () => {
setupTab().trigger('click');
return wrapper.vm
.$nextTick()
.then(() => {
installationTab().trigger('click');
})
.then(() => {
expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.INSTALLATION, {
label,
});
});
});
});
}); });
ee/spec/frontend/packages/details/components/npm_installation_spec.js
View file @ 19aa7cb7
import Vuex from 'vuex'; import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils'; import { mount, createLocalVue } from '@vue/test-utils';
import NpmInstallation from 'ee/packages/details/components/npm_installation.vue'; import NpmInstallation from 'ee/packages/details/components/npm_installation.vue';
import { TrackingActions, TrackingLabels } from 'ee/packages/details/constants';
import { npmPackage as packageEntity } from '../../mock_data'; import { npmPackage as packageEntity } from '../../mock_data';
import { registryUrl as nugetPath } from '../mock_data'; import { registryUrl as nugetPath } from '../mock_data';
import Tracking from '~/tracking'; import { GlTabs } from '@gitlab/ui';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -17,8 +16,7 @@ describe('NpmInstallation', () => { ...@@ -17,8 +16,7 @@ describe('NpmInstallation', () => {
const yarnCommandStr = 'npm install'; const yarnCommandStr = 'npm install';
const yarnSetupStr = 'npm setup'; const yarnSetupStr = 'npm setup';
const installationTab = () => wrapper.find('.js-installation-tab > a'); const findTabs = () => wrapper.find(GlTabs);
const setupTab = () => wrapper.find('.js-setup-tab > a');
const npmInstallationCommand = () => wrapper.find('.js-npm-install > input'); const npmInstallationCommand = () => wrapper.find('.js-npm-install > input');
const npmSetupCommand = () => wrapper.find('.js-npm-setup > input'); const npmSetupCommand = () => wrapper.find('.js-npm-setup > input');
const yarnInstallationCommand = () => wrapper.find('.js-yarn-install > input'); const yarnInstallationCommand = () => wrapper.find('.js-yarn-install > input');
...@@ -50,6 +48,12 @@ describe('NpmInstallation', () => { ...@@ -50,6 +48,12 @@ describe('NpmInstallation', () => {
if (wrapper) wrapper.destroy(); if (wrapper) wrapper.destroy();
}); });
describe('it renders', () => {
it('with GlTabs', () => {
expect(findTabs().exists()).toBe(true);
});
});
describe('npm commands', () => { describe('npm commands', () => {
it('renders the correct install command', () => { it('renders the correct install command', () => {
expect(npmInstallationCommand().element.value).toBe(npmCommandStr); expect(npmInstallationCommand().element.value).toBe(npmCommandStr);
...@@ -73,39 +77,4 @@ describe('NpmInstallation', () => { ...@@ -73,39 +77,4 @@ describe('NpmInstallation', () => {
expect(yarnSetupCommand().element.value).toBe(yarnSetupStr); expect(yarnSetupCommand().element.value).toBe(yarnSetupStr);
}); });
}); });
describe('tab change tracking', () => {
let eventSpy;
const label = TrackingLabels.NPM_INSTALLATION;
beforeEach(() => {
eventSpy = jest.spyOn(Tracking, 'event');
createComponent();
});
it('should track when the setup tab is clicked', () => {
setupTab().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.REGISTRY_SETUP, {
label,
});
});
});
it('should track when the installation tab is clicked', () => {
setupTab().trigger('click');
return wrapper.vm
.$nextTick()
.then(() => {
installationTab().trigger('click');
})
.then(() => {
expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.INSTALLATION, {
label,
});
});
});
});
}); });
ee/spec/frontend/packages/details/components/nuget_installation_spec.js
View file @ 19aa7cb7
...@@ -3,8 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils'; ...@@ -3,8 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
import NugetInstallation from 'ee/packages/details/components/nuget_installation.vue'; import NugetInstallation from 'ee/packages/details/components/nuget_installation.vue';
import { nugetPackage as packageEntity } from '../../mock_data'; import { nugetPackage as packageEntity } from '../../mock_data';
import { registryUrl as nugetPath } from '../mock_data'; import { registryUrl as nugetPath } from '../mock_data';
import { TrackingActions, TrackingLabels } from 'ee/packages/details/constants'; import { GlTabs } from '@gitlab/ui';
import Tracking from '~/tracking';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -26,8 +25,7 @@ describe('NugetInstallation', () => { ...@@ -26,8 +25,7 @@ describe('NugetInstallation', () => {
}, },
}); });
const installationTab = () => wrapper.find('.js-installation-tab > a'); const findTabs = () => wrapper.find(GlTabs);
const setupTab = () => wrapper.find('.js-setup-tab > a');
const nugetInstallationCommand = () => wrapper.find('.js-nuget-command > input'); const nugetInstallationCommand = () => wrapper.find('.js-nuget-command > input');
const nugetSetupCommand = () => wrapper.find('.js-nuget-setup > input'); const nugetSetupCommand = () => wrapper.find('.js-nuget-setup > input');
...@@ -46,6 +44,12 @@ describe('NugetInstallation', () => { ...@@ -46,6 +44,12 @@ describe('NugetInstallation', () => {
if (wrapper) wrapper.destroy(); if (wrapper) wrapper.destroy();
}); });
describe('it renders', () => {
it('with GlTabs', () => {
expect(findTabs().exists()).toBe(true);
});
});
describe('installation commands', () => { describe('installation commands', () => {
it('renders the correct command', () => { it('renders the correct command', () => {
expect(nugetInstallationCommand().element.value).toBe(nugetInstallationCommandStr); expect(nugetInstallationCommand().element.value).toBe(nugetInstallationCommandStr);
...@@ -57,39 +61,4 @@ describe('NugetInstallation', () => { ...@@ -57,39 +61,4 @@ describe('NugetInstallation', () => {
expect(nugetSetupCommand().element.value).toBe(nugetSetupCommandStr); expect(nugetSetupCommand().element.value).toBe(nugetSetupCommandStr);
}); });
}); });
describe('tab change tracking', () => {
let eventSpy;
const label = TrackingLabels.NUGET_INSTALLATION;
beforeEach(() => {
eventSpy = jest.spyOn(Tracking, 'event');
});
it('should track when the setup tab is clicked', () => {
setupTab().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.REGISTRY_SETUP, {
label,
});
});
});
it('should track when the installation tab is clicked', () => {
setupTab().trigger('click');
return wrapper.vm
.$nextTick()
.then(() => {
installationTab().trigger('click');
return wrapper.vm.$nextTick();
})
.then(() => {
expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.INSTALLATION, {
label,
});
});
});
});
}); });
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