1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
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 { sidebarState } from '~/super_sidebar/constants';
import {
SIDEBAR_COLLAPSED_CLASS,
SIDEBAR_COLLAPSED_COOKIE,
SIDEBAR_COLLAPSED_COOKIE_EXPIRATION,
toggleSuperSidebarCollapsed,
initSuperSidebarCollapsedState,
findPage,
bindSuperSidebarCollapsedEvents,
} 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(`
<div class="page-with-super-sidebar">
<aside class="super-sidebar"></aside>
</div>
`);
});
afterEach(() => {
resetHTMLFixture();
});
describe('toggleSuperSidebarCollapsed', () => {
it.each`
collapsed | saveCookie | windowWidth | hasClass | isPeekable
${true} | ${true} | ${xl} | ${true} | ${true}
${true} | ${false} | ${xl} | ${true} | ${true}
${true} | ${true} | ${sm} | ${true} | ${true}
${true} | ${false} | ${sm} | ${true} | ${true}
${false} | ${true} | ${xl} | ${false} | ${false}
${false} | ${false} | ${xl} | ${false} | ${false}
${false} | ${true} | ${sm} | ${false} | ${false}
${false} | ${false} | ${sm} | ${false} | ${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, isPeekable }) => {
jest.spyOn(bp, 'windowWidth').mockReturnValue(windowWidth);
toggleSuperSidebarCollapsed(collapsed, saveCookie);
pageHasCollapsedClass(hasClass);
expect(sidebarState.isCollapsed).toBe(collapsed);
expect(sidebarState.isPeekable).toBe(isPeekable);
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();
},
);
it('does not collapse sidebar when forceDesktopExpandedSidebar is true and windowWidth is xl', () => {
jest.spyOn(bp, 'windowWidth').mockReturnValue(xl);
initSuperSidebarCollapsedState(true);
expect(findPage().classList).not.toContain(SIDEBAR_COLLAPSED_CLASS);
});
});
describe('bindSuperSidebarCollapsedEvents', () => {
describe('handles width change', () => {
let removeEventListener;
afterEach(() => {
removeEventListener();
});
it.each`
initialWindowWidth | updatedWindowWidth | hasClassBeforeResize | hasClassAfterResize
${xl} | ${sm} | ${false} | ${true}
${sm} | ${xl} | ${true} | ${false}
${xl} | ${xl} | ${false} | ${false}
${sm} | ${sm} | ${true} | ${true}
`(
'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;
initSuperSidebarCollapsedState();
pageHasCollapsedClass(hasClassBeforeResize);
removeEventListener = bindSuperSidebarCollapsedEvents();
window.innerWidth = updatedWindowWidth;
window.dispatchEvent(new Event('resize'));
pageHasCollapsedClass(hasClassAfterResize);
},
);
});
});
});
|
