1 files changed, 33 insertions, 27 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
index b08d75f36ce..06d2179b859 100644
--- a/spec/frontend/nav/components/top_nav_container_view_spec.js
+++ b/spec/frontend/nav/components/top_nav_container_view_spec.js
@@ -4,7 +4,7 @@ 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 TopNavMenuSections from '~/nav/components/top_nav_menu_sections.vue';
 import VuexModuleProvider from '~/vue_shared/components/vuex_module_provider.vue';
 import { TEST_NAV_DATA } from '../mock_data';
 
@@ -13,39 +13,39 @@ const DEFAULT_PROPS = {
   frequentItemsVuexModule: FREQUENT_ITEMS_PROJECTS.vuexModule,
   linksPrimary: TEST_NAV_DATA.primary,
   linksSecondary: TEST_NAV_DATA.secondary,
+  containerClass: 'test-frequent-items-container-class',
 };
 const TEST_OTHER_PROPS = {
   namespace: 'projects',
-  currentUserName: '',
-  currentItem: {},
+  currentUserName: 'test-user',
+  currentItem: { id: 'test' },
 };
 
 describe('~/nav/components/top_nav_container_view.vue', () => {
   let wrapper;
 
-  const createComponent = (props = {}) => {
+  const createComponent = (props = {}, options = {}) => {
     wrapper = shallowMount(TopNavContainerView, {
       propsData: {
         ...DEFAULT_PROPS,
         ...TEST_OTHER_PROPS,
         ...props,
       },
+      ...options,
     });
   };
 
-  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 findMenuSections = () => wrapper.findComponent(TopNavMenuSections);
   const findFrequentItemsApp = () => {
     const parent = wrapper.findComponent(VuexModuleProvider);
 
     return {
       vuexModule: parent.props('vuexModule'),
       props: parent.findComponent(FrequentItemsApp).props(),
+      attributes: parent.findComponent(FrequentItemsApp).attributes(),
     };
   };
+  const findFrequentItemsContainer = () => wrapper.find('[data-testid="frequent-items-container"]');
 
   afterEach(() => {
     wrapper.destroy();
@@ -67,34 +67,40 @@ describe('~/nav/components/top_nav_container_view.vue', () => {
   );
 
   describe('default', () => {
+    const EXTRA_ATTRS = { 'data-test-attribute': 'foo' };
+
     beforeEach(() => {
-      createComponent();
+      createComponent({}, { attrs: EXTRA_ATTRS });
+    });
+
+    it('does not inherit extra attrs', () => {
+      expect(wrapper.attributes()).toEqual({
+        class: expect.any(String),
+      });
     });
 
     it('renders frequent items app', () => {
       expect(findFrequentItemsApp()).toEqual({
         vuexModule: DEFAULT_PROPS.frequentItemsVuexModule,
-        props: TEST_OTHER_PROPS,
+        props: expect.objectContaining(TEST_OTHER_PROPS),
+        attributes: expect.objectContaining(EXTRA_ATTRS),
       });
     });
 
-    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('renders given container class', () => {
+      expect(findFrequentItemsContainer().classes(DEFAULT_PROPS.containerClass)).toBe(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'),
-      );
+    it('renders menu sections', () => {
+      const sections = [
+        { id: 'primary', menuItems: TEST_NAV_DATA.primary },
+        { id: 'secondary', menuItems: TEST_NAV_DATA.secondary },
+      ];
 
-      expect(actual).toEqual([false, ...TEST_NAV_DATA.secondary.slice(1).fill(true)]);
+      expect(findMenuSections().props()).toEqual({
+        sections,
+        withTopBorder: true,
+      });
     });
   });
 
@@ -106,8 +112,8 @@ describe('~/nav/components/top_nav_container_view.vue', () => {
     });
 
     it('renders one menu item group', () => {
-      expect(findMenuItemGroupsModel()).toEqual([
-        TEST_NAV_DATA.primary.map((menuItem) => ({ menuItem })),
+      expect(findMenuSections().props('sections')).toEqual([
+        { id: 'primary', menuItems: TEST_NAV_DATA.primary },
       ]);
     });
   });