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
|
require('~/gl_dropdown');
require('~/lib/utils/type_utility');
require('~/blob/create_branch_dropdown');
require('~/blob/target_branch_dropdown');
describe('CreateBranchDropdown', () => {
const fixtureTemplate = 'static/target_branch_dropdown.html.raw';
// selectors
const createBranchSel = '.js-new-branch-btn';
const backBtnSel = '.dropdown-menu-back';
const cancelBtnSel = '.js-cancel-branch-btn';
const branchNameSel = '#new_branch_name';
const branchName = 'new_name';
let dropdown;
function createDropdown() {
const dropdownEl = document.querySelector('.js-project-branches-dropdown');
const projectBranches = getJSONFixture('project_branches.json');
dropdown = new gl.TargetBranchDropDown(dropdownEl);
dropdown.cachedRefs = projectBranches;
return dropdown;
}
function createBranchBtn() {
return document.querySelector(createBranchSel);
}
function backBtn() {
return document.querySelector(backBtnSel);
}
function cancelBtn() {
return document.querySelector(cancelBtnSel);
}
function branchNameEl() {
return document.querySelector(branchNameSel);
}
function changeBranchName(text) {
branchNameEl().value = text;
branchNameEl().dispatchEvent(new Event('change'));
}
preloadFixtures(fixtureTemplate);
beforeEach(() => {
loadFixtures(fixtureTemplate);
createDropdown();
});
it('disable submit when branch name is empty', () => {
expect(createBranchBtn()).toBeDisabled();
});
it('enable submit when branch name is present', () => {
changeBranchName(branchName);
expect(createBranchBtn()).not.toBeDisabled();
});
it('resets the form when cancel btn is clicked and triggers dropdownback', () => {
const spyBackEvent = spyOnEvent(backBtnSel, 'click');
changeBranchName(branchName);
cancelBtn().click();
expect(branchNameEl()).toHaveValue('');
expect(spyBackEvent).toHaveBeenTriggered();
});
it('resets the form when back btn is clicked', () => {
changeBranchName(branchName);
backBtn().click();
expect(branchNameEl()).toHaveValue('');
});
describe('new branch creation', () => {
beforeEach(() => {
changeBranchName(branchName);
});
it('sets the new branch name and updates the dropdown', () => {
spyOn(dropdown, 'setNewBranch');
createBranchBtn().click();
expect(dropdown.setNewBranch).toHaveBeenCalledWith(branchName);
});
it('resets the form', () => {
createBranchBtn().click();
expect(branchNameEl()).toHaveValue('');
});
it('is triggered with enter keypress', () => {
spyOn(dropdown, 'setNewBranch');
const enterEvent = new Event('keydown');
enterEvent.which = 13;
branchNameEl().dispatchEvent(enterEvent);
expect(dropdown.setNewBranch).toHaveBeenCalledWith(branchName);
});
});
});
|
