Changes after Frontend and UX review:

- Moves toggle button to a shared location
- Adds tests for toggle button
- Transforms Clusters class into function
- Improves UX

2 files changed, 96 insertions, 9 deletions

diff --git a/spec/javascripts/clusters/clusters_index_spec.js b/spec/javascripts/clusters/clusters_index_spec.js
index b8d082208a5..3142d384a38 100644
--- a/spec/javascripts/clusters/clusters_index_spec.js
+++ b/spec/javascripts/clusters/clusters_index_spec.js
@@ -1,6 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import ClusterTable from '~/clusters/clusters_index';
+import setClusterTableToggles from '~/clusters/clusters_index';
 import { setTimeout } from 'core-js/library/web/timers';
 
 describe('Clusters table', () => {
@@ -10,21 +10,17 @@ describe('Clusters table', () => {
   beforeEach(() => {
     loadFixtures('clusters/index_cluster.html.raw');
     mock = new MockAdapter(axios);
-    return new ClusterTable();
+    setClusterTableToggles();
   });
 
   describe('update cluster', () => {
-    it('renders a toggle button', () => {
-      expect(document.querySelector('.js-toggle-cluster-list')).not.toBeNull();
-    });
-
     it('renders loading state while request is made', () => {
       const button = document.querySelector('.js-toggle-cluster-list');
 
       button.click();
 
       expect(button.classList).toContain('is-loading');
-      expect(button.classList).toContain('disabled');
+      expect(button.classList).toContain('is-disabled');
     });
 
     afterEach(() => {
@@ -40,7 +36,7 @@ describe('Clusters table', () => {
 
       setTimeout(() => {
         expect(button.classList).not.toContain('is-loading');
-        expect(button.classList).not.toContain('checked');
+        expect(button.classList).not.toContain('is-checked');
         done();
       }, 0);
     });
@@ -54,7 +50,7 @@ describe('Clusters table', () => {
 
       setTimeout(() => {
         expect(button.classList).not.toContain('is-loading');
-        expect(button.classList).toContain('checked');
+        expect(button.classList).toContain('is-checked');
         done();
       }, 0);
     });
diff --git a/spec/javascripts/vue_shared/components/toggle_button_spec.js b/spec/javascripts/vue_shared/components/toggle_button_spec.js
new file mode 100644
index 00000000000..447d74d4e08
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/toggle_button_spec.js
@@ -0,0 +1,91 @@
+import Vue from 'vue';
+import toggleButton from '~/vue_shared/components/toggle_button.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Toggle Button', () => {
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(toggleButton);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('render output', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        value: true,
+        name: 'foo',
+      });
+    });
+
+    it('renders input with provided name', () => {
+      expect(vm.$el.querySelector('input').getAttribute('name')).toEqual('foo');
+    });
+
+    it('renders input with provided value', () => {
+      expect(vm.$el.querySelector('input').getAttribute('value')).toEqual('true');
+    });
+
+    it('renders Enabled and Disabled text data attributes', () => {
+      expect(vm.$el.querySelector('button').getAttribute('data-enabled-text')).toEqual('Enabled');
+      expect(vm.$el.querySelector('button').getAttribute('data-disabled-text')).toEqual('Disabled');
+    });
+  });
+
+  describe('is-checked', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        value: true,
+      });
+
+      spyOn(vm, '$emit');
+    });
+
+    it('renders is checked class', () => {
+      expect(vm.$el.querySelector('button').classList.contains('is-checked')).toEqual(true);
+    });
+
+    it('emits change event when clicked', () => {
+      vm.$el.querySelector('button').click();
+
+      expect(vm.$emit).toHaveBeenCalledWith('change', false);
+    });
+  });
+
+  describe('is-disabled', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        value: true,
+        disabledInput: true,
+      });
+      spyOn(vm, '$emit');
+    });
+
+    it('renders disabled button', () => {
+      expect(vm.$el.querySelector('button').classList.contains('is-disabled')).toEqual(true);
+    });
+
+    it('does not emit change event when clicked', () => {
+      vm.$el.querySelector('button').click();
+
+      expect(vm.$emit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('is-loading', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        value: true,
+        isLoading: true,
+      });
+    });
+
+    it('renders loading class', () => {
+      expect(vm.$el.querySelector('button').classList.contains('is-loading')).toEqual(true);
+    });
+  });
+});