1 files changed, 31 insertions, 0 deletions
diff --git a/spec/frontend/pipeline_editor/components/drawer/ui/pipeline_visual_reference_spec.js b/spec/frontend/pipeline_editor/components/drawer/ui/pipeline_visual_reference_spec.js
new file mode 100644
index 00000000000..e4834544484
--- /dev/null
+++ b/spec/frontend/pipeline_editor/components/drawer/ui/pipeline_visual_reference_spec.js
@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import DemoJobPill from '~/pipeline_editor/components/drawer/ui/demo_job_pill.vue';
+import PipelineVisualReference from '~/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue';
+
+describe('Demo job pill', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(PipelineVisualReference);
+  };
+
+  const findAllDemoJobPills = () => wrapper.findAllComponents(DemoJobPill);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders all stage names', () => {
+    expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.stageNames.build);
+    expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.stageNames.test);
+    expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.stageNames.deploy);
+  });
+
+  it('renders all job pills', () => {
+    expect(findAllDemoJobPills()).toHaveLength(4);
+  });
+});