Merge branch '330847-convert-package-details-page-to-use-graphql-3' into 'master'

Refactor Npm, Nuget  and Pypi installation commands

See merge request gitlab-org/gitlab!67594

app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue

@@ -20,12 +20,12 @@ import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { objectToQuery } from '~/lib/utils/url_utility';
 import { s__, __ } from '~/locale';
 // import DependencyRow from '~/packages/details/components/dependency_row.vue';
-// import InstallationCommands from '~/packages/details/components/installation_commands.vue';
 // import PackageFiles from '~/packages/details/components/package_files.vue';
 // import PackageListRow from '~/packages/shared/components/package_list_row.vue';
 import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue';
 import { packageTypeToTrackCategory } from '~/packages/shared/utils';
 import AdditionalMetadata from '~/packages_and_registries/package_registry/components/details/additional_metadata.vue';
+import InstallationCommands from '~/packages_and_registries/package_registry/components/details/installation_commands.vue';
 import PackageHistory from '~/packages_and_registries/package_registry/components/details/package_history.vue';
 import {
   PACKAGE_TYPE_NUGET,
@@ -62,7 +62,7 @@ export default {
     // DependencyRow,
     PackageHistory,
     AdditionalMetadata,
-    // InstallationCommands,
+    InstallationCommands,
     // PackageFiles,
   },
   directives: {
@@ -240,11 +240,7 @@ export default {
         <div v-if="!isLoading" data-qa-selector="package_information_content">
           <package-history :package-entity="packageEntity" :project-name="projectName" />
 
-          <!-- <installation-commands
-            :package-entity="packageEntity"
-            :npm-path="npmPath"
-            :npm-help-path="npmHelpPath"
-          /> -->
+          <installation-commands :package-entity="packageEntity" />
 
           <additional-metadata :package-entity="packageEntity" />
         </div>

app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue

 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
-import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
-import { NpmManager, TrackingActions, TrackingLabels } from '~/packages/details/constants';
+
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
+import {
+  TRACKING_ACTION_COPY_NPM_INSTALL_COMMAND,
+  TRACKING_ACTION_COPY_NPM_SETUP_COMMAND,
+  TRACKING_ACTION_COPY_YARN_INSTALL_COMMAND,
+  TRACKING_ACTION_COPY_YARN_SETUP_COMMAND,
+  TRACKING_LABEL_CODE_INSTRUCTION,
+  NPM_PACKAGE_MANAGER,
+  YARN_PACKAGE_MANAGER,
+} from '~/packages_and_registries/package_registry/constants';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 
 export default {
@@ -14,40 +22,70 @@ export default {
     GlLink,
     GlSprintf,
   },
+  inject: ['npmHelpPath', 'npmPath'],
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
   data() {
     return {
-      instructionType: 'npm',
+      instructionType: NPM_PACKAGE_MANAGER,
     };
   },
   computed: {
-    ...mapState(['npmHelpPath']),
-    ...mapGetters(['npmInstallationCommand', 'npmSetupCommand']),
     npmCommand() {
-      return this.npmInstallationCommand(NpmManager.NPM);
+      return this.npmInstallationCommand(NPM_PACKAGE_MANAGER);
     },
     npmSetup() {
-      return this.npmSetupCommand(NpmManager.NPM);
+      return this.npmSetupCommand(NPM_PACKAGE_MANAGER);
     },
     yarnCommand() {
-      return this.npmInstallationCommand(NpmManager.YARN);
+      return this.npmInstallationCommand(YARN_PACKAGE_MANAGER);
     },
     yarnSetupCommand() {
-      return this.npmSetupCommand(NpmManager.YARN);
+      return this.npmSetupCommand(YARN_PACKAGE_MANAGER);
     },
     showNpm() {
-      return this.instructionType === 'npm';
+      return this.instructionType === NPM_PACKAGE_MANAGER;
+    },
+  },
+  methods: {
+    npmInstallationCommand(type) {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      const instruction = type === NPM_PACKAGE_MANAGER ? 'npm i' : 'yarn add';
+
+      return `${instruction} ${this.packageEntity.name}`;
+    },
+    npmSetupCommand(type) {
+      const scope = this.packageEntity.name.substring(0, this.packageEntity.name.indexOf('/'));
+
+      if (type === NPM_PACKAGE_MANAGER) {
+        return `echo ${scope}:registry=${this.npmPath}/ >> .npmrc`;
+      }
+
+      return `echo \\"${scope}:registry\\" \\"${this.npmPath}/\\" >> .yarnrc`;
+    },
+  },
+  packageManagers: {
+    NPM_PACKAGE_MANAGER,
   },
+  tracking: {
+    TRACKING_ACTION_COPY_NPM_INSTALL_COMMAND,
+    TRACKING_ACTION_COPY_NPM_SETUP_COMMAND,
+    TRACKING_ACTION_COPY_YARN_INSTALL_COMMAND,
+    TRACKING_ACTION_COPY_YARN_SETUP_COMMAND,
+    TRACKING_LABEL_CODE_INSTRUCTION,
   },
   i18n: {
     helpText: s__(
       'PackageRegistry|You may also need to setup authentication using an auth token. %{linkStart}See the documentation%{linkEnd} to find out more.',
     ),
   },
-  trackingActions: { ...TrackingActions },
-  TrackingLabels,
   installOptions: [
-    { value: 'npm', label: s__('PackageRegistry|Show NPM commands') },
-    { value: 'yarn', label: s__('PackageRegistry|Show Yarn commands') },
+    { value: NPM_PACKAGE_MANAGER, label: s__('PackageRegistry|Show NPM commands') },
+    { value: YARN_PACKAGE_MANAGER, label: s__('PackageRegistry|Show Yarn commands') },
   ],
 };
 </script>
@@ -55,7 +93,7 @@ export default {
 <template>
   <div>
     <installation-title
-      package-type="npm"
+      :package-type="$options.packageManagers.NPM_PACKAGE_MANAGER"
       :options="$options.installOptions"
       @change="instructionType = $event"
     />
@@ -64,16 +102,16 @@ export default {
       v-if="showNpm"
       :instruction="npmCommand"
       :copy-text="s__('PackageRegistry|Copy npm command')"
-      :tracking-action="$options.trackingActions.COPY_NPM_INSTALL_COMMAND"
-      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_NPM_INSTALL_COMMAND"
+      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
     />
 
     <code-instruction
       v-else
       :instruction="yarnCommand"
       :copy-text="s__('PackageRegistry|Copy yarn command')"
-      :tracking-action="$options.trackingActions.COPY_YARN_INSTALL_COMMAND"
-      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_YARN_INSTALL_COMMAND"
+      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
     />
 
     <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
@@ -82,16 +120,16 @@ export default {
       v-if="showNpm"
       :instruction="npmSetup"
       :copy-text="s__('PackageRegistry|Copy npm setup command')"
-      :tracking-action="$options.trackingActions.COPY_NPM_SETUP_COMMAND"
-      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_NPM_SETUP_COMMAND"
+      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
     />
 
     <code-instruction
       v-else
       :instruction="yarnSetupCommand"
       :copy-text="s__('PackageRegistry|Copy yarn setup command')"
-      :tracking-action="$options.trackingActions.COPY_YARN_SETUP_COMMAND"
-      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_YARN_SETUP_COMMAND"
+      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
     />
 
     <gl-sprintf :message="$options.i18n.helpText">

app/assets/javascripts/packages_and_registries/package_registry/components/details/nuget_installation.vue

 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
-import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
-import { TrackingActions, TrackingLabels } from '~/packages/details/constants';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
+import {
+  TRACKING_ACTION_COPY_NUGET_INSTALL_COMMAND,
+  TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND,
+  TRACKING_LABEL_CODE_INSTRUCTION,
+} from '~/packages_and_registries/package_registry/constants';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 
 export default {
@@ -14,17 +17,31 @@ export default {
     GlLink,
     GlSprintf,
   },
+  inject: ['nugetHelpPath', 'nugetPath'],
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
   computed: {
-    ...mapState(['nugetHelpPath']),
-    ...mapGetters(['nugetInstallationCommand', 'nugetSetupCommand']),
+    nugetInstallationCommand() {
+      return `nuget install ${this.packageEntity.name} -Source "GitLab"`;
+    },
+    nugetSetupCommand() {
+      return `nuget source Add -Name "GitLab" -Source "${this.nugetPath}" -UserName <your_username> -Password <your_token>`;
+    },
+  },
+  tracking: {
+    TRACKING_ACTION_COPY_NUGET_INSTALL_COMMAND,
+    TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND,
+    TRACKING_LABEL_CODE_INSTRUCTION,
   },
   i18n: {
     helpText: s__(
       'PackageRegistry|For more information on the NuGet registry, %{linkStart}see the documentation%{linkEnd}.',
     ),
   },
-  trackingActions: { ...TrackingActions },
-  TrackingLabels,
   installOptions: [{ value: 'nuget', label: s__('PackageRegistry|Show Nuget commands') }],
 };
 </script>
@@ -37,8 +54,8 @@ export default {
       :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"
+      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_NUGET_INSTALL_COMMAND"
+      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
     />
     <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
 
@@ -46,8 +63,8 @@ export default {
       :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"
+      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND"
+      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
     />
     <gl-sprintf :message="$options.i18n.helpText">
       <template #link="{ content }">

app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue

 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
-import { mapGetters, mapState } from 'vuex';
+
 import { s__ } from '~/locale';
-import { TrackingActions, TrackingLabels } from '~/packages/details/constants';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
+import {
+  TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND,
+  TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND,
+  TRACKING_LABEL_CODE_INSTRUCTION,
+} from '~/packages_and_registries/package_registry/constants';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 
 export default {
@@ -14,9 +18,29 @@ export default {
     GlLink,
     GlSprintf,
   },
+  inject: ['pypiHelpPath', 'pypiPath', 'pypiSetupPath'],
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
   computed: {
-    ...mapState(['pypiHelpPath']),
-    ...mapGetters(['pypiPipCommand', 'pypiSetupCommand']),
+    pypiPipCommand() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return `pip install ${this.packageEntity.name} --extra-index-url ${this.pypiPath}`;
+    },
+    pypiSetupCommand() {
+      return `[gitlab]
+repository = ${this.pypiSetupPath}
+username = __token__
+password = <your personal access token>`;
+    },
+  },
+  tracking: {
+    TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND,
+    TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND,
+    TRACKING_LABEL_CODE_INSTRUCTION,
   },
   i18n: {
     setupText: s__(
@@ -26,8 +50,6 @@ export default {
       'PackageRegistry|For more information on the PyPi registry, %{linkStart}see the documentation%{linkEnd}.',
     ),
   },
-  trackingActions: { ...TrackingActions },
-  TrackingLabels,
   installOptions: [{ value: 'pypi', label: s__('PackageRegistry|Show PyPi commands') }],
 };
 </script>
@@ -41,8 +63,8 @@ export default {
       :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"
+      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND"
+      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
     />
 
     <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
@@ -59,8 +81,8 @@ export default {
       :copy-text="s__('PackageRegistry|Copy .pypirc content')"
       data-testid="pypi-setup-content"
       multiline
-      :tracking-action="$options.trackingActions.COPY_PYPI_SETUP_COMMAND"
-      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND"
+      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
     />
     <gl-sprintf :message="$options.i18n.helpText">
       <template #link="{ content }">

app/assets/javascripts/packages_and_registries/package_registry/constants.js

@@ -83,3 +83,6 @@ export const PACKAGE_ERROR_STATUS = 'error';
 export const PACKAGE_DEFAULT_STATUS = 'default';
 export const PACKAGE_HIDDEN_STATUS = 'hidden';
 export const PACKAGE_PROCESSING_STATUS = 'processing';
+
+export const NPM_PACKAGE_MANAGER = 'npm';
+export const YARN_PACKAGE_MANAGER = 'yarn';

spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/npm_installation_spec.js.snap

@@ -9,7 +9,7 @@ exports[`NpmInstallation renders all the messages 1`] = `
    
   <code-instruction-stub
     copytext="Copy npm command"
-    instruction="npm i @Test/package"
+    instruction="npm i @gitlab-org/package-15"
     label=""
     trackingaction="copy_npm_install_command"
     trackinglabel="code_instruction"
@@ -23,7 +23,7 @@ exports[`NpmInstallation renders all the messages 1`] = `
    
   <code-instruction-stub
     copytext="Copy npm setup command"
-    instruction="echo @Test:registry=undefined/ >> .npmrc"
+    instruction="echo @gitlab-org:registry=npmPath/ >> .npmrc"
     label=""
     trackingaction="copy_npm_setup_command"
     trackinglabel="code_instruction"

spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/nuget_installation_spec.js.snap

@@ -9,7 +9,7 @@ exports[`NugetInstallation renders all the messages 1`] = `
    
   <code-instruction-stub
     copytext="Copy NuGet Command"
-    instruction="foo/command"
+    instruction="nuget install @gitlab-org/package-15 -Source \\"GitLab\\""
     label="NuGet Command"
     trackingaction="copy_nuget_install_command"
     trackinglabel="code_instruction"
@@ -23,7 +23,7 @@ exports[`NugetInstallation renders all the messages 1`] = `
    
   <code-instruction-stub
     copytext="Copy NuGet Setup Command"
-    instruction="foo/setup"
+    instruction="nuget source Add -Name \\"GitLab\\" -Source \\"nugetPath\\" -UserName <your_username> -Password <your_token>"
     label="Add NuGet Source"
     trackingaction="copy_nuget_setup_command"
     trackinglabel="code_instruction"

spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap

@@ -10,7 +10,7 @@ exports[`PypiInstallation renders all the messages 1`] = `
   <code-instruction-stub
     copytext="Copy Pip command"
     data-testid="pip-command"
-    instruction="pip install"
+    instruction="pip install @gitlab-org/package-15 --extra-index-url pypiPath"
     label="Pip Command"
     trackingaction="copy_pip_install_command"
     trackinglabel="code_instruction"
@@ -31,7 +31,10 @@ exports[`PypiInstallation renders all the messages 1`] = `
   <code-instruction-stub
     copytext="Copy .pypirc content"
     data-testid="pypi-setup-content"
-    instruction="python setup"
+    instruction="[gitlab]
+repository = pypiSetupPath
+username = __token__
+password = <your personal access token>"
     label=""
     multiline="true"
     trackingaction="copy_pypi_setup_command"

spec/frontend/packages_and_registries/package_registry/components/details/app_spec.js

@@ -7,6 +7,7 @@ import createFlash from '~/flash';
 
 import AdditionalMetadata from '~/packages_and_registries/package_registry/components/details/additional_metadata.vue';
 import PackagesApp from '~/packages_and_registries/package_registry/components/details/app.vue';
+import InstallationCommands from '~/packages_and_registries/package_registry/components/details/installation_commands.vue';
 import PackageHistory from '~/packages_and_registries/package_registry/components/details/package_history.vue';
 import PackageTitle from '~/packages_and_registries/package_registry/components/details/package_title.vue';
 import { FETCH_PACKAGE_DETAILS_ERROR_MESSAGE } from '~/packages_and_registries/package_registry/constants';
@@ -50,6 +51,7 @@ describe('PackagesApp', () => {
   const findPackageTitle = () => wrapper.findComponent(PackageTitle);
   const findPackageHistory = () => wrapper.findComponent(PackageHistory);
   const findAdditionalMetadata = () => wrapper.findComponent(AdditionalMetadata);
+  const findInstallationCommands = () => wrapper.findComponent(InstallationCommands);
 
   afterEach(() => {
     wrapper.destroy();
@@ -108,4 +110,15 @@ describe('PackagesApp', () => {
       packageEntity: expect.objectContaining(packageData()),
     });
   });
+
+  it('renders installation commands and has the right props', async () => {
+    createComponent();
+
+    await waitForPromises();
+
+    expect(findInstallationCommands().exists()).toBe(true);
+    expect(findInstallationCommands().props()).toMatchObject({
+      packageEntity: expect.objectContaining(packageData()),
+    });
+  });
 });

spec/frontend/packages_and_registries/package_registry/components/details/npm_installation_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import Vuex from 'vuex';
-import { registryUrl as nugetPath } from 'jest/packages/details/mock_data';
-import { npmPackage as packageEntity } from 'jest/packages/mock_data';
-import { TrackingActions } from '~/packages/details/constants';
-import { npmInstallationCommand, npmSetupCommand } from '~/packages/details/store/getters';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+import { packageData } from 'jest/packages_and_registries/package_registry/mock_data';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
 import NpmInstallation from '~/packages_and_registries/package_registry/components/details/npm_installation.vue';
+import {
+  TRACKING_ACTION_COPY_NPM_INSTALL_COMMAND,
+  TRACKING_ACTION_COPY_NPM_SETUP_COMMAND,
+  TRACKING_ACTION_COPY_YARN_INSTALL_COMMAND,
+  TRACKING_ACTION_COPY_YARN_SETUP_COMMAND,
+  PACKAGE_TYPE_NPM,
+  NPM_PACKAGE_MANAGER,
+  YARN_PACKAGE_MANAGER,
+} from '~/packages_and_registries/package_registry/constants';
 import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_NPM };
 
 describe('NpmInstallation', () => {
   let wrapper;
 
-  const npmInstallationCommandLabel = 'npm i @Test/package';
-  const yarnInstallationCommandLabel = 'yarn add @Test/package';
+  const npmInstallationCommandLabel = 'npm i @gitlab-org/package-15';
+  const yarnInstallationCommandLabel = 'yarn add @gitlab-org/package-15';
 
-  const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
+  const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
 
   function createComponent({ data = {} } = {}) {
-    const store = new Vuex.Store({
-      state: {
-        packageEntity,
-        nugetPath,
+    wrapper = shallowMountExtended(NpmInstallation, {
+      provide: {
+        npmHelpPath: 'npmHelpPath',
+        npmPath: 'npmPath',
       },
-      getters: {
-        npmInstallationCommand,
-        npmSetupCommand,
+      propsData: {
+        packageEntity,
       },
-    });
-
-    wrapper = shallowMount(NpmInstallation, {
-      localVue,
-      store,
       data() {
         return data;
       },
@@ -58,10 +57,10 @@ describe('NpmInstallation', () => {
     it('has the installation title component', () => {
       expect(findInstallationTitle().exists()).toBe(true);
       expect(findInstallationTitle().props()).toMatchObject({
-        packageType: 'npm',
+        packageType: NPM_PACKAGE_MANAGER,
         options: [
-          { value: 'npm', label: 'Show NPM commands' },
-          { value: 'yarn', label: 'Show Yarn commands' },
+          { value: NPM_PACKAGE_MANAGER, label: 'Show NPM commands' },
+          { value: YARN_PACKAGE_MANAGER, label: 'Show Yarn commands' },
         ],
       });
     });
@@ -70,7 +69,7 @@ describe('NpmInstallation', () => {
       createComponent();
 
       expect(findCodeInstructions().at(0).props('instruction')).toBe(npmInstallationCommandLabel);
-      findInstallationTitle().vm.$emit('change', 'yarn');
+      findInstallationTitle().vm.$emit('change', YARN_PACKAGE_MANAGER);
 
       await nextTick();
 
@@ -86,37 +85,37 @@ describe('NpmInstallation', () => {
       expect(findCodeInstructions().at(0).props()).toMatchObject({
         instruction: npmInstallationCommandLabel,
         multiline: false,
-        trackingAction: TrackingActions.COPY_NPM_INSTALL_COMMAND,
+        trackingAction: TRACKING_ACTION_COPY_NPM_INSTALL_COMMAND,
       });
     });
 
     it('renders the correct setup command', () => {
       expect(findCodeInstructions().at(1).props()).toMatchObject({
-        instruction: 'echo @Test:registry=undefined/ >> .npmrc',
+        instruction: 'echo @gitlab-org:registry=npmPath/ >> .npmrc',
         multiline: false,
-        trackingAction: TrackingActions.COPY_NPM_SETUP_COMMAND,
+        trackingAction: TRACKING_ACTION_COPY_NPM_SETUP_COMMAND,
       });
     });
   });
 
   describe('yarn', () => {
     beforeEach(() => {
-      createComponent({ data: { instructionType: 'yarn' } });
+      createComponent({ data: { instructionType: YARN_PACKAGE_MANAGER } });
     });
 
     it('renders the correct setup command', () => {
       expect(findCodeInstructions().at(0).props()).toMatchObject({
         instruction: yarnInstallationCommandLabel,
         multiline: false,
-        trackingAction: TrackingActions.COPY_YARN_INSTALL_COMMAND,
+        trackingAction: TRACKING_ACTION_COPY_YARN_INSTALL_COMMAND,
       });
     });
 
     it('renders the correct registry command', () => {
       expect(findCodeInstructions().at(1).props()).toMatchObject({
-        instruction: 'echo \\"@Test:registry\\" \\"undefined/\\" >> .yarnrc',
+        instruction: 'echo \\"@gitlab-org:registry\\" \\"npmPath/\\" >> .yarnrc',
         multiline: false,
-        trackingAction: TrackingActions.COPY_YARN_SETUP_COMMAND,
+        trackingAction: TRACKING_ACTION_COPY_YARN_SETUP_COMMAND,
       });
     });
   });

spec/frontend/packages_and_registries/package_registry/components/details/nuget_installation_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import { registryUrl as nugetPath } from 'jest/packages/details/mock_data';
-import { nugetPackage as packageEntity } from 'jest/packages/mock_data';
-import { TrackingActions } from '~/packages/details/constants';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { packageData } from 'jest/packages_and_registries/package_registry/mock_data';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
 import NugetInstallation from '~/packages_and_registries/package_registry/components/details/nuget_installation.vue';
+import {
+  TRACKING_ACTION_COPY_NUGET_INSTALL_COMMAND,
+  TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND,
+  PACKAGE_TYPE_NUGET,
+} from '~/packages_and_registries/package_registry/constants';
 import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_NUGET };
 
 describe('NugetInstallation', () => {
   let wrapper;
 
-  const nugetInstallationCommandStr = 'foo/command';
-  const nugetSetupCommandStr = 'foo/setup';
+  const nugetInstallationCommandStr = 'nuget install @gitlab-org/package-15 -Source "GitLab"';
+  const nugetSetupCommandStr =
+    'nuget source Add -Name "GitLab" -Source "nugetPath" -UserName <your_username> -Password <your_token>';
 
-  const store = new Vuex.Store({
-    state: {
-      packageEntity,
-      nugetPath,
-    },
-    getters: {
-      nugetInstallationCommand: () => nugetInstallationCommandStr,
-      nugetSetupCommand: () => nugetSetupCommandStr,
-    },
-  });
-
-  const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
+  const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
 
   function createComponent() {
-    wrapper = shallowMount(NugetInstallation, {
-      localVue,
-      store,
+    wrapper = shallowMountExtended(NugetInstallation, {
+      provide: {
+        nugetHelpPath: 'nugetHelpPath',
+        nugetPath: 'nugetPath',
+      },
+      propsData: {
+        packageEntity,
+      },
     });
   }
 
@@ -63,7 +59,7 @@ describe('NugetInstallation', () => {
     it('renders the correct command', () => {
       expect(findCodeInstructions().at(0).props()).toMatchObject({
         instruction: nugetInstallationCommandStr,
-        trackingAction: TrackingActions.COPY_NUGET_INSTALL_COMMAND,
+        trackingAction: TRACKING_ACTION_COPY_NUGET_INSTALL_COMMAND,
       });
     });
   });
@@ -72,7 +68,7 @@ describe('NugetInstallation', () => {
     it('renders the correct command', () => {
       expect(findCodeInstructions().at(1).props()).toMatchObject({
         instruction: nugetSetupCommandStr,
-        trackingAction: TrackingActions.COPY_NUGET_SETUP_COMMAND,
+        trackingAction: TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND,
       });
     });
   });

spec/frontend/packages_and_registries/package_registry/components/details/pypi_installation_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import { pypiPackage as packageEntity } from 'jest/packages/mock_data';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { packageData } from 'jest/packages_and_registries/package_registry/mock_data';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
 import PypiInstallation from '~/packages_and_registries/package_registry/components/details/pypi_installation.vue';
+import {
+  PACKAGE_TYPE_PYPI,
+  TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND,
+  TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND,
+} from '~/packages_and_registries/package_registry/constants';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_PYPI };
 
 describe('PypiInstallation', () => {
   let wrapper;
 
-  const pipCommandStr = 'pip install';
-  const pypiSetupStr = 'python setup';
+  const pipCommandStr = 'pip install @gitlab-org/package-15 --extra-index-url pypiPath';
+  const pypiSetupStr = `[gitlab]
+repository = pypiSetupPath
+username = __token__
+password = <your personal access token>`;
 
-  const store = new Vuex.Store({
-    state: {
-      packageEntity,
-      pypiHelpPath: 'foo',
-    },
-    getters: {
-      pypiPipCommand: () => pipCommandStr,
-      pypiSetupCommand: () => pypiSetupStr,
-    },
-  });
-
-  const pipCommand = () => wrapper.find('[data-testid="pip-command"]');
-  const setupInstruction = () => wrapper.find('[data-testid="pypi-setup-content"]');
+  const pipCommand = () => wrapper.findByTestId('pip-command');
+  const setupInstruction = () => wrapper.findByTestId('pypi-setup-content');
 
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
 
   function createComponent() {
-    wrapper = shallowMount(PypiInstallation, {
-      localVue,
-      store,
+    wrapper = shallowMountExtended(PypiInstallation, {
+      provide: {
+        pypiHelpPath: 'pypiHelpPath',
+        pypiPath: 'pypiPath',
+        pypiSetupPath: 'pypiSetupPath',
+      },
+      propsData: {
+        packageEntity,
+      },
     });
   }
 
@@ -60,13 +61,20 @@ describe('PypiInstallation', () => {
 
   describe('installation commands', () => {
     it('renders the correct pip command', () => {
-      expect(pipCommand().props('instruction')).toBe(pipCommandStr);
+      expect(pipCommand().props()).toMatchObject({
+        instruction: pipCommandStr,
+        trackingAction: TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND,
+      });
     });
   });
 
   describe('setup commands', () => {
     it('renders the correct setup block', () => {
-      expect(setupInstruction().props('instruction')).toBe(pypiSetupStr);
+      expect(setupInstruction().props()).toMatchObject({
+        instruction: pypiSetupStr,
+        multiline: true,
+        trackingAction: TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND,
+      });
     });
   });
 });