Skip to content

G
gitlab-ce
Commit 8a4be777 authored by Nick Kipling's avatar Nick Kipling
Browse files
Options

Refactor installation components 

Created new InstallationTabs component
Removed GlTabs and replaced with new component
Updated tab change tracking
Updated tests
parent 94852ee7
Hide whitespace changes
Inline Side-by-side
Showing with 272 additions and 356 deletions
ee/app/assets/javascripts/packages/details/components/conan_installation.vue
View file @ 8a4be777
<script>
import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui';
import { GlLink, GlSprintf } 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';
import InstallationTabs from './installation_tabs.vue';
export default {
name: 'ConanInstallation',
......@@ -13,15 +14,9 @@ export default {
CodeInstruction,
GlLink,
GlSprintf,
GlTab,
GlTabs,
InstallationTabs,
},
mixins: [
Tracking.mixin({
label: TrackingLabels.CONAN_INSTALLATION,
}),
trackInstallationTabChange,
],
mixins: [Tracking.mixin(), trackInstallationTabChange],
computed: {
...mapState(['conanHelpPath']),
...mapGetters(['conanInstallationCommand', 'conanSetupCommand']),
......@@ -32,41 +27,41 @@ export default {
),
},
trackingActions: { ...TrackingActions },
trackingLabel: TrackingLabels.CONAN_INSTALLATION,
};
</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">
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Conan Command') }}</p>
<code-instruction
:instruction="conanInstallationCommand"
:copy-text="s__('PackageRegistry|Copy Conan Command')"
class="js-conan-command"
:tracking-action="$options.trackingActions.COPY_CONAN_COMMAND"
/>
</div>
</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|Add Conan Remote') }}
</p>
<code-instruction
:instruction="conanSetupCommand"
:copy-text="s__('PackageRegistry|Copy Conan Setup Command')"
class="js-conan-setup"
:tracking-action="$options.trackingActions.COPY_CONAN_SETUP_COMMAND"
/>
<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>
</div>
<installation-tabs :tracking-label="$options.trackingLabel">
<template #installation>
<div class="prepend-left-default append-right-default">
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Conan Command') }}</p>
<code-instruction
:instruction="conanInstallationCommand"
:copy-text="s__('PackageRegistry|Copy Conan Command')"
class="js-conan-command"
:tracking-action="$options.trackingActions.COPY_CONAN_COMMAND"
/>
</div>
</template>
<template #setup>
<div class="prepend-left-default append-right-default">
<p class="prepend-top-8 font-weight-bold">
{{ s__('PackageRegistry|Add Conan Remote') }}
</p>
<code-instruction
:instruction="conanSetupCommand"
:copy-text="s__('PackageRegistry|Copy Conan Setup Command')"
class="js-conan-setup"
:tracking-action="$options.trackingActions.COPY_CONAN_SETUP_COMMAND"
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="conanHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</template>
</installation-tabs>
</template>
ee/app/assets/javascripts/packages/details/components/installation_tabs.vue 0 → 100644
View file @ 8a4be777
<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">
<slot name="installation"></slot>
</gl-tab>
<gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
<slot name="setup"></slot>
</gl-tab>
</gl-tabs>
</div>
</template>
ee/app/assets/javascripts/packages/details/components/maven_installation.vue
View file @ 8a4be777
<script>
import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui';
import { GlLink, GlSprintf } 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';
import InstallationTabs from './installation_tabs.vue';
export default {
name: 'MavenInstallation',
......@@ -13,15 +12,8 @@ export default {
CodeInstruction,
GlLink,
GlSprintf,
GlTab,
GlTabs,
InstallationTabs,
},
mixins: [
Tracking.mixin({
label: TrackingLabels.MAVEN_INSTALLATION,
}),
trackInstallationTabChange,
],
computed: {
...mapState(['mavenHelpPath']),
...mapGetters(['mavenInstallationXml', 'mavenInstallationCommand', 'mavenSetupXml']),
......@@ -38,64 +30,64 @@ export default {
),
},
trackingActions: { ...TrackingActions },
trackingLabel: TrackingLabels.MAVEN_INSTALLATION,
};
</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">
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Maven XML') }}</p>
<p>
<gl-sprintf :message="$options.i18n.xmlText">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</p>
<code-instruction
:instruction="mavenInstallationXml"
:copy-text="s__('PackageRegistry|Copy Maven XML')"
class="js-maven-xml"
multiline
:tracking-action="$options.trackingActions.COPY_MAVEN_XML"
/>
<installation-tabs :tracking-label="$options.trackingLabel">
<template #installation>
<div class="prepend-left-default append-right-default">
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Maven XML') }}</p>
<p>
<gl-sprintf :message="$options.i18n.xmlText">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</p>
<code-instruction
:instruction="mavenInstallationXml"
:copy-text="s__('PackageRegistry|Copy Maven XML')"
class="js-maven-xml"
multiline
:tracking-action="$options.trackingActions.COPY_MAVEN_XML"
/>
<p class="prepend-top-default font-weight-bold">
{{ s__('PackageRegistry|Maven Command') }}
</p>
<code-instruction
:instruction="mavenInstallationCommand"
:copy-text="s__('PackageRegistry|Copy Maven command')"
class="js-maven-command"
:tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND"
/>
</div>
</template>
<p class="prepend-top-default font-weight-bold">
{{ s__('PackageRegistry|Maven Command') }}
</p>
<code-instruction
:instruction="mavenInstallationCommand"
:copy-text="s__('PackageRegistry|Copy Maven command')"
class="js-maven-command"
:tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND"
/>
</div>
</gl-tab>
<gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
<div class="prepend-left-default append-right-default">
<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')"
class="js-maven-setup-xml"
multiline
:tracking-action="$options.trackingActions.COPY_MAVEN_SETUP"
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link>
<template #setup>
<div class="prepend-left-default append-right-default">
<p>
<gl-sprintf :message="$options.i18n.setupText">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</div>
</gl-tab>
</gl-tabs>
</div>
</p>
<code-instruction
:instruction="mavenSetupXml"
:copy-text="s__('PackageRegistry|Copy Maven registry XML')"
class="js-maven-setup-xml"
multiline
:tracking-action="$options.trackingActions.COPY_MAVEN_SETUP"
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</template>
</installation-tabs>
</template>
ee/app/assets/javascripts/packages/details/components/npm_installation.vue
View file @ 8a4be777
<script>
import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui';
import { GlLink, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import CodeInstruction from './code_instruction.vue';
import Tracking from '~/tracking';
import { NpmManager, TrackingActions, TrackingLabels } from '../constants';
import { trackInstallationTabChange } from '../utils';
import { mapGetters, mapState } from 'vuex';
import InstallationTabs from './installation_tabs.vue';
export default {
name: 'NpmInstallation',
......@@ -13,15 +14,9 @@ export default {
CodeInstruction,
GlLink,
GlSprintf,
GlTab,
GlTabs,
InstallationTabs,
},
mixins: [
Tracking.mixin({
label: TrackingLabels.NPM_INSTALLATION,
}),
trackInstallationTabChange,
],
mixins: [Tracking.mixin(), trackInstallationTabChange],
computed: {
...mapState(['npmHelpPath']),
...mapGetters(['npmInstallationCommand', 'npmSetupCommand']),
......@@ -44,56 +39,56 @@ export default {
),
},
trackingActions: { ...TrackingActions },
trackingLabel: TrackingLabels.NPM_INSTALLATION,
};
</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">
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
<code-instruction
:instruction="npmCommand"
:copy-text="s__('PackageRegistry|Copy npm command')"
class="js-npm-install"
:tracking-action="$options.trackingActions.COPY_NPM_INSTALL_COMMAND"
/>
<installation-tabs :tracking-label="$options.trackingLabel">
<template #installation>
<div class="prepend-left-default append-right-default">
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
<code-instruction
:instruction="npmCommand"
:copy-text="s__('PackageRegistry|Copy npm 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>
<code-instruction
:instruction="yarnCommand"
:copy-text="s__('PackageRegistry|Copy yarn command')"
class="js-yarn-install"
:tracking-action="$options.trackingActions.COPY_YARN_INSTALL_COMMAND"
/>
</div>
</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>
<code-instruction
:instruction="yarnCommand"
:copy-text="s__('PackageRegistry|Copy yarn command')"
class="js-yarn-install"
:tracking-action="$options.trackingActions.COPY_YARN_INSTALL_COMMAND"
/>
</div>
</template>
<p class="prepend-top-default font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p>
<code-instruction
:instruction="yarnSetupCommand"
:copy-text="s__('PackageRegistry|Copy yarn setup command')"
class="js-yarn-setup"
:tracking-action="$options.trackingActions.COPY_YARN_SETUP_COMMAND"
/>
<template #setup>
<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"
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="npmHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</gl-tab>
</gl-tabs>
</div>
<p class="prepend-top-default font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p>
<code-instruction
:instruction="yarnSetupCommand"
:copy-text="s__('PackageRegistry|Copy yarn setup command')"
class="js-yarn-setup"
:tracking-action="$options.trackingActions.COPY_YARN_SETUP_COMMAND"
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="npmHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</template>
</installation-tabs>
</template>
ee/app/assets/javascripts/packages/details/components/nuget_installation.vue
View file @ 8a4be777
<script>
import { GlLink, GlSprintf, GlTab, GlTabs } from '@gitlab/ui';
import { GlLink, GlSprintf } 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';
import InstallationTabs from './installation_tabs.vue';
export default {
name: 'NugetInstallation',
......@@ -13,15 +14,9 @@ export default {
CodeInstruction,
GlLink,
GlSprintf,
GlTab,
GlTabs,
InstallationTabs,
},
mixins: [
Tracking.mixin({
label: TrackingLabels.NUGET_INSTALLATION,
}),
trackInstallationTabChange,
],
mixins: [Tracking.mixin(), trackInstallationTabChange],
computed: {
...mapState(['nugetHelpPath']),
...mapGetters(['nugetInstallationCommand', 'nugetSetupCommand']),
......@@ -32,41 +27,41 @@ export default {
),
},
trackingActions: { ...TrackingActions },
trackingLabel: TrackingLabels.NUGET_INSTALLATION,
};
</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">
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|NuGet Command') }}</p>
<code-instruction
:instruction="nugetInstallationCommand"
:copy-text="s__('PackageRegistry|Copy NuGet Command')"
class="js-nuget-command"
:tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND"
/>
</div>
</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|Add NuGet Source') }}
</p>
<code-instruction
:instruction="nugetSetupCommand"
:copy-text="s__('PackageRegistry|Copy NuGet Setup Command')"
class="js-nuget-setup"
:tracking-action="$options.trackingActions.COPY_NUGET_SETUP_COMMAND"
/>
<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>
</div>
<installation-tabs :tracking-label="$options.trackingLabel">
<template #installation>
<div class="prepend-left-default append-right-default">
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|NuGet Command') }}</p>
<code-instruction
:instruction="nugetInstallationCommand"
:copy-text="s__('PackageRegistry|Copy NuGet Command')"
class="js-nuget-command"
:tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND"
/>
</div>
</template>
<template #setup>
<div class="prepend-left-default append-right-default">
<p class="prepend-top-8 font-weight-bold">
{{ s__('PackageRegistry|Add NuGet Source') }}
</p>
<code-instruction
:instruction="nugetSetupCommand"
:copy-text="s__('PackageRegistry|Copy NuGet Setup Command')"
class="js-nuget-setup"
:tracking-action="$options.trackingActions.COPY_NUGET_SETUP_COMMAND"
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="nugetHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
</template>
</installation-tabs>
</template>
ee/app/assets/javascripts/packages/details/utils.js
View file @ 8a4be777
......@@ -7,7 +7,7 @@ export const trackInstallationTabChange = {
methods: {
trackInstallationTabChange(tabIndex) {
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 @ 8a4be777
......@@ -3,8 +3,6 @@ import { mount, createLocalVue } from '@vue/test-utils';
import ConanInstallation from 'ee/packages/details/components/conan_installation.vue';
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);
......@@ -26,8 +24,6 @@ describe('ConanInstallation', () => {
},
});
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');
......@@ -57,38 +53,4 @@ describe('ConanInstallation', () => {
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 @ 8a4be777
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 @ 8a4be777
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 { registryUrl as mavenPath } from '../mock_data';
import { mavenPackage as packageEntity } from '../../mock_data';
import Tracking from '~/tracking';
const localVue = createLocalVue();
localVue.use(Vuex);
......@@ -28,8 +26,6 @@ describe('MavenInstallation', () => {
},
});
const installationTab = () => wrapper.find('.js-installation-tab > a');
const setupTab = () => wrapper.find('.js-setup-tab > a');
const xmlCode = () => wrapper.find('.js-maven-xml > pre');
const mavenCommand = () => wrapper.find('.js-maven-command > input');
const xmlSetup = () => wrapper.find('.js-maven-setup-xml > pre');
......@@ -64,37 +60,4 @@ describe('MavenInstallation', () => {
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 @ 8a4be777
import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils';
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 { registryUrl as nugetPath } from '../mock_data';
import Tracking from '~/tracking';
const localVue = createLocalVue();
localVue.use(Vuex);
......@@ -17,8 +15,6 @@ describe('NpmInstallation', () => {
const yarnCommandStr = 'npm install';
const yarnSetupStr = 'npm setup';
const installationTab = () => wrapper.find('.js-installation-tab > a');
const setupTab = () => wrapper.find('.js-setup-tab > a');
const npmInstallationCommand = () => wrapper.find('.js-npm-install > input');
const npmSetupCommand = () => wrapper.find('.js-npm-setup > input');
const yarnInstallationCommand = () => wrapper.find('.js-yarn-install > input');
......@@ -73,39 +69,4 @@ describe('NpmInstallation', () => {
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 @ 8a4be777
......@@ -3,8 +3,6 @@ import { mount, createLocalVue } from '@vue/test-utils';
import NugetInstallation from 'ee/packages/details/components/nuget_installation.vue';
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);
......@@ -26,8 +24,6 @@ describe('NugetInstallation', () => {
},
});
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');
......@@ -57,39 +53,4 @@ describe('NugetInstallation', () => {
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