1 files changed, 68 insertions, 0 deletions
diff --git a/spec/frontend/nav/components/top_nav_app_spec.js b/spec/frontend/nav/components/top_nav_app_spec.js
new file mode 100644
index 00000000000..06700ce748e
--- /dev/null
+++ b/spec/frontend/nav/components/top_nav_app_spec.js
@@ -0,0 +1,68 @@
+import { GlNavItemDropdown, GlTooltip } from '@gitlab/ui';
+import { shallowMount, mount } from '@vue/test-utils';
+import TopNavApp from '~/nav/components/top_nav_app.vue';
+import TopNavDropdownMenu from '~/nav/components/top_nav_dropdown_menu.vue';
+import { TEST_NAV_DATA } from '../mock_data';
+
+describe('~/nav/components/top_nav_app.vue', () => {
+  let wrapper;
+
+  const createComponent = (mountFn = shallowMount) => {
+    wrapper = mountFn(TopNavApp, {
+      propsData: {
+        navData: TEST_NAV_DATA,
+      },
+    });
+  };
+
+  const findNavItemDropdown = () => wrapper.findComponent(GlNavItemDropdown);
+  const findMenu = () => wrapper.findComponent(TopNavDropdownMenu);
+  const findTooltip = () => wrapper.findComponent(GlTooltip);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders nav item dropdown', () => {
+      expect(findNavItemDropdown().attributes('href')).toBeUndefined();
+      expect(findNavItemDropdown().attributes()).toMatchObject({
+        icon: 'dot-grid',
+        text: TEST_NAV_DATA.activeTitle,
+        'no-flip': '',
+      });
+    });
+
+    it('renders top nav dropdown menu', () => {
+      expect(findMenu().props()).toStrictEqual({
+        primary: TEST_NAV_DATA.primary,
+        secondary: TEST_NAV_DATA.secondary,
+        views: TEST_NAV_DATA.views,
+      });
+    });
+
+    it('renders tooltip', () => {
+      expect(findTooltip().attributes()).toMatchObject({
+        'boundary-padding': '0',
+        placement: 'right',
+        title: TopNavApp.TOOLTIP,
+      });
+    });
+  });
+
+  describe('when full mounted', () => {
+    beforeEach(() => {
+      createComponent(mount);
+    });
+
+    it('has dropdown toggle as tooltip target', () => {
+      const targetFn = findTooltip().props('target');
+
+      expect(targetFn()).toBe(wrapper.find('.js-top-nav-dropdown-toggle').element);
+    });
+  });
+});