summaryrefslogtreecommitdiff
path: root/spec/frontend/issue_show/components/edit_actions_spec.js
blob: 79a2bcd5eab3aea7e5e4caa7b857997c91b16ab1 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import Vue from 'vue';
import editActions from '~/issue_show/components/edit_actions.vue';
import eventHub from '~/issue_show/event_hub';
import Store from '~/issue_show/stores';

describe('Edit Actions components', () => {
  let vm;

  beforeEach(done => {
    const Component = Vue.extend(editActions);
    const store = new Store({
      titleHtml: '',
      descriptionHtml: '',
      issuableRef: '',
    });
    store.formState.title = 'test';

    jest.spyOn(eventHub, '$emit').mockImplementation(() => {});

    vm = new Component({
      propsData: {
        canDestroy: true,
        formState: store.formState,
        issuableType: 'issue',
      },
    }).$mount();

    Vue.nextTick(done);
  });

  it('renders all buttons as enabled', () => {
    expect(vm.$el.querySelectorAll('.disabled').length).toBe(0);

    expect(vm.$el.querySelectorAll('[disabled]').length).toBe(0);
  });

  it('does not render delete button if canUpdate is false', done => {
    vm.canDestroy = false;

    Vue.nextTick(() => {
      expect(vm.$el.querySelector('.btn-danger')).toBeNull();

      done();
    });
  });

  it('disables submit button when title is blank', done => {
    vm.formState.title = '';

    Vue.nextTick(() => {
      expect(vm.$el.querySelector('.btn-success').getAttribute('disabled')).toBe('disabled');

      done();
    });
  });

  it('should not show delete button if showDeleteButton is false', done => {
    vm.showDeleteButton = false;

    Vue.nextTick(() => {
      expect(vm.$el.querySelector('.btn-danger')).toBeNull();
      done();
    });
  });

  describe('updateIssuable', () => {
    it('sends update.issauble event when clicking save button', () => {
      vm.$el.querySelector('.btn-success').click();

      expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
    });

    it('disabled button after clicking save button', done => {
      vm.$el.querySelector('.btn-success').click();

      Vue.nextTick(() => {
        expect(vm.$el.querySelector('.btn-success').getAttribute('disabled')).toBe('disabled');

        done();
      });
    });
  });

  describe('closeForm', () => {
    it('emits close.form when clicking cancel', () => {
      vm.$el.querySelector('.btn-default').click();

      expect(eventHub.$emit).toHaveBeenCalledWith('close.form');
    });
  });

  describe('deleteIssuable', () => {
    it('sends delete.issuable event when clicking save button', () => {
      jest.spyOn(window, 'confirm').mockReturnValue(true);
      vm.$el.querySelector('.btn-danger').click();

      expect(eventHub.$emit).toHaveBeenCalledWith('delete.issuable', { destroy_confirm: true });
    });

    it('does no actions when confirm is false', done => {
      jest.spyOn(window, 'confirm').mockReturnValue(false);
      vm.$el.querySelector('.btn-danger').click();

      Vue.nextTick(() => {
        expect(eventHub.$emit).not.toHaveBeenCalledWith('delete.issuable');

        expect(vm.$el.querySelector('.btn-danger .fa')).toBeNull();

        done();
      });
    });
  });
});