blob: f51d51ee182fb3fa7bb8c659d07a3ec97ae017fe (
plain)
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
|
import MockAdapter from 'axios-mock-adapter';
import $ from 'jquery';
import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
import axios from '~/lib/utils/axios_utils';
import Sidebar from '~/right_sidebar';
let $aside = null;
let $toggle = null;
let $toggleContainer = null;
let $expandIcon = null;
let $collapseIcon = null;
let $page = null;
let $labelsIcon = null;
const assertSidebarState = (state) => {
const shouldBeExpanded = state === 'expanded';
const shouldBeCollapsed = state === 'collapsed';
expect($aside.hasClass('right-sidebar-expanded')).toBe(shouldBeExpanded);
expect($page.hasClass('right-sidebar-expanded')).toBe(shouldBeExpanded);
expect($toggleContainer.data('is-expanded')).toBe(shouldBeExpanded);
expect($expandIcon.hasClass('hidden')).toBe(shouldBeExpanded);
expect($aside.hasClass('right-sidebar-collapsed')).toBe(shouldBeCollapsed);
expect($page.hasClass('right-sidebar-collapsed')).toBe(shouldBeCollapsed);
expect($collapseIcon.hasClass('hidden')).toBe(shouldBeCollapsed);
};
describe('RightSidebar', () => {
describe('fixture tests', () => {
const fixtureName = 'issues/open-issue.html';
let mock;
beforeEach(() => {
loadHTMLFixture(fixtureName);
mock = new MockAdapter(axios);
new Sidebar(); // eslint-disable-line no-new
$aside = $('.right-sidebar');
$page = $('.layout-page');
$toggleContainer = $('.js-sidebar-toggle-container');
$expandIcon = $aside.find('.js-sidebar-expand');
$collapseIcon = $aside.find('.js-sidebar-collapse');
$toggle = $aside.find('.js-sidebar-toggle');
$labelsIcon = $aside.find('.sidebar-collapsed-icon');
});
afterEach(() => {
mock.restore();
resetHTMLFixture();
});
it('should expand/collapse the sidebar when arrow is clicked', () => {
assertSidebarState('expanded');
$toggle.click();
assertSidebarState('collapsed');
$toggle.click();
assertSidebarState('expanded');
});
it('should float over the page and when sidebar icons clicked', () => {
$labelsIcon.click();
assertSidebarState('expanded');
});
it('should collapse when the icon arrow clicked while it is floating on page', () => {
$labelsIcon.click();
assertSidebarState('expanded');
$toggle.click();
assertSidebarState('collapsed');
});
it('should not hide collapsed icons', () => {
$toggle.click();
assertSidebarState('collapsed');
[].forEach.call(document.querySelectorAll('.sidebar-collapsed-icon'), (el) => {
expect(el.querySelector('.fa, svg').classList.contains('hidden')).toBe(false);
});
});
});
});
|
