summaryrefslogtreecommitdiff
path: root/spec/javascripts/repo/repo_commit_section_spec.js
blob: e5ffcb8a4ee9ee24e2b83d37f3e1846d84364672 (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
114
115
116
117
118
119
import Vue from 'vue';
import repoCommitSection from '~/repo/repo_commit_section.vue';
import RepoStore from '~/repo/repo_store';
import RepoHelper from '~/repo/repo_helper';
import Api from '~/api';

describe('RepoCommitSection', () => {
  const openedFiles = [{
    id: 0,
    changed: true,
    url: 'master/url0',
    newContent: 'a',
  }, {
    id: 1,
    changed: true,
    url: 'master/url1',
    newContent: 'b',
  }, {
    id: 2,
    changed: false,
  }];
  const branch = 'master';

  function createComponent() {
    const RepoCommitSection = Vue.extend(repoCommitSection);

    return new RepoCommitSection().$mount();
  }

  it('renders a commit section', () => {
    RepoStore.isCommitable = true;
    RepoStore.openedFiles = openedFiles;
    spyOn(RepoHelper, 'getBranch').and.returnValue(branch);

    const vm = createComponent();
    const changedFiles = [...vm.$el.querySelectorAll('.changed-files > li')];
    const commitMessage = vm.$el.querySelector('#commit-message');
    const submitCommit = vm.$el.querySelector('.submit-commit');

    expect(vm.$el.querySelector(':scope > form')).toBeTruthy();
    expect(vm.$el.querySelector('.staged-files').textContent).toEqual('Staged files (2)');
    expect(changedFiles.length).toEqual(2);

    changedFiles.forEach((changedFile, i) => {
      const filePath = RepoHelper.getFilePathFromFullPath(openedFiles[i].url, branch);

      expect(changedFile.textContent).toEqual(filePath);
    });

    expect(commitMessage.tagName).toEqual('TEXTAREA');
    expect(commitMessage.name).toEqual('commit-message');
    expect(submitCommit.type).toEqual('submit');
    expect(submitCommit.disabled).toBeTruthy();
    expect(vm.$el.querySelector('.commit-summary').textContent).toEqual('Commit 2 files');
  });

  it('does not render if not isCommitable', () => {
    RepoStore.isCommitable = false;
    RepoStore.openedFiles = [{
      id: 0,
      changed: true,
    }];

    const vm = createComponent();

    expect(vm.$el.innerHTML).toBeFalsy();
  });

  it('does not render if no changedFiles', () => {
    RepoStore.isCommitable = true;
    RepoStore.openedFiles = [];

    const vm = createComponent();

    expect(vm.$el.innerHTML).toBeFalsy();
  });

  it('shows commit submit and summary if commitMessage and spinner if submitCommitsLoading', (done) => {
    const projectId = 'projectId';
    const commitMessage = 'commitMessage';
    RepoStore.isCommitable = true;
    RepoStore.openedFiles = openedFiles;
    RepoStore.projectId = projectId;

    const vm = createComponent();
    const commitMessageEl = vm.$el.querySelector('#commit-message');
    const submitCommit = vm.$el.querySelector('.submit-commit');

    vm.commitMessage = commitMessage;

    Vue.nextTick(() => {
      expect(commitMessageEl.value).toBe(commitMessage);
      expect(submitCommit.disabled).toBeFalsy();

      spyOn(vm, 'makeCommit').and.callThrough();
      spyOn(Api, 'commitMultiple');

      submitCommit.click();

      Vue.nextTick(() => {
        expect(vm.makeCommit).toHaveBeenCalled();
        expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeTruthy();

        const args = Api.commitMultiple.calls.allArgs()[0];
        const { commit_message, actions } = args[1];

        expect(args[0]).toBe(projectId);
        expect(commit_message).toBe(commitMessage);
        expect(actions.length).toEqual(2);
        expect(actions[0].action).toEqual('update');
        expect(actions[1].action).toEqual('update');
        expect(actions[0].content).toEqual('a');
        expect(actions[1].content).toEqual('b');

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