3 files changed, 137 insertions, 1 deletions
diff --git a/spec/frontend/clusters/clusters_bundle_spec.js b/spec/frontend/clusters/clusters_bundle_spec.js
index 7b1d96c8da5..d7c648bcd20 100644
--- a/spec/frontend/clusters/clusters_bundle_spec.js
+++ b/spec/frontend/clusters/clusters_bundle_spec.js
@@ -46,7 +46,6 @@ describe('Clusters', () => {
   afterEach(() => {
     cluster.destroy();
     mock.restore();
-    jest.clearAllMocks();
   });
 
   describe('class constructor', () => {
diff --git a/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap b/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap
new file mode 100644
index 00000000000..8f406c62824
--- /dev/null
+++ b/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Remove cluster confirmation modal renders splitbutton with modal included 1`] = `
+<div>
+  <div
+    class="dropdown btn-group b-dropdown gl-dropdown"
+  >
+    <button
+      class="btn btn-danger"
+      type="button"
+    >
+      
+    Remove integration and resources
+    
+      <!---->
+    </button>
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="btn dropdown-toggle btn-danger dropdown-toggle-split"
+      type="button"
+    >
+      <span
+        class="sr-only"
+      >
+        Toggle Dropdown
+      </span>
+    </button>
+    <ul
+      class="dropdown-menu dropdown-menu-selectable dropdown-menu-large"
+      role="menu"
+      tabindex="-1"
+    >
+      <li>
+        <button
+          class="dropdown-item is-active"
+          role="menuitem"
+          type="button"
+        >
+          <strong>
+            Remove integration and resources
+          </strong>
+           
+          <div>
+            Deletes all GitLab resources attached to this cluster during removal
+          </div>
+        </button>
+      </li>
+       
+      <li>
+        <hr
+          aria-orientation="horizontal"
+          class="dropdown-divider"
+          role="separator"
+        />
+      </li>
+      <li>
+        <button
+          class="dropdown-item"
+          role="menuitem"
+          type="button"
+        >
+          <strong>
+            Remove integration
+          </strong>
+           
+          <div>
+            Removes cluster from project but keeps associated resources
+          </div>
+        </button>
+      </li>
+       
+      <!---->
+       
+    </ul>
+  </div>
+   
+  <!---->
+</div>
+`;
diff --git a/spec/frontend/clusters/components/remove_cluster_confirmation_spec.js b/spec/frontend/clusters/components/remove_cluster_confirmation_spec.js
new file mode 100644
index 00000000000..b5aead238ad
--- /dev/null
+++ b/spec/frontend/clusters/components/remove_cluster_confirmation_spec.js
@@ -0,0 +1,57 @@
+import { mount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
+import SplitButton from '~/vue_shared/components/split_button.vue';
+import RemoveClusterConfirmation from '~/clusters/components/remove_cluster_confirmation.vue';
+
+describe('Remove cluster confirmation modal', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(RemoveClusterConfirmation, {
+      propsData: {
+        clusterPath: 'clusterPath',
+        clusterName: 'clusterName',
+        ...props,
+      },
+      sync: false,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders splitbutton with modal included', () => {
+    createComponent();
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  describe('split button dropdown', () => {
+    const findModal = () => wrapper.find(GlModal).vm;
+    const findSplitButton = () => wrapper.find(SplitButton).vm;
+
+    beforeEach(() => {
+      createComponent({ clusterName: 'my-test-cluster' });
+      jest.spyOn(findModal(), 'show').mockReturnValue();
+    });
+
+    it('opens modal with "cleanup" option', () => {
+      findSplitButton().$emit('remove-cluster-and-cleanup');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findModal().show).toHaveBeenCalled();
+        expect(wrapper.vm.confirmCleanup).toEqual(true);
+      });
+    });
+
+    it('opens modal without "cleanup" option', () => {
+      findSplitButton().$emit('remove-cluster');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findModal().show).toHaveBeenCalled();
+        expect(wrapper.vm.confirmCleanup).toEqual(false);
+      });
+    });
+  });
+});