added specs

app/assets/javascripts/repo/components/commit_sidebar/list.vue

@@ -62,7 +62,6 @@
     <div class="multi-file-commit-list">
       <list-collapsed
         v-if="collapsed"
-        :file-list="fileList"
       />
       <template v-else>
         <ul

app/assets/javascripts/repo/components/commit_sidebar/list_collapsed.vue

@@ -6,12 +6,6 @@
     components: {
       icon,
     },
-    props: {
-      fileList: {
-        type: Array,
-        required: true,
-      },
-    },
     computed: {
       ...mapGetters([
         'addedFiles',

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

@@ -31,7 +31,7 @@ export default {
       'changedFiles',
     ]),
     commitButtonDisabled() {
-      return !this.commitMessage || this.submitCommitsLoading || !this.changedFiles.length;
+      return this.commitMessage === '' || this.submitCommitsLoading || !this.changedFiles.length;
     },
     commitMessageCount() {
       return this.commitMessage.length;

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

@@ -55,7 +55,7 @@
     class="file"
     @click.prevent="clickedTreeRow(file)">
     <td
-      class="multi-file-table-col-name"
+      class="multi-file-table-name"
       :colspan="submoduleColSpan"
     >
       <i

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

@@ -53,7 +53,7 @@ export default {
         >
         </th>
         <template v-else>
-          <th class="name multi-file-table-col-name">
+          <th class="name multi-file-table-name">
             Name
           </th>
           <th class="hidden-sm hidden-xs last-commit">

app/assets/stylesheets/pages/repo.scss

@@ -44,13 +44,13 @@
   &.is-collapsed {
     .ide-file-list {
       max-width: 250px;
-      overflow: scroll;
     }
   }
 }
 
 .ide-file-list {
   flex: 1;
+  overflow: scroll;
 
   .file {
     cursor: pointer;
@@ -59,9 +59,14 @@
   a {
     color: $gl-text-color;
   }
+
+  th {
+    position: sticky;
+    top: 0;
+  }
 }
 
-.multi-file-table-col-name,
+.multi-file-table-name,
 .multi-file-table-col-commit-message {
   white-space: nowrap;
   overflow: hidden;
@@ -69,12 +74,12 @@
   max-width: 0;
 }
 
-.multi-file-table-col-name {
+.multi-file-table-name {
   width: 350px;
 }
 
 .multi-file-table-col-commit-message {
-  width: 450px;
+  width: 50%;
 }
 
 .multi-file-edit-pane {
@@ -97,12 +102,12 @@
 }
 
 .multi-file-tab {
+  @include str-truncated(150px);
   padding: ($gl-padding / 2) ($gl-padding + 12) ($gl-padding / 2) $gl-padding;
   background-color: $gray-normal;
   border-right: 1px solid $white-dark;
   border-bottom: 1px solid $white-dark;
   cursor: pointer;
-  @include str-truncated(150px);
 
   &.active {
     background-color: $white-light;
@@ -146,29 +151,27 @@
   height: 100%;
   overflow: scroll;
 
-  & {
-    .blob-viewer {
-      height: 100%;
-    }
+  .blob-viewer {
+    height: 100%;
+  }
 
-    .file-content.code {
-      display: flex;
+  .file-content.code {
+    display: flex;
 
-      i {
-        margin-left: -10px;
-      }
+    i {
+      margin-left: -10px;
     }
+  }
 
-    .line-numbers {
-      min-width: 50px;
-    }
+  .line-numbers {
+    min-width: 50px;
+  }
 
-    .file-content,
-    .line-numbers,
-    .blob-content,
-    .code {
-      min-height: 100%;
-    }
+  .file-content,
+  .line-numbers,
+  .blob-content,
+  .code {
+    min-height: 100%;
   }
 }
 
@@ -196,7 +199,7 @@
 .multi-file-commit-panel-header {
   display: flex;
   align-items: center;
-  padding: 0 0 12px 0;
+  padding: 0 0 12px;
   margin-bottom: 12px;
   border-bottom: 1px solid $white-dark;
 

spec/javascripts/repo/components/commit_sidebar/list_collapsed_spec.js

+import Vue from 'vue';
+import store from '~/repo/stores';
+import listCollapsed from '~/repo/components/commit_sidebar/list_collapsed.vue';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+import { file } from '../../helpers';
+
+describe('Multi-file editor commit sidebar list collapsed', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(listCollapsed);
+
+    vm = createComponentWithStore(Component, store);
+
+    vm.$store.state.openFiles.push(file(), file());
+    vm.$store.state.openFiles[0].tempFile = true;
+    vm.$store.state.openFiles.forEach((f) => {
+      Object.assign(f, {
+        changed: true,
+      });
+    });
+
+    vm.$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders added & modified files count', () => {
+    expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toBe('1 1');
+  });
+});

spec/javascripts/repo/components/commit_sidebar/list_item_spec.js

+import Vue from 'vue';
+import listItem from '~/repo/components/commit_sidebar/list_item.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
+import { file } from '../../helpers';
+
+describe('Multi-file editor commit sidebar list item', () => {
+  let vm;
+  let f;
+
+  beforeEach(() => {
+    const Component = Vue.extend(listItem);
+
+    f = file();
+
+    vm = mountComponent(Component, {
+      file: f,
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders file path', () => {
+    expect(vm.$el.querySelector('.multi-file-commit-list-path').textContent.trim()).toBe(f.path);
+  });
+
+  describe('computed', () => {
+    describe('iconName', () => {
+      it('returns modified when not a tempFile', () => {
+        expect(vm.iconName).toBe('file-modified');
+      });
+
+      it('returns addition when not a tempFile', () => {
+        f.tempFile = true;
+
+        expect(vm.iconName).toBe('file-addition');
+      });
+    });
+
+    describe('iconClass', () => {
+      it('returns modified when not a tempFile', () => {
+        expect(vm.iconClass).toContain('multi-file-modified');
+      });
+
+      it('returns addition when not a tempFile', () => {
+        f.tempFile = true;
+
+        expect(vm.iconClass).toContain('multi-file-addition');
+      });
+    });
+  });
+});

spec/javascripts/repo/components/commit_sidebar/list_spec.js

+import Vue from 'vue';
+import store from '~/repo/stores';
+import commitSidebarList from '~/repo/components/commit_sidebar/list.vue';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+import { file } from '../../helpers';
+
+describe('Multi-file editor commit sidebar list', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(commitSidebarList);
+
+    vm = createComponentWithStore(Component, store, {
+      title: 'Staged',
+      fileList: [],
+      collapsed: false,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('empty file list', () => {
+    it('renders no changes text', () => {
+      expect(vm.$el.querySelector('.help-block').textContent.trim()).toBe('No changes');
+    });
+  });
+
+  describe('with a list of files', () => {
+    beforeEach((done) => {
+      const f = file('file name');
+      f.changed = true;
+      vm.fileList.push(f);
+
+      Vue.nextTick(done);
+    });
+
+    it('renders list', () => {
+      expect(vm.$el.querySelectorAll('li').length).toBe(1);
+    });
+  });
+
+  describe('collapsed', () => {
+    beforeEach((done) => {
+      vm.collapsed = true;
+
+      Vue.nextTick(done);
+    });
+
+    it('adds collapsed class', () => {
+      expect(vm.$el.querySelector('.is-collapsed')).not.toBeNull();
+    });
+
+    it('hides list', () => {
+      expect(vm.$el.querySelector('.list-unstyled')).toBeNull();
+      expect(vm.$el.querySelector('.help-block')).toBeNull();
+    });
+
+    it('hides collapse button', () => {
+      expect(vm.$el.querySelector('.multi-file-commit-panel-collapse-btn')).toBeNull();
+    });
+  });
+
+  it('clicking toggle collapse button emits toggle event', () => {
+    spyOn(vm, '$emit');
+
+    vm.$el.querySelector('.multi-file-commit-panel-collapse-btn').click();
+
+    expect(vm.$emit).toHaveBeenCalledWith('toggleCollapsed');
+  });
+});

spec/javascripts/repo/components/repo_commit_section_spec.js

@@ -25,8 +25,12 @@ describe('RepoCommitSection', () => {
     return comp.$mount();
   }
 
-  beforeEach(() => {
+  beforeEach((done) => {
     vm = createComponent();
+
+    vm.collapsed = false;
+
+    Vue.nextTick(done);
   });
 
   afterEach(() => {
@@ -36,12 +40,11 @@ describe('RepoCommitSection', () => {
   });
 
   it('renders a commit section', () => {
-    const changedFileElements = [...vm.$el.querySelectorAll('.changed-files > li')];
-    const submitCommit = vm.$el.querySelector('.btn');
-    const targetBranch = vm.$el.querySelector('.target-branch');
+    const changedFileElements = [...vm.$el.querySelectorAll('.multi-file-commit-list li')];
+    const submitCommit = vm.$el.querySelector('form .btn');
 
-    expect(vm.$el.querySelector(':scope > form')).toBeTruthy();
-    expect(vm.$el.querySelector('.staged-files').textContent.trim()).toEqual('Staged files (2)');
+    expect(vm.$el.querySelector('.multi-file-commit-form')).not.toBeNull();
+    expect(vm.$el.querySelector('.multi-file-commit-panel-section header').textContent.trim()).toEqual('Staged');
     expect(changedFileElements.length).toEqual(2);
 
     changedFileElements.forEach((changedFile, i) => {
@@ -49,10 +52,7 @@ describe('RepoCommitSection', () => {
     });
 
     expect(submitCommit.disabled).toBeTruthy();
-    expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeFalsy();
-    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('master');
+    expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeNull();
   });
 
   describe('when submitting', () => {
@@ -69,7 +69,7 @@ describe('RepoCommitSection', () => {
     });
 
     it('allows you to submit', () => {
-      expect(vm.$el.querySelector('.btn').disabled).toBeTruthy();
+      expect(vm.$el.querySelector('form .btn').disabled).toBeTruthy();
     });
 
     it('submits commit', (done) => {

spec/javascripts/repo/components/repo_sidebar_spec.js

@@ -29,7 +29,6 @@ describe('RepoSidebar', () => {
     const thead = vm.$el.querySelector('thead');
     const tbody = vm.$el.querySelector('tbody');
 
-    expect(vm.$el.id).toEqual('sidebar');
     expect(vm.$el.classList.contains('sidebar-mini')).toBeFalsy();
     expect(thead.querySelector('.name').textContent.trim()).toEqual('Name');
     expect(thead.querySelector('.last-commit').textContent.trim()).toEqual('Last commit');
@@ -40,18 +39,6 @@ describe('RepoSidebar', () => {
     expect(tbody.querySelector('.file')).toBeTruthy();
   });
 
-  it('does not render a thead, renders repo-file-options and sets sidebar-mini class if isMini', (done) => {
-    vm.$store.state.openFiles.push(vm.$store.state.tree[0]);
-
-    Vue.nextTick(() => {
-      expect(vm.$el.classList.contains('sidebar-mini')).toBeTruthy();
-      expect(vm.$el.querySelector('thead')).toBeTruthy();
-      expect(vm.$el.querySelector('thead .repo-file-options')).toBeTruthy();
-
-      done();
-    });
-  });
-
   it('renders 5 loading files if tree is loading', (done) => {
     vm.$store.state.tree = [];
     vm.$store.state.loading = true;

spec/javascripts/repo/components/repo_tab_spec.js

@@ -24,8 +24,8 @@ describe('RepoTab', () => {
       tab: file(),
     });
     vm.$store.state.openFiles.push(vm.tab);
-    const close = vm.$el.querySelector('.close-btn');
-    const name = vm.$el.querySelector(`a[title="${vm.tab.url}"]`);
+    const close = vm.$el.querySelector('.multi-file-tab-close');
+    const name = vm.$el.querySelector(`[title="${vm.tab.url}"]`);
 
     expect(close.querySelector('.fa-times')).toBeTruthy();
     expect(name.textContent.trim()).toEqual(vm.tab.name);
@@ -50,7 +50,7 @@ describe('RepoTab', () => {
 
     spyOn(vm, 'closeFile');
 
-    vm.$el.querySelector('.close-btn').click();
+    vm.$el.querySelector('.multi-file-tab-close').click();
 
     expect(vm.closeFile).toHaveBeenCalledWith({ file: vm.tab });
   });
@@ -62,7 +62,7 @@ describe('RepoTab', () => {
       tab,
     });
 
-    expect(vm.$el.querySelector('.close-btn .fa-circle')).toBeTruthy();
+    expect(vm.$el.querySelector('.multi-file-tab-close .fa-circle')).not.toBeNull();
   });
 
   describe('methods', () => {
@@ -77,7 +77,7 @@ describe('RepoTab', () => {
         vm.$store.state.openFiles.push(tab);
         vm.$store.dispatch('setFileActive', tab);
 
-        vm.$el.querySelector('.close-btn').click();
+        vm.$el.querySelector('.multi-file-tab-close').click();
 
         vm.$nextTick(() => {
           expect(tab.opened).toBeTruthy();
@@ -95,7 +95,7 @@ describe('RepoTab', () => {
         vm.$store.state.openFiles.push(tab);
         vm.$store.dispatch('setFileActive', tab);
 
-        vm.$el.querySelector('.close-btn').click();
+        vm.$el.querySelector('.multi-file-tab-close').click();
 
         vm.$nextTick(() => {
           expect(tab.opened).toBeFalsy();

spec/javascripts/repo/components/repo_tabs_spec.js

@@ -25,12 +25,11 @@ describe('RepoTabs', () => {
     vm.$store.state.openFiles = openedFiles;
 
     vm.$nextTick(() => {
-      const tabs = [...vm.$el.querySelectorAll(':scope > li')];
+      const tabs = [...vm.$el.querySelectorAll('.multi-file-tab')];
 
-      expect(tabs.length).toEqual(3);
+      expect(tabs.length).toEqual(2);
       expect(tabs[0].classList.contains('active')).toBeTruthy();
       expect(tabs[1].classList.contains('active')).toBeFalsy();
-      expect(tabs[2].classList.contains('tabs-divider')).toBeTruthy();
 
       done();
     });