Merge branch 'migrate-pipelines-table-spec' into 'master'

Migrate pipeline table spec

See merge request gitlab-org/gitlab!30847

spec/frontend/pipelines/pipelines_table_spec.js

+import { mount } from '@vue/test-utils';
+import PipelinesTable from '~/pipelines/components/pipelines_table.vue';
+
+describe('Pipelines Table', () => {
+  let pipeline;
+  let wrapper;
+
+  const jsonFixtureName = 'pipelines/pipelines.json';
+
+  const defaultProps = {
+    pipelines: [],
+    autoDevopsHelpPath: 'foo',
+    viewType: 'root',
+  };
+
+  const createComponent = (props = defaultProps) => {
+    wrapper = mount(PipelinesTable, {
+      propsData: props,
+    });
+  };
+  const findRows = () => wrapper.findAll('.commit.gl-responsive-table-row');
+
+  preloadFixtures(jsonFixtureName);
+
+  beforeEach(() => {
+    const { pipelines } = getJSONFixture(jsonFixtureName);
+    pipeline = pipelines.find(p => p.user !== null && p.commit !== null);
+
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('table', () => {
+    it('should render a table', () => {
+      expect(wrapper.classes()).toContain('ci-table');
+    });
+
+    it('should render table head with correct columns', () => {
+      expect(wrapper.find('.table-section.js-pipeline-status').text()).toEqual('Status');
+
+      expect(wrapper.find('.table-section.js-pipeline-info').text()).toEqual('Pipeline');
+
+      expect(wrapper.find('.table-section.js-pipeline-commit').text()).toEqual('Commit');
+
+      expect(wrapper.find('.table-section.js-pipeline-stages').text()).toEqual('Stages');
+    });
+  });
+
+  describe('without data', () => {
+    it('should render an empty table', () => {
+      expect(findRows()).toHaveLength(0);
+    });
+  });
+
+  describe('with data', () => {
+    it('should render rows', () => {
+      createComponent({ pipelines: [pipeline], autoDevopsHelpPath: 'foo', viewType: 'root' });
+
+      expect(findRows()).toHaveLength(1);
+    });
+  });
+});

spec/javascripts/pipelines/pipelines_table_spec.js

-import Vue from 'vue';
-import pipelinesTableComp from '~/pipelines/components/pipelines_table.vue';
-import '~/lib/utils/datetime_utility';
-
-describe('Pipelines Table', () => {
-  const jsonFixtureName = 'pipelines/pipelines.json';
-
-  let pipeline;
-  let PipelinesTableComponent;
-
-  preloadFixtures(jsonFixtureName);
-
-  beforeEach(() => {
-    const { pipelines } = getJSONFixture(jsonFixtureName);
-
-    PipelinesTableComponent = Vue.extend(pipelinesTableComp);
-    pipeline = pipelines.find(p => p.user !== null && p.commit !== null);
-  });
-
-  describe('table', () => {
-    let component;
-    beforeEach(() => {
-      component = new PipelinesTableComponent({
-        propsData: {
-          pipelines: [],
-          autoDevopsHelpPath: 'foo',
-          viewType: 'root',
-        },
-      }).$mount();
-    });
-
-    afterEach(() => {
-      component.$destroy();
-    });
-
-    it('should render a table', () => {
-      expect(component.$el.getAttribute('class')).toContain('ci-table');
-    });
-
-    it('should render table head with correct columns', () => {
-      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');
-    });
-  });
-
-  describe('without data', () => {
-    it('should render an empty table', () => {
-      const component = new PipelinesTableComponent({
-        propsData: {
-          pipelines: [],
-          autoDevopsHelpPath: 'foo',
-          viewType: 'root',
-        },
-      }).$mount();
-
-      expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(0);
-    });
-  });
-
-  describe('with data', () => {
-    it('should render rows', () => {
-      const component = new PipelinesTableComponent({
-        propsData: {
-          pipelines: [pipeline],
-          autoDevopsHelpPath: 'foo',
-          viewType: 'root',
-        },
-      }).$mount();
-
-      expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(1);
-    });
-  });
-});