1 files changed, 107 insertions, 0 deletions
diff --git a/spec/frontend/nav/components/top_nav_menu_sections_spec.js b/spec/frontend/nav/components/top_nav_menu_sections_spec.js
new file mode 100644
index 00000000000..d56542fe572
--- /dev/null
+++ b/spec/frontend/nav/components/top_nav_menu_sections_spec.js
@@ -0,0 +1,107 @@
+import { shallowMount } from '@vue/test-utils';
+import TopNavMenuSections from '~/nav/components/top_nav_menu_sections.vue';
+
+const TEST_SECTIONS = [
+  {
+    id: 'primary',
+    menuItems: [{ id: 'test', href: '/test/href' }, { id: 'foo' }, { id: 'bar' }],
+  },
+  {
+    id: 'secondary',
+    menuItems: [{ id: 'lorem' }, { id: 'ipsum' }],
+  },
+];
+
+describe('~/nav/components/top_nav_menu_sections.vue', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(TopNavMenuSections, {
+      propsData: {
+        sections: TEST_SECTIONS,
+        ...props,
+      },
+    });
+  };
+
+  const findMenuItemModels = (parent) =>
+    parent.findAll('[data-testid="menu-item"]').wrappers.map((x) => ({
+      menuItem: x.props('menuItem'),
+      classes: x.classes(),
+    }));
+  const findSectionModels = () =>
+    wrapper.findAll('[data-testid="menu-section"]').wrappers.map((x) => ({
+      classes: x.classes(),
+      menuItems: findMenuItemModels(x),
+    }));
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders sections with menu items', () => {
+      expect(findSectionModels()).toEqual([
+        {
+          classes: [],
+          menuItems: [
+            {
+              menuItem: TEST_SECTIONS[0].menuItems[0],
+              classes: ['gl-w-full'],
+            },
+            ...TEST_SECTIONS[0].menuItems.slice(1).map((menuItem) => ({
+              menuItem,
+              classes: ['gl-w-full', 'gl-mt-1'],
+            })),
+          ],
+        },
+        {
+          classes: [...TopNavMenuSections.BORDER_CLASSES.split(' '), 'gl-mt-3'],
+          menuItems: [
+            {
+              menuItem: TEST_SECTIONS[1].menuItems[0],
+              classes: ['gl-w-full'],
+            },
+            ...TEST_SECTIONS[1].menuItems.slice(1).map((menuItem) => ({
+              menuItem,
+              classes: ['gl-w-full', 'gl-mt-1'],
+            })),
+          ],
+        },
+      ]);
+    });
+
+    it('when clicked menu item with href, does nothing', () => {
+      const menuItem = wrapper.findAll('[data-testid="menu-item"]').at(0);
+
+      menuItem.vm.$emit('click');
+
+      expect(wrapper.emitted()).toEqual({});
+    });
+
+    it('when clicked menu item without href, emits "menu-item-click"', () => {
+      const menuItem = wrapper.findAll('[data-testid="menu-item"]').at(1);
+
+      menuItem.vm.$emit('click');
+
+      expect(wrapper.emitted('menu-item-click')).toEqual([[TEST_SECTIONS[0].menuItems[1]]]);
+    });
+  });
+
+  describe('with withTopBorder=true', () => {
+    beforeEach(() => {
+      createComponent({ withTopBorder: true });
+    });
+
+    it('renders border classes for top section', () => {
+      expect(findSectionModels().map((x) => x.classes)).toEqual([
+        [...TopNavMenuSections.BORDER_CLASSES.split(' ')],
+        [...TopNavMenuSections.BORDER_CLASSES.split(' '), 'gl-mt-3'],
+      ]);
+    });
+  });
+});