Refactor new_dropdown/index to receive isOpen prop

**Why?**

Previously it managed this as an internal data property, but there
was extra complexity involved because the component doesn't have
all the information it needs (i.e. the `mouseOver` prop).

This is a good opportunity to colocate the data prop with the component
that has the information to change it (i.e. `file_row`) and let
`new_dropdown/index` receive this value as a prop.

1 files changed, 60 insertions, 0 deletions

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);
+      });
+    });
+  });
 });