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> <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 Tracking from '~/tracking';
import { TrackingActions, TrackingLabels } from '../constants'; import { TrackingActions, TrackingLabels } from '../constants';
import { trackInstallationTabChange } from '../utils'; 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 +14,9 @@ export default { ...@@ -13,15 +14,9 @@ export default {
CodeInstruction, CodeInstruction,
GlLink, GlLink,
GlSprintf, GlSprintf,
GlTab, InstallationTabs,
GlTabs,
}, },
mixins: [ mixins: [Tracking.mixin(), trackInstallationTabChange],
Tracking.mixin({
label: TrackingLabels.CONAN_INSTALLATION,
}),
trackInstallationTabChange,
],
computed: { computed: {
...mapState(['conanHelpPath']), ...mapState(['conanHelpPath']),
...mapGetters(['conanInstallationCommand', 'conanSetupCommand']), ...mapGetters(['conanInstallationCommand', 'conanSetupCommand']),
...@@ -32,41 +27,41 @@ export default { ...@@ -32,41 +27,41 @@ 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"> <div class="prepend-left-default append-right-default">
<div class="prepend-left-default append-right-default"> <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Conan Command') }}</p>
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Conan Command') }}</p> <code-instruction
<code-instruction :instruction="conanInstallationCommand"
:instruction="conanInstallationCommand" :copy-text="s__('PackageRegistry|Copy Conan Command')"
:copy-text="s__('PackageRegistry|Copy Conan Command')" class="js-conan-command"
class="js-conan-command" :tracking-action="$options.trackingActions.COPY_CONAN_COMMAND"
:tracking-action="$options.trackingActions.COPY_CONAN_COMMAND" />
/> </div>
</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"> <div class="prepend-left-default append-right-default">
<p class="prepend-top-8 font-weight-bold"> <p class="prepend-top-8 font-weight-bold">
{{ s__('PackageRegistry|Add Conan Remote') }} {{ s__('PackageRegistry|Add Conan Remote') }}
</p> </p>
<code-instruction <code-instruction
:instruction="conanSetupCommand" :instruction="conanSetupCommand"
:copy-text="s__('PackageRegistry|Copy Conan Setup Command')" :copy-text="s__('PackageRegistry|Copy Conan Setup Command')"
class="js-conan-setup" class="js-conan-setup"
:tracking-action="$options.trackingActions.COPY_CONAN_SETUP_COMMAND" :tracking-action="$options.trackingActions.COPY_CONAN_SETUP_COMMAND"
/> />
<gl-sprintf :message="$options.i18n.helpText"> <gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }"> <template #link="{ content }">
<gl-link :href="conanHelpPath" target="_blank">{{ content }}</gl-link> <gl-link :href="conanHelpPath" target="_blank">{{ content }}</gl-link>
</template> </template>
</gl-sprintf> </gl-sprintf>
</div> </div>
</gl-tab> </template>
</gl-tabs> </installation-tabs>
</div>
</template> </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> <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,64 @@ export default { ...@@ -38,64 +30,64 @@ 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"> <div class="prepend-left-default append-right-default">
<div class="prepend-left-default append-right-default"> <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Maven XML') }}</p>
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|Maven XML') }}</p> <p>
<p> <gl-sprintf :message="$options.i18n.xmlText">
<gl-sprintf :message="$options.i18n.xmlText"> <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="mavenInstallationXml"
:instruction="mavenInstallationXml" :copy-text="s__('PackageRegistry|Copy Maven XML')"
:copy-text="s__('PackageRegistry|Copy Maven XML')" class="js-maven-xml"
class="js-maven-xml" multiline
multiline :tracking-action="$options.trackingActions.COPY_MAVEN_XML"
: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"> <template #setup>
{{ s__('PackageRegistry|Maven Command') }} <div class="prepend-left-default append-right-default">
</p> <p>
<code-instruction <gl-sprintf :message="$options.i18n.setupText">
:instruction="mavenInstallationCommand" <template #code="{ content }">
:copy-text="s__('PackageRegistry|Copy Maven command')" <code>{{ content }}</code>
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> </template>
</gl-sprintf> </gl-sprintf>
</div> </p>
</gl-tab> <code-instruction
</gl-tabs> :instruction="mavenSetupXml"
</div> :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> </template>
ee/app/assets/javascripts/packages/details/components/npm_installation.vue
View file @ 8a4be777
<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 Tracking from '~/tracking';
import { NpmManager, TrackingActions, TrackingLabels } from '../constants'; import { NpmManager, TrackingActions, TrackingLabels } from '../constants';
import { trackInstallationTabChange } from '../utils'; 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 +14,9 @@ export default { ...@@ -13,15 +14,9 @@ export default {
CodeInstruction, CodeInstruction,
GlLink, GlLink,
GlSprintf, GlSprintf,
GlTab, InstallationTabs,
GlTabs,
}, },
mixins: [ mixins: [Tracking.mixin(), trackInstallationTabChange],
Tracking.mixin({
label: TrackingLabels.NPM_INSTALLATION,
}),
trackInstallationTabChange,
],
computed: { computed: {
...mapState(['npmHelpPath']), ...mapState(['npmHelpPath']),
...mapGetters(['npmInstallationCommand', 'npmSetupCommand']), ...mapGetters(['npmInstallationCommand', 'npmSetupCommand']),
...@@ -44,56 +39,56 @@ export default { ...@@ -44,56 +39,56 @@ 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"> <div class="prepend-left-default append-right-default">
<div class="prepend-left-default append-right-default"> <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p> <code-instruction
<code-instruction :instruction="npmCommand"
:instruction="npmCommand" :copy-text="s__('PackageRegistry|Copy npm command')"
:copy-text="s__('PackageRegistry|Copy npm command')" class="js-npm-install"
class="js-npm-install" :tracking-action="$options.trackingActions.COPY_NPM_INSTALL_COMMAND"
: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> </div>
</gl-tab> </template>
<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 <div class="prepend-left-default append-right-default">
:instruction="yarnSetupCommand" <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
:copy-text="s__('PackageRegistry|Copy yarn setup command')" <code-instruction
class="js-yarn-setup" :instruction="npmSetup"
:tracking-action="$options.trackingActions.COPY_YARN_SETUP_COMMAND" :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"> <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>
</div>
</template>
</installation-tabs>
</template> </template>
ee/app/assets/javascripts/packages/details/components/nuget_installation.vue
View file @ 8a4be777
<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 Tracking from '~/tracking';
import { TrackingActions, TrackingLabels } from '../constants'; import { TrackingActions, TrackingLabels } from '../constants';
import { trackInstallationTabChange } from '../utils'; 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 +14,9 @@ export default { ...@@ -13,15 +14,9 @@ export default {
CodeInstruction, CodeInstruction,
GlLink, GlLink,
GlSprintf, GlSprintf,
GlTab, InstallationTabs,
GlTabs,
}, },
mixins: [ mixins: [Tracking.mixin(), trackInstallationTabChange],
Tracking.mixin({
label: TrackingLabels.NUGET_INSTALLATION,
}),
trackInstallationTabChange,
],
computed: { computed: {
...mapState(['nugetHelpPath']), ...mapState(['nugetHelpPath']),
...mapGetters(['nugetInstallationCommand', 'nugetSetupCommand']), ...mapGetters(['nugetInstallationCommand', 'nugetSetupCommand']),
...@@ -32,41 +27,41 @@ export default { ...@@ -32,41 +27,41 @@ 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"> <div class="prepend-left-default append-right-default">
<div class="prepend-left-default append-right-default"> <p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|NuGet Command') }}</p>
<p class="prepend-top-8 font-weight-bold">{{ s__('PackageRegistry|NuGet Command') }}</p> <code-instruction
<code-instruction :instruction="nugetInstallationCommand"
:instruction="nugetInstallationCommand" :copy-text="s__('PackageRegistry|Copy NuGet Command')"
:copy-text="s__('PackageRegistry|Copy NuGet Command')" class="js-nuget-command"
class="js-nuget-command" :tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND"
:tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND" />
/> </div>
</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"> <div class="prepend-left-default append-right-default">
<p class="prepend-top-8 font-weight-bold"> <p class="prepend-top-8 font-weight-bold">
{{ s__('PackageRegistry|Add NuGet Source') }} {{ s__('PackageRegistry|Add NuGet Source') }}
</p> </p>
<code-instruction <code-instruction
:instruction="nugetSetupCommand" :instruction="nugetSetupCommand"
:copy-text="s__('PackageRegistry|Copy NuGet Setup Command')" :copy-text="s__('PackageRegistry|Copy NuGet Setup Command')"
class="js-nuget-setup" class="js-nuget-setup"
:tracking-action="$options.trackingActions.COPY_NUGET_SETUP_COMMAND" :tracking-action="$options.trackingActions.COPY_NUGET_SETUP_COMMAND"
/> />
<gl-sprintf :message="$options.i18n.helpText"> <gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }"> <template #link="{ content }">
<gl-link :href="nugetHelpPath" target="_blank">{{ content }}</gl-link> <gl-link :href="nugetHelpPath" target="_blank">{{ content }}</gl-link>
</template> </template>
</gl-sprintf> </gl-sprintf>
</div> </div>
</gl-tab> </template>
</gl-tabs> </installation-tabs>
</div>
</template> </template>
ee/app/assets/javascripts/packages/details/utils.js
View file @ 8a4be777
...@@ -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 @ 8a4be777
...@@ -3,8 +3,6 @@ import { mount, createLocalVue } from '@vue/test-utils'; ...@@ -3,8 +3,6 @@ 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 Tracking from '~/tracking';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -26,8 +24,6 @@ describe('ConanInstallation', () => { ...@@ -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 conanInstallationCommand = () => wrapper.find('.js-conan-command > input');
const conanSetupCommand = () => wrapper.find('.js-conan-setup > input'); const conanSetupCommand = () => wrapper.find('.js-conan-setup > input');
...@@ -57,38 +53,4 @@ describe('ConanInstallation', () => { ...@@ -57,38 +53,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 @ 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 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';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -28,8 +26,6 @@ describe('MavenInstallation', () => { ...@@ -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 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');
...@@ -64,37 +60,4 @@ describe('MavenInstallation', () => { ...@@ -64,37 +60,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 @ 8a4be777
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';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -17,8 +15,6 @@ describe('NpmInstallation', () => { ...@@ -17,8 +15,6 @@ 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 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');
...@@ -73,39 +69,4 @@ describe('NpmInstallation', () => { ...@@ -73,39 +69,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 @ 8a4be777
...@@ -3,8 +3,6 @@ import { mount, createLocalVue } from '@vue/test-utils'; ...@@ -3,8 +3,6 @@ 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 Tracking from '~/tracking';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -26,8 +24,6 @@ describe('NugetInstallation', () => { ...@@ -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 nugetInstallationCommand = () => wrapper.find('.js-nuget-command > input');
const nugetSetupCommand = () => wrapper.find('.js-nuget-setup > input'); const nugetSetupCommand = () => wrapper.find('.js-nuget-setup > input');
...@@ -57,39 +53,4 @@ describe('NugetInstallation', () => { ...@@ -57,39 +53,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