Upload files through the multi-file editor

3 files changed, 150 insertions, 12 deletions

diff --git a/spec/javascripts/repo/components/new_dropdown/index_spec.js b/spec/javascripts/repo/components/new_dropdown/index_spec.js
index ddbfdab582d..ddffef53300 100644
--- a/spec/javascripts/repo/components/new_dropdown/index_spec.js
+++ b/spec/javascripts/repo/components/new_dropdown/index_spec.js
@@ -74,25 +74,38 @@ describe('new dropdown component', () => {
         it('closes modal after creating file', () => {
           vm.openModal = true;
 
-          eventHub.$emit('createNewEntry', 'testing', type);
+          eventHub.$emit('createNewEntry', {
+            name: 'testing',
+            type,
+            toggleModal: true,
+          });
 
           expect(vm.openModal).toBeFalsy();
         });
 
         it('sets editMode to true', () => {
-          eventHub.$emit('createNewEntry', 'testing', type);
+          eventHub.$emit('createNewEntry', {
+            name: 'testing',
+            type,
+          });
 
           expect(RepoStore.editMode).toBeTruthy();
         });
 
         it('toggles blob view', () => {
-          eventHub.$emit('createNewEntry', 'testing', type);
+          eventHub.$emit('createNewEntry', {
+            name: 'testing',
+            type,
+          });
 
           expect(RepoStore.isPreviewView()).toBeFalsy();
         });
 
         it('adds file into activeFiles', () => {
-          eventHub.$emit('createNewEntry', 'testing', type);
+          eventHub.$emit('createNewEntry', {
+            name: 'testing',
+            type,
+          });
 
           expect(RepoStore.openedFiles.length).toBe(1);
         });
@@ -100,7 +113,10 @@ describe('new dropdown component', () => {
         it(`creates ${type} in the current stores path`, () => {
           RepoStore.path = 'testing';
 
-          eventHub.$emit('createNewEntry', 'testing/app', type);
+          eventHub.$emit('createNewEntry', {
+            name: 'testing/app',
+            type,
+          });
 
           expect(RepoStore.files[0].path).toBe('testing/app');
           expect(RepoStore.files[0].name).toBe('app');
@@ -116,7 +132,10 @@ describe('new dropdown component', () => {
 
     describe('file', () => {
       it('creates new file', () => {
-        eventHub.$emit('createNewEntry', 'testing', 'blob');
+        eventHub.$emit('createNewEntry', {
+          name: 'testing',
+          type: 'blob',
+        });
 
         expect(RepoStore.files.length).toBe(1);
         expect(RepoStore.files[0].name).toBe('testing');
@@ -129,7 +148,10 @@ describe('new dropdown component', () => {
           name: 'testing',
         }));
 
-        eventHub.$emit('createNewEntry', 'testing', 'blob');
+        eventHub.$emit('createNewEntry', {
+          name: 'testing',
+          type: 'blob',
+        });
 
         expect(RepoStore.files.length).toBe(1);
         expect(RepoStore.files[0].name).toBe('testing');
@@ -140,7 +162,10 @@ describe('new dropdown component', () => {
 
     describe('tree', () => {
       it('creates new tree', () => {
-        eventHub.$emit('createNewEntry', 'testing', 'tree');
+        eventHub.$emit('createNewEntry', {
+          name: 'testing',
+          type: 'tree',
+        });
 
         expect(RepoStore.files.length).toBe(1);
         expect(RepoStore.files[0].name).toBe('testing');
@@ -151,7 +176,10 @@ describe('new dropdown component', () => {
       });
 
       it('creates multiple trees when entryName has slashes', () => {
-        eventHub.$emit('createNewEntry', 'app/test', 'tree');
+        eventHub.$emit('createNewEntry', {
+          name: 'app/test',
+          type: 'tree',
+        });
 
         expect(RepoStore.files.length).toBe(1);
         expect(RepoStore.files[0].name).toBe('app');
@@ -164,7 +192,10 @@ describe('new dropdown component', () => {
           name: 'app',
         }));
 
-        eventHub.$emit('createNewEntry', 'app/test', 'tree');
+        eventHub.$emit('createNewEntry', {
+          name: 'app/test',
+          type: 'tree',
+        });
 
         expect(RepoStore.files.length).toBe(1);
         expect(RepoStore.files[0].name).toBe('app');
@@ -179,7 +210,10 @@ describe('new dropdown component', () => {
           name: 'app',
         }));
 
-        eventHub.$emit('createNewEntry', 'app', 'tree');
+        eventHub.$emit('createNewEntry', {
+          name: 'app',
+          type: 'tree',
+        });
 
         expect(RepoStore.files.length).toBe(1);
         expect(RepoStore.files[0].name).toBe('app');
diff --git a/spec/javascripts/repo/components/new_dropdown/modal_spec.js b/spec/javascripts/repo/components/new_dropdown/modal_spec.js
index 4c5cdc47c6e..d9fd9b9a595 100644
--- a/spec/javascripts/repo/components/new_dropdown/modal_spec.js
+++ b/spec/javascripts/repo/components/new_dropdown/modal_spec.js
@@ -70,7 +70,11 @@ describe('new file modal component', () => {
 
       vm.createEntryInStore();
 
-      expect(eventHub.$emit).toHaveBeenCalledWith('createNewEntry', 'testing', 'tree');
+      expect(eventHub.$emit).toHaveBeenCalledWith('createNewEntry', {
+        name: 'testing',
+        type: 'tree',
+        toggleModal: true,
+      });
     });
   });
 });
diff --git a/spec/javascripts/repo/components/new_dropdown/upload_spec.js b/spec/javascripts/repo/components/new_dropdown/upload_spec.js
new file mode 100644
index 00000000000..31878e9d327
--- /dev/null
+++ b/spec/javascripts/repo/components/new_dropdown/upload_spec.js
@@ -0,0 +1,100 @@
+import Vue from 'vue';
+import upload from '~/repo/components/new_dropdown/upload.vue';
+import eventHub from '~/repo/event_hub';
+import createComponent from '../../../helpers/vue_mount_component_helper';
+
+describe('new dropdown upload', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(upload);
+
+    vm = createComponent(Component, {
+      currentPath: '',
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('readFile', () => {
+    beforeEach(() => {
+      spyOn(FileReader.prototype, 'readAsText');
+      spyOn(FileReader.prototype, 'readAsDataURL');
+    });
+
+    it('calls readAsText for text files', () => {
+      const file = {
+        type: 'text/html',
+      };
+
+      vm.readFile(file);
+
+      expect(FileReader.prototype.readAsText).toHaveBeenCalledWith(file);
+    });
+
+    it('calls readAsDataURL for non-text files', () => {
+      const file = {
+        type: 'images/png',
+      };
+
+      vm.readFile(file);
+
+      expect(FileReader.prototype.readAsDataURL).toHaveBeenCalledWith(file);
+    });
+  });
+
+  describe('createFile', () => {
+    const target = {
+      result: 'content',
+    };
+    const binaryTarget = {
+      result: 'base64,base64content',
+    };
+    const file = {
+      name: 'file',
+    };
+
+    beforeEach(() => {
+      spyOn(eventHub, '$emit');
+    });
+
+    it('emits createNewEntry event', () => {
+      vm.createFile(target, file, true);
+
+      expect(eventHub.$emit).toHaveBeenCalledWith('createNewEntry', {
+        name: 'file',
+        type: 'blob',
+        content: 'content',
+        toggleModal: false,
+        base64: false,
+      }, true);
+    });
+
+    it('createNewEntry event name contains current path', () => {
+      vm.currentPath = 'testing';
+      vm.createFile(target, file, true);
+
+      expect(eventHub.$emit).toHaveBeenCalledWith('createNewEntry', {
+        name: 'testing/file',
+        type: 'blob',
+        content: 'content',
+        toggleModal: false,
+        base64: false,
+      }, true);
+    });
+
+    it('splits content on base64 if binary', () => {
+      vm.createFile(binaryTarget, file, false);
+
+      expect(eventHub.$emit).toHaveBeenCalledWith('createNewEntry', {
+        name: 'file',
+        type: 'blob',
+        content: 'base64content',
+        toggleModal: false,
+        base64: true,
+      }, false);
+    });
+  });
+});