Create responsive mobile view for pipelines table

6 files changed, 21 insertions, 23 deletions

diff --git a/spec/features/merge_requests/created_from_fork_spec.rb b/spec/features/merge_requests/created_from_fork_spec.rb
index bf34c99b92a..b4327743383 100644
--- a/spec/features/merge_requests/created_from_fork_spec.rb
+++ b/spec/features/merge_requests/created_from_fork_spec.rb
@@ -56,7 +56,7 @@ feature 'Merge request created from fork' do
       visit_merge_request(merge_request)
       page.within('.merge-request-tabs') { click_link 'Pipelines' }
 
-      page.within('table.ci-table') do
+      page.within('.ci-table') do
         expect(page).to have_content pipeline.status
         expect(page).to have_content pipeline.id
       end
diff --git a/spec/features/merge_requests/pipelines_spec.rb b/spec/features/merge_requests/pipelines_spec.rb
index 4c76004cb93..744bd484a80 100644
--- a/spec/features/merge_requests/pipelines_spec.rb
+++ b/spec/features/merge_requests/pipelines_spec.rb
@@ -28,7 +28,7 @@ feature 'Pipelines for Merge Requests', feature: true, js: true do
       end
       wait_for_requests
 
-      expect(page).to have_selector('.pipeline-actions')
+      expect(page).to have_selector('.stage-cell')
     end
   end
 
diff --git a/spec/features/projects/pipelines/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb
index 026e2ce5b68..db2d1a100a5 100644
--- a/spec/features/projects/pipelines/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -178,7 +178,7 @@ describe 'Pipelines', :feature, :js do
         end
 
         it 'has a dropdown with play button' do
-          expect(page).to have_selector('.dropdown-toggle.btn.btn-default .icon-play')
+          expect(page).to have_selector('.dropdown-new.btn.btn-default .icon-play')
         end
 
         it 'has link to the manual action' do
diff --git a/spec/javascripts/pipelines/pipeline_url_spec.js b/spec/javascripts/pipelines/pipeline_url_spec.js
index 594a9856d2c..3c4b20a5f06 100644
--- a/spec/javascripts/pipelines/pipeline_url_spec.js
+++ b/spec/javascripts/pipelines/pipeline_url_spec.js
@@ -19,7 +19,7 @@ describe('Pipeline Url Component', () => {
       },
     }).$mount();
 
-    expect(component.$el.tagName).toEqual('TD');
+    expect(component.$el.getAttribute('class')).toContain('table-section');
   });
 
   it('should render a link the provided path and id', () => {
@@ -94,7 +94,7 @@ describe('Pipeline Url Component', () => {
       },
     }).$mount();
 
-    expect(component.$el.querySelector('.js-pipeline-url-lastest').textContent).toContain('latest');
+    expect(component.$el.querySelector('.js-pipeline-url-latest').textContent).toContain('latest');
     expect(component.$el.querySelector('.js-pipeline-url-yaml').textContent).toContain('yaml invalid');
     expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck');
   });
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
index 346fd0ae010..9475ee28a03 100644
--- a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
+++ b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
@@ -34,7 +34,7 @@ describe('Pipelines Table Row', () => {
 
   it('should render a table row', () => {
     component = buildComponent(pipeline);
-    expect(component.$el).toEqual('TR');
+    expect(component.$el.getAttribute('class')).toContain('gl-responsive-table-row');
   });
 
   describe('status column', () => {
@@ -44,13 +44,13 @@ describe('Pipelines Table Row', () => {
 
     it('should render a pipeline link', () => {
       expect(
-        component.$el.querySelector('td.commit-link a').getAttribute('href'),
+        component.$el.querySelector('.table-section.commit-link a').getAttribute('href'),
       ).toEqual(pipeline.path);
     });
 
     it('should render status text', () => {
       expect(
-        component.$el.querySelector('td.commit-link a').textContent,
+        component.$el.querySelector('.table-section.commit-link a').textContent,
       ).toContain(pipeline.details.status.text);
     });
   });
@@ -62,24 +62,24 @@ describe('Pipelines Table Row', () => {
 
     it('should render a pipeline link', () => {
       expect(
-        component.$el.querySelector('td:nth-child(2) a').getAttribute('href'),
+        component.$el.querySelector('.table-section:nth-child(2) a').getAttribute('href'),
       ).toEqual(pipeline.path);
     });
 
     it('should render pipeline ID', () => {
       expect(
-        component.$el.querySelector('td:nth-child(2) a > span').textContent,
+        component.$el.querySelector('.table-section:nth-child(2) a > span').textContent,
       ).toEqual(`#${pipeline.id}`);
     });
 
     describe('when a user is provided', () => {
       it('should render user information', () => {
         expect(
-          component.$el.querySelector('td:nth-child(2) a:nth-child(3)').getAttribute('href'),
+          component.$el.querySelector('.table-section:nth-child(2) a:nth-child(3)').getAttribute('href'),
         ).toEqual(pipeline.user.path);
 
         expect(
-          component.$el.querySelector('td:nth-child(2) img').getAttribute('data-original-title'),
+          component.$el.querySelector('.table-section:nth-child(2) img').getAttribute('data-original-title'),
         ).toEqual(pipeline.user.name);
       });
     });
@@ -142,7 +142,7 @@ describe('Pipelines Table Row', () => {
 
     it('should render an icon for each stage', () => {
       expect(
-        component.$el.querySelectorAll('td:nth-child(4) .js-builds-dropdown-button').length,
+        component.$el.querySelectorAll('.table-section:nth-child(4) .js-builds-dropdown-button').length,
       ).toEqual(pipeline.details.stages.length);
     });
   });
@@ -154,7 +154,7 @@ describe('Pipelines Table Row', () => {
 
     it('should render the provided actions', () => {
       expect(
-        component.$el.querySelectorAll('td:nth-child(6) ul li').length,
+        component.$el.querySelectorAll('.table-section:nth-child(6) ul li').length,
       ).toEqual(pipeline.details.manual_actions.length);
     });
   });
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_spec.js b/spec/javascripts/vue_shared/components/pipelines_table_spec.js
index c362cfb7a96..4c35d702004 100644
--- a/spec/javascripts/vue_shared/components/pipelines_table_spec.js
+++ b/spec/javascripts/vue_shared/components/pipelines_table_spec.js
@@ -32,16 +32,14 @@ describe('Pipelines Table', () => {
     });
 
     it('should render a table', () => {
-      expect(component.$el).toEqual('TABLE');
+      expect(component.$el.getAttribute('class')).toContain('ci-table');
     });
 
     it('should render table head with correct columns', () => {
-      expect(component.$el.querySelector('th.js-pipeline-status').textContent).toEqual('Status');
-      expect(component.$el.querySelector('th.js-pipeline-info').textContent).toEqual('Pipeline');
-      expect(component.$el.querySelector('th.js-pipeline-commit').textContent).toEqual('Commit');
-      expect(component.$el.querySelector('th.js-pipeline-stages').textContent).toEqual('Stages');
-      expect(component.$el.querySelector('th.js-pipeline-date').textContent).toEqual('');
-      expect(component.$el.querySelector('th.js-pipeline-actions').textContent).toEqual('');
+      expect(component.$el.querySelector('.table-section.js-pipeline-status').textContent.trim()).toEqual('Status');
+      expect(component.$el.querySelector('.table-section.js-pipeline-info').textContent.trim()).toEqual('Pipeline');
+      expect(component.$el.querySelector('.table-section.js-pipeline-commit').textContent.trim()).toEqual('Commit');
+      expect(component.$el.querySelector('.table-section.js-pipeline-stages').textContent.trim()).toEqual('Stages');
     });
   });
 
@@ -53,7 +51,7 @@ describe('Pipelines Table', () => {
           service: {},
         },
       }).$mount();
-      expect(component.$el.querySelectorAll('tbody tr').length).toEqual(0);
+      expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(0);
     });
   });
 
@@ -67,7 +65,7 @@ describe('Pipelines Table', () => {
         },
       }).$mount();
 
-      expect(component.$el.querySelectorAll('tbody tr').length).toEqual(1);
+      expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(1);
     });
   });
 });