Merge branch 'master' into issue-edit-inline

2 files changed, 150 insertions, 0 deletions

diff --git a/spec/javascripts/vue_shared/components/header_ci_component_spec.js b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
new file mode 100644
index 00000000000..1bf8916b3d0
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
@@ -0,0 +1,82 @@
+import Vue from 'vue';
+import headerCi from '~/vue_shared/components/header_ci_component.vue';
+
+describe('Header CI Component', () => {
+  let HeaderCi;
+  let vm;
+  let props;
+
+  beforeEach(() => {
+    HeaderCi = Vue.extend(headerCi);
+
+    props = {
+      status: {
+        group: 'failed',
+        icon: 'ci-status-failed',
+        label: 'failed',
+        text: 'failed',
+        details_path: 'path',
+      },
+      itemName: 'job',
+      itemId: 123,
+      time: '2017-05-08T14:57:39.781Z',
+      user: {
+        web_url: 'path',
+        name: 'Foo',
+        username: 'foobar',
+        email: 'foo@bar.com',
+        avatar_url: 'link',
+      },
+      actions: [
+        {
+          label: 'Retry',
+          path: 'path',
+          type: 'button',
+          cssClass: 'btn',
+        },
+        {
+          label: 'Go',
+          path: 'path',
+          type: 'link',
+          cssClass: 'link',
+        },
+      ],
+    };
+
+    vm = new HeaderCi({
+      propsData: props,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render status badge', () => {
+    expect(vm.$el.querySelector('.ci-failed')).toBeDefined();
+    expect(vm.$el.querySelector('.ci-status-icon-failed svg')).toBeDefined();
+    expect(
+      vm.$el.querySelector('.ci-failed').getAttribute('href'),
+    ).toEqual(props.status.details_path);
+  });
+
+  it('should render item name and id', () => {
+    expect(vm.$el.querySelector('strong').textContent.trim()).toEqual('job #123');
+  });
+
+  it('should render timeago date', () => {
+    expect(vm.$el.querySelector('time')).toBeDefined();
+  });
+
+  it('should render user icon and name', () => {
+    expect(vm.$el.querySelector('.js-user-link').textContent.trim()).toEqual(props.user.name);
+  });
+
+  it('should render provided actions', () => {
+    expect(vm.$el.querySelector('.btn').tagName).toEqual('BUTTON');
+    expect(vm.$el.querySelector('.btn').textContent.trim()).toEqual(props.actions[0].label);
+    expect(vm.$el.querySelector('.link').tagName).toEqual('A');
+    expect(vm.$el.querySelector('.link').textContent.trim()).toEqual(props.actions[1].label);
+    expect(vm.$el.querySelector('.link').getAttribute('href')).toEqual(props.actions[0].path);
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js b/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js
new file mode 100644
index 00000000000..bf28019ef24
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js
@@ -0,0 +1,68 @@
+import Vue from 'vue';
+import timeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import '~/lib/utils/datetime_utility';
+
+describe('Time ago with tooltip component', () => {
+  let TimeagoTooltip;
+  let vm;
+
+  beforeEach(() => {
+    TimeagoTooltip = Vue.extend(timeagoTooltip);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render timeago with a bootstrap tooltip', () => {
+    vm = new TimeagoTooltip({
+      propsData: {
+        time: '2017-05-08T14:57:39.781Z',
+      },
+    }).$mount();
+
+    expect(vm.$el.tagName).toEqual('TIME');
+    expect(vm.$el.classList.contains('js-timeago')).toEqual(true);
+    expect(
+      vm.$el.getAttribute('data-original-title'),
+    ).toEqual(gl.utils.formatDate('2017-05-08T14:57:39.781Z'));
+    expect(vm.$el.getAttribute('data-placement')).toEqual('top');
+
+    const timeago = gl.utils.getTimeago();
+
+    expect(vm.$el.textContent.trim()).toEqual(timeago.format('2017-05-08T14:57:39.781Z'));
+  });
+
+  it('should render tooltip placed in bottom', () => {
+    vm = new TimeagoTooltip({
+      propsData: {
+        time: '2017-05-08T14:57:39.781Z',
+        tooltipPlacement: 'bottom',
+      },
+    }).$mount();
+
+    expect(vm.$el.getAttribute('data-placement')).toEqual('bottom');
+  });
+
+  it('should render short format class', () => {
+    vm = new TimeagoTooltip({
+      propsData: {
+        time: '2017-05-08T14:57:39.781Z',
+        shortFormat: true,
+      },
+    }).$mount();
+
+    expect(vm.$el.classList.contains('js-short-timeago')).toEqual(true);
+  });
+
+  it('should render provided html class', () => {
+    vm = new TimeagoTooltip({
+      propsData: {
+        time: '2017-05-08T14:57:39.781Z',
+        cssClass: 'foo',
+      },
+    }).$mount();
+
+    expect(vm.$el.classList.contains('foo')).toEqual(true);
+  });
+});