1 files changed, 95 insertions, 25 deletions

diff --git a/spec/frontend/packages/details/components/maven_installation_spec.js b/spec/frontend/packages/details/components/maven_installation_spec.js
index dfeb6002186..d49a7c0b561 100644
--- a/spec/frontend/packages/details/components/maven_installation_spec.js
+++ b/spec/frontend/packages/details/components/maven_installation_spec.js
@@ -1,7 +1,9 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { registryUrl as mavenPath } from 'jest/packages/details/mock_data';
 import { mavenPackage as packageEntity } from 'jest/packages/mock_data';
+import InstallationTitle from '~/packages/details/components/installation_title.vue';
 import MavenInstallation from '~/packages/details/components/maven_installation.vue';
 import { TrackingActions } from '~/packages/details/constants';
 import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
@@ -15,6 +17,8 @@ describe('MavenInstallation', () => {
   const xmlCodeBlock = 'foo/xml';
   const mavenCommandStr = 'foo/command';
   const mavenSetupXml = 'foo/setup';
+  const gradleGroovyInstallCommandText = 'foo/gradle/install';
+  const gradleGroovyAddSourceCommandText = 'foo/gradle/add/source';
 
   const store = new Vuex.Store({
     state: {
@@ -25,54 +29,120 @@ describe('MavenInstallation', () => {
       mavenInstallationXml: () => xmlCodeBlock,
       mavenInstallationCommand: () => mavenCommandStr,
       mavenSetupXml: () => mavenSetupXml,
+      gradleGroovyInstalCommand: () => gradleGroovyInstallCommandText,
+      gradleGroovyAddSourceCommand: () => gradleGroovyAddSourceCommandText,
     },
   });
 
   const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
+  const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
 
-  function createComponent() {
+  function createComponent({ data = {} } = {}) {
     wrapper = shallowMount(MavenInstallation, {
       localVue,
       store,
+      data() {
+        return data;
+      },
     });
   }
 
-  beforeEach(() => {
-    createComponent();
-  });
-
   afterEach(() => {
-    if (wrapper) wrapper.destroy();
+    wrapper.destroy();
   });
 
-  it('renders all the messages', () => {
-    expect(wrapper.element).toMatchSnapshot();
+  describe('install command switch', () => {
+    it('has the installation title component', () => {
+      createComponent();
+
+      expect(findInstallationTitle().exists()).toBe(true);
+      expect(findInstallationTitle().props()).toMatchObject({
+        packageType: 'maven',
+        options: [
+          { value: 'maven', label: 'Show Maven commands' },
+          { value: 'groovy', label: 'Show Gradle Groovy DSL commands' },
+        ],
+      });
+    });
+
+    it('on change event updates the instructions to show', async () => {
+      createComponent();
+
+      expect(findCodeInstructions().at(0).props('instruction')).toBe(xmlCodeBlock);
+      findInstallationTitle().vm.$emit('change', 'groovy');
+
+      await nextTick();
+
+      expect(findCodeInstructions().at(0).props('instruction')).toBe(
+        gradleGroovyInstallCommandText,
+      );
+    });
   });
 
-  describe('installation commands', () => {
-    it('renders the correct xml block', () => {
-      expect(findCodeInstructions().at(0).props()).toMatchObject({
-        instruction: xmlCodeBlock,
-        multiline: true,
-        trackingAction: TrackingActions.COPY_MAVEN_XML,
+  describe('maven', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders all the messages', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    describe('installation commands', () => {
+      it('renders the correct xml block', () => {
+        expect(findCodeInstructions().at(0).props()).toMatchObject({
+          instruction: xmlCodeBlock,
+          multiline: true,
+          trackingAction: TrackingActions.COPY_MAVEN_XML,
+        });
+      });
+
+      it('renders the correct maven command', () => {
+        expect(findCodeInstructions().at(1).props()).toMatchObject({
+          instruction: mavenCommandStr,
+          multiline: false,
+          trackingAction: TrackingActions.COPY_MAVEN_COMMAND,
+        });
       });
     });
 
-    it('renders the correct maven command', () => {
-      expect(findCodeInstructions().at(1).props()).toMatchObject({
-        instruction: mavenCommandStr,
-        multiline: false,
-        trackingAction: TrackingActions.COPY_MAVEN_COMMAND,
+    describe('setup commands', () => {
+      it('renders the correct xml block', () => {
+        expect(findCodeInstructions().at(2).props()).toMatchObject({
+          instruction: mavenSetupXml,
+          multiline: true,
+          trackingAction: TrackingActions.COPY_MAVEN_SETUP,
+        });
       });
     });
   });
 
-  describe('setup commands', () => {
-    it('renders the correct xml block', () => {
-      expect(findCodeInstructions().at(2).props()).toMatchObject({
-        instruction: mavenSetupXml,
-        multiline: true,
-        trackingAction: TrackingActions.COPY_MAVEN_SETUP,
+  describe('gradle', () => {
+    beforeEach(() => {
+      createComponent({ data: { instructionType: 'gradle' } });
+    });
+
+    it('renders all the messages', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    describe('installation commands', () => {
+      it('renders the gradle install command', () => {
+        expect(findCodeInstructions().at(0).props()).toMatchObject({
+          instruction: gradleGroovyInstallCommandText,
+          multiline: false,
+          trackingAction: TrackingActions.COPY_GRADLE_INSTALL_COMMAND,
+        });
+      });
+    });
+
+    describe('setup commands', () => {
+      it('renders the correct gradle command', () => {
+        expect(findCodeInstructions().at(1).props()).toMatchObject({
+          instruction: gradleGroovyAddSourceCommandText,
+          multiline: true,
+          trackingAction: TrackingActions.COPY_GRADLE_ADD_TO_SOURCE_COMMAND,
+        });
       });
     });
   });