108 lines
2.9 KiB
JavaScript
108 lines
2.9 KiB
JavaScript
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'],
|
|
]);
|
|
});
|
|
});
|
|
});
|