1 files changed, 102 insertions, 0 deletions
diff --git a/spec/frontend/ide/components/nav_dropdown_spec.js b/spec/frontend/ide/components/nav_dropdown_spec.js
new file mode 100644
index 00000000000..ce123d925c8
--- /dev/null
+++ b/spec/frontend/ide/components/nav_dropdown_spec.js
@@ -0,0 +1,102 @@
+import $ from 'jquery';
+import { mount } from '@vue/test-utils';
+import { createStore } from '~/ide/stores';
+import NavDropdown from '~/ide/components/nav_dropdown.vue';
+import { PERMISSION_READ_MR } from '~/ide/constants';
+
+const TEST_PROJECT_ID = 'lorem-ipsum';
+
+describe('IDE NavDropdown', () => {
+  let store;
+  let wrapper;
+
+  beforeEach(() => {
+    store = createStore();
+    Object.assign(store.state, {
+      currentProjectId: TEST_PROJECT_ID,
+      currentBranchId: 'master',
+      projects: {
+        [TEST_PROJECT_ID]: {
+          userPermissions: {
+            [PERMISSION_READ_MR]: true,
+          },
+          branches: {
+            master: { id: 'master' },
+          },
+        },
+      },
+    });
+    jest.spyOn(store, 'dispatch').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const createComponent = () => {
+    wrapper = mount(NavDropdown, {
+      store,
+    });
+  };
+
+  const findIcon = name => wrapper.find(`.ic-${name}`);
+  const findMRIcon = () => findIcon('merge-request');
+  const findNavForm = () => wrapper.find('.ide-nav-form');
+  const showDropdown = () => {
+    $(wrapper.vm.$el).trigger('show.bs.dropdown');
+  };
+  const hideDropdown = () => {
+    $(wrapper.vm.$el).trigger('hide.bs.dropdown');
+  };
+
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders nothing initially', () => {
+      expect(findNavForm().exists()).toBe(false);
+    });
+
+    it('renders nav form when show.bs.dropdown', done => {
+      showDropdown();
+
+      wrapper.vm
+        .$nextTick()
+        .then(() => {
+          expect(findNavForm().exists()).toBe(true);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('destroys nav form when closed', done => {
+      showDropdown();
+      hideDropdown();
+
+      wrapper.vm
+        .$nextTick()
+        .then(() => {
+          expect(findNavForm().exists()).toBe(false);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('renders merge request icon', () => {
+      expect(findMRIcon().exists()).toBe(true);
+    });
+  });
+
+  describe('when user cannot read merge requests', () => {
+    beforeEach(() => {
+      store.state.projects[TEST_PROJECT_ID].userPermissions = {};
+
+      createComponent();
+    });
+
+    it('does not render merge requests', () => {
+      expect(findMRIcon().exists()).toBe(false);
+    });
+  });
+});