From 880b53e0b44909b255008ca32df62120cc435595 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Wed, 22 Mar 2017 21:39:09 -0500 Subject: Reset container width when switching to pipelines MR tab Fixes https://gitlab.com/gitlab-org/gitlab-ce/issues/29539 --- .../javascripts/commit/pipelines/pipelines_spec.js | 53 ++++++++++++---------- spec/javascripts/fixtures/merge_requests.rb | 12 ++++- spec/javascripts/merge_request_tabs_spec.js | 40 ++++++++++++++++ .../vue_shared/components/pipelines_table_spec.js | 4 ++ 4 files changed, 83 insertions(+), 26 deletions(-) (limited to 'spec/javascripts') diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js b/spec/javascripts/commit/pipelines/pipelines_spec.js index bc2e092db65..8cac3cad232 100644 --- a/spec/javascripts/commit/pipelines/pipelines_spec.js +++ b/spec/javascripts/commit/pipelines/pipelines_spec.js @@ -9,7 +9,7 @@ describe('Pipelines table in Commits and Merge requests', () => { loadFixtures('static/pipelines_table.html.raw'); }); - describe('successfull request', () => { + describe('successful request', () => { describe('without pipelines', () => { const pipelinesEmptyResponse = (request, next) => { next(request.respondWith(JSON.stringify([]), { @@ -17,24 +17,25 @@ describe('Pipelines table in Commits and Merge requests', () => { })); }; - beforeEach(() => { + beforeEach(function () { Vue.http.interceptors.push(pipelinesEmptyResponse); + + this.component = new PipelinesTable({ + el: document.querySelector('#commit-pipeline-table-view'), + }); }); - afterEach(() => { + afterEach(function () { Vue.http.interceptors = _.without( Vue.http.interceptors, pipelinesEmptyResponse, ); + this.component.$destroy(); }); - it('should render the empty state', (done) => { - const component = new PipelinesTable({ - el: document.querySelector('#commit-pipeline-table-view'), - }); - + it('should render the empty state', function (done) { setTimeout(() => { - expect(component.$el.querySelector('.empty-state')).toBeDefined(); - expect(component.$el.querySelector('.realtime-loading')).toBe(null); + expect(this.component.$el.querySelector('.empty-state')).toBeDefined(); + expect(this.component.$el.querySelector('.realtime-loading')).toBe(null); done(); }, 1); }); @@ -49,22 +50,23 @@ describe('Pipelines table in Commits and Merge requests', () => { beforeEach(() => { Vue.http.interceptors.push(pipelinesResponse); + + this.component = new PipelinesTable({ + el: document.querySelector('#commit-pipeline-table-view'), + }); }); afterEach(() => { Vue.http.interceptors = _.without( Vue.http.interceptors, pipelinesResponse, ); + this.component.$destroy(); }); it('should render a table with the received pipelines', (done) => { - const component = new PipelinesTable({ - el: document.querySelector('#commit-pipeline-table-view'), - }); - setTimeout(() => { - expect(component.$el.querySelectorAll('table > tbody > tr').length).toEqual(1); - expect(component.$el.querySelector('.realtime-loading')).toBe(null); + expect(this.component.$el.querySelectorAll('table > tbody > tr').length).toEqual(1); + expect(this.component.$el.querySelector('.realtime-loading')).toBe(null); done(); }, 0); }); @@ -78,24 +80,25 @@ describe('Pipelines table in Commits and Merge requests', () => { })); }; - beforeEach(() => { + beforeEach(function () { Vue.http.interceptors.push(pipelinesErrorResponse); + + this.component = new PipelinesTable({ + el: document.querySelector('#commit-pipeline-table-view'), + }); }); - afterEach(() => { + afterEach(function () { Vue.http.interceptors = _.without( Vue.http.interceptors, pipelinesErrorResponse, ); + this.component.$destroy(); }); - it('should render empty state', (done) => { - const component = new PipelinesTable({ - el: document.querySelector('#commit-pipeline-table-view'), - }); - + it('should render empty state', function (done) { setTimeout(() => { - expect(component.$el.querySelector('.js-pipelines-error-state')).toBeDefined(); - expect(component.$el.querySelector('.realtime-loading')).toBe(null); + expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBeDefined(); + expect(this.component.$el.querySelector('.realtime-loading')).toBe(null); done(); }, 0); }); diff --git a/spec/javascripts/fixtures/merge_requests.rb b/spec/javascripts/fixtures/merge_requests.rb index ee893b76c84..fddeaaf504d 100644 --- a/spec/javascripts/fixtures/merge_requests.rb +++ b/spec/javascripts/fixtures/merge_requests.rb @@ -6,6 +6,15 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont let(:admin) { create(:admin) } let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} let(:project) { create(:project, namespace: namespace, path: 'merge-requests-project') } + let(:merge_request) { create(:merge_request, :with_diffs, source_project: project, target_project: project, description: '- [ ] Task List Item') } + let(:pipeline) do + create( + :ci_pipeline, + project: merge_request.source_project, + ref: merge_request.source_branch, + sha: merge_request.diff_head_sha + ) + end render_views @@ -18,7 +27,8 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont end it 'merge_requests/merge_request_with_task_list.html.raw' do |example| - merge_request = create(:merge_request, :with_diffs, source_project: project, target_project: project, description: '- [ ] Task List Item') + create(:ci_build, :pending, pipeline: pipeline) + render_merge_request(example.description, merge_request) end diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js index 7506e6ab49e..7b9632be84e 100644 --- a/spec/javascripts/merge_request_tabs_spec.js +++ b/spec/javascripts/merge_request_tabs_spec.js @@ -38,6 +38,10 @@ require('vendor/jquery.scrollTo'); } }); + afterEach(function () { + this.class.destroy(); + }); + describe('#activateTab', function () { beforeEach(function () { spyOn($, 'ajax').and.callFake(function () {}); @@ -200,6 +204,42 @@ require('vendor/jquery.scrollTo'); expect(this.subject('show')).toBe('/foo/bar/merge_requests/1'); }); }); + + describe('#tabShown', () => { + beforeEach(function () { + loadFixtures('merge_requests/merge_request_with_task_list.html.raw'); + }); + + describe('with "Side-by-side"/parallel diff view', () => { + beforeEach(function () { + this.class.diffViewType = () => 'parallel'; + }); + + it('maintains `container-limited` for pipelines tab', function (done) { + const asyncClick = function (selector) { + return new Promise((resolve) => { + setTimeout(() => { + document.querySelector(selector).click(); + resolve(); + }); + }); + }; + + asyncClick('.merge-request-tabs .pipelines-tab a') + .then(() => asyncClick('.merge-request-tabs .diffs-tab a')) + .then(() => asyncClick('.merge-request-tabs .pipelines-tab a')) + .then(() => { + const hasContainerLimitedClass = document.querySelector('.content-wrapper .container-fluid').classList.contains('container-limited'); + expect(hasContainerLimitedClass).toBe(true); + }) + .then(done) + .catch((err) => { + done.fail(`Something went wrong clicking MR tabs: ${err.message}\n${err.stack}`); + }); + }); + }); + }); + describe('#loadDiff', function () { it('requires an absolute pathname', function () { spyOn($, 'ajax').and.callFake(function (options) { diff --git a/spec/javascripts/vue_shared/components/pipelines_table_spec.js b/spec/javascripts/vue_shared/components/pipelines_table_spec.js index b0b1df5a753..4d3ced944d7 100644 --- a/spec/javascripts/vue_shared/components/pipelines_table_spec.js +++ b/spec/javascripts/vue_shared/components/pipelines_table_spec.js @@ -21,6 +21,10 @@ describe('Pipelines Table', () => { }).$mount(); }); + afterEach(() => { + component.$destroy(); + }); + it('should render a table', () => { expect(component.$el).toEqual('TABLE'); }); -- cgit v1.2.1