Many Repo Fixes

7 files changed, 47 insertions, 62 deletions

diff --git a/spec/javascripts/repo/components/repo_commit_section_spec.js b/spec/javascripts/repo/components/repo_commit_section_spec.js
index db2b7d51626..249a2f36fcd 100644
--- a/spec/javascripts/repo/components/repo_commit_section_spec.js
+++ b/spec/javascripts/repo/components/repo_commit_section_spec.js
@@ -1,57 +1,57 @@
 import Vue from 'vue';
 import repoCommitSection from '~/repo/components/repo_commit_section.vue';
 import RepoStore from '~/repo/stores/repo_store';
-import RepoHelper from '~/repo/helpers/repo_helper';
 import Api from '~/api';
 
 describe('RepoCommitSection', () => {
   const branch = 'master';
   const projectUrl = 'projectUrl';
-  const openedFiles = [{
+  const changedFiles = [{
     id: 0,
     changed: true,
     url: `/namespace/${projectUrl}/blob/${branch}/dir/file0.ext`,
+    path: 'dir/file0.ext',
     newContent: 'a',
   }, {
     id: 1,
     changed: true,
     url: `/namespace/${projectUrl}/blob/${branch}/dir/file1.ext`,
+    path: 'dir/file1.ext',
     newContent: 'b',
-  }, {
+  }];
+  const openedFiles = changedFiles.concat([{
     id: 2,
     url: `/namespace/${projectUrl}/blob/${branch}/dir/file2.ext`,
+    path: 'dir/file2.ext',
     changed: false,
-  }];
+  }]);
 
   RepoStore.projectUrl = projectUrl;
 
-  function createComponent() {
+  function createComponent(el) {
     const RepoCommitSection = Vue.extend(repoCommitSection);
 
-    return new RepoCommitSection().$mount();
+    return new RepoCommitSection().$mount(el);
   }
 
   it('renders a commit section', () => {
     RepoStore.isCommitable = true;
+    RepoStore.currentBranch = branch;
     RepoStore.targetBranch = branch;
     RepoStore.openedFiles = openedFiles;
 
-    spyOn(RepoHelper, 'getBranch').and.returnValue(branch);
-
     const vm = createComponent();
-    const changedFiles = [...vm.$el.querySelectorAll('.changed-files > li')];
+    const changedFileElements = [...vm.$el.querySelectorAll('.changed-files > li')];
     const commitMessage = vm.$el.querySelector('#commit-message');
-    const submitCommit = vm.$el.querySelector('.submit-commit');
+    const submitCommit = vm.$refs.submitCommit;
     const targetBranch = vm.$el.querySelector('.target-branch');
 
     expect(vm.$el.querySelector(':scope > form')).toBeTruthy();
-    expect(vm.$el.querySelector('.staged-files').textContent).toEqual('Staged files (2)');
-    expect(changedFiles.length).toEqual(2);
+    expect(vm.$el.querySelector('.staged-files').textContent.trim()).toEqual('Staged files (2)');
+    expect(changedFileElements.length).toEqual(2);
 
-    changedFiles.forEach((changedFile, i) => {
-      const filePath = RepoHelper.getFilePathFromFullPath(openedFiles[i].url, branch);
-
-      expect(changedFile.textContent).toEqual(filePath);
+    changedFileElements.forEach((changedFile, i) => {
+      expect(changedFile.textContent.trim()).toEqual(changedFiles[i].path);
     });
 
     expect(commitMessage.tagName).toEqual('TEXTAREA');
@@ -59,9 +59,9 @@ describe('RepoCommitSection', () => {
     expect(submitCommit.type).toEqual('submit');
     expect(submitCommit.disabled).toBeTruthy();
     expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeFalsy();
-    expect(vm.$el.querySelector('.commit-summary').textContent).toEqual('Commit 2 files');
-    expect(targetBranch.querySelector(':scope > label').textContent).toEqual('Target branch');
-    expect(targetBranch.querySelector('.help-block').textContent).toEqual(branch);
+    expect(vm.$el.querySelector('.commit-summary').textContent.trim()).toEqual('Commit 2 files');
+    expect(targetBranch.querySelector(':scope > label').textContent.trim()).toEqual('Target branch');
+    expect(targetBranch.querySelector('.help-block').textContent.trim()).toEqual(branch);
   });
 
   it('does not render if not isCommitable', () => {
@@ -89,14 +89,20 @@ describe('RepoCommitSection', () => {
     const projectId = 'projectId';
     const commitMessage = 'commitMessage';
     RepoStore.isCommitable = true;
+    RepoStore.currentBranch = branch;
+    RepoStore.targetBranch = branch;
     RepoStore.openedFiles = openedFiles;
     RepoStore.projectId = projectId;
 
-    spyOn(RepoHelper, 'getBranch').and.returnValue(branch);
+    // We need to append to body to get form `submit` events working
+    // Otherwise we run into, "Form submission canceled because the form is not connected"
+    // See https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-algorithm
+    const el = document.createElement('div');
+    document.body.appendChild(el);
 
-    const vm = createComponent();
+    const vm = createComponent(el);
     const commitMessageEl = vm.$el.querySelector('#commit-message');
-    const submitCommit = vm.$el.querySelector('.submit-commit');
+    const submitCommit = vm.$refs.submitCommit;
 
     vm.commitMessage = commitMessage;
 
@@ -124,10 +130,8 @@ describe('RepoCommitSection', () => {
         expect(actions[1].action).toEqual('update');
         expect(actions[0].content).toEqual(openedFiles[0].newContent);
         expect(actions[1].content).toEqual(openedFiles[1].newContent);
-        expect(actions[0].file_path)
-          .toEqual(RepoHelper.getFilePathFromFullPath(openedFiles[0].url, branch));
-        expect(actions[1].file_path)
-          .toEqual(RepoHelper.getFilePathFromFullPath(openedFiles[1].url, branch));
+        expect(actions[0].file_path).toEqual(openedFiles[0].path);
+        expect(actions[1].file_path).toEqual(openedFiles[1].path);
 
         done();
       });
@@ -140,7 +144,6 @@ describe('RepoCommitSection', () => {
         const vm = {
           submitCommitsLoading: true,
           changedFiles: new Array(10),
-          openedFiles: new Array(10),
           commitMessage: 'commitMessage',
           editMode: true,
         };
@@ -149,7 +152,6 @@ describe('RepoCommitSection', () => {
 
         expect(vm.submitCommitsLoading).toEqual(false);
         expect(vm.changedFiles).toEqual([]);
-        expect(vm.openedFiles).toEqual([]);
         expect(vm.commitMessage).toEqual('');
         expect(vm.editMode).toEqual(false);
       });
diff --git a/spec/javascripts/repo/components/repo_edit_button_spec.js b/spec/javascripts/repo/components/repo_edit_button_spec.js
index 2e0406cae34..29dc2d21e4b 100644
--- a/spec/javascripts/repo/components/repo_edit_button_spec.js
+++ b/spec/javascripts/repo/components/repo_edit_button_spec.js
@@ -12,19 +12,21 @@ describe('RepoEditButton', () => {
   it('renders an edit button that toggles the view state', (done) => {
     RepoStore.isCommitable = true;
     RepoStore.changedFiles = [];
+    RepoStore.binary = false;
+    RepoStore.openedFiles = [{}, {}];
 
     const vm = createComponent();
 
     expect(vm.$el.tagName).toEqual('BUTTON');
     expect(vm.$el.textContent).toMatch('Edit');
 
-    spyOn(vm, 'editClicked').and.callThrough();
+    spyOn(vm, 'editCancelClicked').and.callThrough();
     spyOn(vm, 'toggleProjectRefsForm');
 
     vm.$el.click();
 
     Vue.nextTick(() => {
-      expect(vm.editClicked).toHaveBeenCalled();
+      expect(vm.editCancelClicked).toHaveBeenCalled();
       expect(vm.toggleProjectRefsForm).toHaveBeenCalled();
       expect(vm.$el.textContent).toMatch('Cancel edit');
       done();
@@ -40,14 +42,10 @@ describe('RepoEditButton', () => {
   });
 
   describe('methods', () => {
-    describe('editClicked', () => {
-      it('sets dialog to open when there are changedFiles', () => {
+    describe('editCancelClicked', () => {
+      it('sets dialog to open when there are changedFiles');
 
-      });
-
-      it('toggles editMode and calls toggleBlobView', () => {
-
-      });
+      it('toggles editMode and calls toggleBlobView');
     });
   });
 });
diff --git a/spec/javascripts/repo/components/repo_file_buttons_spec.js b/spec/javascripts/repo/components/repo_file_buttons_spec.js
index d15c3e33459..dfab51710c3 100644
--- a/spec/javascripts/repo/components/repo_file_buttons_spec.js
+++ b/spec/javascripts/repo/components/repo_file_buttons_spec.js
@@ -32,13 +32,13 @@ describe('RepoFileButtons', () => {
 
     expect(vm.$el.id).toEqual('repo-file-buttons');
     expect(raw.href).toMatch(`/${activeFile.raw_path}`);
-    expect(raw.textContent).toEqual('Raw');
+    expect(raw.textContent.trim()).toEqual('Raw');
     expect(blame.href).toMatch(`/${activeFile.blame_path}`);
-    expect(blame.textContent).toEqual('Blame');
+    expect(blame.textContent.trim()).toEqual('Blame');
     expect(history.href).toMatch(`/${activeFile.commits_path}`);
-    expect(history.textContent).toEqual('History');
-    expect(vm.$el.querySelector('.permalink').textContent).toEqual('Permalink');
-    expect(vm.$el.querySelector('.preview').textContent).toEqual(activeFileLabel);
+    expect(history.textContent.trim()).toEqual('History');
+    expect(vm.$el.querySelector('.permalink').textContent.trim()).toEqual('Permalink');
+    expect(vm.$el.querySelector('.preview').textContent.trim()).toEqual(activeFileLabel);
   });
 
   it('triggers rawPreviewToggle on preview click', () => {
@@ -72,12 +72,4 @@ describe('RepoFileButtons', () => {
 
     expect(vm.$el.querySelector('.preview')).toBeFalsy();
   });
-
-  it('does not render if not isMini', () => {
-    RepoStore.openedFiles = [];
-
-    const vm = createComponent();
-
-    expect(vm.$el.innerHTML).toBeFalsy();
-  });
 });
diff --git a/spec/javascripts/repo/components/repo_file_spec.js b/spec/javascripts/repo/components/repo_file_spec.js
index 90616ae13ca..518a2d25ecf 100644
--- a/spec/javascripts/repo/components/repo_file_spec.js
+++ b/spec/javascripts/repo/components/repo_file_spec.js
@@ -39,9 +39,9 @@ describe('RepoFile', () => {
     expect(vm.$el.querySelector(`.${file.icon}`).style.marginLeft).toEqual('100px');
     expect(name.title).toEqual(file.url);
     expect(name.href).toMatch(`/${file.url}`);
-    expect(name.textContent).toEqual(file.name);
-    expect(vm.$el.querySelector('.commit-message').textContent).toBe(file.lastCommitMessage);
-    expect(vm.$el.querySelector('.commit-update').textContent).toBe(updated);
+    expect(name.textContent.trim()).toEqual(file.name);
+    expect(vm.$el.querySelector('.commit-message').textContent.trim()).toBe(file.lastCommitMessage);
+    expect(vm.$el.querySelector('.commit-update').textContent.trim()).toBe(updated);
     expect(fileIcon.classList.contains(file.icon)).toBeTruthy();
     expect(fileIcon.style.marginLeft).toEqual(`${file.level * 10}px`);
   });
diff --git a/spec/javascripts/repo/components/repo_loading_file_spec.js b/spec/javascripts/repo/components/repo_loading_file_spec.js
index d84f4c5609e..a030314d749 100644
--- a/spec/javascripts/repo/components/repo_loading_file_spec.js
+++ b/spec/javascripts/repo/components/repo_loading_file_spec.js
@@ -13,7 +13,7 @@ describe('RepoLoadingFile', () => {
   function assertLines(lines) {
     lines.forEach((line, n) => {
       const index = n + 1;
-      expect(line.classList.contains(`line-of-code-${index}`)).toBeTruthy();
+      expect(line.classList.contains(`skeleton-line-${index}`)).toBeTruthy();
     });
   }
 
diff --git a/spec/javascripts/repo/components/repo_sidebar_spec.js b/spec/javascripts/repo/components/repo_sidebar_spec.js
index edd27d3afb8..abcff8e537e 100644
--- a/spec/javascripts/repo/components/repo_sidebar_spec.js
+++ b/spec/javascripts/repo/components/repo_sidebar_spec.js
@@ -15,6 +15,7 @@ describe('RepoSidebar', () => {
     RepoStore.files = [{
       id: 0,
     }];
+    RepoStore.openedFiles = [];
     const vm = createComponent();
     const thead = vm.$el.querySelector('thead');
     const tbody = vm.$el.querySelector('tbody');
diff --git a/spec/javascripts/repo/components/repo_tabs_spec.js b/spec/javascripts/repo/components/repo_tabs_spec.js
index 306af735dee..a02b54efafc 100644
--- a/spec/javascripts/repo/components/repo_tabs_spec.js
+++ b/spec/javascripts/repo/components/repo_tabs_spec.js
@@ -29,14 +29,6 @@ describe('RepoTabs', () => {
     expect(tabs[2].classList.contains('tabs-divider')).toBeTruthy();
   });
 
-  it('does not render a tabs list if not isMini', () => {
-    RepoStore.openedFiles = [];
-
-    const vm = createComponent();
-
-    expect(vm.$el.innerHTML).toBeFalsy();
-  });
-
   describe('methods', () => {
     describe('tabClosed', () => {
       it('calls removeFromOpenedFiles with file obj', () => {