1 files changed, 64 insertions, 0 deletions
diff --git a/spec/frontend/runner/components/runner_tags_spec.js b/spec/frontend/runner/components/runner_tags_spec.js
new file mode 100644
index 00000000000..7bb3f65e4ba
--- /dev/null
+++ b/spec/frontend/runner/components/runner_tags_spec.js
@@ -0,0 +1,64 @@
+import { GlBadge } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import RunnerTags from '~/runner/components/runner_tags.vue';
+
+describe('RunnerTags', () => {
+  let wrapper;
+
+  const findBadge = () => wrapper.findComponent(GlBadge);
+  const findBadgesAt = (i = 0) => wrapper.findAllComponents(GlBadge).at(i);
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = shallowMount(RunnerTags, {
+      propsData: {
+        tagList: ['tag1', 'tag2'],
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('Displays tags text', () => {
+    expect(wrapper.text()).toMatchInterpolatedText('tag1 tag2');
+
+    expect(findBadgesAt(0).text()).toBe('tag1');
+    expect(findBadgesAt(1).text()).toBe('tag2');
+  });
+
+  it('Displays tags with correct style', () => {
+    expect(findBadge().props('size')).toBe('md');
+    expect(findBadge().props('variant')).toBe('info');
+  });
+
+  it('Displays tags with small size', () => {
+    createComponent({
+      props: { size: 'sm' },
+    });
+
+    expect(findBadge().props('size')).toBe('sm');
+  });
+
+  it('Displays tags with a variant', () => {
+    createComponent({
+      props: { variant: 'warning' },
+    });
+
+    expect(findBadge().props('variant')).toBe('warning');
+  });
+
+  it('Is empty when there are no tags', () => {
+    createComponent({
+      props: { tagList: null },
+    });
+
+    expect(wrapper.text()).toBe('');
+    expect(findBadge().exists()).toBe(false);
+  });
+});