1 files changed, 116 insertions, 0 deletions
diff --git a/spec/frontend/pipelines/legacy_header_component_spec.js b/spec/frontend/pipelines/legacy_header_component_spec.js
new file mode 100644
index 00000000000..fb7feb8898a
--- /dev/null
+++ b/spec/frontend/pipelines/legacy_header_component_spec.js
@@ -0,0 +1,116 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
+import LegacyHeaderComponent from '~/pipelines/components/legacy_header_component.vue';
+import CiHeader from '~/vue_shared/components/header_ci_component.vue';
+import eventHub from '~/pipelines/event_hub';
+
+describe('Pipeline details header', () => {
+  let wrapper;
+  let glModalDirective;
+
+  const threeWeeksAgo = new Date();
+  threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
+
+  const findDeleteModal = () => wrapper.find(GlModal);
+
+  const defaultProps = {
+    pipeline: {
+      details: {
+        status: {
+          group: 'failed',
+          icon: 'status_failed',
+          label: 'failed',
+          text: 'failed',
+          details_path: 'path',
+        },
+      },
+      id: 123,
+      created_at: threeWeeksAgo.toISOString(),
+      user: {
+        web_url: 'path',
+        name: 'Foo',
+        username: 'foobar',
+        email: 'foo@bar.com',
+        avatar_url: 'link',
+      },
+      retry_path: 'retry',
+      cancel_path: 'cancel',
+      delete_path: 'delete',
+    },
+    isLoading: false,
+  };
+
+  const createComponent = (props = {}) => {
+    glModalDirective = jest.fn();
+
+    wrapper = shallowMount(LegacyHeaderComponent, {
+      propsData: {
+        ...props,
+      },
+      directives: {
+        glModal: {
+          bind(el, { value }) {
+            glModalDirective(value);
+          },
+        },
+      },
+    });
+  };
+
+  beforeEach(() => {
+    jest.spyOn(eventHub, '$emit');
+
+    createComponent(defaultProps);
+  });
+
+  afterEach(() => {
+    eventHub.$off();
+
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('should render provided pipeline info', () => {
+    expect(wrapper.find(CiHeader).props()).toMatchObject({
+      status: defaultProps.pipeline.details.status,
+      itemId: defaultProps.pipeline.id,
+      time: defaultProps.pipeline.created_at,
+      user: defaultProps.pipeline.user,
+    });
+  });
+
+  describe('action buttons', () => {
+    it('should not trigger eventHub when nothing happens', () => {
+      expect(eventHub.$emit).not.toHaveBeenCalled();
+    });
+
+    it('should call postAction when retry button action is clicked', () => {
+      wrapper.find('[data-testid="retryButton"]').vm.$emit('click');
+
+      expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'retry');
+    });
+
+    it('should call postAction when cancel button action is clicked', () => {
+      wrapper.find('[data-testid="cancelPipeline"]').vm.$emit('click');
+
+      expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'cancel');
+    });
+
+    it('does not show delete modal', () => {
+      expect(findDeleteModal()).not.toBeVisible();
+    });
+
+    describe('when delete button action is clicked', () => {
+      it('displays delete modal', () => {
+        expect(findDeleteModal().props('modalId')).toBe(wrapper.vm.$options.DELETE_MODAL_ID);
+        expect(glModalDirective).toHaveBeenCalledWith(wrapper.vm.$options.DELETE_MODAL_ID);
+      });
+
+      it('should call delete when modal is submitted', () => {
+        findDeleteModal().vm.$emit('ok');
+
+        expect(eventHub.$emit).toHaveBeenCalledWith('headerDeleteAction', 'delete');
+      });
+    });
+  });
+});