diff options
Diffstat (limited to 'spec/frontend/super_sidebar')
-rw-r--r-- | spec/frontend/super_sidebar/components/super_sidebar_spec.js | 21 | ||||
-rw-r--r-- | spec/frontend/super_sidebar/super_sidebar_collapsed_state_manager_spec.js | 132 |
2 files changed, 152 insertions, 1 deletions
diff --git a/spec/frontend/super_sidebar/components/super_sidebar_spec.js b/spec/frontend/super_sidebar/components/super_sidebar_spec.js index 57c84bc87a6..32921da23aa 100644 --- a/spec/frontend/super_sidebar/components/super_sidebar_spec.js +++ b/spec/frontend/super_sidebar/components/super_sidebar_spec.js @@ -3,11 +3,17 @@ import SuperSidebar from '~/super_sidebar/components/super_sidebar.vue'; import HelpCenter from '~/super_sidebar/components/help_center.vue'; import UserBar from '~/super_sidebar/components/user_bar.vue'; import SidebarPortalTarget from '~/super_sidebar/components/sidebar_portal_target.vue'; +import { isCollapsed } from '~/super_sidebar/super_sidebar_collapsed_state_manager'; import { sidebarData } from '../mock_data'; +jest.mock('~/super_sidebar/super_sidebar_collapsed_state_manager', () => ({ + isCollapsed: jest.fn(), +})); + describe('SuperSidebar component', () => { let wrapper; + const findSidebar = () => wrapper.find('.super-sidebar'); const findUserBar = () => wrapper.findComponent(UserBar); const findHelpCenter = () => wrapper.findComponent(HelpCenter); const findSidebarPortalTarget = () => wrapper.findComponent(SidebarPortalTarget); @@ -22,19 +28,32 @@ describe('SuperSidebar component', () => { }; describe('default', () => { - beforeEach(() => { + it('add aria-hidden and inert attributes when collapsed', () => { + isCollapsed.mockReturnValue(true); + createWrapper(); + expect(findSidebar().attributes('aria-hidden')).toBe('true'); + expect(findSidebar().attributes('inert')).toBe('inert'); + }); + + it('does not add aria-hidden and inert attributes when expanded', () => { + isCollapsed.mockReturnValue(false); createWrapper(); + expect(findSidebar().attributes('aria-hidden')).toBe('false'); + expect(findSidebar().attributes('inert')).toBe(undefined); }); it('renders UserBar with sidebarData', () => { + createWrapper(); expect(findUserBar().props('sidebarData')).toBe(sidebarData); }); it('renders HelpCenter with sidebarData', () => { + createWrapper(); expect(findHelpCenter().props('sidebarData')).toBe(sidebarData); }); it('renders SidebarPortalTarget', () => { + createWrapper(); expect(findSidebarPortalTarget().exists()).toBe(true); }); }); 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 new file mode 100644 index 00000000000..27fa451cf7b --- /dev/null +++ b/spec/frontend/super_sidebar/super_sidebar_collapsed_state_manager_spec.js @@ -0,0 +1,132 @@ +import { GlBreakpointInstance as bp, breakpoints } from '@gitlab/ui/dist/utils'; +import { getCookie, setCookie } from '~/lib/utils/common_utils'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; +import { + SIDEBAR_COLLAPSED_CLASS, + SIDEBAR_COLLAPSED_COOKIE, + SIDEBAR_COLLAPSED_COOKIE_EXPIRATION, + toggleSuperSidebarCollapsed, + initSuperSidebarCollapsedState, + bindSuperSidebarCollapsedEvents, + findPage, + findSidebar, + findToggles, +} from '~/super_sidebar/super_sidebar_collapsed_state_manager'; + +const { xl, sm } = breakpoints; + +jest.mock('~/lib/utils/common_utils', () => ({ + getCookie: jest.fn(), + setCookie: jest.fn(), +})); + +const pageHasCollapsedClass = (hasClass) => { + if (hasClass) { + expect(findPage().classList).toContain(SIDEBAR_COLLAPSED_CLASS); + } else { + expect(findPage().classList).not.toContain(SIDEBAR_COLLAPSED_CLASS); + } +}; + +describe('Super Sidebar Collapsed State Manager', () => { + beforeEach(() => { + setHTMLFixture(` + <button class="js-super-sidebar-toggle"></button> + <div class="page-with-super-sidebar"></div> + <aside class="super-sidebar"></aside> + `); + }); + + afterEach(() => { + resetHTMLFixture(); + }); + + describe('toggleSuperSidebarCollapsed', () => { + it.each` + collapsed | saveCookie | windowWidth | hasClass + ${true} | ${true} | ${xl} | ${true} + ${true} | ${false} | ${xl} | ${true} + ${true} | ${true} | ${sm} | ${true} + ${true} | ${false} | ${sm} | ${true} + ${false} | ${true} | ${xl} | ${false} + ${false} | ${false} | ${xl} | ${false} + ${false} | ${true} | ${sm} | ${false} + ${false} | ${false} | ${sm} | ${false} + `( + 'when collapsed is $collapsed, saveCookie is $saveCookie, and windowWidth is $windowWidth then page class contains `page-with-super-sidebar-collapsed` is $hasClass', + ({ collapsed, saveCookie, windowWidth, hasClass }) => { + jest.spyOn(bp, 'windowWidth').mockReturnValue(windowWidth); + + toggleSuperSidebarCollapsed(collapsed, saveCookie); + + pageHasCollapsedClass(hasClass); + expect(findSidebar().ariaHidden).toBe(collapsed); + expect(findSidebar().inert).toBe(collapsed); + + if (saveCookie && windowWidth >= xl) { + expect(setCookie).toHaveBeenCalledWith(SIDEBAR_COLLAPSED_COOKIE, collapsed, { + expires: SIDEBAR_COLLAPSED_COOKIE_EXPIRATION, + }); + } else { + expect(setCookie).not.toHaveBeenCalled(); + } + }, + ); + }); + + describe('initSuperSidebarCollapsedState', () => { + it.each` + windowWidth | cookie | hasClass + ${xl} | ${undefined} | ${false} + ${sm} | ${undefined} | ${true} + ${xl} | ${'true'} | ${true} + ${sm} | ${'true'} | ${true} + `( + 'sets page class to `page-with-super-sidebar-collapsed` when windowWidth is $windowWidth and cookie value is $cookie', + ({ windowWidth, cookie, hasClass }) => { + jest.spyOn(bp, 'windowWidth').mockReturnValue(windowWidth); + getCookie.mockReturnValue(cookie); + + initSuperSidebarCollapsedState(); + + pageHasCollapsedClass(hasClass); + expect(setCookie).not.toHaveBeenCalled(); + }, + ); + }); + + describe('bindSuperSidebarCollapsedEvents', () => { + it.each` + windowWidth | cookie | hasClass + ${xl} | ${undefined} | ${true} + ${sm} | ${undefined} | ${true} + ${xl} | ${'true'} | ${false} + ${sm} | ${'true'} | ${false} + `( + 'toggle click sets page class to `page-with-super-sidebar-collapsed` when windowWidth is $windowWidth and cookie value is $cookie', + ({ windowWidth, cookie, hasClass }) => { + setHTMLFixture(` + <button class="js-super-sidebar-toggle"></button> + <div class="page-with-super-sidebar ${cookie ? SIDEBAR_COLLAPSED_CLASS : ''}"></div> + <aside class="super-sidebar"></aside> + `); + jest.spyOn(bp, 'windowWidth').mockReturnValue(windowWidth); + getCookie.mockReturnValue(cookie); + + bindSuperSidebarCollapsedEvents(); + + findToggles()[0].click(); + + pageHasCollapsedClass(hasClass); + + if (windowWidth >= xl) { + expect(setCookie).toHaveBeenCalledWith(SIDEBAR_COLLAPSED_COOKIE, !cookie, { + expires: SIDEBAR_COLLAPSED_COOKIE_EXPIRATION, + }); + } else { + expect(setCookie).not.toHaveBeenCalled(); + } + }, + ); + }); +}); |