Generalize toggle_buttons.jsgeneralize-js-toggle-buttons-using-vue-component

Part of https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/4110

7 files changed, 131 insertions, 86 deletions

diff --git a/spec/features/projects/clusters/gcp_spec.rb b/spec/features/projects/clusters/gcp_spec.rb
index 8953b30bebf..94bde723e2f 100644
--- a/spec/features/projects/clusters/gcp_spec.rb
+++ b/spec/features/projects/clusters/gcp_spec.rb
@@ -95,7 +95,7 @@ feature 'Gcp Cluster', :js do
 
         context 'when user disables the cluster' do
           before do
-            page.find(:css, '.js-toggle-cluster').click
+            page.find(:css, '.js-cluster-enable-toggle-area .js-project-feature-toggle').click
             page.within('#cluster-integration') { click_button 'Save changes' }
           end
 
diff --git a/spec/features/projects/clusters/user_spec.rb b/spec/features/projects/clusters/user_spec.rb
index a519b9f9c7e..b9ab434c259 100644
--- a/spec/features/projects/clusters/user_spec.rb
+++ b/spec/features/projects/clusters/user_spec.rb
@@ -62,7 +62,7 @@ feature 'User Cluster', :js do
 
     context 'when user disables the cluster' do
       before do
-        page.find(:css, '.js-toggle-cluster').click
+        page.find(:css, '.js-cluster-enable-toggle-area .js-project-feature-toggle').click
         fill_in 'cluster_name', with: 'dev-cluster'
         page.within('#cluster-integration') { click_button 'Save changes' }
       end
diff --git a/spec/features/projects/clusters_spec.rb b/spec/features/projects/clusters_spec.rb
index eae2910a8f6..497a50bebe4 100644
--- a/spec/features/projects/clusters_spec.rb
+++ b/spec/features/projects/clusters_spec.rb
@@ -37,13 +37,13 @@ feature 'Clusters', :js do
 
     context 'inline update of cluster' do
       it 'user can update cluster' do
-        expect(page).to have_selector('.js-toggle-cluster-list')
+        expect(page).to have_selector('.js-project-feature-toggle')
       end
 
       context 'with sucessfull request' do
         it 'user sees updated cluster' do
           expect do
-            page.find('.js-toggle-cluster-list').click
+            page.find('.js-project-feature-toggle').click
             wait_for_requests
           end.to change { cluster.reload.enabled }
 
@@ -57,7 +57,7 @@ feature 'Clusters', :js do
           expect_any_instance_of(Clusters::UpdateService).to receive(:execute).and_call_original
           allow_any_instance_of(Clusters::Cluster).to receive(:valid?) { false }
 
-          page.find('.js-toggle-cluster-list').click
+          page.find('.js-project-feature-toggle').click
 
           expect(page).to have_content('Something went wrong on our end.')
           expect(page).to have_selector('.is-checked')
diff --git a/spec/javascripts/clusters/clusters_bundle_spec.js b/spec/javascripts/clusters/clusters_bundle_spec.js
index f5be9ea0fb2..7b38f6b7855 100644
--- a/spec/javascripts/clusters/clusters_bundle_spec.js
+++ b/spec/javascripts/clusters/clusters_bundle_spec.js
@@ -23,16 +23,24 @@ describe('Clusters', () => {
   });
 
   describe('toggle', () => {
-    it('should update the button and the input field on click', () => {
-      cluster.toggleButton.click();
+    it('should update the button and the input field on click', (done) => {
+      const toggleButton = document.querySelector('.js-cluster-enable-toggle-area .js-project-feature-toggle');
+      const toggleInput = document.querySelector('.js-cluster-enable-toggle-area .js-project-feature-toggle-input');
 
-      expect(
-        cluster.toggleButton.classList,
-      ).not.toContain('is-checked');
+      toggleButton.click();
 
-      expect(
-        cluster.toggleInput.getAttribute('value'),
-      ).toEqual('false');
+      getSetTimeoutPromise()
+        .then(() => {
+          expect(
+            toggleButton.classList,
+          ).not.toContain('is-checked');
+
+          expect(
+            toggleInput.getAttribute('value'),
+          ).toEqual('false');
+        })
+        .then(done)
+        .catch(done.fail);
     });
   });
 
diff --git a/spec/javascripts/clusters/clusters_index_spec.js b/spec/javascripts/clusters/clusters_index_spec.js
deleted file mode 100644
index 0a8b63ed5b4..00000000000
--- a/spec/javascripts/clusters/clusters_index_spec.js
+++ /dev/null
@@ -1,58 +0,0 @@
-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);
-    });
-  });
-});
diff --git a/spec/javascripts/fixtures/clusters.rb b/spec/javascripts/fixtures/clusters.rb
index d26ea3febe8..8e74c4f859c 100644
--- a/spec/javascripts/fixtures/clusters.rb
+++ b/spec/javascripts/fixtures/clusters.rb
@@ -31,19 +31,4 @@ describe Projects::ClustersController, '(JavaScript fixtures)', type: :controlle
     expect(response).to be_success
     store_frontend_fixture(response, example.description)
   end
-
-  context 'rendering non-empty state' do
-    before do
-      cluster
-    end
-
-    it 'clusters/index_cluster.html.raw' do |example|
-      get :index,
-        namespace_id: namespace,
-        project_id: project
-
-      expect(response).to be_success
-      store_frontend_fixture(response, example.description)
-    end
-  end
 end
diff --git a/spec/javascripts/toggle_button_spec.js b/spec/javascripts/toggle_button_spec.js
new file mode 100644
index 00000000000..76e89055c89
--- /dev/null
+++ b/spec/javascripts/toggle_button_spec.js
@@ -0,0 +1,110 @@
+import Vue from 'vue';
+import ToggleButton from '~/toggle_button';
+import getSetTimeoutPromise from './helpers/set_timeout_promise_helper';
+
+function generateMarkup(isChecked = true) {
+  return `
+    <input type="hidden" class="js-project-feature-toggle" name="some-feature" value="${isChecked}" />
+  `;
+}
+
+function setupFixture(isChecked, clickCallback) {
+  const wrapper = document.createElement('div');
+  wrapper.innerHTML = generateMarkup(isChecked);
+
+  const toggleButton = new ToggleButton(wrapper.querySelector('.js-project-feature-toggle'), clickCallback);
+  toggleButton.init();
+
+  return wrapper;
+}
+
+describe('ToggleButtons', () => {
+  describe('when input value is true', () => {
+    it('should initialize as checked', () => {
+      const wrapper = setupFixture(true);
+
+      expect(wrapper.querySelector('button').classList.contains('is-checked')).toEqual(true);
+      expect(wrapper.querySelector('input').value).toEqual('true');
+    });
+
+    it('should toggle to unchecked when clicked', (done) => {
+      const wrapper = setupFixture(true);
+      const toggleButton = wrapper.querySelector('button');
+
+      toggleButton.click();
+
+      getSetTimeoutPromise()
+        .then(() => {
+          expect(toggleButton.classList.contains('is-checked')).toEqual(false);
+          expect(wrapper.querySelector('input').value).toEqual('false');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('when input value is false', () => {
+    it('should initialize as unchecked', () => {
+      const wrapper = setupFixture(false);
+
+      expect(wrapper.querySelector('button').classList.contains('is-checked')).toEqual(false);
+      expect(wrapper.querySelector('input').value).toEqual('false');
+    });
+
+    it('should toggle to checked when clicked', (done) => {
+      const wrapper = setupFixture(false);
+      const toggleButton = wrapper.querySelector('button');
+
+      toggleButton.click();
+
+      getSetTimeoutPromise()
+        .then(() => {
+          expect(toggleButton.classList.contains('is-checked')).toEqual(true);
+          expect(wrapper.querySelector('input').value).toEqual('true');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('clickCallback option', () => {
+    it('should show loading indicator while waiting', (done) => {
+      let wrapper;
+      const isChecked = true;
+      const clickCallback = (newValue) => {
+        const toggleButton = wrapper.querySelector('button');
+        const input = wrapper.querySelector('input');
+
+        expect(newValue).toEqual(false);
+
+        const firstExpectationsPromise = Vue.nextTick()
+          .then(() => {
+            // Check for the loading state
+            expect(toggleButton.classList.contains('is-checked')).toEqual(false);
+            expect(toggleButton.classList.contains('is-loading')).toEqual(true);
+            expect(toggleButton.disabled).toEqual(true);
+            expect(input.value).toEqual('false');
+          });
+
+        // After the callback finishes, check that the loading state is gone
+        firstExpectationsPromise
+          .then(Vue.nextTick)
+          .then(() => {
+            expect(toggleButton.classList.contains('is-checked')).toEqual(false);
+            expect(toggleButton.classList.contains('is-loading')).toEqual(false);
+            expect(toggleButton.disabled).toEqual(false);
+            expect(input.value).toEqual('false');
+          })
+          .then(done)
+          .catch(done.fail);
+
+        return firstExpectationsPromise;
+      };
+
+      wrapper = setupFixture(isChecked, clickCallback);
+      const toggleButton = wrapper.querySelector('button');
+
+      toggleButton.click();
+    });
+  });
+});