diff options
Diffstat (limited to 'spec/frontend/nav')
5 files changed, 49 insertions, 30 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]]]); }); }); diff --git a/spec/frontend/nav/mock_data.js b/spec/frontend/nav/mock_data.js index c2ad86a4605..2052acfe001 100644 --- a/spec/frontend/nav/mock_data.js +++ b/spec/frontend/nav/mock_data.js @@ -1,7 +1,7 @@ import { range } from 'lodash'; export const TEST_NAV_DATA = { - activeTitle: 'Test Active Title', + menuTitle: 'Test Menu Title', primary: [ ...['projects', 'groups'].map((view) => ({ id: view, |