1 files changed, 63 insertions, 0 deletions
diff --git a/spec/javascripts/pipelines/header_component_spec.js b/spec/javascripts/pipelines/header_component_spec.js
new file mode 100644
index 00000000000..cecc7ceb53d
--- /dev/null
+++ b/spec/javascripts/pipelines/header_component_spec.js
@@ -0,0 +1,63 @@
+import Vue from 'vue';
+import headerComponent from '~/pipelines/components/header_component.vue';
+import eventHub from '~/pipelines/event_hub';
+
+describe('Pipeline details header', () => {
+  let HeaderComponent;
+  let vm;
+  let props;
+
+  beforeEach(() => {
+    HeaderComponent = Vue.extend(headerComponent);
+
+    const threeWeeksAgo = new Date();
+    threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
+
+    props = {
+      pipeline: {
+        details: {
+          status: {
+            group: 'failed',
+            icon: 'ci-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: 'path',
+      },
+      isLoading: false,
+    };
+
+    vm = new HeaderComponent({ propsData: props }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render provided pipeline info', () => {
+    expect(
+      vm.$el.querySelector('.header-main-content').textContent.replace(/\s+/g, ' ').trim(),
+    ).toEqual('failed Pipeline #123 triggered 3 weeks ago by Foo');
+  });
+
+  describe('action buttons', () => {
+    it('should call postAction when button action is clicked', () => {
+      eventHub.$on('headerPostAction', (action) => {
+        expect(action.path).toEqual('path');
+      });
+
+      vm.$el.querySelector('button').click();
+    });
+  });
+});