1 files changed, 140 insertions, 0 deletions
diff --git a/spec/frontend/jobs/components/table/cells.vue/job_cell_spec.js b/spec/frontend/jobs/components/table/cells.vue/job_cell_spec.js
new file mode 100644
index 00000000000..fc4e5586349
--- /dev/null
+++ b/spec/frontend/jobs/components/table/cells.vue/job_cell_spec.js
@@ -0,0 +1,140 @@
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import JobCell from '~/jobs/components/table/cells/job_cell.vue';
+import { mockJobsInTable } from '../../../mock_data';
+
+const mockJob = mockJobsInTable[0];
+const mockJobCreatedByTag = mockJobsInTable[1];
+const mockJobLimitedAccess = mockJobsInTable[2];
+const mockStuckJob = mockJobsInTable[3];
+
+describe('Job Cell', () => {
+  let wrapper;
+
+  const findJobIdLink = () => wrapper.findByTestId('job-id-link');
+  const findJobIdNoLink = () => wrapper.findByTestId('job-id-limited-access');
+  const findJobRef = () => wrapper.findByTestId('job-ref');
+  const findJobSha = () => wrapper.findByTestId('job-sha');
+  const findLabelIcon = () => wrapper.findByTestId('label-icon');
+  const findForkIcon = () => wrapper.findByTestId('fork-icon');
+  const findStuckIcon = () => wrapper.findByTestId('stuck-icon');
+  const findAllTagBadges = () => wrapper.findAllByTestId('job-tag-badge');
+
+  const findBadgeById = (id) => wrapper.findByTestId(id);
+
+  const createComponent = (jobData = mockJob) => {
+    wrapper = extendedWrapper(
+      shallowMount(JobCell, {
+        propsData: {
+          job: jobData,
+        },
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Job Id', () => {
+    it('displays the job id and links to the job', () => {
+      createComponent();
+
+      const expectedJobId = `#${getIdFromGraphQLId(mockJob.id)}`;
+
+      expect(findJobIdLink().text()).toBe(expectedJobId);
+      expect(findJobIdLink().attributes('href')).toBe(mockJob.detailedStatus.detailsPath);
+      expect(findJobIdNoLink().exists()).toBe(false);
+    });
+
+    it('display the job id with no link', () => {
+      createComponent(mockJobLimitedAccess);
+
+      const expectedJobId = `#${getIdFromGraphQLId(mockJobLimitedAccess.id)}`;
+
+      expect(findJobIdNoLink().text()).toBe(expectedJobId);
+      expect(findJobIdNoLink().exists()).toBe(true);
+      expect(findJobIdLink().exists()).toBe(false);
+    });
+  });
+
+  describe('Ref of the job', () => {
+    it('displays the ref name and links to the ref', () => {
+      createComponent();
+
+      expect(findJobRef().text()).toBe(mockJob.refName);
+      expect(findJobRef().attributes('href')).toBe(mockJob.refPath);
+    });
+
+    it('displays fork icon when job is not created by tag', () => {
+      createComponent();
+
+      expect(findForkIcon().exists()).toBe(true);
+      expect(findLabelIcon().exists()).toBe(false);
+    });
+
+    it('displays label icon when job is created by a tag', () => {
+      createComponent(mockJobCreatedByTag);
+
+      expect(findLabelIcon().exists()).toBe(true);
+      expect(findForkIcon().exists()).toBe(false);
+    });
+  });
+
+  describe('Commit of the job', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('displays the sha and links to the commit', () => {
+      expect(findJobSha().text()).toBe(mockJob.shortSha);
+      expect(findJobSha().attributes('href')).toBe(mockJob.commitPath);
+    });
+  });
+
+  describe('Job badges', () => {
+    it('displays tags of the job', () => {
+      const mockJobWithTags = {
+        tags: ['tag-1', 'tag-2', 'tag-3'],
+      };
+
+      createComponent(mockJobWithTags);
+
+      expect(findAllTagBadges()).toHaveLength(mockJobWithTags.tags.length);
+    });
+
+    it.each`
+      testId                   | text
+      ${'manual-job-badge'}    | ${'manual'}
+      ${'triggered-job-badge'} | ${'triggered'}
+      ${'fail-job-badge'}      | ${'allowed to fail'}
+      ${'delayed-job-badge'}   | ${'delayed'}
+    `('displays the static $text badge', ({ testId, text }) => {
+      createComponent({
+        manualJob: true,
+        triggered: true,
+        allowFailure: true,
+        scheduledAt: '2021-03-09T14:58:50+00:00',
+      });
+
+      expect(findBadgeById(testId).exists()).toBe(true);
+      expect(findBadgeById(testId).text()).toBe(text);
+    });
+  });
+
+  describe('Job icons', () => {
+    it('stuck icon is not shown if job is not stuck', () => {
+      createComponent();
+
+      expect(findStuckIcon().exists()).toBe(false);
+    });
+
+    it('stuck icon is shown if job is stuck', () => {
+      createComponent(mockStuckJob);
+
+      expect(findStuckIcon().exists()).toBe(true);
+      expect(findStuckIcon().attributes('name')).toBe('warning');
+    });
+  });
+});