Fix up karma tests

app/assets/javascripts/repo/components/repo_commit_section.vue

@@ -10,7 +10,6 @@ const RepoCommitSection = {
   mixins: [RepoMixin],
 
   computed: {
-
     showCommitable() {
       return this.isCommitable && this.changedFiles.length;
     },
@@ -73,9 +72,9 @@ export default RepoCommitSection;
         </label>
         <div class="col-md-6">
           <ul class="list-unstyled changed-files">
-            <li v-for="file in branchPaths" :key="file.id">
+            <li v-for="branchPath in branchPaths" :key="branchPath">
               <span class="help-block">
-                {{file}}
+                {{branchPath}}
               </span>
             </li>
           </ul>
@@ -110,9 +109,10 @@ export default RepoCommitSection;
       </div>
       <div class="col-md-offset-4 col-md-6">
         <button
+          ref="submitCommit"
           type="submit"
           :disabled="cantCommitYet"
-          class="btn btn-success submit-commit">
+          class="btn btn-success">
           <i
             v-if="submitCommitsLoading"
             class="fa fa-spinner fa-spin"

spec/javascripts/repo/components/repo_commit_section_spec.js

@@ -7,51 +7,52 @@ 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 +60,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 +90,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 +131,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 +145,6 @@ describe('RepoCommitSection', () => {
         const vm = {
           submitCommitsLoading: true,
           changedFiles: new Array(10),
-          openedFiles: new Array(10),
           commitMessage: 'commitMessage',
           editMode: true,
         };
@@ -149,7 +153,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);
       });

spec/javascripts/repo/components/repo_edit_button_spec.js

@@ -12,18 +12,20 @@ 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();
 
     vm.$el.click();
 
     Vue.nextTick(() => {
-      expect(vm.editClicked).toHaveBeenCalled();
+      expect(vm.editCancelClicked).toHaveBeenCalled();
       expect(vm.$el.textContent).toMatch('Cancel edit');
       done();
     });
@@ -38,14 +40,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');
     });
   });
 });

spec/javascripts/repo/components/repo_file_buttons_spec.js

@@ -71,12 +71,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();
-  });
 });