Reset container width when switching to pipelines MR tab

Fixes https://gitlab.com/gitlab-org/gitlab-ce/issues/29539

4 files changed, 83 insertions, 26 deletions

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');
     });