diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-04-26 15:09:18 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-04-26 15:09:18 +0300 |
commit | 9edf852c3a851d84b85bc94f7a3b41d5ef04dd32 (patch) | |
tree | f79a739a455d5d02758e225582688c0451465aa6 /spec/frontend/super_sidebar | |
parent | 6f22c85c38b7a896178879172f4c0f82353308f8 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/super_sidebar')
4 files changed, 95 insertions, 12 deletions
diff --git a/spec/frontend/super_sidebar/components/menu_section_spec.js b/spec/frontend/super_sidebar/components/menu_section_spec.js new file mode 100644 index 00000000000..751c4da5a3d --- /dev/null +++ b/spec/frontend/super_sidebar/components/menu_section_spec.js @@ -0,0 +1,93 @@ +import { GlCollapse } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import MenuSection from '~/super_sidebar/components/menu_section.vue'; +import NavItem from '~/super_sidebar/components/nav_item.vue'; +import { stubComponent } from 'helpers/stub_component'; + +describe('MenuSection component', () => { + let wrapper; + + const findCollapse = () => wrapper.getComponent(GlCollapse); + const findNavItems = () => wrapper.findAllComponents(NavItem); + const createWrapper = (item, otherProps) => { + wrapper = shallowMountExtended(MenuSection, { + propsData: { item, ...otherProps }, + stubs: { + GlCollapse: stubComponent(GlCollapse, { + props: ['visible'], + }), + }, + }); + }; + + it('renders its title', () => { + createWrapper({ title: 'Asdf' }); + expect(wrapper.find('button').text()).toBe('Asdf'); + }); + + it('renders all its subitems', () => { + createWrapper({ + title: 'Asdf', + items: [ + { title: 'Item1', href: '/item1' }, + { title: 'Item2', href: '/item2' }, + ], + }); + expect(findNavItems().length).toBe(2); + }); + + describe('collapse behavior', () => { + describe('when active', () => { + it('is expanded', () => { + createWrapper({ title: 'Asdf', is_active: true }); + expect(findCollapse().props('visible')).toBe(true); + }); + }); + + describe('when set to expanded', () => { + it('is expanded', () => { + createWrapper({ title: 'Asdf' }, { expanded: true }); + expect(findCollapse().props('visible')).toBe(true); + }); + }); + + describe('when not active nor set to expanded', () => { + it('is not expanded', () => { + createWrapper({ title: 'Asdf' }); + expect(findCollapse().props('visible')).toBe(false); + }); + }); + }); + + describe('`separated` prop', () => { + describe('by default (false)', () => { + it('does not render a separator', () => { + createWrapper({ title: 'Asdf' }); + expect(wrapper.find('hr').exists()).toBe(false); + }); + }); + + describe('when set to true', () => { + it('does render a separator', () => { + createWrapper({ title: 'Asdf' }, { separated: true }); + expect(wrapper.find('hr').exists()).toBe(true); + }); + }); + }); + + describe('`tag` prop', () => { + describe('by default', () => { + it('renders as <section> tag', () => { + createWrapper({ title: 'Asdf' }); + expect(wrapper.element.tagName).toBe('SECTION'); + }); + }); + + describe('when set to "li"', () => { + it('renders as <li> tag', () => { + createWrapper({ title: 'Asdf' }, { tag: 'li' }); + expect(wrapper.element.tagName).toBe('LI'); + }); + }); + }); +}); diff --git a/spec/frontend/super_sidebar/components/nav_item_spec.js b/spec/frontend/super_sidebar/components/nav_item_spec.js index ffbdaa326f9..1714a4c3a4e 100644 --- a/spec/frontend/super_sidebar/components/nav_item_spec.js +++ b/spec/frontend/super_sidebar/components/nav_item_spec.js @@ -61,16 +61,6 @@ describe('NavItem component', () => { }); describe('Data Tracking Attributes', () => { - it('adds no labels on sections', () => { - const id = 'my-id'; - createWrapper({ title: 'Foo', id, items: [{ title: 'Baz' }] }); - - expect(findLink().attributes('data-track-action')).toBeUndefined(); - expect(findLink().attributes('data-track-label')).toBeUndefined(); - expect(findLink().attributes('data-track-property')).toBeUndefined(); - expect(findLink().attributes('data-track-extra')).toBeUndefined(); - }); - it.each` id | panelType | eventLabel | eventProperty | eventExtra ${'abc'} | ${'xyz'} | ${'abc'} | ${'nav_panel_xyz'} | ${undefined} diff --git a/spec/frontend/super_sidebar/components/pinned_section_spec.js b/spec/frontend/super_sidebar/components/pinned_section_spec.js index 7ead6a40895..fd6e2b7343e 100644 --- a/spec/frontend/super_sidebar/components/pinned_section_spec.js +++ b/spec/frontend/super_sidebar/components/pinned_section_spec.js @@ -14,7 +14,7 @@ jest.mock('~/lib/utils/common_utils', () => ({ describe('PinnedSection component', () => { let wrapper; - const findToggle = () => wrapper.find('a'); + const findToggle = () => wrapper.find('button'); const createWrapper = () => { wrapper = mountExtended(PinnedSection, { diff --git a/spec/frontend/super_sidebar/super_sidebar_collapsed_state_manager_spec.js b/spec/frontend/super_sidebar/super_sidebar_collapsed_state_manager_spec.js index 1972e4805d0..aa1f0765411 100644 --- a/spec/frontend/super_sidebar/super_sidebar_collapsed_state_manager_spec.js +++ b/spec/frontend/super_sidebar/super_sidebar_collapsed_state_manager_spec.js @@ -108,7 +108,7 @@ describe('Super Sidebar Collapsed State Manager', () => { ${xl} | ${xl} | ${false} | ${false} ${sm} | ${sm} | ${true} | ${true} `( - 'when changing width from $initialWindowWidth to $updatedWindowWidth expect the page to be initialized to be done $timesInitalised times', + 'when changing width from $initialWindowWidth to $updatedWindowWidth expect page to have collapsed class before resize to be $hasClassBeforeResize and after resize to be $hasClassAfterResize', ({ initialWindowWidth, updatedWindowWidth, hasClassBeforeResize, hasClassAfterResize }) => { getCookie.mockReturnValue(undefined); window.innerWidth = initialWindowWidth; |