BigW Consortium Gitlab

board_new_issue_spec.js 4.63 KB
Newer Older
Phil Hughes committed
1 2 3 4
/* global boardsMockInterceptor */
/* global BoardService */
/* global List */
/* global listObj */
5

Phil Hughes committed
6
import Vue from 'vue';
7 8
import boardNewIssue from '~/boards/components/board_new_issue';

9 10
import '~/boards/models/list';
import './mock_data';
11

Phil Hughes committed
12
describe('Issue boards new issue form', () => {
13 14
  let vm;
  let list;
15
  let newIssueMock;
16 17 18 19 20 21 22
  const promiseReturn = {
    json() {
      return {
        iid: 100,
      };
    },
  };
23

24
  const submitIssue = () => {
25 26 27 28 29
    const dummySubmitEvent = {
      preventDefault() {},
    };
    vm.$refs.submitButton = vm.$el.querySelector('.btn-success');
    return vm.submit(dummySubmitEvent);
30 31 32 33 34 35 36 37 38 39
  };

  beforeEach((done) => {
    const BoardNewIssueComp = Vue.extend(boardNewIssue);

    Vue.http.interceptors.push(boardsMockInterceptor);
    gl.boardService = new BoardService('/test/issue-boards/board', '', '1');
    gl.issueBoards.BoardsStore.create();
    gl.IssueBoardsApp = new Vue();

40 41 42 43 44 45 46 47 48 49 50 51 52 53
    list = new List(listObj);

    newIssueMock = Promise.resolve(promiseReturn);
    spyOn(list, 'newIssue').and.callFake(() => newIssueMock);

    vm = new BoardNewIssueComp({
      propsData: {
        list,
      },
    }).$mount();

    Vue.nextTick()
      .then(done)
      .catch(done.fail);
54 55
  });

56 57 58 59 60 61 62 63 64 65 66 67 68
  it('calls submit if submit button is clicked', (done) => {
    spyOn(vm, 'submit');
    vm.title = 'Testing Title';

    Vue.nextTick()
      .then(() => {
        vm.$el.querySelector('.btn-success').click();

        expect(vm.submit.calls.count()).toBe(1);
        expect(vm.$refs['submit-button']).toBe(vm.$el.querySelector('.btn-success'));
      })
      .then(done)
      .catch(done.fail);
69 70 71 72 73 74 75 76 77
  });

  it('disables submit button if title is empty', () => {
    expect(vm.$el.querySelector('.btn-success').disabled).toBe(true);
  });

  it('enables submit button if title is not empty', (done) => {
    vm.title = 'Testing Title';

78 79 80 81 82 83 84
    Vue.nextTick()
      .then(() => {
        expect(vm.$el.querySelector('.form-control').value).toBe('Testing Title');
        expect(vm.$el.querySelector('.btn-success').disabled).not.toBe(true);
      })
      .then(done)
      .catch(done.fail);
85 86 87 88 89
  });

  it('clears title after clicking cancel', (done) => {
    vm.$el.querySelector('.btn-default').click();

90 91 92 93 94 95
    Vue.nextTick()
      .then(() => {
        expect(vm.title).toBe('');
      })
      .then(done)
      .catch(done.fail);
96 97 98
  });

  it('does not create new issue if title is empty', (done) => {
99 100 101 102 103 104
    submitIssue()
      .then(() => {
        expect(list.newIssue).not.toHaveBeenCalled();
      })
      .then(done)
      .catch(done.fail);
105 106 107 108 109 110
  });

  describe('submit success', () => {
    it('creates new issue', (done) => {
      vm.title = 'submit title';

111 112 113 114 115 116 117
      Vue.nextTick()
        .then(submitIssue)
        .then(() => {
          expect(list.newIssue).toHaveBeenCalled();
        })
        .then(done)
        .catch(done.fail);
118 119 120
    });

    it('enables button after submit', (done) => {
Phil Hughes committed
121
      vm.title = 'submit issue';
122

123 124 125 126 127 128 129
      Vue.nextTick()
        .then(submitIssue)
        .then(() => {
          expect(vm.$el.querySelector('.btn-success').disabled).toBe(false);
        })
        .then(done)
        .catch(done.fail);
130 131 132 133 134
    });

    it('clears title after submit', (done) => {
      vm.title = 'submit issue';

135 136 137
      Vue.nextTick()
        .then(submitIssue)
        .then(() => {
138
          expect(vm.title).toBe('');
139 140 141
        })
        .then(done)
        .catch(done.fail);
142 143 144
    });

    it('sets detail issue after submit', (done) => {
145
      expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe(undefined);
146 147
      vm.title = 'submit issue';

148 149 150
      Vue.nextTick()
        .then(submitIssue)
        .then(() => {
151
          expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe('submit issue');
152 153 154
        })
        .then(done)
        .catch(done.fail);
155 156 157 158 159
    });

    it('sets detail list after submit', (done) => {
      vm.title = 'submit issue';

160 161 162
      Vue.nextTick()
        .then(submitIssue)
        .then(() => {
163
          expect(gl.issueBoards.BoardsStore.detail.list.id).toBe(list.id);
164 165 166
        })
        .then(done)
        .catch(done.fail);
167 168 169 170
    });
  });

  describe('submit error', () => {
171 172
    beforeEach(() => {
      newIssueMock = Promise.reject(new Error('My hovercraft is full of eels!'));
173
      vm.title = 'error';
174
    });
175

176 177 178 179
    it('removes issue', (done) => {
      Vue.nextTick()
        .then(submitIssue)
        .then(() => {
180
          expect(list.issues.length).toBe(1);
181 182 183
        })
        .then(done)
        .catch(done.fail);
184 185 186
    });

    it('shows error', (done) => {
187 188 189
      Vue.nextTick()
        .then(submitIssue)
        .then(() => {
190
          expect(vm.error).toBe(true);
191 192 193
        })
        .then(done)
        .catch(done.fail);
194 195 196
    });
  });
});