spec fixes

app/assets/javascripts/repo/components/new_dropdown/index.vue

 <script>
-  import RepoHelper from '../../helpers/repo_helper';
   import RepoStore from '../../stores/repo_store';
+  import RepoHelper from '../../helpers/repo_helper';
   import eventHub from '../../event_hub';
   import newModal from './modal.vue';
 

spec/javascripts/repo/components/new_dropdown/index_spec.js

 import Vue from 'vue';
 import newDropdown from '~/repo/components/new_dropdown/index.vue';
+import RepoStore from '~/repo/stores/repo_store';
+import RepoHelper from '~/repo/helpers/repo_helper';
+import eventHub from '~/repo/event_hub';
 import createComponent from '../../../helpers/vue_mount_component_helper';
 
 describe('new dropdown component', () => {
@@ -13,6 +16,10 @@ describe('new dropdown component', () => {
 
   afterEach(() => {
     vm.$destroy();
+
+    RepoStore.files = [];
+    RepoStore.openedFiles = [];
+    RepoStore.setViewToPreview();
   });
 
   it('renders new file and new directory links', () => {
@@ -60,4 +67,125 @@ describe('new dropdown component', () => {
         .catch(done.fail);
     });
   });
+
+  describe('createEntryInStore', () => {
+    ['tree', 'blob'].forEach((type) => {
+      describe(type, () => {
+        it('closes modal after creating file', () => {
+          vm.openModal = true;
+
+          eventHub.$emit('createNewEntry', 'testing', type);
+
+          expect(vm.openModal).toBeFalsy();
+        });
+
+        it('sets editMode to true', () => {
+          eventHub.$emit('createNewEntry', 'testing', type);
+
+          expect(RepoStore.editMode).toBeTruthy();
+        });
+
+        it('toggles blob view', () => {
+          eventHub.$emit('createNewEntry', 'testing', type);
+
+          expect(RepoStore.isPreviewView()).toBeFalsy();
+        });
+
+        it('adds file into activeFiles', () => {
+          eventHub.$emit('createNewEntry', 'testing', type);
+
+          expect(RepoStore.openedFiles.length).toBe(1);
+        });
+
+        it(`creates ${type} in the current stores path`, () => {
+          RepoStore.path = 'testing';
+
+          eventHub.$emit('createNewEntry', 'testing/app', type);
+
+          expect(RepoStore.files[0].path).toBe('testing/app');
+          expect(RepoStore.files[0].name).toBe('app');
+
+          if (type === 'tree') {
+            expect(RepoStore.files[0].files.length).toBe(1);
+          }
+
+          RepoStore.path = '';
+        });
+      });
+    });
+
+    describe('file', () => {
+      it('creates new file', () => {
+        eventHub.$emit('createNewEntry', 'testing', 'blob');
+
+        expect(RepoStore.files.length).toBe(1);
+        expect(RepoStore.files[0].name).toBe('testing');
+        expect(RepoStore.files[0].type).toBe('blob');
+        expect(RepoStore.files[0].tempFile).toBeTruthy();
+      });
+
+      it('does not create temp file when file already exists', () => {
+        RepoStore.files.push(RepoHelper.serializeRepoEntity('blob', {
+          name: 'testing',
+        }));
+
+        eventHub.$emit('createNewEntry', 'testing', 'blob');
+
+        expect(RepoStore.files.length).toBe(1);
+        expect(RepoStore.files[0].name).toBe('testing');
+        expect(RepoStore.files[0].type).toBe('blob');
+        expect(RepoStore.files[0].tempFile).toBeUndefined();
+      });
+    });
+
+    describe('tree', () => {
+      it('creates new tree', () => {
+        eventHub.$emit('createNewEntry', 'testing', 'tree');
+
+        expect(RepoStore.files.length).toBe(1);
+        expect(RepoStore.files[0].name).toBe('testing');
+        expect(RepoStore.files[0].type).toBe('tree');
+        expect(RepoStore.files[0].tempFile).toBeTruthy();
+        expect(RepoStore.files[0].files.length).toBe(1);
+        expect(RepoStore.files[0].files[0].name).toBe('.gitkeep');
+      });
+
+      it('creates multiple trees when entryName has slashes', () => {
+        eventHub.$emit('createNewEntry', 'app/test', 'tree');
+
+        expect(RepoStore.files.length).toBe(1);
+        expect(RepoStore.files[0].name).toBe('app');
+        expect(RepoStore.files[0].files[0].name).toBe('test');
+        expect(RepoStore.files[0].files[0].files[0].name).toBe('.gitkeep');
+      });
+
+      it('creates tree in existing tree', () => {
+        RepoStore.files.push(RepoHelper.serializeRepoEntity('tree', {
+          name: 'app',
+        }));
+
+        eventHub.$emit('createNewEntry', 'app/test', 'tree');
+
+        expect(RepoStore.files.length).toBe(1);
+        expect(RepoStore.files[0].name).toBe('app');
+        expect(RepoStore.files[0].tempFile).toBeUndefined();
+        expect(RepoStore.files[0].files[0].tempFile).toBeTruthy();
+        expect(RepoStore.files[0].files[0].name).toBe('test');
+        expect(RepoStore.files[0].files[0].files[0].name).toBe('.gitkeep');
+      });
+
+      it('does not create new tree when already exists', () => {
+        RepoStore.files.push(RepoHelper.serializeRepoEntity('tree', {
+          name: 'app',
+        }));
+
+        eventHub.$emit('createNewEntry', 'app', 'tree');
+
+        expect(RepoStore.files.length).toBe(1);
+        expect(RepoStore.files[0].name).toBe('app');
+        expect(RepoStore.files[0].tempFile).toBeUndefined();
+        expect(RepoStore.files[0].files.length).toBe(0);
+      });
+    });
+  });
 });

spec/javascripts/repo/components/new_dropdown/modal_spec.js

 import Vue from 'vue';
 import RepoStore from '~/repo/stores/repo_store';
-import RepoHelper from '~/repo/helpers/repo_helper';
 import modal from '~/repo/components/new_dropdown/modal.vue';
+import eventHub from '~/repo/event_hub';
 import createComponent from '../../../helpers/vue_mount_component_helper';
 
 describe('new file modal component', () => {
@@ -21,6 +21,7 @@ describe('new file modal component', () => {
       beforeEach(() => {
         vm = createComponent(Component, {
           type,
+          currentPath: RepoStore.path,
         });
       });
 
@@ -41,156 +42,35 @@ describe('new file modal component', () => {
 
         expect(vm.$el.querySelector('.label-light').textContent.trim()).toBe(`${title} name`);
       });
-
-      it('emits toggle event after creating file', () => {
-        spyOn(vm, '$emit');
-
-        vm.entryName = 'testing';
-        vm.$el.querySelector('.btn-success').click();
-
-        expect(vm.$emit).toHaveBeenCalledWith('toggle');
-      });
-
-      it('sets editMode to true', () => {
-        vm.entryName = 'testing';
-        vm.$el.querySelector('.btn-success').click();
-
-        expect(RepoStore.editMode).toBeTruthy();
-      });
-
-      it('toggles blob view', () => {
-        vm.entryName = 'testing';
-        vm.$el.querySelector('.btn-success').click();
-
-        expect(RepoStore.isPreviewView()).toBeFalsy();
-      });
-
-      it('adds file into activeFiles', () => {
-        vm.entryName = 'testing';
-        vm.$el.querySelector('.btn-success').click();
-
-        expect(RepoStore.openedFiles.length).toBe(1);
-      });
-
-      it(`creates ${type} in the current stores path`, () => {
-        RepoStore.path = 'testing';
-        vm.entryName = 'testing/app';
-
-        vm.$el.querySelector('.btn-success').click();
-
-        expect(RepoStore.files[0].path).toBe('testing/app');
-        expect(RepoStore.files[0].name).toBe('app');
-
-        if (type === 'tree') {
-          expect(RepoStore.files[0].files.length).toBe(1);
-        }
-
-        RepoStore.path = '';
-      });
     });
   });
 
-  describe('file', () => {
-    beforeEach(() => {
-      vm = createComponent(Component, {
-        type: 'blob',
-      });
-    });
-
-    it('creates new file', () => {
-      vm.entryName = 'testing';
-      vm.$el.querySelector('.btn-success').click();
-
-      expect(RepoStore.files.length).toBe(1);
-      expect(RepoStore.files[0].name).toBe('testing');
-      expect(RepoStore.files[0].type).toBe('blob');
-      expect(RepoStore.files[0].tempFile).toBeTruthy();
-    });
+  it('focuses field on mount', () => {
+    document.body.innerHTML += '<div class="js-test"></div>';
 
-    it('does not create temp file when file already exists', () => {
-      RepoStore.files.push(RepoHelper.serializeRepoEntity('blob', {
-        name: 'testing',
-      }));
+    vm = createComponent(Component, {
+      type: 'tree',
+      currentPath: RepoStore.path,
+    }, '.js-test');
 
-      vm.entryName = 'testing';
-      vm.$el.querySelector('.btn-success').click();
+    expect(document.activeElement).toBe(vm.$refs.fieldName);
 
-      expect(RepoStore.files.length).toBe(1);
-      expect(RepoStore.files[0].name).toBe('testing');
-      expect(RepoStore.files[0].type).toBe('blob');
-      expect(RepoStore.files[0].tempFile).toBeUndefined();
-    });
+    vm.$el.remove();
   });
 
-  describe('tree', () => {
-    beforeEach(() => {
+  describe('createEntryInStore', () => {
+    it('emits createNewEntry event', () => {
+      spyOn(eventHub, '$emit');
+
       vm = createComponent(Component, {
         type: 'tree',
+        currentPath: RepoStore.path,
       });
-    });
-
-    it('creates new tree', () => {
       vm.entryName = 'testing';
-      vm.$el.querySelector('.btn-success').click();
-
-      expect(RepoStore.files.length).toBe(1);
-      expect(RepoStore.files[0].name).toBe('testing');
-      expect(RepoStore.files[0].type).toBe('tree');
-      expect(RepoStore.files[0].tempFile).toBeTruthy();
-      expect(RepoStore.files[0].files.length).toBe(1);
-      expect(RepoStore.files[0].files[0].name).toBe('.gitkeep');
-    });
 
-    it('creates multiple trees when entryName has slashes', () => {
-      vm.entryName = 'app/test';
-      vm.$el.querySelector('.btn-success').click();
+      vm.createEntryInStore();
 
-      expect(RepoStore.files.length).toBe(1);
-      expect(RepoStore.files[0].name).toBe('app');
-      expect(RepoStore.files[0].files[0].name).toBe('test');
-      expect(RepoStore.files[0].files[0].files[0].name).toBe('.gitkeep');
+      expect(eventHub.$emit).toHaveBeenCalledWith('createNewEntry', 'testing', 'tree');
     });
-
-    it('creates tree in existing tree', () => {
-      RepoStore.files.push(RepoHelper.serializeRepoEntity('tree', {
-        name: 'app',
-      }));
-
-      vm.entryName = 'app/test';
-      vm.$el.querySelector('.btn-success').click();
-
-      expect(RepoStore.files.length).toBe(1);
-      expect(RepoStore.files[0].name).toBe('app');
-      expect(RepoStore.files[0].tempFile).toBeUndefined();
-      expect(RepoStore.files[0].files[0].tempFile).toBeTruthy();
-      expect(RepoStore.files[0].files[0].name).toBe('test');
-      expect(RepoStore.files[0].files[0].files[0].name).toBe('.gitkeep');
-    });
-
-    it('does not create new tree when already exists', () => {
-      RepoStore.files.push(RepoHelper.serializeRepoEntity('tree', {
-        name: 'app',
-      }));
-
-      vm.entryName = 'app';
-      vm.$el.querySelector('.btn-success').click();
-
-      expect(RepoStore.files.length).toBe(1);
-      expect(RepoStore.files[0].name).toBe('app');
-      expect(RepoStore.files[0].tempFile).toBeUndefined();
-      expect(RepoStore.files[0].files.length).toBe(0);
-    });
-  });
-
-  it('focuses field on mount', () => {
-    document.body.innerHTML += '<div class="js-test"></div>';
-
-    vm = createComponent(Component, {
-      type: 'tree',
-    }, '.js-test');
-
-    expect(document.activeElement).toBe(vm.$refs.fieldName);
-
-    vm.$el.remove();
   });
 });

spec/javascripts/repo/components/repo_file_buttons_spec.js

@@ -35,7 +35,6 @@ describe('RepoFileButtons', () => {
     const blame = vm.$el.querySelector('.blame');
     const history = vm.$el.querySelector('.history');
 
-    expect(vm.$el.id).toEqual('repo-file-buttons');
     expect(raw.href).toMatch(`/${activeFile.raw_path}`);
     expect(raw.textContent.trim()).toEqual('Raw');
     expect(blame.href).toMatch(`/${activeFile.blame_path}`);