Adds Frontend specs

4 files changed, 118 insertions, 11 deletions

diff --git a/app/assets/javascripts/clusters.js b/app/assets/javascripts/clusters.js
index 5a381a5322a..8bd4de92e6f 100644
--- a/app/assets/javascripts/clusters.js
+++ b/app/assets/javascripts/clusters.js
@@ -11,7 +11,6 @@ import './flash';
  *
  * - Polling status while creating or scheduled
  * -- Update status area with the response result
- *
  */
 
 class ClusterService {
@@ -23,7 +22,7 @@ class ClusterService {
   }
 }
 
-export default class ClusterEdit {
+export default class Clusters {
   constructor() {
     const dataset = document.querySelector('.js-edit-cluster-form').dataset;
 
@@ -54,12 +53,7 @@ export default class ClusterEdit {
 
   toggle() {
     this.toggleButton.classList.toggle('checked');
-    this.state.toggleStatus = this.toggleButton.classList.contains('checked').toString();
-    this.toggleInput.setAttribute('value', this.state.toggleStatus);
-  }
-
-  updateData() {
-    this.service.updateData(this.state.toggleStatus);
+    this.toggleInput.setAttribute('value', this.toggleButton.classList.contains('checked').toString());
   }
 
   initPoling() {
@@ -104,7 +98,7 @@ export default class ClusterEdit {
         break;
       case 'errored':
         this.errorContainer.classList.remove('hidden');
-        this.errorContainer.querySelector('.js-error-reason').textContent = error.status_reason;
+        this.errorContainer.querySelector('.js-error-reason').textContent = error;
         break;
       case 'scheduled':
       case 'creating':
@@ -114,5 +108,4 @@ export default class ClusterEdit {
         this.hideAll();
     }
   }
-
 }
diff --git a/app/views/projects/clusters/show.html.haml b/app/views/projects/clusters/show.html.haml
index 9746df76365..f160ce98b55 100644
--- a/app/views/projects/clusters/show.html.haml
+++ b/app/views/projects/clusters/show.html.haml
@@ -41,7 +41,7 @@
 
       .hidden.js-cluster-error.alert.alert-danger{ role: 'alert' }
         = s_('ClusterIntegration|Something went wrong while creating your cluster on Google Container Engine.')
-        %code.js-error-reason
+        %p.js-error-reason
 
       .hidden.js-cluster-creating.alert.alert-info{ role: 'alert' }
         = s_('ClusterIntegration|Cluster is being created on Google Container Engine...')
diff --git a/spec/javascripts/clusters_spec.js b/spec/javascripts/clusters_spec.js
new file mode 100644
index 00000000000..2ceb0cfdf4c
--- /dev/null
+++ b/spec/javascripts/clusters_spec.js
@@ -0,0 +1,79 @@
+import Clusters from '~/clusters';
+
+describe('Clusters', () => {
+  let cluster;
+  preloadFixtures('clusters/show_cluster.html.raw');
+
+  beforeEach(() => {
+    loadFixtures('clusters/show_cluster.html.raw');
+    cluster = new Clusters();
+  });
+
+  describe('toggle', () => {
+    it('should update the button and the input field on click', () => {
+      cluster.toggleButton.click();
+
+      expect(
+        cluster.toggleButton.classList,
+      ).not.toContain('checked');
+
+      expect(
+        cluster.toggleInput.getAttribute('value'),
+      ).toEqual('false');
+    });
+  });
+
+  describe('updateContainer', () => {
+    describe('when creating cluster', () => {
+      it('should show the creating container', () => {
+        cluster.updateContainer('creating');
+
+        expect(
+          cluster.creatingContainer.classList,
+        ).not.toContain('hidden');
+        expect(
+          cluster.successContainer.classList,
+        ).toContain('hidden');
+        expect(
+          cluster.errorContainer.classList,
+        ).toContain('hidden');
+      });
+    });
+
+    describe('when cluster is created', () => {
+      it('should show the success container', () => {
+        cluster.updateContainer('created');
+
+        expect(
+          cluster.creatingContainer.classList,
+        ).toContain('hidden');
+        expect(
+          cluster.successContainer.classList,
+        ).not.toContain('hidden');
+        expect(
+          cluster.errorContainer.classList,
+        ).toContain('hidden');
+      });
+    });
+
+    describe('when cluster has error', () => {
+      it('should show the error container', () => {
+        cluster.updateContainer('errored', 'this is an error');
+
+        expect(
+          cluster.creatingContainer.classList,
+        ).toContain('hidden');
+        expect(
+          cluster.successContainer.classList,
+        ).toContain('hidden');
+        expect(
+          cluster.errorContainer.classList,
+        ).not.toContain('hidden');
+
+        expect(
+          cluster.errorContainer.querySelector('.js-error-reason').textContent,
+        ).toContain('this is an error');
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/fixtures/clusters.rb b/spec/javascripts/fixtures/clusters.rb
new file mode 100644
index 00000000000..be9d1d8f216
--- /dev/null
+++ b/spec/javascripts/fixtures/clusters.rb
@@ -0,0 +1,35 @@
+require 'spec_helper'
+
+describe Projects::ClustersController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project) { create(:project, :repository, namespace: namespace) }
+  let(:cluster) { project.create_cluster!(gcp_cluster_name: "gke-test-creation-1", gcp_project_id: 'gitlab-internal-153318', gcp_cluster_zone: 'us-central1-a', gcp_cluster_size: '1', project_namespace: 'aaa', gcp_machine_type: 'n1-standard-1')}
+
+  render_views
+
+  before(:all) do
+    clean_frontend_fixtures('branches/')
+  end
+
+  before do
+    sign_in(admin)
+  end
+
+  after do
+    remove_repository(project)
+  end
+
+  it 'clusters/show_cluster.html.raw' do |example|
+    get :show,
+      namespace_id: project.namespace.to_param,
+      project_id: project,
+      id: cluster
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+
+end