1 files changed, 40 insertions, 16 deletions
diff --git a/spec/frontend/packages/details/components/composer_installation_spec.js b/spec/frontend/packages/details/components/composer_installation_spec.js
index c13981fbb87..b44609e8ae7 100644
--- a/spec/frontend/packages/details/components/composer_installation_spec.js
+++ b/spec/frontend/packages/details/components/composer_installation_spec.js
@@ -12,21 +12,23 @@ localVue.use(Vuex);
 
 describe('ComposerInstallation', () => {
   let wrapper;
+  let store;
 
   const composerRegistryIncludeStr = 'foo/registry';
   const composerPackageIncludeStr = 'foo/package';
 
-  const store = new Vuex.Store({
-    state: {
-      packageEntity,
-      composerHelpPath,
-    },
-    getters: {
-      composerRegistryInclude: () => composerRegistryIncludeStr,
-      composerPackageInclude: () => composerPackageIncludeStr,
-    },
-  });
+  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"]');
@@ -42,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);
@@ -62,11 +65,16 @@ describe('ComposerInstallation', () => {
     });
 
     it('has the correct title', () => {
-      expect(findRegistryInclude().props('label')).toBe('composer.json registry include');
+      expect(findRegistryInclude().props('label')).toBe('Add composer registry');
     });
   });
 
   describe('package include command', () => {
+    beforeEach(() => {
+      createStore();
+      createComponent();
+    });
+
     it('uses code_instructions', () => {
       const registryIncludeCommand = findPackageInclude();
       expect(registryIncludeCommand.exists()).toBe(true);
@@ -78,7 +86,7 @@ describe('ComposerInstallation', () => {
     });
 
     it('has the correct title', () => {
-      expect(findPackageInclude().props('label')).toBe('composer.json require package include');
+      expect(findPackageInclude().props('label')).toBe('Install package version');
     });
 
     it('has the correct help text', () => {
@@ -91,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);
+    });
+  });
 });