diff options
Diffstat (limited to 'spec/frontend/nav/components')
9 files changed, 773 insertions, 121 deletions
diff --git a/spec/frontend/nav/components/responsive_app_spec.js b/spec/frontend/nav/components/responsive_app_spec.js new file mode 100644 index 00000000000..7221ea2c5cd --- /dev/null +++ b/spec/frontend/nav/components/responsive_app_spec.js @@ -0,0 +1,173 @@ +import { shallowMount } from '@vue/test-utils'; +import ResponsiveApp from '~/nav/components/responsive_app.vue'; +import ResponsiveHeader from '~/nav/components/responsive_header.vue'; +import ResponsiveHome from '~/nav/components/responsive_home.vue'; +import TopNavContainerView from '~/nav/components/top_nav_container_view.vue'; +import eventHub, { EVENT_RESPONSIVE_TOGGLE } from '~/nav/event_hub'; +import { resetMenuItemsActive } from '~/nav/utils/reset_menu_items_active'; +import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue'; +import { TEST_NAV_DATA } from '../mock_data'; + +const HTML_HEADER_CONTENT = '<div class="header-content"></div>'; +const HTML_MENU_EXPANDED = '<div class="menu-expanded"></div>'; +const HTML_HEADER_WITH_MENU_EXPANDED = + '<div></div><div class="header-content menu-expanded"></div>'; + +describe('~/nav/components/responsive_app.vue', () => { + let wrapper; + + const createComponent = () => { + wrapper = shallowMount(ResponsiveApp, { + propsData: { + navData: TEST_NAV_DATA, + }, + stubs: { + KeepAliveSlots, + }, + }); + }; + const triggerResponsiveToggle = () => eventHub.$emit(EVENT_RESPONSIVE_TOGGLE); + + const findHome = () => wrapper.findComponent(ResponsiveHome); + const findMobileOverlay = () => wrapper.find('[data-testid="mobile-overlay"]'); + const findSubviewHeader = () => wrapper.findComponent(ResponsiveHeader); + const findSubviewContainer = () => wrapper.findComponent(TopNavContainerView); + const hasBodyResponsiveOpen = () => document.body.classList.contains('top-nav-responsive-open'); + const hasMobileOverlayVisible = () => findMobileOverlay().classes('mobile-nav-open'); + + beforeEach(() => { + document.body.innerHTML = ''; + // Add test class to reset state + assert that we're adding classes correctly + document.body.className = 'test-class'; + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('default', () => { + beforeEach(() => { + createComponent(); + }); + + it('shows home by default', () => { + expect(findHome().isVisible()).toBe(true); + expect(findHome().props()).toEqual({ + navData: resetMenuItemsActive(TEST_NAV_DATA), + }); + }); + + it.each` + bodyHtml | expectation + ${''} | ${false} + ${HTML_HEADER_CONTENT} | ${false} + ${HTML_MENU_EXPANDED} | ${false} + ${HTML_HEADER_WITH_MENU_EXPANDED} | ${true} + `( + 'with responsive toggle event and html set to $bodyHtml, responsive open = $expectation', + ({ bodyHtml, expectation }) => { + document.body.innerHTML = bodyHtml; + + triggerResponsiveToggle(); + + expect(hasBodyResponsiveOpen()).toBe(expectation); + }, + ); + + it.each` + events | expectation + ${[]} | ${false} + ${['bv::dropdown::show']} | ${true} + ${['bv::dropdown::show', 'bv::dropdown::hide']} | ${false} + `( + 'with root events $events, movile overlay visible = $expectation', + async ({ events, expectation }) => { + // `await...reduce(async` is like doing an `forEach(async (...))` excpet it works + await events.reduce(async (acc, evt) => { + await acc; + + wrapper.vm.$root.$emit(evt); + + await wrapper.vm.$nextTick(); + }, Promise.resolve()); + + expect(hasMobileOverlayVisible()).toBe(expectation); + }, + ); + }); + + describe('with menu expanded in body', () => { + beforeEach(() => { + document.body.innerHTML = HTML_HEADER_WITH_MENU_EXPANDED; + createComponent(); + }); + + it('sets the body responsive open', () => { + expect(hasBodyResponsiveOpen()).toBe(true); + }); + }); + + const projectsContainerProps = { + containerClass: 'gl-px-3', + frequentItemsDropdownType: ResponsiveApp.FREQUENT_ITEMS_PROJECTS.namespace, + frequentItemsVuexModule: ResponsiveApp.FREQUENT_ITEMS_PROJECTS.vuexModule, + linksPrimary: TEST_NAV_DATA.views.projects.linksPrimary, + linksSecondary: TEST_NAV_DATA.views.projects.linksSecondary, + }; + const groupsContainerProps = { + containerClass: 'gl-px-3', + frequentItemsDropdownType: ResponsiveApp.FREQUENT_ITEMS_GROUPS.namespace, + frequentItemsVuexModule: ResponsiveApp.FREQUENT_ITEMS_GROUPS.vuexModule, + linksPrimary: TEST_NAV_DATA.views.groups.linksPrimary, + linksSecondary: TEST_NAV_DATA.views.groups.linksSecondary, + }; + + describe.each` + view | header | containerProps + ${'projects'} | ${'Projects'} | ${projectsContainerProps} + ${'groups'} | ${'Groups'} | ${groupsContainerProps} + `('when menu item with $view is clicked', ({ view, header, containerProps }) => { + beforeEach(async () => { + createComponent(); + + findHome().vm.$emit('menu-item-click', { view }); + + await wrapper.vm.$nextTick(); + }); + + it('shows header', () => { + expect(findSubviewHeader().text()).toBe(header); + }); + + it('shows container subview', () => { + expect(findSubviewContainer().props()).toEqual(containerProps); + }); + + it('hides home', () => { + expect(findHome().isVisible()).toBe(false); + }); + + describe('when header back button is clicked', () => { + beforeEach(() => { + findSubviewHeader().vm.$emit('menu-item-click', { view: 'home' }); + }); + + it('shows home', () => { + expect(findHome().isVisible()).toBe(true); + }); + }); + }); + + describe('when destroyed', () => { + beforeEach(() => { + createComponent(); + wrapper.destroy(); + }); + + it('responsive toggle event does nothing', () => { + triggerResponsiveToggle(); + + expect(hasBodyResponsiveOpen()).toBe(false); + }); + }); +}); diff --git a/spec/frontend/nav/components/responsive_header_spec.js b/spec/frontend/nav/components/responsive_header_spec.js new file mode 100644 index 00000000000..937c44727c7 --- /dev/null +++ b/spec/frontend/nav/components/responsive_header_spec.js @@ -0,0 +1,67 @@ +import { shallowMount } from '@vue/test-utils'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; +import ResponsiveHeader from '~/nav/components/responsive_header.vue'; +import TopNavMenuItem from '~/nav/components/top_nav_menu_item.vue'; + +const TEST_SLOT_CONTENT = 'Test slot content'; + +describe('~/nav/components/top_nav_menu_sections.vue', () => { + let wrapper; + + const createComponent = () => { + wrapper = shallowMount(ResponsiveHeader, { + slots: { + default: TEST_SLOT_CONTENT, + }, + directives: { + GlTooltip: createMockDirective(), + }, + }); + }; + + const findMenuItem = () => wrapper.findComponent(TopNavMenuItem); + + beforeEach(() => { + createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders slot', () => { + expect(wrapper.text()).toBe(TEST_SLOT_CONTENT); + }); + + it('renders back button', () => { + const button = findMenuItem(); + + const tooltip = getBinding(button.element, 'gl-tooltip').value.title; + + expect(tooltip).toBe('Go back'); + expect(button.props()).toEqual({ + menuItem: { + id: 'home', + view: 'home', + icon: 'angle-left', + }, + iconOnly: true, + }); + }); + + it('emits nothing', () => { + expect(wrapper.emitted()).toEqual({}); + }); + + describe('when back button is clicked', () => { + beforeEach(() => { + findMenuItem().vm.$emit('click'); + }); + + it('emits menu-item-click', () => { + expect(wrapper.emitted()).toEqual({ + 'menu-item-click': [[{ id: 'home', view: 'home', icon: 'angle-left' }]], + }); + }); + }); +}); diff --git a/spec/frontend/nav/components/responsive_home_spec.js b/spec/frontend/nav/components/responsive_home_spec.js new file mode 100644 index 00000000000..8f198d92747 --- /dev/null +++ b/spec/frontend/nav/components/responsive_home_spec.js @@ -0,0 +1,137 @@ +import { shallowMount } from '@vue/test-utils'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; +import ResponsiveHome from '~/nav/components/responsive_home.vue'; +import TopNavMenuItem from '~/nav/components/top_nav_menu_item.vue'; +import TopNavMenuSections from '~/nav/components/top_nav_menu_sections.vue'; +import TopNavNewDropdown from '~/nav/components/top_nav_new_dropdown.vue'; +import { TEST_NAV_DATA } from '../mock_data'; + +const TEST_SEARCH_MENU_ITEM = { + id: 'search', + title: 'search', + icon: 'search', + href: '/search', +}; + +const TEST_NEW_DROPDOWN_VIEW_MODEL = { + title: 'new', + menu_sections: [], +}; + +describe('~/nav/components/responsive_home.vue', () => { + let wrapper; + let menuItemClickListener; + + const createComponent = (props = {}) => { + wrapper = shallowMount(ResponsiveHome, { + propsData: { + navData: TEST_NAV_DATA, + ...props, + }, + directives: { + GlTooltip: createMockDirective(), + }, + listeners: { + 'menu-item-click': menuItemClickListener, + }, + }); + }; + + const findSearchMenuItem = () => wrapper.findComponent(TopNavMenuItem); + const findNewDropdown = () => wrapper.findComponent(TopNavNewDropdown); + const findMenuSections = () => wrapper.findComponent(TopNavMenuSections); + + beforeEach(() => { + menuItemClickListener = jest.fn(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('default', () => { + beforeEach(() => { + createComponent(); + }); + + it.each` + desc | fn + ${'does not show search menu item'} | ${findSearchMenuItem} + ${'does not show new dropdown'} | ${findNewDropdown} + `('$desc', ({ fn }) => { + expect(fn().exists()).toBe(false); + }); + + it('shows menu sections', () => { + expect(findMenuSections().props('sections')).toEqual([ + { id: 'primary', menuItems: TEST_NAV_DATA.primary }, + { id: 'secondary', menuItems: TEST_NAV_DATA.secondary }, + ]); + }); + + it('emits when menu sections emits', () => { + expect(menuItemClickListener).not.toHaveBeenCalled(); + + findMenuSections().vm.$emit('menu-item-click', TEST_NAV_DATA.primary[0]); + + expect(menuItemClickListener).toHaveBeenCalledWith(TEST_NAV_DATA.primary[0]); + }); + }); + + describe('without secondary', () => { + beforeEach(() => { + createComponent({ navData: { ...TEST_NAV_DATA, secondary: null } }); + }); + + it('shows menu sections', () => { + expect(findMenuSections().props('sections')).toEqual([ + { id: 'primary', menuItems: TEST_NAV_DATA.primary }, + ]); + }); + }); + + describe('with search view', () => { + beforeEach(() => { + createComponent({ + navData: { + ...TEST_NAV_DATA, + views: { search: TEST_SEARCH_MENU_ITEM }, + }, + }); + }); + + it('shows search menu item', () => { + expect(findSearchMenuItem().props()).toEqual({ + menuItem: TEST_SEARCH_MENU_ITEM, + iconOnly: true, + }); + }); + + it('shows tooltip for search', () => { + const tooltip = getBinding(findSearchMenuItem().element, 'gl-tooltip'); + expect(tooltip.value).toEqual({ title: TEST_SEARCH_MENU_ITEM.title }); + }); + }); + + describe('with new view', () => { + beforeEach(() => { + createComponent({ + navData: { + ...TEST_NAV_DATA, + views: { new: TEST_NEW_DROPDOWN_VIEW_MODEL }, + }, + }); + }); + + it('shows new dropdown', () => { + expect(findNewDropdown().props()).toEqual({ + viewModel: TEST_NEW_DROPDOWN_VIEW_MODEL, + }); + }); + + it('shows tooltip for new dropdown', () => { + const tooltip = getBinding(findNewDropdown().element, 'gl-tooltip'); + expect(tooltip.value).toEqual({ title: TEST_NEW_DROPDOWN_VIEW_MODEL.title }); + }); + }); +}); diff --git a/spec/frontend/nav/components/top_nav_app_spec.js b/spec/frontend/nav/components/top_nav_app_spec.js index 06700ce748e..1d6ea99155b 100644 --- a/spec/frontend/nav/components/top_nav_app_spec.js +++ b/spec/frontend/nav/components/top_nav_app_spec.js @@ -1,5 +1,5 @@ -import { GlNavItemDropdown, GlTooltip } from '@gitlab/ui'; -import { shallowMount, mount } from '@vue/test-utils'; +import { GlNavItemDropdown } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import TopNavApp from '~/nav/components/top_nav_app.vue'; import TopNavDropdownMenu from '~/nav/components/top_nav_dropdown_menu.vue'; import { TEST_NAV_DATA } from '../mock_data'; @@ -7,8 +7,8 @@ import { TEST_NAV_DATA } from '../mock_data'; describe('~/nav/components/top_nav_app.vue', () => { let wrapper; - const createComponent = (mountFn = shallowMount) => { - wrapper = mountFn(TopNavApp, { + const createComponent = () => { + wrapper = shallowMount(TopNavApp, { propsData: { navData: TEST_NAV_DATA, }, @@ -17,7 +17,6 @@ describe('~/nav/components/top_nav_app.vue', () => { const findNavItemDropdown = () => wrapper.findComponent(GlNavItemDropdown); const findMenu = () => wrapper.findComponent(TopNavDropdownMenu); - const findTooltip = () => wrapper.findComponent(GlTooltip); afterEach(() => { wrapper.destroy(); @@ -31,7 +30,7 @@ describe('~/nav/components/top_nav_app.vue', () => { it('renders nav item dropdown', () => { expect(findNavItemDropdown().attributes('href')).toBeUndefined(); expect(findNavItemDropdown().attributes()).toMatchObject({ - icon: 'dot-grid', + icon: 'hamburger', text: TEST_NAV_DATA.activeTitle, 'no-flip': '', }); @@ -44,25 +43,5 @@ describe('~/nav/components/top_nav_app.vue', () => { views: TEST_NAV_DATA.views, }); }); - - it('renders tooltip', () => { - expect(findTooltip().attributes()).toMatchObject({ - 'boundary-padding': '0', - placement: 'right', - title: TopNavApp.TOOLTIP, - }); - }); - }); - - describe('when full mounted', () => { - beforeEach(() => { - createComponent(mount); - }); - - it('has dropdown toggle as tooltip target', () => { - const targetFn = findTooltip().props('target'); - - expect(targetFn()).toBe(wrapper.find('.js-top-nav-dropdown-toggle').element); - }); }); }); 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 }, ]); }); }); 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 d9bba22238a..70df05a2781 100644 --- a/spec/frontend/nav/components/top_nav_dropdown_menu_spec.js +++ b/spec/frontend/nav/components/top_nav_dropdown_menu_spec.js @@ -1,67 +1,62 @@ -import { shallowMount } from '@vue/test-utils'; +import { shallowMount, mount } from '@vue/test-utils'; import { nextTick } from 'vue'; import TopNavDropdownMenu from '~/nav/components/top_nav_dropdown_menu.vue'; +import TopNavMenuItem from '~/nav/components/top_nav_menu_item.vue'; +import TopNavMenuSections from '~/nav/components/top_nav_menu_sections.vue'; import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue'; import { TEST_NAV_DATA } from '../mock_data'; -const SECONDARY_GROUP_CLASSES = TopNavDropdownMenu.SECONDARY_GROUP_CLASS.split(' '); - describe('~/nav/components/top_nav_dropdown_menu.vue', () => { let wrapper; - const createComponent = (props = {}) => { - wrapper = shallowMount(TopNavDropdownMenu, { + const createComponent = (props = {}, mountFn = shallowMount) => { + wrapper = mountFn(TopNavDropdownMenu, { propsData: { primary: TEST_NAV_DATA.primary, secondary: TEST_NAV_DATA.secondary, views: TEST_NAV_DATA.views, ...props, }, + stubs: { + // Stub the keep-alive-slots so we don't render frequent items which uses a store + KeepAliveSlots: true, + }, }); }; - const findMenuItems = (parent = wrapper) => parent.findAll('[data-testid="menu-item"]'); - const findMenuItemsModel = (parent = wrapper) => - findMenuItems(parent).wrappers.map((x) => ({ - menuItem: x.props('menuItem'), - isActive: x.classes('active'), - })); - const findMenuItemGroups = () => wrapper.findAll('[data-testid="menu-item-group"]'); - const findMenuItemGroupsModel = () => - findMenuItemGroups().wrappers.map((x) => ({ - classes: x.classes(), - items: findMenuItemsModel(x), - })); + const findMenuItems = () => wrapper.findAllComponents(TopNavMenuItem); + const findMenuSections = () => wrapper.find(TopNavMenuSections); const findMenuSidebar = () => wrapper.find('[data-testid="menu-sidebar"]'); const findMenuSubview = () => wrapper.findComponent(KeepAliveSlots); const hasFullWidthMenuSidebar = () => findMenuSidebar().classes('gl-w-full'); - const createItemsGroupModelExpectation = ({ - primary = TEST_NAV_DATA.primary, - secondary = TEST_NAV_DATA.secondary, - activeIndex = -1, - } = {}) => [ - { - classes: [], - items: primary.map((menuItem, index) => ({ isActive: index === activeIndex, menuItem })), - }, - { - classes: SECONDARY_GROUP_CLASSES, - items: secondary.map((menuItem) => ({ isActive: false, menuItem })), - }, - ]; + const withActiveIndex = (menuItems, activeIndex) => + menuItems.map((x, idx) => ({ + ...x, + active: idx === activeIndex, + })); afterEach(() => { wrapper.destroy(); }); + beforeEach(() => { + jest.spyOn(console, 'error').mockImplementation(); + }); + describe('default', () => { beforeEach(() => { createComponent(); }); - it('renders menu item groups', () => { - expect(findMenuItemGroupsModel()).toEqual(createItemsGroupModelExpectation()); + it('renders menu sections', () => { + expect(findMenuSections().props()).toEqual({ + sections: [ + { id: 'primary', menuItems: TEST_NAV_DATA.primary }, + { id: 'secondary', menuItems: TEST_NAV_DATA.secondary }, + ], + withTopBorder: false, + }); }); it('has full width menu sidebar', () => { @@ -74,36 +69,25 @@ describe('~/nav/components/top_nav_dropdown_menu.vue', () => { expect(subview.isVisible()).toBe(false); expect(subview.props()).toEqual({ slotKey: '' }); }); - - it('the first menu item in a group does not render margin top', () => { - const actual = findMenuItems(findMenuItemGroups().at(0)).wrappers.map((x) => - x.classes('gl-mt-1'), - ); - - expect(actual).toEqual([false, ...TEST_NAV_DATA.primary.slice(1).fill(true)]); - }); }); describe('with pre-initialized active view', () => { - const primaryWithActive = [ - TEST_NAV_DATA.primary[0], - { - ...TEST_NAV_DATA.primary[1], - active: true, - }, - ...TEST_NAV_DATA.primary.slice(2), - ]; - beforeEach(() => { - createComponent({ - primary: primaryWithActive, - }); + // We opt for a small integration test, to make sure the event is handled correctly + // as it would in prod. + createComponent( + { + primary: withActiveIndex(TEST_NAV_DATA.primary, 1), + }, + mount, + ); }); - it('renders menu item groups', () => { - expect(findMenuItemGroupsModel()).toEqual( - createItemsGroupModelExpectation({ primary: primaryWithActive, activeIndex: 1 }), - ); + it('renders menu sections', () => { + expect(findMenuSections().props('sections')).toStrictEqual([ + { id: 'primary', menuItems: withActiveIndex(TEST_NAV_DATA.primary, 1) }, + { id: 'secondary', menuItems: TEST_NAV_DATA.secondary }, + ]); }); it('does not have full width menu sidebar', () => { @@ -114,11 +98,11 @@ describe('~/nav/components/top_nav_dropdown_menu.vue', () => { const subview = findMenuSubview(); expect(subview.isVisible()).toBe(true); - expect(subview.props('slotKey')).toBe(primaryWithActive[1].view); + expect(subview.props('slotKey')).toBe(TEST_NAV_DATA.primary[1].view); }); it('does not change view if non-view menu item is clicked', async () => { - const secondaryLink = findMenuItems().at(primaryWithActive.length); + const secondaryLink = findMenuItems().at(TEST_NAV_DATA.primary.length); // Ensure this doesn't have a view expect(secondaryLink.props('menuItem').view).toBeUndefined(); @@ -127,10 +111,10 @@ describe('~/nav/components/top_nav_dropdown_menu.vue', () => { await nextTick(); - expect(findMenuSubview().props('slotKey')).toBe(primaryWithActive[1].view); + expect(findMenuSubview().props('slotKey')).toBe(TEST_NAV_DATA.primary[1].view); }); - describe('when other view menu item is clicked', () => { + describe('when menu item is clicked', () => { let primaryLink; beforeEach(async () => { @@ -144,13 +128,20 @@ describe('~/nav/components/top_nav_dropdown_menu.vue', () => { }); it('changes active view', () => { - expect(findMenuSubview().props('slotKey')).toBe(primaryWithActive[0].view); + expect(findMenuSubview().props('slotKey')).toBe(TEST_NAV_DATA.primary[0].view); }); it('changes active status on menu item', () => { - expect(findMenuItemGroupsModel()).toStrictEqual( - createItemsGroupModelExpectation({ primary: primaryWithActive, activeIndex: 0 }), - ); + expect(findMenuSections().props('sections')).toStrictEqual([ + { + id: 'primary', + menuItems: withActiveIndex(TEST_NAV_DATA.primary, 0), + }, + { + id: 'secondary', + menuItems: withActiveIndex(TEST_NAV_DATA.secondary, -1), + }, + ]); }); }); }); 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 579af13d08a..fd2b4d3b056 100644 --- a/spec/frontend/nav/components/top_nav_menu_item_spec.js +++ b/spec/frontend/nav/components/top_nav_menu_item_spec.js @@ -7,6 +7,7 @@ const TEST_MENU_ITEM = { icon: 'search', href: '/pretty/good/burger', view: 'burger-view', + data: { qa_selector: 'not-a-real-selector', method: 'post', testFoo: 'test' }, }; describe('~/nav/components/top_nav_menu_item.vue', () => { @@ -29,7 +30,10 @@ describe('~/nav/components/top_nav_menu_item.vue', () => { const findButtonIcons = () => findButton() .findAllComponents(GlIcon) - .wrappers.map((x) => x.props('name')); + .wrappers.map((x) => ({ + name: x.props('name'), + classes: x.classes(), + })); beforeEach(() => { listener = jest.fn(); @@ -47,6 +51,16 @@ describe('~/nav/components/top_nav_menu_item.vue', () => { expect(button.text()).toBe(TEST_MENU_ITEM.title); }); + it('renders button data attributes', () => { + const button = findButton(); + + expect(button.attributes()).toMatchObject({ + 'data-qa-selector': TEST_MENU_ITEM.data.qa_selector, + 'data-method': TEST_MENU_ITEM.data.method, + 'data-test-foo': TEST_MENU_ITEM.data.testFoo, + }); + }); + it('passes listeners to button', () => { expect(listener).not.toHaveBeenCalled(); @@ -54,11 +68,42 @@ describe('~/nav/components/top_nav_menu_item.vue', () => { expect(listener).toHaveBeenCalledWith('TEST'); }); + + it('renders expected icons', () => { + expect(findButtonIcons()).toEqual([ + { + name: TEST_MENU_ITEM.icon, + classes: ['gl-mr-2!'], + }, + { + name: 'chevron-right', + classes: ['gl-ml-auto'], + }, + ]); + }); + }); + + describe('with icon-only', () => { + beforeEach(() => { + createComponent({ iconOnly: true }); + }); + + it('does not render title or view icon', () => { + expect(wrapper.text()).toBe(''); + }); + + it('only renders menuItem icon', () => { + expect(findButtonIcons()).toEqual([ + { + name: TEST_MENU_ITEM.icon, + classes: [], + }, + ]); + }); }); describe.each` desc | menuItem | expectedIcons - ${'default'} | ${TEST_MENU_ITEM} | ${[TEST_MENU_ITEM.icon, 'chevron-right']} ${'with no icon'} | ${{ ...TEST_MENU_ITEM, icon: null }} | ${['chevron-right']} ${'with no view'} | ${{ ...TEST_MENU_ITEM, view: null }} | ${[TEST_MENU_ITEM.icon]} ${'with no icon or view'} | ${{ ...TEST_MENU_ITEM, view: null, icon: null }} | ${[]} @@ -68,7 +113,32 @@ describe('~/nav/components/top_nav_menu_item.vue', () => { }); it(`renders expected icons ${JSON.stringify(expectedIcons)}`, () => { - expect(findButtonIcons()).toEqual(expectedIcons); + expect(findButtonIcons().map((x) => x.name)).toEqual(expectedIcons); + }); + }); + + describe.each` + desc | active | cssClass | expectedClasses + ${'default'} | ${false} | ${''} | ${[]} + ${'with css class'} | ${false} | ${'test-css-class testing-123'} | ${['test-css-class', 'testing-123']} + ${'with css class & active'} | ${true} | ${'test-css-class'} | ${['test-css-class', ...TopNavMenuItem.ACTIVE_CLASS.split(' ')]} + `('$desc', ({ active, cssClass, expectedClasses }) => { + beforeEach(() => { + createComponent({ + menuItem: { + ...TEST_MENU_ITEM, + active, + css_class: cssClass, + }, + }); + }); + + it('renders expected classes', () => { + expect(wrapper.classes()).toStrictEqual([ + 'top-nav-menu-item', + 'gl-display-block', + ...expectedClasses, + ]); }); }); }); 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'], + ]); + }); + }); +}); diff --git a/spec/frontend/nav/components/top_nav_new_dropdown_spec.js b/spec/frontend/nav/components/top_nav_new_dropdown_spec.js new file mode 100644 index 00000000000..18210658b89 --- /dev/null +++ b/spec/frontend/nav/components/top_nav_new_dropdown_spec.js @@ -0,0 +1,122 @@ +import { GlDropdown } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import TopNavNewDropdown from '~/nav/components/top_nav_new_dropdown.vue'; + +const TEST_VIEW_MODEL = { + title: 'Dropdown', + menu_sections: [ + { + title: 'Section 1', + menu_items: [ + { id: 'foo-1', title: 'Foo 1', href: '/foo/1' }, + { id: 'foo-2', title: 'Foo 2', href: '/foo/2' }, + { id: 'foo-3', title: 'Foo 3', href: '/foo/3' }, + ], + }, + { + title: 'Section 2', + menu_items: [ + { id: 'bar-1', title: 'Bar 1', href: '/bar/1' }, + { id: 'bar-2', title: 'Bar 2', href: '/bar/2' }, + ], + }, + ], +}; + +describe('~/nav/components/top_nav_menu_sections.vue', () => { + let wrapper; + + const createComponent = (props = {}) => { + wrapper = shallowMount(TopNavNewDropdown, { + propsData: { + viewModel: TEST_VIEW_MODEL, + ...props, + }, + }); + }; + + const findDropdown = () => wrapper.findComponent(GlDropdown); + const findDropdownContents = () => + findDropdown() + .findAll('[data-testid]') + .wrappers.map((child) => { + const type = child.attributes('data-testid'); + + if (type === 'divider') { + return { type }; + } else if (type === 'header') { + return { type, text: child.text() }; + } + + return { + type, + text: child.text(), + href: child.attributes('href'), + }; + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('default', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders dropdown parent', () => { + expect(findDropdown().props()).toMatchObject({ + text: TEST_VIEW_MODEL.title, + textSrOnly: true, + icon: 'plus', + }); + }); + + it('renders dropdown content', () => { + expect(findDropdownContents()).toEqual([ + { + type: 'header', + text: TEST_VIEW_MODEL.menu_sections[0].title, + }, + ...TEST_VIEW_MODEL.menu_sections[0].menu_items.map(({ title, href }) => ({ + type: 'item', + href, + text: title, + })), + { + type: 'divider', + }, + { + type: 'header', + text: TEST_VIEW_MODEL.menu_sections[1].title, + }, + ...TEST_VIEW_MODEL.menu_sections[1].menu_items.map(({ title, href }) => ({ + type: 'item', + href, + text: title, + })), + ]); + }); + }); + + describe('with only 1 section', () => { + beforeEach(() => { + createComponent({ + viewModel: { + ...TEST_VIEW_MODEL, + menu_sections: TEST_VIEW_MODEL.menu_sections.slice(0, 1), + }, + }); + }); + + it('renders dropdown content without headers and dividers', () => { + expect(findDropdownContents()).toEqual( + TEST_VIEW_MODEL.menu_sections[0].menu_items.map(({ title, href }) => ({ + type: 'item', + href, + text: title, + })), + ); + }); + }); +}); |