Merge remote-tracking branch 'origin/list-multiple-clusters' into cluster-page-with-list-clusters

2 files changed, 59 insertions, 1 deletions

diff --git a/spec/javascripts/clusters/clusters_bundle_spec.js b/spec/javascripts/clusters/clusters_bundle_spec.js
index 6d6e71cc215..f5be9ea0fb2 100644
--- a/spec/javascripts/clusters/clusters_bundle_spec.js
+++ b/spec/javascripts/clusters/clusters_bundle_spec.js
@@ -28,7 +28,7 @@ describe('Clusters', () => {
 
       expect(
         cluster.toggleButton.classList,
-      ).not.toContain('checked');
+      ).not.toContain('is-checked');
 
       expect(
         cluster.toggleInput.getAttribute('value'),
diff --git a/spec/javascripts/clusters/clusters_index_spec.js b/spec/javascripts/clusters/clusters_index_spec.js
new file mode 100644
index 00000000000..0a8b63ed5b4
--- /dev/null
+++ b/spec/javascripts/clusters/clusters_index_spec.js
@@ -0,0 +1,58 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import setClusterTableToggles from '~/clusters/clusters_index';
+import { setTimeout } from 'core-js/library/web/timers';
+
+describe('Clusters table', () => {
+  preloadFixtures('clusters/index_cluster.html.raw');
+  let mock;
+
+  beforeEach(() => {
+    loadFixtures('clusters/index_cluster.html.raw');
+    mock = new MockAdapter(axios);
+    setClusterTableToggles();
+  });
+
+  describe('update cluster', () => {
+    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.getAttribute('disabled')).toEqual('true');
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    it('shows updated state after sucessfull request', (done) => {
+      mock.onPut().reply(200, {}, {});
+      const button = document.querySelector('.js-toggle-cluster-list');
+      button.click();
+
+      expect(button.classList).toContain('is-loading');
+
+      setTimeout(() => {
+        expect(button.classList).not.toContain('is-loading');
+        expect(button.classList).not.toContain('is-checked');
+        done();
+      }, 0);
+    });
+
+    it('shows inital state after failed request', (done) => {
+      mock.onPut().reply(500, {}, {});
+      const button = document.querySelector('.js-toggle-cluster-list');
+
+      button.click();
+      expect(button.classList).toContain('is-loading');
+
+      setTimeout(() => {
+        expect(button.classList).not.toContain('is-loading');
+        expect(button.classList).toContain('is-checked');
+        done();
+      }, 0);
+    });
+  });
+});