1 files changed, 97 insertions, 25 deletions

diff --git a/spec/frontend/clusters_list/components/clusters_actions_spec.js b/spec/frontend/clusters_list/components/clusters_actions_spec.js
index 331690fc642..312df12ab5f 100644
--- a/spec/frontend/clusters_list/components/clusters_actions_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_actions_spec.js
@@ -1,4 +1,4 @@
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ClustersActions from '~/clusters_list/components/clusters_actions.vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
@@ -14,13 +14,18 @@ describe('ClustersActionsComponent', () => {
     newClusterPath,
     addClusterPath,
     canAddCluster: true,
+    displayClusterAgents: true,
+    certificateBasedClustersEnabled: true,
   };
 
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findDropdownItemIds = () =>
+    findDropdownItems().wrappers.map((x) => x.attributes('data-testid'));
   const findNewClusterLink = () => wrapper.findByTestId('new-cluster-link');
   const findConnectClusterLink = () => wrapper.findByTestId('connect-cluster-link');
   const findConnectNewAgentLink = () => wrapper.findByTestId('connect-new-agent-link');
+  const findConnectWithAgentButton = () => wrapper.findComponent(GlButton);
 
   const createWrapper = (provideData = {}) => {
     wrapper = shallowMountExtended(ClustersActions, {
@@ -42,43 +47,110 @@ describe('ClustersActionsComponent', () => {
   afterEach(() => {
     wrapper.destroy();
   });
+  describe('when the certificate based clusters are enabled', () => {
+    it('renders actions menu', () => {
+      expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.actionsButton);
+    });
 
-  it('renders actions menu', () => {
-    expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.actionsButton);
-  });
+    it('renders correct href attributes for the links', () => {
+      expect(findNewClusterLink().attributes('href')).toBe(newClusterPath);
+      expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath);
+    });
 
-  it('renders a dropdown with 3 actions items', () => {
-    expect(findDropdownItems()).toHaveLength(3);
-  });
+    describe('when user cannot add clusters', () => {
+      beforeEach(() => {
+        createWrapper({ canAddCluster: false });
+      });
 
-  it('renders correct href attributes for the links', () => {
-    expect(findNewClusterLink().attributes('href')).toBe(newClusterPath);
-    expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath);
-  });
+      it('disables dropdown', () => {
+        expect(findDropdown().props('disabled')).toBe(true);
+      });
 
-  it('renders correct modal id for the agent link', () => {
-    const binding = getBinding(findConnectNewAgentLink().element, 'gl-modal-directive');
+      it('shows tooltip explaining why dropdown is disabled', () => {
+        const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
+        expect(tooltip.value).toBe(CLUSTERS_ACTIONS.dropdownDisabledHint);
+      });
 
-    expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
-  });
+      it('does not bind split dropdown button', () => {
+        const binding = getBinding(findDropdown().element, 'gl-modal-directive');
+
+        expect(binding.value).toBe(false);
+      });
+    });
+
+    describe('when on project level', () => {
+      it('renders a dropdown with 3 actions items', () => {
+        expect(findDropdownItemIds()).toEqual([
+          'connect-new-agent-link',
+          'new-cluster-link',
+          'connect-cluster-link',
+        ]);
+      });
+
+      it('renders correct modal id for the agent link', () => {
+        const binding = getBinding(findConnectNewAgentLink().element, 'gl-modal-directive');
+
+        expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+      });
 
-  it('shows tooltip', () => {
-    const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
-    expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectWithAgent);
+      it('shows tooltip', () => {
+        const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
+        expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectWithAgent);
+      });
+
+      it('shows split button in dropdown', () => {
+        expect(findDropdown().props('split')).toBe(true);
+      });
+
+      it('binds split button with modal id', () => {
+        const binding = getBinding(findDropdown().element, 'gl-modal-directive');
+
+        expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID);
+      });
+    });
+
+    describe('when on group or admin level', () => {
+      beforeEach(() => {
+        createWrapper({ displayClusterAgents: false });
+      });
+
+      it('renders a dropdown with 2 actions items', () => {
+        expect(findDropdownItemIds()).toEqual(['new-cluster-link', 'connect-cluster-link']);
+      });
+
+      it('shows tooltip', () => {
+        const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
+        expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectExistingCluster);
+      });
+
+      it('does not show split button in dropdown', () => {
+        expect(findDropdown().props('split')).toBe(false);
+      });
+
+      it('does not bind dropdown button to modal', () => {
+        const binding = getBinding(findDropdown().element, 'gl-modal-directive');
+
+        expect(binding.value).toBe(false);
+      });
+    });
   });
 
-  describe('when user cannot add clusters', () => {
+  describe('when the certificate based clusters not enabled', () => {
     beforeEach(() => {
-      createWrapper({ canAddCluster: false });
+      createWrapper({ certificateBasedClustersEnabled: false });
     });
 
-    it('disables dropdown', () => {
-      expect(findDropdown().props('disabled')).toBe(true);
+    it('it does not show the the dropdown', () => {
+      expect(findDropdown().exists()).toBe(false);
     });
 
-    it('shows tooltip explaining why dropdown is disabled', () => {
-      const tooltip = getBinding(findDropdown().element, 'gl-tooltip');
-      expect(tooltip.value).toBe(CLUSTERS_ACTIONS.dropdownDisabledHint);
+    it('shows the connect with agent button', () => {
+      expect(findConnectWithAgentButton().props()).toMatchObject({
+        disabled: !defaultProvide.canAddCluster,
+        category: 'primary',
+        variant: 'confirm',
+      });
+      expect(findConnectWithAgentButton().text()).toBe(CLUSTERS_ACTIONS.connectWithAgent);
     });
   });
 });