1 files changed, 42 insertions, 0 deletions
diff --git a/spec/frontend/environments/deployment_status_badge_spec.js b/spec/frontend/environments/deployment_status_badge_spec.js
new file mode 100644
index 00000000000..02aae57396a
--- /dev/null
+++ b/spec/frontend/environments/deployment_status_badge_spec.js
@@ -0,0 +1,42 @@
+import { GlBadge } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { s__ } from '~/locale';
+import DeploymentStatusBadge from '~/environments/components/deployment_status_badge.vue';
+
+describe('~/environments/components/deployment_status_badge.vue', () => {
+  let wrapper;
+
+  const createWrapper = ({ propsData = {} } = {}) =>
+    mountExtended(DeploymentStatusBadge, {
+      propsData,
+    });
+
+  describe.each`
+    status        | text                           | variant      | icon
+    ${'created'}  | ${s__('Deployment|Created')}   | ${'neutral'} | ${'status_created'}
+    ${'running'}  | ${s__('Deployment|Running')}   | ${'info'}    | ${'status_running'}
+    ${'success'}  | ${s__('Deployment|Success')}   | ${'success'} | ${'status_success'}
+    ${'failed'}   | ${s__('Deployment|Failed')}    | ${'danger'}  | ${'status_failed'}
+    ${'canceled'} | ${s__('Deployment|Cancelled')} | ${'neutral'} | ${'status_canceled'}
+    ${'skipped'}  | ${s__('Deployment|Skipped')}   | ${'neutral'} | ${'status_skipped'}
+    ${'blocked'}  | ${s__('Deployment|Waiting')}   | ${'neutral'} | ${'status_manual'}
+  `('$status', ({ status, text, variant, icon }) => {
+    let badge;
+
+    beforeEach(() => {
+      wrapper = createWrapper({ propsData: { status } });
+      badge = wrapper.findComponent(GlBadge);
+    });
+
+    it(`sets the text to ${text}`, () => {
+      expect(wrapper.text()).toBe(text);
+    });
+
+    it(`sets the variant to ${variant}`, () => {
+      expect(badge.props('variant')).toBe(variant);
+    });
+    it(`sets the icon to ${icon}`, () => {
+      expect(badge.props('icon')).toBe(icon);
+    });
+  });
+});