1 files changed, 114 insertions, 0 deletions
diff --git a/spec/frontend/nav/components/top_nav_container_view_spec.js b/spec/frontend/nav/components/top_nav_container_view_spec.js
new file mode 100644
index 00000000000..b08d75f36ce
--- /dev/null
+++ b/spec/frontend/nav/components/top_nav_container_view_spec.js
@@ -0,0 +1,114 @@
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import FrequentItemsApp from '~/frequent_items/components/app.vue';
+import { FREQUENT_ITEMS_PROJECTS } from '~/frequent_items/constants';
+import eventHub from '~/frequent_items/event_hub';
+import TopNavContainerView from '~/nav/components/top_nav_container_view.vue';
+import TopNavMenuItem from '~/nav/components/top_nav_menu_item.vue';
+import VuexModuleProvider from '~/vue_shared/components/vuex_module_provider.vue';
+import { TEST_NAV_DATA } from '../mock_data';
+
+const DEFAULT_PROPS = {
+  frequentItemsDropdownType: FREQUENT_ITEMS_PROJECTS.namespace,
+  frequentItemsVuexModule: FREQUENT_ITEMS_PROJECTS.vuexModule,
+  linksPrimary: TEST_NAV_DATA.primary,
+  linksSecondary: TEST_NAV_DATA.secondary,
+};
+const TEST_OTHER_PROPS = {
+  namespace: 'projects',
+  currentUserName: '',
+  currentItem: {},
+};
+
+describe('~/nav/components/top_nav_container_view.vue', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(TopNavContainerView, {
+      propsData: {
+        ...DEFAULT_PROPS,
+        ...TEST_OTHER_PROPS,
+        ...props,
+      },
+    });
+  };
+
+  const findMenuItems = (parent = wrapper) => parent.findAll(TopNavMenuItem);
+  const findMenuItemsModel = (parent = wrapper) =>
+    findMenuItems(parent).wrappers.map((x) => x.props());
+  const findMenuItemGroups = () => wrapper.findAll('[data-testid="menu-item-group"]');
+  const findMenuItemGroupsModel = () => findMenuItemGroups().wrappers.map(findMenuItemsModel);
+  const findFrequentItemsApp = () => {
+    const parent = wrapper.findComponent(VuexModuleProvider);
+
+    return {
+      vuexModule: parent.props('vuexModule'),
+      props: parent.findComponent(FrequentItemsApp).props(),
+    };
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it.each(['projects', 'groups'])(
+    'emits frequent items event to event hub (%s)',
+    async (frequentItemsDropdownType) => {
+      const listener = jest.fn();
+      eventHub.$on(`${frequentItemsDropdownType}-dropdownOpen`, listener);
+      createComponent({ frequentItemsDropdownType });
+
+      expect(listener).not.toHaveBeenCalled();
+
+      await nextTick();
+
+      expect(listener).toHaveBeenCalled();
+    },
+  );
+
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders frequent items app', () => {
+      expect(findFrequentItemsApp()).toEqual({
+        vuexModule: DEFAULT_PROPS.frequentItemsVuexModule,
+        props: TEST_OTHER_PROPS,
+      });
+    });
+
+    it('renders menu item groups', () => {
+      expect(findMenuItemGroupsModel()).toEqual([
+        TEST_NAV_DATA.primary.map((menuItem) => ({ menuItem })),
+        TEST_NAV_DATA.secondary.map((menuItem) => ({ menuItem })),
+      ]);
+    });
+
+    it('only the first group does not have margin top', () => {
+      expect(findMenuItemGroups().wrappers.map((x) => x.classes('gl-mt-3'))).toEqual([false, true]);
+    });
+
+    it('only the first menu item does not have margin top', () => {
+      const actual = findMenuItems(findMenuItemGroups().at(1)).wrappers.map((x) =>
+        x.classes('gl-mt-1'),
+      );
+
+      expect(actual).toEqual([false, ...TEST_NAV_DATA.secondary.slice(1).fill(true)]);
+    });
+  });
+
+  describe('without secondary links', () => {
+    beforeEach(() => {
+      createComponent({
+        linksSecondary: [],
+      });
+    });
+
+    it('renders one menu item group', () => {
+      expect(findMenuItemGroupsModel()).toEqual([
+        TEST_NAV_DATA.primary.map((menuItem) => ({ menuItem })),
+      ]);
+    });
+  });
+});