New file from interface on existing branch

Now you can create a new file and select a target_branch != source_branch.
If the file that you want to create already exists on the target branch an error message is shown
A glDropdown is used to select and create a new branch instead of a text field.

2 files changed, 230 insertions, 0 deletions

diff --git a/spec/javascripts/blob/create_branch_dropdown_spec.js b/spec/javascripts/blob/create_branch_dropdown_spec.js
new file mode 100644
index 00000000000..dafb43761e0
--- /dev/null
+++ b/spec/javascripts/blob/create_branch_dropdown_spec.js
@@ -0,0 +1,109 @@
+require('jquery');
+require('~/extensions/jquery.js');
+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);
+    });
+  });
+});
diff --git a/spec/javascripts/blob/target_branch_dropdown_spec.js b/spec/javascripts/blob/target_branch_dropdown_spec.js
new file mode 100644
index 00000000000..6f3eb4cc7eb
--- /dev/null
+++ b/spec/javascripts/blob/target_branch_dropdown_spec.js
@@ -0,0 +1,121 @@
+require('jquery');
+require('~/extensions/jquery.js');
+require('~/gl_dropdown');
+require('~/lib/utils/type_utility');
+require('~/blob/create_branch_dropdown');
+require('~/blob/target_branch_dropdown');
+
+describe('TargetBranchDropdown', () => {
+  const fixtureTemplate = 'static/target_branch_dropdown.html.raw';
+  let dropdown;
+
+  function createDropdown() {
+    const projectBranches = getJSONFixture('project_branches.json');
+    const dropdownEl = document.querySelector('.js-project-branches-dropdown');
+    dropdown = new gl.TargetBranchDropDown(dropdownEl);
+    dropdown.cachedRefs = projectBranches;
+    dropdown.refreshData();
+    return dropdown;
+  }
+
+  function submitBtn() {
+    return document.querySelector('button[type="submit"]');
+  }
+
+  function searchField() {
+    return document.querySelector('.dropdown-page-one .dropdown-input-field');
+  }
+
+  function element() {
+    return document.querySelectorAll('div.dropdown-content li a');
+  }
+
+  function elementAtIndex(index) {
+    return element()[index];
+  }
+
+  function clickElementAtIndex(index) {
+    elementAtIndex(index).click();
+  }
+
+  preloadFixtures(fixtureTemplate);
+
+  beforeEach(() => {
+    loadFixtures(fixtureTemplate);
+    createDropdown();
+  });
+
+  it('disable submit when branch is not selected', () => {
+    document.querySelector('input[name="target_branch"]').value = null;
+    clickElementAtIndex(1);
+
+    expect(submitBtn().getAttribute('disabled')).toEqual('');
+  });
+
+  it('enable submit when a branch is selected', () => {
+    clickElementAtIndex(1);
+
+    expect(submitBtn().getAttribute('disabled')).toBe(null);
+  });
+
+  it('triggers change.branch event on a branch click', () => {
+    spyOnEvent(dropdown.$dropdown, 'change.branch');
+    clickElementAtIndex(0);
+
+    expect('change.branch').toHaveBeenTriggeredOn(dropdown.$dropdown);
+  });
+
+  describe('#dropdownData', () => {
+    it('cache the refs', () => {
+      const refs = dropdown.cachedRefs;
+      dropdown.cachedRefs = null;
+
+      dropdown.dropdownData(refs);
+
+      expect(dropdown.cachedRefs).toEqual(refs);
+    });
+
+    it('returns the Branches with the newBranch and defaultBranch', () => {
+      const refs = dropdown.cachedRefs;
+      dropdown.branchInput.value = 'master';
+      dropdown.newBranch = { id: 'new_branch', text: 'new_branch', title: 'new_branch' };
+
+      const branches = dropdown.dropdownData(refs).Branches;
+
+      expect(branches.length).toEqual(4);
+      expect(branches[0]).toEqual(dropdown.newBranch);
+      expect(branches[1]).toEqual({ id: 'master', text: 'master', title: 'master' });
+      expect(branches[2]).toEqual({ id: 'development', text: 'development', title: 'development' });
+      expect(branches[3]).toEqual({ id: 'staging', text: 'staging', title: 'staging' });
+    });
+  });
+
+  describe('#setNewBranch', () => {
+    it('adds the new branch and select it', () => {
+      const branchName = 'new_branch';
+
+      dropdown.setNewBranch(branchName);
+
+      expect(elementAtIndex(0)).toHaveClass('is-active');
+      expect(elementAtIndex(0)).toContainHtml(branchName);
+    });
+
+    it("doesn't add a new branch if already exists in the list", () => {
+      const branchName = elementAtIndex(0).text;
+      const initialLength = element().length;
+
+      dropdown.setNewBranch(branchName);
+
+      expect(element().length).toEqual(initialLength);
+    });
+
+    it('clears the search filter', () => {
+      const branchName = elementAtIndex(0).text;
+      searchField().value = 'searching';
+
+      dropdown.setNewBranch(branchName);
+
+      expect(searchField().value).toEqual('');
+    });
+  });
+});