1 files changed, 66 insertions, 0 deletions
diff --git a/spec/frontend/pipelines/pipelines_table_spec.js b/spec/frontend/pipelines/pipelines_table_spec.js
new file mode 100644
index 00000000000..b0ab250dd16
--- /dev/null
+++ b/spec/frontend/pipelines/pipelines_table_spec.js
@@ -0,0 +1,66 @@
+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);
+    });
+  });
+});