added spec to new file dropdown

2 files changed, 60 insertions, 52 deletions

diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index 94c3e8b4d19..b1b5c0d4a28 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -1,56 +1,54 @@
 <script>
-  import { mapActions } from 'vuex';
-  import icon from '~/vue_shared/components/icon.vue';
-  import newModal from './modal.vue';
-  import upload from './upload.vue';
+import { mapActions } from 'vuex';
+import icon from '~/vue_shared/components/icon.vue';
+import newModal from './modal.vue';
+import upload from './upload.vue';
 
-  export default {
-    components: {
-      icon,
-      newModal,
-      upload,
+export default {
+  components: {
+    icon,
+    newModal,
+    upload,
+  },
+  props: {
+    branch: {
+      type: String,
+      required: true,
     },
-    props: {
-      branch: {
-        type: String,
-        required: true,
-      },
-      path: {
-        type: String,
-        required: true,
-      },
+    path: {
+      type: String,
+      required: true,
     },
-    data() {
-      return {
-        openModal: false,
-        modalType: '',
-        dropdownOpen: false,
-      };
+  },
+  data() {
+    return {
+      openModal: false,
+      modalType: '',
+      dropdownOpen: false,
+    };
+  },
+  watch: {
+    dropdownOpen() {
+      this.$nextTick(() => {
+        this.$refs.dropdownMenu.scrollIntoView();
+      });
     },
-    watch: {
-      dropdownOpen() {
-        this.$nextTick(() => {
-          this.$refs.dropdownMenu.scrollIntoView();
-        });
-      },
+  },
+  methods: {
+    ...mapActions(['createTempEntry']),
+    createNewItem(type) {
+      this.modalType = type;
+      this.openModal = true;
+      this.dropdownOpen = false;
     },
-    methods: {
-      ...mapActions([
-        'createTempEntry',
-      ]),
-      createNewItem(type) {
-        this.modalType = type;
-        this.openModal = true;
-        this.dropdownOpen = false;
-      },
-      hideModal() {
-        this.openModal = false;
-      },
-      openDropdown() {
-        this.dropdownOpen = !this.dropdownOpen;
-      },
+    hideModal() {
+      this.openModal = false;
     },
-  };
+    openDropdown() {
+      this.dropdownOpen = !this.dropdownOpen;
+    },
+  },
+};
 </script>
 
 <template>
diff --git a/spec/javascripts/ide/components/new_dropdown/index_spec.js b/spec/javascripts/ide/components/new_dropdown/index_spec.js
index e08abe7d849..7b637f37eba 100644
--- a/spec/javascripts/ide/components/new_dropdown/index_spec.js
+++ b/spec/javascripts/ide/components/new_dropdown/index_spec.js
@@ -32,12 +32,8 @@ describe('new dropdown component', () => {
 
   it('renders new file, upload and new directory links', () => {
     expect(vm.$el.querySelectorAll('a')[0].textContent.trim()).toBe('New file');
-    expect(vm.$el.querySelectorAll('a')[1].textContent.trim()).toBe(
-      'Upload file',
-    );
-    expect(vm.$el.querySelectorAll('a')[2].textContent.trim()).toBe(
-      'New directory',
-    );
+    expect(vm.$el.querySelectorAll('a')[1].textContent.trim()).toBe('Upload file');
+    expect(vm.$el.querySelectorAll('a')[2].textContent.trim()).toBe('New directory');
   });
 
   describe('createNewItem', () => {
@@ -81,4 +77,18 @@ describe('new dropdown component', () => {
         .catch(done.fail);
     });
   });
+
+  describe('dropdownOpen', () => {
+    it('scrolls dropdown into view', done => {
+      spyOn(vm.$refs.dropdownMenu, 'scrollIntoView');
+
+      vm.dropdownOpen = true;
+
+      setTimeout(() => {
+        expect(vm.$refs.dropdownMenu.scrollIntoView).toHaveBeenCalled();
+
+        done();
+      });
+    });
+  });
 });