From bded2fb7888ecf5af057a1d879ea9d85c2fea060 Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Fri, 9 Jun 2023 00:08:54 +0000 Subject: Add latest changes from gitlab-org/gitlab@master --- .../frontend/search/sidebar/components/app_spec.js | 36 ++++-- .../components/scope_legacy_navigation_spec.js | 142 +++++++++++++++++++++ .../sidebar/components/scope_navigation_spec.js | 142 --------------------- .../components/scope_new_navigation_spec.js | 83 ------------ .../components/scope_sidebar_navigation_spec.js | 83 ++++++++++++ 5 files changed, 247 insertions(+), 239 deletions(-) create mode 100644 spec/frontend/search/sidebar/components/scope_legacy_navigation_spec.js delete mode 100644 spec/frontend/search/sidebar/components/scope_navigation_spec.js delete mode 100644 spec/frontend/search/sidebar/components/scope_new_navigation_spec.js create mode 100644 spec/frontend/search/sidebar/components/scope_sidebar_navigation_spec.js (limited to 'spec/frontend/search') diff --git a/spec/frontend/search/sidebar/components/app_spec.js b/spec/frontend/search/sidebar/components/app_spec.js index e1911534928..ba492833ec4 100644 --- a/spec/frontend/search/sidebar/components/app_spec.js +++ b/spec/frontend/search/sidebar/components/app_spec.js @@ -4,7 +4,8 @@ import Vuex from 'vuex'; import { MOCK_QUERY } from 'jest/search/mock_data'; import GlobalSearchSidebar from '~/search/sidebar/components/app.vue'; import IssuesFilters from '~/search/sidebar/components/issues_filters.vue'; -import ScopeNavigation from '~/search/sidebar/components/scope_navigation.vue'; +import ScopeLegacyNavigation from '~/search/sidebar/components/scope_legacy_navigation.vue'; +import ScopeSidebarNavigation from '~/search/sidebar/components/scope_sidebar_navigation.vue'; import LanguageFilter from '~/search/sidebar/components/language_filter/index.vue'; Vue.use(Vuex); @@ -12,22 +13,16 @@ Vue.use(Vuex); describe('GlobalSearchSidebar', () => { let wrapper; - const actionSpies = { - applyQuery: jest.fn(), - resetQuery: jest.fn(), - }; - const getterSpies = { currentScope: jest.fn(() => 'issues'), }; - const createComponent = (initialState, featureFlags) => { + const createComponent = (initialState = {}, featureFlags = {}) => { const store = new Vuex.Store({ state: { urlQuery: MOCK_QUERY, ...initialState, }, - actions: actionSpies, getters: getterSpies, }); @@ -43,13 +38,14 @@ describe('GlobalSearchSidebar', () => { const findSidebarSection = () => wrapper.find('section'); const findFilters = () => wrapper.findComponent(IssuesFilters); - const findSidebarNavigation = () => wrapper.findComponent(ScopeNavigation); + const findScopeLegacyNavigation = () => wrapper.findComponent(ScopeLegacyNavigation); + const findScopeSidebarNavigation = () => wrapper.findComponent(ScopeSidebarNavigation); const findLanguageAggregation = () => wrapper.findComponent(LanguageFilter); describe('renders properly', () => { describe('always', () => { beforeEach(() => { - createComponent({}); + createComponent(); }); it(`shows section`, () => { expect(findSidebarSection().exists()).toBe(true); @@ -77,12 +73,24 @@ describe('GlobalSearchSidebar', () => { }); }); - describe('renders navigation', () => { + describe.each` + currentScope | sidebarNavShown | legacyNavShown + ${'issues'} | ${false} | ${true} + ${''} | ${false} | ${false} + ${'issues'} | ${true} | ${false} + ${''} | ${true} | ${false} + `('renders navigation', ({ currentScope, sidebarNavShown, legacyNavShown }) => { beforeEach(() => { - createComponent({}); + getterSpies.currentScope = jest.fn(() => currentScope); + createComponent({ useSidebarNavigation: sidebarNavShown }); }); - it('shows the vertical navigation', () => { - expect(findSidebarNavigation().exists()).toBe(true); + + it(`${!legacyNavShown ? 'hides' : 'shows'} the legacy navigation`, () => { + expect(findScopeLegacyNavigation().exists()).toBe(legacyNavShown); + }); + + it(`${!sidebarNavShown ? 'hides' : 'shows'} the sidebar navigation`, () => { + expect(findScopeSidebarNavigation().exists()).toBe(sidebarNavShown); }); }); }); diff --git a/spec/frontend/search/sidebar/components/scope_legacy_navigation_spec.js b/spec/frontend/search/sidebar/components/scope_legacy_navigation_spec.js new file mode 100644 index 00000000000..6a94da31a1b --- /dev/null +++ b/spec/frontend/search/sidebar/components/scope_legacy_navigation_spec.js @@ -0,0 +1,142 @@ +import { GlNav, GlNavItem, GlIcon } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; +import Vuex from 'vuex'; +import { MOCK_QUERY, MOCK_NAVIGATION } from 'jest/search/mock_data'; +import ScopeLegacyNavigation from '~/search/sidebar/components/scope_legacy_navigation.vue'; + +Vue.use(Vuex); + +describe('ScopeLegacyNavigation', () => { + let wrapper; + + const actionSpies = { + fetchSidebarCount: jest.fn(), + }; + + const getterSpies = { + currentScope: jest.fn(() => 'issues'), + }; + + const createComponent = (initialState) => { + const store = new Vuex.Store({ + state: { + urlQuery: MOCK_QUERY, + navigation: MOCK_NAVIGATION, + ...initialState, + }, + actions: actionSpies, + getters: getterSpies, + }); + + wrapper = shallowMount(ScopeLegacyNavigation, { + store, + }); + }; + + const findNavElement = () => wrapper.find('nav'); + const findGlNav = () => wrapper.findComponent(GlNav); + const findGlNavItems = () => wrapper.findAllComponents(GlNavItem); + const findGlNavItemActive = () => wrapper.find('[active=true]'); + const findGlNavItemActiveLabel = () => findGlNavItemActive().find('[data-testid="label"]'); + const findGlNavItemActiveCount = () => findGlNavItemActive().find('[data-testid="count"]'); + + describe('scope navigation', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders section', () => { + expect(findNavElement().exists()).toBe(true); + }); + + it('renders nav component', () => { + expect(findGlNav().exists()).toBe(true); + }); + + it('renders all nav item components', () => { + expect(findGlNavItems()).toHaveLength(9); + }); + + it('has all proper links', () => { + const linkAtPosition = 3; + const { link } = MOCK_NAVIGATION[Object.keys(MOCK_NAVIGATION)[linkAtPosition]]; + + expect(findGlNavItems().at(linkAtPosition).attributes('href')).toBe(link); + }); + }); + + describe('scope navigation sets proper state with url scope set', () => { + beforeEach(() => { + createComponent(); + }); + + it('has correct active item', () => { + expect(findGlNavItemActive().exists()).toBe(true); + expect(findGlNavItemActiveLabel().text()).toBe('Issues'); + }); + + it('has correct active item count', () => { + expect(findGlNavItemActiveCount().text()).toBe('2.4K'); + }); + + it('does not have plus sign after count text', () => { + expect(findGlNavItemActive().findComponent(GlIcon).exists()).toBe(false); + }); + + it('has count is highlighted correctly', () => { + expect(findGlNavItemActiveCount().classes('gl-text-gray-900')).toBe(true); + }); + }); + + describe('scope navigation sets proper state with NO url scope set', () => { + beforeEach(() => { + getterSpies.currentScope = jest.fn(() => 'projects'); + createComponent({ + urlQuery: {}, + navigation: { + ...MOCK_NAVIGATION, + projects: { + ...MOCK_NAVIGATION.projects, + active: true, + }, + issues: { + ...MOCK_NAVIGATION.issues, + active: false, + }, + }, + }); + }); + + it('has correct active item', () => { + expect(findGlNavItemActive().exists()).toBe(true); + expect(findGlNavItemActiveLabel().text()).toBe('Projects'); + }); + + it('has correct active item count', () => { + expect(findGlNavItemActiveCount().text()).toBe('10K'); + }); + + it('has correct active item count and over limit sign', () => { + expect(findGlNavItemActive().findComponent(GlIcon).exists()).toBe(true); + }); + }); + + describe.each` + searchTherm | hasBeenCalled + ${null} | ${0} + ${'test'} | ${1} + `('fetchSidebarCount', ({ searchTherm, hasBeenCalled }) => { + beforeEach(() => { + createComponent({ + urlQuery: { + search: searchTherm, + }, + }); + }); + + it('is only called when search term is set', () => { + expect(actionSpies.fetchSidebarCount).toHaveBeenCalledTimes(hasBeenCalled); + }); + }); +}); diff --git a/spec/frontend/search/sidebar/components/scope_navigation_spec.js b/spec/frontend/search/sidebar/components/scope_navigation_spec.js deleted file mode 100644 index e8737384f27..00000000000 --- a/spec/frontend/search/sidebar/components/scope_navigation_spec.js +++ /dev/null @@ -1,142 +0,0 @@ -import { GlNav, GlNavItem, GlIcon } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; -import Vue from 'vue'; -import Vuex from 'vuex'; -import { MOCK_QUERY, MOCK_NAVIGATION } from 'jest/search/mock_data'; -import ScopeNavigation from '~/search/sidebar/components/scope_navigation.vue'; - -Vue.use(Vuex); - -describe('ScopeNavigation', () => { - let wrapper; - - const actionSpies = { - fetchSidebarCount: jest.fn(), - }; - - const getterSpies = { - currentScope: jest.fn(() => 'issues'), - }; - - const createComponent = (initialState) => { - const store = new Vuex.Store({ - state: { - urlQuery: MOCK_QUERY, - navigation: MOCK_NAVIGATION, - ...initialState, - }, - actions: actionSpies, - getters: getterSpies, - }); - - wrapper = shallowMount(ScopeNavigation, { - store, - }); - }; - - const findNavElement = () => wrapper.find('nav'); - const findGlNav = () => wrapper.findComponent(GlNav); - const findGlNavItems = () => wrapper.findAllComponents(GlNavItem); - const findGlNavItemActive = () => wrapper.find('[active=true]'); - const findGlNavItemActiveLabel = () => findGlNavItemActive().find('[data-testid="label"]'); - const findGlNavItemActiveCount = () => findGlNavItemActive().find('[data-testid="count"]'); - - describe('scope navigation', () => { - beforeEach(() => { - createComponent(); - }); - - it('renders section', () => { - expect(findNavElement().exists()).toBe(true); - }); - - it('renders nav component', () => { - expect(findGlNav().exists()).toBe(true); - }); - - it('renders all nav item components', () => { - expect(findGlNavItems()).toHaveLength(9); - }); - - it('has all proper links', () => { - const linkAtPosition = 3; - const { link } = MOCK_NAVIGATION[Object.keys(MOCK_NAVIGATION)[linkAtPosition]]; - - expect(findGlNavItems().at(linkAtPosition).attributes('href')).toBe(link); - }); - }); - - describe('scope navigation sets proper state with url scope set', () => { - beforeEach(() => { - createComponent(); - }); - - it('has correct active item', () => { - expect(findGlNavItemActive().exists()).toBe(true); - expect(findGlNavItemActiveLabel().text()).toBe('Issues'); - }); - - it('has correct active item count', () => { - expect(findGlNavItemActiveCount().text()).toBe('2.4K'); - }); - - it('does not have plus sign after count text', () => { - expect(findGlNavItemActive().findComponent(GlIcon).exists()).toBe(false); - }); - - it('has count is highlighted correctly', () => { - expect(findGlNavItemActiveCount().classes('gl-text-gray-900')).toBe(true); - }); - }); - - describe('scope navigation sets proper state with NO url scope set', () => { - beforeEach(() => { - getterSpies.currentScope = jest.fn(() => 'projects'); - createComponent({ - urlQuery: {}, - navigation: { - ...MOCK_NAVIGATION, - projects: { - ...MOCK_NAVIGATION.projects, - active: true, - }, - issues: { - ...MOCK_NAVIGATION.issues, - active: false, - }, - }, - }); - }); - - it('has correct active item', () => { - expect(findGlNavItemActive().exists()).toBe(true); - expect(findGlNavItemActiveLabel().text()).toBe('Projects'); - }); - - it('has correct active item count', () => { - expect(findGlNavItemActiveCount().text()).toBe('10K'); - }); - - it('has correct active item count and over limit sign', () => { - expect(findGlNavItemActive().findComponent(GlIcon).exists()).toBe(true); - }); - }); - - describe.each` - searchTherm | hasBeenCalled - ${null} | ${0} - ${'test'} | ${1} - `('fetchSidebarCount', ({ searchTherm, hasBeenCalled }) => { - beforeEach(() => { - createComponent({ - urlQuery: { - search: searchTherm, - }, - }); - }); - - it('is only called when search term is set', () => { - expect(actionSpies.fetchSidebarCount).toHaveBeenCalledTimes(hasBeenCalled); - }); - }); -}); diff --git a/spec/frontend/search/sidebar/components/scope_new_navigation_spec.js b/spec/frontend/search/sidebar/components/scope_new_navigation_spec.js deleted file mode 100644 index 5207665f883..00000000000 --- a/spec/frontend/search/sidebar/components/scope_new_navigation_spec.js +++ /dev/null @@ -1,83 +0,0 @@ -import { mount } from '@vue/test-utils'; -import Vue, { nextTick } from 'vue'; -import Vuex from 'vuex'; -import ScopeNewNavigation from '~/search/sidebar/components/scope_new_navigation.vue'; -import NavItem from '~/super_sidebar/components/nav_item.vue'; -import { MOCK_QUERY, MOCK_NAVIGATION, MOCK_NAVIGATION_ITEMS } from '../../mock_data'; - -Vue.use(Vuex); - -describe('ScopeNewNavigation', () => { - let wrapper; - - const actionSpies = { - fetchSidebarCount: jest.fn(), - }; - - const getterSpies = { - currentScope: jest.fn(() => 'issues'), - navigationItems: jest.fn(() => MOCK_NAVIGATION_ITEMS), - }; - - const createComponent = (initialState) => { - const store = new Vuex.Store({ - state: { - urlQuery: MOCK_QUERY, - navigation: MOCK_NAVIGATION, - ...initialState, - }, - actions: actionSpies, - getters: getterSpies, - }); - - wrapper = mount(ScopeNewNavigation, { - store, - stubs: { - NavItem, - }, - }); - }; - - const findNavElement = () => wrapper.findComponent('nav'); - const findNavItems = () => wrapper.findAllComponents(NavItem); - const findNavItemActive = () => wrapper.find('[aria-current=page]'); - const findNavItemActiveLabel = () => - findNavItemActive().find('[class="gl-pr-8 gl-text-gray-900 gl-truncate-end"]'); - - describe('scope navigation', () => { - beforeEach(() => { - createComponent({ urlQuery: { ...MOCK_QUERY, search: 'test' } }); - }); - - it('renders section', () => { - expect(findNavElement().exists()).toBe(true); - }); - - it('calls proper action when rendered', async () => { - await nextTick(); - expect(actionSpies.fetchSidebarCount).toHaveBeenCalled(); - }); - - it('renders all nav item components', () => { - expect(findNavItems()).toHaveLength(9); - }); - - it('has all proper links', () => { - const linkAtPosition = 3; - const { link } = MOCK_NAVIGATION[Object.keys(MOCK_NAVIGATION)[linkAtPosition]]; - - expect(findNavItems().at(linkAtPosition).findComponent('a').attributes('href')).toBe(link); - }); - }); - - describe('scope navigation sets proper state with url scope set', () => { - beforeEach(() => { - createComponent(); - }); - - it('has correct active item', () => { - expect(findNavItemActive().exists()).toBe(true); - expect(findNavItemActiveLabel().text()).toBe('Issues'); - }); - }); -}); diff --git a/spec/frontend/search/sidebar/components/scope_sidebar_navigation_spec.js b/spec/frontend/search/sidebar/components/scope_sidebar_navigation_spec.js new file mode 100644 index 00000000000..f31a7c8fa5d --- /dev/null +++ b/spec/frontend/search/sidebar/components/scope_sidebar_navigation_spec.js @@ -0,0 +1,83 @@ +import { mount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; +import Vuex from 'vuex'; +import ScopeSidebarNavigation from '~/search/sidebar/components/scope_sidebar_navigation.vue'; +import NavItem from '~/super_sidebar/components/nav_item.vue'; +import { MOCK_QUERY, MOCK_NAVIGATION, MOCK_NAVIGATION_ITEMS } from '../../mock_data'; + +Vue.use(Vuex); + +describe('ScopeSidebarNavigation', () => { + let wrapper; + + const actionSpies = { + fetchSidebarCount: jest.fn(), + }; + + const getterSpies = { + currentScope: jest.fn(() => 'issues'), + navigationItems: jest.fn(() => MOCK_NAVIGATION_ITEMS), + }; + + const createComponent = (initialState) => { + const store = new Vuex.Store({ + state: { + urlQuery: MOCK_QUERY, + navigation: MOCK_NAVIGATION, + ...initialState, + }, + actions: actionSpies, + getters: getterSpies, + }); + + wrapper = mount(ScopeSidebarNavigation, { + store, + stubs: { + NavItem, + }, + }); + }; + + const findNavElement = () => wrapper.findComponent('nav'); + const findNavItems = () => wrapper.findAllComponents(NavItem); + const findNavItemActive = () => wrapper.find('[aria-current=page]'); + const findNavItemActiveLabel = () => + findNavItemActive().find('[class="gl-pr-8 gl-text-gray-900 gl-truncate-end"]'); + + describe('scope navigation', () => { + beforeEach(() => { + createComponent({ urlQuery: { ...MOCK_QUERY, search: 'test' } }); + }); + + it('renders section', () => { + expect(findNavElement().exists()).toBe(true); + }); + + it('calls proper action when rendered', async () => { + await nextTick(); + expect(actionSpies.fetchSidebarCount).toHaveBeenCalled(); + }); + + it('renders all nav item components', () => { + expect(findNavItems()).toHaveLength(9); + }); + + it('has all proper links', () => { + const linkAtPosition = 3; + const { link } = MOCK_NAVIGATION[Object.keys(MOCK_NAVIGATION)[linkAtPosition]]; + + expect(findNavItems().at(linkAtPosition).findComponent('a').attributes('href')).toBe(link); + }); + }); + + describe('scope navigation sets proper state with url scope set', () => { + beforeEach(() => { + createComponent(); + }); + + it('has correct active item', () => { + expect(findNavItemActive().exists()).toBe(true); + expect(findNavItemActiveLabel().text()).toBe('Issues'); + }); + }); +}); -- cgit v1.2.3