1 files changed, 82 insertions, 0 deletions
diff --git a/spec/frontend/jobs/components/table/cells/pipeline_cell_spec.js b/spec/frontend/jobs/components/table/cells/pipeline_cell_spec.js
new file mode 100644
index 00000000000..1f5e0a7aa21
--- /dev/null
+++ b/spec/frontend/jobs/components/table/cells/pipeline_cell_spec.js
@@ -0,0 +1,82 @@
+import { GlAvatar } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import PipelineCell from '~/jobs/components/table/cells/pipeline_cell.vue';
+
+const mockJobWithoutUser = {
+  id: 'gid://gitlab/Ci::Build/2264',
+  pipeline: {
+    id: 'gid://gitlab/Ci::Pipeline/460',
+    path: '/root/ci-project/-/pipelines/460',
+  },
+};
+
+const mockJobWithUser = {
+  id: 'gid://gitlab/Ci::Build/2264',
+  pipeline: {
+    id: 'gid://gitlab/Ci::Pipeline/460',
+    path: '/root/ci-project/-/pipelines/460',
+    user: {
+      avatarUrl:
+        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+      webPath: '/root',
+    },
+  },
+};
+
+describe('Pipeline Cell', () => {
+  let wrapper;
+
+  const findPipelineId = () => wrapper.findByTestId('pipeline-id');
+  const findPipelineUserLink = () => wrapper.findByTestId('pipeline-user-link');
+  const findUserAvatar = () => wrapper.findComponent(GlAvatar);
+
+  const createComponent = (props = mockJobWithUser) => {
+    wrapper = extendedWrapper(
+      shallowMount(PipelineCell, {
+        propsData: {
+          job: props,
+        },
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Pipeline Id', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('displays the pipeline id and links to the pipeline', () => {
+      const expectedPipelineId = `#${getIdFromGraphQLId(mockJobWithUser.pipeline.id)}`;
+
+      expect(findPipelineId().text()).toBe(expectedPipelineId);
+      expect(findPipelineId().attributes('href')).toBe(mockJobWithUser.pipeline.path);
+    });
+  });
+
+  describe('Pipeline created by', () => {
+    const apiWrapperText = 'API';
+
+    it('shows and links to the pipeline user', () => {
+      createComponent();
+
+      expect(findPipelineUserLink().exists()).toBe(true);
+      expect(findPipelineUserLink().attributes('href')).toBe(mockJobWithUser.pipeline.user.webPath);
+      expect(findUserAvatar().attributes('src')).toBe(mockJobWithUser.pipeline.user.avatarUrl);
+      expect(wrapper.text()).not.toContain(apiWrapperText);
+    });
+
+    it('shows pipeline was created by the API', () => {
+      createComponent(mockJobWithoutUser);
+
+      expect(findPipelineUserLink().exists()).toBe(false);
+      expect(findUserAvatar().exists()).toBe(false);
+      expect(wrapper.text()).toContain(apiWrapperText);
+    });
+  });
+});