Handle toggle button with API request

Add tests
Update empty state
[ci skip]

2 files changed, 44 insertions, 3 deletions

diff --git a/spec/javascripts/clusters/clusters_index_spec.js b/spec/javascripts/clusters/clusters_index_spec.js
index 8798f5c37f0..f0bc936a7d3 100644
--- a/spec/javascripts/clusters/clusters_index_spec.js
+++ b/spec/javascripts/clusters/clusters_index_spec.js
@@ -1,10 +1,17 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import ClusterTable from '~/clusters/clusters_index';
+import { setTimeout } from 'core-js/library/web/timers';
 
 describe('Clusters table', () => {
+  preloadFixtures('clusters/index_cluster.html.raw');
   let ClustersClass;
+  let mock;
 
   beforeEach(() => {
+    loadFixtures('clusters/index_cluster.html.raw');
     ClustersClass = new ClusterTable();
+    mock = new MockAdapter(axios);
   });
 
   afterEach(() => {
@@ -13,19 +20,44 @@ describe('Clusters table', () => {
 
   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');
+    });
 
+    afterEach(() => {
+      mock.restore();
     });
 
-    it('shows updated state after sucessfull request', () => {
+    it('shows updated state after sucessfull request', (done) => {
+      mock.onPut().reply(200, {}, {});
+      const button = document.querySelector('.js-toggle-cluster-list');
+
+      button.click();
 
+      setTimeout(() => {
+        expect(button.classList).toContain('is-loading');
+        done();
+      }, 0);
     });
 
-    it('shows inital state after failed request', () => {
+    it('shows inital state after failed request', (done) => {
+      mock.onPut().reply(500, {}, {});
+      const button = document.querySelector('.js-toggle-cluster-list');
+
+      button.click();
 
+      setTimeout(() => {
+        expect(button.classList).toContain('is-loading');
+        done();
+      }, 0);
     });
   });
 });
diff --git a/spec/javascripts/fixtures/clusters.rb b/spec/javascripts/fixtures/clusters.rb
index 8e74c4f859c..ea1b5d90f9f 100644
--- a/spec/javascripts/fixtures/clusters.rb
+++ b/spec/javascripts/fixtures/clusters.rb
@@ -31,4 +31,13 @@ describe Projects::ClustersController, '(JavaScript fixtures)', type: :controlle
     expect(response).to be_success
     store_frontend_fixture(response, example.description)
   end
+
+  it 'clusters/index_cluster.html.raw' do |example|
+    get :index,
+      namespace_id: project.namespace.to_param,
+      project_id: project
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
 end