1 files changed, 83 insertions, 0 deletions
diff --git a/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stages_spec.js b/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stages_spec.js
new file mode 100644
index 00000000000..bfb780d5d39
--- /dev/null
+++ b/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stages_spec.js
@@ -0,0 +1,83 @@
+import { shallowMount } from '@vue/test-utils';
+import { pipelines } from 'test_fixtures/pipelines/pipelines.json';
+import PipelineStage from '~/pipelines/components/pipeline_mini_graph/pipeline_stage.vue';
+import PipelineStages from '~/pipelines/components/pipeline_mini_graph/pipeline_stages.vue';
+
+const mockStages = pipelines[0].details.stages;
+
+describe('Pipeline Stages', () => {
+  let wrapper;
+
+  const findPipelineStages = () => wrapper.findAllComponents(PipelineStage);
+  const findPipelineStagesAt = (i) => findPipelineStages().at(i);
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(PipelineStages, {
+      propsData: {
+        stages: mockStages,
+        ...props,
+      },
+    });
+  };
+
+  it('renders stages', () => {
+    createComponent();
+
+    expect(findPipelineStages()).toHaveLength(mockStages.length);
+  });
+
+  it('renders stages with a custom class', () => {
+    createComponent({ stagesClass: 'my-class' });
+
+    expect(wrapper.findAll('.my-class')).toHaveLength(mockStages.length);
+  });
+
+  it('does not fail when stages are empty', () => {
+    createComponent({ stages: [] });
+
+    expect(wrapper.exists()).toBe(true);
+    expect(findPipelineStages()).toHaveLength(0);
+  });
+
+  it('triggers events in "action request complete" in stages', () => {
+    createComponent();
+
+    findPipelineStagesAt(0).vm.$emit('pipelineActionRequestComplete');
+    findPipelineStagesAt(1).vm.$emit('pipelineActionRequestComplete');
+
+    expect(wrapper.emitted('pipelineActionRequestComplete')).toHaveLength(2);
+  });
+
+  it('update dropdown is false by default', () => {
+    createComponent();
+
+    expect(findPipelineStagesAt(0).props('updateDropdown')).toBe(false);
+    expect(findPipelineStagesAt(1).props('updateDropdown')).toBe(false);
+  });
+
+  it('update dropdown is set to true', () => {
+    createComponent({ updateDropdown: true });
+
+    expect(findPipelineStagesAt(0).props('updateDropdown')).toBe(true);
+    expect(findPipelineStagesAt(1).props('updateDropdown')).toBe(true);
+  });
+
+  it('is merge train is false by default', () => {
+    createComponent();
+
+    expect(findPipelineStagesAt(0).props('isMergeTrain')).toBe(false);
+    expect(findPipelineStagesAt(1).props('isMergeTrain')).toBe(false);
+  });
+
+  it('is merge train is set to true', () => {
+    createComponent({ isMergeTrain: true });
+
+    expect(findPipelineStagesAt(0).props('isMergeTrain')).toBe(true);
+    expect(findPipelineStagesAt(1).props('isMergeTrain')).toBe(true);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+});