Merge branch '60021-fix-ide-file-dropdown' into 'master'

Fix IDE file dropdown

Closes #60021

See merge request gitlab-org/gitlab-ce!27015

3 files changed, 63 insertions, 3 deletions

diff --git a/spec/javascripts/ide/components/file_row_extra_spec.js b/spec/javascripts/ide/components/file_row_extra_spec.js
index c93a939ad71..d7fed3f0681 100644
--- a/spec/javascripts/ide/components/file_row_extra_spec.js
+++ b/spec/javascripts/ide/components/file_row_extra_spec.js
@@ -20,7 +20,7 @@ describe('IDE extra file row component', () => {
       file: {
         ...file('test'),
       },
-      mouseOver: false,
+      dropdownOpen: false,
     });
 
     spyOnProperty(vm, 'getUnstagedFilesCountForPath').and.returnValue(() => unstagedFilesCount);
diff --git a/spec/javascripts/ide/components/new_dropdown/index_spec.js b/spec/javascripts/ide/components/new_dropdown/index_spec.js
index 83e530f0a6a..aaebe88f314 100644
--- a/spec/javascripts/ide/components/new_dropdown/index_spec.js
+++ b/spec/javascripts/ide/components/new_dropdown/index_spec.js
@@ -56,11 +56,11 @@ describe('new dropdown component', () => {
     });
   });
 
-  describe('dropdownOpen', () => {
+  describe('isOpen', () => {
     it('scrolls dropdown into view', done => {
       spyOn(vm.$refs.dropdownMenu, 'scrollIntoView');
 
-      vm.dropdownOpen = true;
+      vm.isOpen = true;
 
       setTimeout(() => {
         expect(vm.$refs.dropdownMenu.scrollIntoView).toHaveBeenCalledWith({
diff --git a/spec/javascripts/vue_shared/components/file_row_spec.js b/spec/javascripts/vue_shared/components/file_row_spec.js
index d1fd899c1a8..7da69e3fa84 100644
--- a/spec/javascripts/vue_shared/components/file_row_spec.js
+++ b/spec/javascripts/vue_shared/components/file_row_spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import FileRow from '~/vue_shared/components/file_row.vue';
+import FileRowExtra from '~/ide/components/file_row_extra.vue';
 import { file } from 'spec/ide/helpers';
 import mountComponent from '../../helpers/vue_mount_component_helper';
 
@@ -16,6 +17,10 @@ describe('File row component', () => {
     vm.$destroy();
   });
 
+  const findNewDropdown = () => vm.$el.querySelector('.ide-new-btn .dropdown');
+  const findNewDropdownButton = () => vm.$el.querySelector('.ide-new-btn .dropdown button');
+  const findFileRow = () => vm.$el.querySelector('.file-row');
+
   it('renders name', () => {
     createComponent({
       file: file('t4'),
@@ -84,4 +89,59 @@ describe('File row component', () => {
 
     expect(vm.$el.querySelector('.js-file-row-header')).not.toBe(null);
   });
+
+  describe('new dropdown', () => {
+    beforeEach(() => {
+      createComponent({
+        file: file('t5'),
+        level: 1,
+        extraComponent: FileRowExtra,
+      });
+    });
+
+    it('renders in extra component', () => {
+      expect(findNewDropdown()).not.toBe(null);
+    });
+
+    it('is hidden at start', () => {
+      expect(findNewDropdown()).not.toHaveClass('show');
+    });
+
+    it('is opened when button is clicked', done => {
+      expect(vm.dropdownOpen).toBe(false);
+      findNewDropdownButton().dispatchEvent(new Event('click'));
+
+      vm.$nextTick()
+        .then(() => {
+          expect(vm.dropdownOpen).toBe(true);
+          expect(findNewDropdown()).toHaveClass('show');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    describe('when opened', () => {
+      beforeEach(() => {
+        vm.dropdownOpen = true;
+      });
+
+      it('stays open when button triggers mouseout', () => {
+        findNewDropdownButton().dispatchEvent(new Event('mouseout'));
+
+        expect(vm.dropdownOpen).toBe(true);
+      });
+
+      it('stays open when button triggers mouseleave', () => {
+        findNewDropdownButton().dispatchEvent(new Event('mouseleave'));
+
+        expect(vm.dropdownOpen).toBe(true);
+      });
+
+      it('closes when row triggers mouseleave', () => {
+        findFileRow().dispatchEvent(new Event('mouseleave'));
+
+        expect(vm.dropdownOpen).toBe(false);
+      });
+    });
+  });
 });