Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

1 files changed, 43 insertions, 15 deletions

diff --git a/spec/frontend/packages/details/components/npm_installation_spec.js b/spec/frontend/packages/details/components/npm_installation_spec.js
index 09afcd4fd0a..1c49110bdf8 100644
--- a/spec/frontend/packages/details/components/npm_installation_spec.js
+++ b/spec/frontend/packages/details/components/npm_installation_spec.js
@@ -1,4 +1,5 @@
 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';
@@ -14,10 +15,13 @@ localVue.use(Vuex);
 describe('NpmInstallation', () => {
   let wrapper;
 
+  const npmInstallationCommandLabel = 'npm i @Test/package';
+  const yarnInstallationCommandLabel = 'yarn add @Test/package';
+
   const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
 
-  function createComponent() {
+  function createComponent({ data = {} } = {}) {
     const store = new Vuex.Store({
       state: {
         packageEntity,
@@ -32,6 +36,9 @@ describe('NpmInstallation', () => {
     wrapper = shallowMount(NpmInstallation, {
       localVue,
       store,
+      data() {
+        return data;
+      },
     });
   }
 
@@ -52,40 +59,61 @@ describe('NpmInstallation', () => {
       expect(findInstallationTitle().exists()).toBe(true);
       expect(findInstallationTitle().props()).toMatchObject({
         packageType: 'npm',
-        options: [{ value: 'npm', label: 'Show NPM commands' }],
+        options: [
+          { value: 'npm', label: 'Show NPM commands' },
+          { value: 'yarn', label: 'Show Yarn commands' },
+        ],
       });
     });
+
+    it('on change event updates the instructions to show', async () => {
+      createComponent();
+
+      expect(findCodeInstructions().at(0).props('instruction')).toBe(npmInstallationCommandLabel);
+      findInstallationTitle().vm.$emit('change', 'yarn');
+
+      await nextTick();
+
+      expect(findCodeInstructions().at(0).props('instruction')).toBe(yarnInstallationCommandLabel);
+    });
   });
 
-  describe('installation commands', () => {
-    it('renders the correct npm command', () => {
+  describe('npm', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+    it('renders the correct installation command', () => {
       expect(findCodeInstructions().at(0).props()).toMatchObject({
-        instruction: 'npm i @Test/package',
+        instruction: npmInstallationCommandLabel,
         multiline: false,
         trackingAction: TrackingActions.COPY_NPM_INSTALL_COMMAND,
       });
     });
 
-    it('renders the correct yarn command', () => {
+    it('renders the correct setup command', () => {
       expect(findCodeInstructions().at(1).props()).toMatchObject({
-        instruction: 'yarn add @Test/package',
+        instruction: 'echo @Test:registry=undefined/ >> .npmrc',
         multiline: false,
-        trackingAction: TrackingActions.COPY_YARN_INSTALL_COMMAND,
+        trackingAction: TrackingActions.COPY_NPM_SETUP_COMMAND,
       });
     });
   });
 
-  describe('setup commands', () => {
-    it('renders the correct npm command', () => {
-      expect(findCodeInstructions().at(2).props()).toMatchObject({
-        instruction: 'echo @Test:registry=undefined/ >> .npmrc',
+  describe('yarn', () => {
+    beforeEach(() => {
+      createComponent({ data: { instructionType: 'yarn' } });
+    });
+
+    it('renders the correct setup command', () => {
+      expect(findCodeInstructions().at(0).props()).toMatchObject({
+        instruction: yarnInstallationCommandLabel,
         multiline: false,
-        trackingAction: TrackingActions.COPY_NPM_SETUP_COMMAND,
+        trackingAction: TrackingActions.COPY_YARN_INSTALL_COMMAND,
       });
     });
 
-    it('renders the correct yarn command', () => {
-      expect(findCodeInstructions().at(3).props()).toMatchObject({
+    it('renders the correct registry command', () => {
+      expect(findCodeInstructions().at(1).props()).toMatchObject({
         instruction: 'echo \\"@Test:registry\\" \\"undefined/\\" >> .yarnrc',
         multiline: false,
         trackingAction: TrackingActions.COPY_YARN_SETUP_COMMAND,