specs

app/assets/javascripts/ide/components/commit_sidebar/form.vue

@@ -53,16 +53,16 @@ export default {
     },
     beforeEnterTransition() {
       const elHeight = this.isCompact
-        ? this.$refs.formEl.offsetHeight
-        : this.$refs.compactEl.offsetHeight;
+        ? this.$refs.formEl && this.$refs.formEl.offsetHeight
+        : this.$refs.compactEl && this.$refs.compactEl.offsetHeight;
 
       this.componentHeight = elHeight + 32;
     },
     enterTransition() {
       this.$nextTick(() => {
         const elHeight = this.isCompact
-          ? this.$refs.compactEl.offsetHeight
-          : this.$refs.formEl.offsetHeight;
+          ? this.$refs.compactEl && this.$refs.compactEl.offsetHeight
+          : this.$refs.formEl && this.$refs.formEl.offsetHeight;
 
         this.componentHeight = elHeight + 32;
       });

app/assets/javascripts/ide/stores/mutations/file.js

@@ -170,35 +170,24 @@ export default {
   },
   [types.ADD_PENDING_TAB](state, { file, keyPrefix = 'pending' }) {
     const key = `${keyPrefix}-${file.key}`;
-    const pendingTab = state.openFiles.find(f => f.key === key && f.pending);
-    let openFiles = state.openFiles.map(f => Object.assign(f, { active: false, opened: false }));
 
-    if (!pendingTab) {
-      const openFile = openFiles.find(f => f.path === file.path);
-
-      openFiles = openFiles.concat(openFile ? null : file).reduce((acc, f) => {
-        if (!f) return acc;
-
-        if (f.path === file.path) {
-          return acc.concat({
-            ...f,
-            content: file.content,
-            active: true,
-            pending: true,
-            opened: true,
-            key,
-          });
-        }
-
-        return acc.concat(f);
-      }, []);
-    } else {
-      openFiles = state.openFiles.map(f =>
-        Object.assign(f, { active: f.key === key, opened: f.key === key }),
-      );
-    }
-
-    Object.assign(state, { openFiles });
+    Object.assign(state, {
+      entries: Object.assign(state.entries, {
+        [file.path]: Object.assign(state.entries[file.path], {
+          opened: false,
+          active: false,
+        }),
+      }),
+      openFiles: [
+        {
+          ...file,
+          key,
+          pending: true,
+          opened: true,
+          active: true,
+        },
+      ],
+    });
   },
   [types.REMOVE_PENDING_TAB](state, file) {
     Object.assign(state, {

spec/javascripts/ide/components/commit_sidebar/form_spec.js

+import Vue from 'vue';
+import store from '~/ide/stores';
+import CommitForm from '~/ide/components/commit_sidebar/form.vue';
+import { activityBarViews } from '~/ide/constants';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
+import { resetStore } from '../../helpers';
+
+describe('IDE commit form', () => {
+  const Component = Vue.extend(CommitForm);
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponentWithStore(Component, store).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    resetStore(vm.$store);
+  });
+
+  describe('compact', () => {
+    it('renders commit button in compact mode', () => {
+      expect(vm.$el.querySelector('.btn-primary')).not.toBeNull();
+      expect(vm.$el.querySelector('.btn-primary').textContent).toContain('Commit');
+    });
+
+    it('does not render form', () => {
+      expect(vm.$el.querySelector('form')).toBeNull();
+    });
+
+    it('renders overview text', done => {
+      vm.$store.state.changedFiles.push('test');
+      vm.$store.state.stagedFiles.push('test');
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('p').textContent).toContain('1 unstaged and 1 staged changes');
+        done();
+      });
+    });
+
+    it('shows form when clicking commit button', done => {
+      vm.$el.querySelector('.btn-primary').click();
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('form')).not.toBeNull();
+
+        done();
+      });
+    });
+
+    it('toggles activity bar vie when clicking commit button', done => {
+      vm.$el.querySelector('.btn-primary').click();
+
+      vm.$nextTick(() => {
+        expect(store.state.currentActivityView).toBe(activityBarViews.commit);
+
+        done();
+      });
+    });
+  });
+
+  describe('full', () => {
+    beforeEach(done => {
+      vm.isCompact = false;
+
+      vm.$nextTick(done);
+    });
+
+    it('updates commitMessage in store on input', done => {
+      const textarea = vm.$el.querySelector('textarea');
+
+      textarea.value = 'testing commit message';
+
+      textarea.dispatchEvent(new Event('input'));
+
+      getSetTimeoutPromise()
+        .then(() => {
+          expect(vm.$store.state.commit.commitMessage).toBe('testing commit message');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('updating currentActivityView not to commit view sets compact mode', done => {
+      store.state.currentActivityView = 'a';
+
+      vm.$nextTick(() => {
+        expect(vm.isCompact).toBe(true);
+
+        done();
+      });
+    });
+
+    describe('discard draft button', () => {
+      it('hidden when commitMessage is empty', () => {
+        expect(vm.$el.querySelector('.btn-default').textContent).toContain('Collapse');
+      });
+
+      it('resets commitMessage when clicking discard button', done => {
+        vm.$store.state.commit.commitMessage = 'testing commit message';
+
+        getSetTimeoutPromise()
+          .then(() => {
+            vm.$el.querySelector('.btn-default').click();
+          })
+          .then(Vue.nextTick)
+          .then(() => {
+            expect(vm.$store.state.commit.commitMessage).not.toBe('testing commit message');
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+    });
+
+    describe('when submitting', () => {
+      beforeEach(() => {
+        spyOn(vm, 'commitChanges');
+        vm.$store.state.stagedFiles.push('test');
+      });
+
+      it('calls commitChanges', done => {
+        vm.$store.state.commit.commitMessage = 'testing commit message';
+
+        getSetTimeoutPromise()
+          .then(() => {
+            vm.$el.querySelector('.btn-success').click();
+          })
+          .then(Vue.nextTick)
+          .then(() => {
+            expect(vm.commitChanges).toHaveBeenCalled();
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+    });
+  });
+});

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

@@ -49,16 +49,4 @@ describe('Multi-file editor commit sidebar list', () => {
       expect(vm.$el.textContent).toContain('No changes');
     });
   });
-
-  describe('action button', () => {
-    beforeEach(() => {
-      spyOn(vm, 'stageAllChanges');
-    });
-
-    it('calls store action when clicked', () => {
-      vm.$el.querySelector('.ide-staged-action-btn').click();
-
-      expect(vm.stageAllChanges).toHaveBeenCalled();
-    });
-  });
 });

spec/javascripts/ide/components/repo_commit_section_spec.js

@@ -182,61 +182,4 @@ describe('RepoCommitSection', () => {
       done();
     });
   });
-
-  it('updates commitMessage in store on input', done => {
-    const textarea = vm.$el.querySelector('textarea');
-
-    textarea.value = 'testing commit message';
-
-    textarea.dispatchEvent(new Event('input'));
-
-    getSetTimeoutPromise()
-      .then(() => {
-        expect(vm.$store.state.commit.commitMessage).toBe('testing commit message');
-      })
-      .then(done)
-      .catch(done.fail);
-  });
-
-  describe('discard draft button', () => {
-    it('hidden when commitMessage is empty', () => {
-      expect(vm.$el.querySelector('.multi-file-commit-form .btn-default')).toBeNull();
-    });
-
-    it('resets commitMessage when clicking discard button', done => {
-      vm.$store.state.commit.commitMessage = 'testing commit message';
-
-      getSetTimeoutPromise()
-        .then(() => {
-          vm.$el.querySelector('.multi-file-commit-form .btn-default').click();
-        })
-        .then(Vue.nextTick)
-        .then(() => {
-          expect(vm.$store.state.commit.commitMessage).not.toBe('testing commit message');
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-  });
-
-  describe('when submitting', () => {
-    beforeEach(() => {
-      spyOn(vm, 'commitChanges');
-    });
-
-    it('calls commitChanges', done => {
-      vm.$store.state.commit.commitMessage = 'testing commit message';
-
-      getSetTimeoutPromise()
-        .then(() => {
-          vm.$el.querySelector('.multi-file-commit-form .btn-success').click();
-        })
-        .then(Vue.nextTick)
-        .then(() => {
-          expect(vm.commitChanges).toHaveBeenCalled();
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-  });
 });