1 files changed, 49 insertions, 0 deletions
diff --git a/spec/frontend/environments/environment_details/deployment_job_spec.js b/spec/frontend/environments/environment_details/deployment_job_spec.js
new file mode 100644
index 00000000000..9bb61abb293
--- /dev/null
+++ b/spec/frontend/environments/environment_details/deployment_job_spec.js
@@ -0,0 +1,49 @@
+import { GlTruncate, GlLink, GlBadge } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import DeploymentJob from '~/environments/environment_details/components/deployment_job.vue';
+
+describe('app/assets/javascripts/environments/environment_details/components/deployment_job.vue', () => {
+  const jobData = {
+    webPath: 'http://example.com',
+    label: 'example job',
+  };
+  let wrapper;
+
+  const createWrapper = ({ job }) => {
+    return mountExtended(DeploymentJob, {
+      propsData: {
+        job,
+      },
+    });
+  };
+
+  describe('when the job data exists', () => {
+    beforeEach(() => {
+      wrapper = createWrapper({ job: jobData });
+    });
+
+    it('should render a link with a correct href', () => {
+      const jobLink = wrapper.findComponent(GlLink);
+      expect(jobLink.exists()).toBe(true);
+      expect(jobLink.attributes().href).toBe(jobData.webPath);
+    });
+    it('should render a truncated label', () => {
+      const truncatedLabel = wrapper.findComponent(GlTruncate);
+      expect(truncatedLabel.exists()).toBe(true);
+      expect(truncatedLabel.props().text).toBe(jobData.label);
+    });
+  });
+
+  describe('when the job data does not exist', () => {
+    beforeEach(() => {
+      wrapper = createWrapper({ job: null });
+    });
+
+    it('should render a badge with the text "API"', () => {
+      const badge = wrapper.findComponent(GlBadge);
+      expect(badge.exists()).toBe(true);
+      expect(badge.props().variant).toBe('info');
+      expect(badge.text()).toBe('API');
+    });
+  });
+});