Add unit test for group in composer install command

app/assets/javascripts/packages/details/components/composer_installation.vue

@@ -31,34 +31,32 @@ export default {
 </script>
 
 <template>
-  <div>
-    <div v-if="groupExists">
-      <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
+  <div v-if="groupExists" data-testid="root-node">
+    <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
 
-      <code-instruction
-        :label="$options.i18n.registryInclude"
-        :instruction="composerRegistryInclude"
-        :copy-text="$options.i18n.copyRegistryInclude"
-        :tracking-action="$options.trackingActions.COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND"
-        :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
-        data-testid="registry-include"
-      />
+    <code-instruction
+      :label="$options.i18n.registryInclude"
+      :instruction="composerRegistryInclude"
+      :copy-text="$options.i18n.copyRegistryInclude"
+      :tracking-action="$options.trackingActions.COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+      data-testid="registry-include"
+    />
 
-      <code-instruction
-        :label="$options.i18n.packageInclude"
-        :instruction="composerPackageInclude"
-        :copy-text="$options.i18n.copyPackageInclude"
-        :tracking-action="$options.trackingActions.COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND"
-        :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
-        data-testid="package-include"
-      />
-      <span data-testid="help-text">
-        <gl-sprintf :message="$options.i18n.infoLine">
-          <template #link="{ content }">
-            <gl-link :href="composerHelpPath" target="_blank">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </span>
-    </div>
+    <code-instruction
+      :label="$options.i18n.packageInclude"
+      :instruction="composerPackageInclude"
+      :copy-text="$options.i18n.copyPackageInclude"
+      :tracking-action="$options.trackingActions.COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+      data-testid="package-include"
+    />
+    <span data-testid="help-text">
+      <gl-sprintf :message="$options.i18n.infoLine">
+        <template #link="{ content }">
+          <gl-link :href="composerHelpPath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </span>
   </div>
 </template>

spec/frontend/packages/details/components/composer_installation_spec.js

@@ -12,24 +12,23 @@ localVue.use(Vuex);
 
 describe('ComposerInstallation', () => {
   let wrapper;
+  let store;
 
   const composerRegistryIncludeStr = 'foo/registry';
   const composerPackageIncludeStr = 'foo/package';
-  const groupExists = true;
-
-  const store = new Vuex.Store({
-    state: {
-      packageEntity,
-      composerHelpPath,
-      groupExists,
-    },
-    getters: {
-      composerRegistryInclude: () => composerRegistryIncludeStr,
-      composerPackageInclude: () => composerPackageIncludeStr,
-      groupExists: () => groupExists,
-    },
-  });
 
+  const createStore = (groupExists = true) => {
+    store = new Vuex.Store({
+      state: { packageEntity, composerHelpPath },
+      getters: {
+        composerRegistryInclude: () => composerRegistryIncludeStr,
+        composerPackageInclude: () => composerPackageIncludeStr,
+        groupExists: () => groupExists,
+      },
+    });
+  };
+
+  const findRootNode = () => wrapper.find('[data-testid="root-node"]');
   const findRegistryInclude = () => wrapper.find('[data-testid="registry-include"]');
   const findPackageInclude = () => wrapper.find('[data-testid="package-include"]');
   const findHelpText = () => wrapper.find('[data-testid="help-text"]');
@@ -45,15 +44,16 @@ describe('ComposerInstallation', () => {
     });
   }
 
-  beforeEach(() => {
-    createComponent();
-  });
-
   afterEach(() => {
     wrapper.destroy();
   });
 
   describe('registry include command', () => {
+    beforeEach(() => {
+      createStore();
+      createComponent();
+    });
+
     it('uses code_instructions', () => {
       const registryIncludeCommand = findRegistryInclude();
       expect(registryIncludeCommand.exists()).toBe(true);
@@ -70,6 +70,11 @@ describe('ComposerInstallation', () => {
   });
 
   describe('package include command', () => {
+    beforeEach(() => {
+      createStore();
+      createComponent();
+    });
+
     it('uses code_instructions', () => {
       const registryIncludeCommand = findPackageInclude();
       expect(registryIncludeCommand.exists()).toBe(true);
@@ -94,4 +99,20 @@ describe('ComposerInstallation', () => {
       });
     });
   });
+
+  describe('root node', () => {
+    it('is normally rendered', () => {
+      createStore();
+      createComponent();
+
+      expect(findRootNode().exists()).toBe(true);
+    });
+
+    it('is not rendered when the group does not exist', () => {
+      createStore(false);
+      createComponent();
+
+      expect(findRootNode().exists()).toBe(false);
+    });
+  });
 });