Add latest changes from gitlab-org/gitlab@14-0-stable-eev14.0.0-rc42

1 files changed, 137 insertions, 0 deletions

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 });
+    });
+  });
+});