header_ci_component_spec.js 2.7 KB
Newer Older
1
import Vue from 'vue';
2
import mountComponent from 'spec/helpers/vue_mount_component_helper';
3
import headerCi from '~/vue_shared/components/header_ci_component.vue';
4 5 6 7 8 9 10 11 12 13 14

describe('Header CI Component', () => {
  let HeaderCi;
  let vm;
  let props;

  beforeEach(() => {
    HeaderCi = Vue.extend(headerCi);
    props = {
      status: {
        group: 'failed',
Lukas Eipert's avatar
Lukas Eipert committed
15
        icon: 'status_failed',
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
        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',
          cssClass: 'btn',
35
          isLoading: false,
36 37
        },
      ],
38
      hasSidebarButton: true,
39 40 41 42 43 44 45
    };
  });

  afterEach(() => {
    vm.$destroy();
  });

46 47 48 49
  describe('render', () => {
    beforeEach(() => {
      vm = mountComponent(HeaderCi, props);
    });
50

51 52 53
    it('should render status badge', () => {
      expect(vm.$el.querySelector('.ci-failed')).toBeDefined();
      expect(vm.$el.querySelector('.ci-status-icon-failed svg')).toBeDefined();
Mike Greiling's avatar
Mike Greiling committed
54 55 56
      expect(vm.$el.querySelector('.ci-failed').getAttribute('href')).toEqual(
        props.status.details_path,
      );
57
    });
58

59 60 61
    it('should render item name and id', () => {
      expect(vm.$el.querySelector('strong').textContent.trim()).toEqual('job #123');
    });
62

63 64 65
    it('should render timeago date', () => {
      expect(vm.$el.querySelector('time')).toBeDefined();
    });
66

67
    it('should render user icon and name', () => {
68
      expect(vm.$el.querySelector('.js-user-link').innerText.trim()).toContain(props.user.name);
69 70 71
    });

    it('should render provided actions', () => {
72 73 74 75
      const btn = vm.$el.querySelector('.btn');

      expect(btn.tagName).toEqual('BUTTON');
      expect(btn.textContent.trim()).toEqual(props.actions[0].label);
76
    });
77

Mike Greiling's avatar
Mike Greiling committed
78
    it('should show loading icon', done => {
79
      vm.actions[0].isLoading = true;
80

81
      Vue.nextTick(() => {
82
        expect(vm.$el.querySelector('.btn .gl-spinner').getAttribute('style')).toBeFalsy();
83 84 85 86 87
        done();
      });
    });

    it('should render sidebar toggle button', () => {
88
      expect(vm.$el.querySelector('.js-sidebar-build-toggle')).not.toBeNull();
89 90
    });
  });
91

Filipa Lacerda's avatar
Filipa Lacerda committed
92 93 94
  describe('shouldRenderTriggeredLabel', () => {
    it('should rendered created keyword when the shouldRenderTriggeredLabel is false', () => {
      vm = mountComponent(HeaderCi, { ...props, shouldRenderTriggeredLabel: false });
95 96 97 98

      expect(vm.$el.textContent).toContain('created');
      expect(vm.$el.textContent).not.toContain('triggered');
    });
99
  });
100
});