diff options
| -rw-r--r-- | app/assets/javascripts/clusters.js | 13 | ||||
| -rw-r--r-- | app/views/projects/clusters/show.html.haml | 2 | ||||
| -rw-r--r-- | spec/javascripts/clusters_spec.js | 79 | ||||
| -rw-r--r-- | spec/javascripts/fixtures/clusters.rb | 35 |
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 |