Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42

4 files changed, 48 insertions, 29 deletions

diff --git a/spec/frontend/nav/components/top_nav_app_spec.js b/spec/frontend/nav/components/top_nav_app_spec.js
index 1d6ea99155b..745707c1d28 100644
--- a/spec/frontend/nav/components/top_nav_app_spec.js
+++ b/spec/frontend/nav/components/top_nav_app_spec.js
@@ -30,9 +30,10 @@ describe('~/nav/components/top_nav_app.vue', () => {
     it('renders nav item dropdown', () => {
       expect(findNavItemDropdown().attributes('href')).toBeUndefined();
       expect(findNavItemDropdown().attributes()).toMatchObject({
-        icon: 'hamburger',
-        text: TEST_NAV_DATA.activeTitle,
+        icon: '',
+        text: '',
         'no-flip': '',
+        'no-caret': '',
       });
     });
 
diff --git a/spec/frontend/nav/components/top_nav_dropdown_menu_spec.js b/spec/frontend/nav/components/top_nav_dropdown_menu_spec.js
index 6cfbdb16111..048fca846ad 100644
--- a/spec/frontend/nav/components/top_nav_dropdown_menu_spec.js
+++ b/spec/frontend/nav/components/top_nav_dropdown_menu_spec.js
@@ -25,7 +25,7 @@ describe('~/nav/components/top_nav_dropdown_menu.vue', () => {
   };
 
   const findMenuItems = () => wrapper.findAllComponents(TopNavMenuItem);
-  const findMenuSections = () => wrapper.find(TopNavMenuSections);
+  const findMenuSections = () => wrapper.findComponent(TopNavMenuSections);
   const findMenuSidebar = () => wrapper.find('[data-testid="menu-sidebar"]');
   const findMenuSubview = () => wrapper.findComponent(KeepAliveSlots);
   const hasFullWidthMenuSidebar = () => findMenuSidebar().classes('gl-w-full');
diff --git a/spec/frontend/nav/components/top_nav_menu_item_spec.js b/spec/frontend/nav/components/top_nav_menu_item_spec.js
index a7430d8c73f..b9cf39b8c1d 100644
--- a/spec/frontend/nav/components/top_nav_menu_item_spec.js
+++ b/spec/frontend/nav/components/top_nav_menu_item_spec.js
@@ -26,7 +26,7 @@ describe('~/nav/components/top_nav_menu_item.vue', () => {
     });
   };
 
-  const findButton = () => wrapper.find(GlButton);
+  const findButton = () => wrapper.findComponent(GlButton);
   const findButtonIcons = () =>
     findButton()
       .findAllComponents(GlIcon)
diff --git a/spec/frontend/nav/components/top_nav_menu_sections_spec.js b/spec/frontend/nav/components/top_nav_menu_sections_spec.js
index d56542fe572..0ed5cffd93f 100644
--- a/spec/frontend/nav/components/top_nav_menu_sections_spec.js
+++ b/spec/frontend/nav/components/top_nav_menu_sections_spec.js
@@ -4,11 +4,20 @@ 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' }],
+    menuItems: [
+      { type: 'header', title: 'Heading' },
+      { type: 'item', id: 'test', href: '/test/href' },
+      { type: 'header', title: 'Another Heading' },
+      { type: 'item', id: 'foo' },
+      { type: 'item', id: 'bar' },
+    ],
   },
   {
     id: 'secondary',
-    menuItems: [{ id: 'lorem' }, { id: 'ipsum' }],
+    menuItems: [
+      { type: 'item', id: 'lorem' },
+      { type: 'item', id: 'ipsum' },
+    ],
   },
 ];
 
@@ -25,10 +34,20 @@ describe('~/nav/components/top_nav_menu_sections.vue', () => {
   };
 
   const findMenuItemModels = (parent) =>
-    parent.findAll('[data-testid="menu-item"]').wrappers.map((x) => ({
-      menuItem: x.props('menuItem'),
-      classes: x.classes(),
-    }));
+    parent.findAll('[data-testid="menu-header"],[data-testid="menu-item"]').wrappers.map((x) => {
+      return {
+        menuItem: x.vm
+          ? {
+              type: 'item',
+              ...x.props('menuItem'),
+            }
+          : {
+              type: 'header',
+              title: x.text(),
+            },
+        classes: x.classes(),
+      };
+    });
   const findSectionModels = () =>
     wrapper.findAll('[data-testid="menu-section"]').wrappers.map((x) => ({
       classes: x.classes(),
@@ -45,32 +64,31 @@ describe('~/nav/components/top_nav_menu_sections.vue', () => {
     });
 
     it('renders sections with menu items', () => {
+      const headerClasses = ['gl-px-4', 'gl-py-2', 'gl-text-gray-900', 'gl-display-block'];
+      const itemClasses = ['gl-w-full'];
+
       expect(findSectionModels()).toEqual([
         {
           classes: [],
-          menuItems: [
-            {
-              menuItem: TEST_SECTIONS[0].menuItems[0],
-              classes: ['gl-w-full'],
-            },
-            ...TEST_SECTIONS[0].menuItems.slice(1).map((menuItem) => ({
+          menuItems: TEST_SECTIONS[0].menuItems.map((menuItem, index) => {
+            const classes = menuItem.type === 'header' ? [...headerClasses] : [...itemClasses];
+            if (index > 0) classes.push(menuItem.type === 'header' ? 'gl-pt-3!' : 'gl-mt-1');
+            return {
               menuItem,
-              classes: ['gl-w-full', 'gl-mt-1'],
-            })),
-          ],
+              classes,
+            };
+          }),
         },
         {
           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) => ({
+          menuItems: TEST_SECTIONS[1].menuItems.map((menuItem, index) => {
+            const classes = menuItem.type === 'header' ? [...headerClasses] : [...itemClasses];
+            if (index > 0) classes.push(menuItem.type === 'header' ? 'gl-pt-3!' : 'gl-mt-1');
+            return {
               menuItem,
-              classes: ['gl-w-full', 'gl-mt-1'],
-            })),
-          ],
+              classes,
+            };
+          }),
         },
       ]);
     });
@@ -88,7 +106,7 @@ describe('~/nav/components/top_nav_menu_sections.vue', () => {
 
       menuItem.vm.$emit('click');
 
-      expect(wrapper.emitted('menu-item-click')).toEqual([[TEST_SECTIONS[0].menuItems[1]]]);
+      expect(wrapper.emitted('menu-item-click')).toEqual([[TEST_SECTIONS[0].menuItems[3]]]);
     });
   });