1 files changed, 136 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/ci_icon/ci_icon_spec.js b/spec/frontend/vue_shared/components/ci_icon/ci_icon_spec.js
new file mode 100644
index 00000000000..792470c8e89
--- /dev/null
+++ b/spec/frontend/vue_shared/components/ci_icon/ci_icon_spec.js
@@ -0,0 +1,136 @@
+import { GlIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import CiIcon from '~/vue_shared/components/ci_icon/ci_icon.vue';
+
+const mockStatus = {
+  group: 'success',
+  icon: 'status_success',
+  text: 'Success',
+};
+
+describe('CI Icon component', () => {
+  let wrapper;
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = shallowMount(CiIcon, {
+      propsData: {
+        status: mockStatus,
+        ...props,
+      },
+    });
+  };
+
+  const findIcon = () => wrapper.findComponent(GlIcon);
+
+  it('should render a span element and an icon', () => {
+    createComponent();
+
+    expect(wrapper.attributes('size')).toBe('md');
+    expect(findIcon().exists()).toBe(true);
+  });
+
+  describe.each`
+    showStatusText | showTooltip | expectedText | expectedTooltip | expectedAriaLabel
+    ${true}        | ${true}     | ${'Success'} | ${undefined}    | ${undefined}
+    ${true}        | ${false}    | ${'Success'} | ${undefined}    | ${undefined}
+    ${false}       | ${true}     | ${''}        | ${'Success'}    | ${'Success'}
+    ${false}       | ${false}    | ${''}        | ${undefined}    | ${'Success'}
+  `(
+    'when showStatusText is %{showStatusText} and showTooltip is %{showTooltip}',
+    ({ showStatusText, showTooltip, expectedText, expectedTooltip, expectedAriaLabel }) => {
+      beforeEach(() => {
+        createComponent({
+          props: {
+            showStatusText,
+            showTooltip,
+          },
+        });
+      });
+
+      it(`aria-label is ${expectedAriaLabel}`, () => {
+        expect(wrapper.attributes('aria-label')).toBe(expectedAriaLabel);
+      });
+
+      it(`text shown is ${expectedAriaLabel}`, () => {
+        expect(wrapper.text()).toBe(expectedText);
+      });
+
+      it(`tooltip shown is ${expectedAriaLabel}`, () => {
+        expect(wrapper.attributes('title')).toBe(expectedTooltip);
+      });
+    },
+  );
+
+  describe('when appearing as a link', () => {
+    it('shows a GraphQL path', () => {
+      createComponent({
+        props: {
+          status: {
+            ...mockStatus,
+            detailsPath: '/path',
+          },
+          useLink: true,
+        },
+      });
+
+      expect(wrapper.attributes('href')).toBe('/path');
+    });
+
+    it('shows a REST API path', () => {
+      createComponent({
+        props: {
+          status: {
+            ...mockStatus,
+            details_path: '/path',
+          },
+          useLink: true,
+        },
+      });
+
+      expect(wrapper.attributes('href')).toBe('/path');
+    });
+
+    it('shows no path', () => {
+      createComponent({
+        status: {
+          detailsPath: '/path',
+          details_path: '/path',
+        },
+        props: {
+          useLink: false,
+        },
+      });
+
+      expect(wrapper.attributes('href')).toBe(undefined);
+    });
+  });
+
+  describe('rendering a status icon and class', () => {
+    it.each`
+      icon                 | variant
+      ${'status_success'}  | ${'success'}
+      ${'status_warning'}  | ${'warning'}
+      ${'status_pending'}  | ${'warning'}
+      ${'status_failed'}   | ${'danger'}
+      ${'status_running'}  | ${'info'}
+      ${'status_created'}  | ${'neutral'}
+      ${'status_skipped'}  | ${'neutral'}
+      ${'status_canceled'} | ${'neutral'}
+      ${'status_manual'}   | ${'neutral'}
+    `('should render a $group status', ({ icon, variant }) => {
+      createComponent({
+        props: {
+          status: {
+            ...mockStatus,
+            icon,
+          },
+          showStatusText: true,
+        },
+      });
+      expect(wrapper.attributes('variant')).toBe(variant);
+      expect(wrapper.classes(`ci-icon-variant-${variant}`)).toBe(true);
+
+      expect(findIcon().props('name')).toBe(`${icon}_borderless`);
+    });
+  });
+});