debian-mirror-gitlab/spec/frontend/right_sidebar_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

78 lines
2.6 KiB
JavaScript
Raw Normal View History

2018-03-17 18:26:18 +05:30
import MockAdapter from 'axios-mock-adapter';
2021-03-11 19:13:27 +05:30
import $ from 'jquery';
2022-07-16 23:28:13 +05:30
import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
2018-03-17 18:26:18 +05:30
import axios from '~/lib/utils/axios_utils';
import Sidebar from '~/right_sidebar';
2016-09-13 17:45:13 +05:30
2018-12-13 13:39:08 +05:30
let $aside = null;
let $toggle = null;
2021-01-03 14:25:43 +05:30
let $toggleContainer = null;
let $expandIcon = null;
let $collapseIcon = null;
2018-12-13 13:39:08 +05:30
let $page = null;
let $labelsIcon = null;
2021-03-08 18:12:59 +05:30
const assertSidebarState = (state) => {
2018-12-13 13:39:08 +05:30
const shouldBeExpanded = state === 'expanded';
const shouldBeCollapsed = state === 'collapsed';
expect($aside.hasClass('right-sidebar-expanded')).toBe(shouldBeExpanded);
expect($page.hasClass('right-sidebar-expanded')).toBe(shouldBeExpanded);
2021-01-03 14:25:43 +05:30
expect($toggleContainer.data('is-expanded')).toBe(shouldBeExpanded);
expect($expandIcon.hasClass('hidden')).toBe(shouldBeExpanded);
2018-12-13 13:39:08 +05:30
expect($aside.hasClass('right-sidebar-collapsed')).toBe(shouldBeCollapsed);
expect($page.hasClass('right-sidebar-collapsed')).toBe(shouldBeCollapsed);
2021-01-03 14:25:43 +05:30
expect($collapseIcon.hasClass('hidden')).toBe(shouldBeCollapsed);
2018-12-13 13:39:08 +05:30
};
2020-06-23 00:09:42 +05:30
describe('RightSidebar', () => {
2018-12-13 13:39:08 +05:30
describe('fixture tests', () => {
2019-07-07 11:18:12 +05:30
const fixtureName = 'issues/open-issue.html';
2018-12-13 13:39:08 +05:30
let mock;
2020-06-23 00:09:42 +05:30
beforeEach(() => {
2022-07-16 23:28:13 +05:30
loadHTMLFixture(fixtureName);
2018-12-13 13:39:08 +05:30
mock = new MockAdapter(axios);
new Sidebar(); // eslint-disable-line no-new
$aside = $('.right-sidebar');
$page = $('.layout-page');
2021-01-03 14:25:43 +05:30
$toggleContainer = $('.js-sidebar-toggle-container');
$expandIcon = $aside.find('.js-sidebar-expand');
$collapseIcon = $aside.find('.js-sidebar-collapse');
2018-12-13 13:39:08 +05:30
$toggle = $aside.find('.js-sidebar-toggle');
$labelsIcon = $aside.find('.sidebar-collapsed-icon');
});
2016-09-13 17:45:13 +05:30
2018-12-13 13:39:08 +05:30
afterEach(() => {
mock.restore();
2022-07-16 23:28:13 +05:30
resetHTMLFixture();
2018-12-13 13:39:08 +05:30
});
2018-03-17 18:26:18 +05:30
2020-06-23 00:09:42 +05:30
it('should expand/collapse the sidebar when arrow is clicked', () => {
2018-12-13 13:39:08 +05:30
assertSidebarState('expanded');
$toggle.click();
assertSidebarState('collapsed');
$toggle.click();
assertSidebarState('expanded');
});
2016-09-13 17:45:13 +05:30
2020-06-23 00:09:42 +05:30
it('should float over the page and when sidebar icons clicked', () => {
2018-12-13 13:39:08 +05:30
$labelsIcon.click();
assertSidebarState('expanded');
});
2017-08-17 22:00:37 +05:30
2020-06-23 00:09:42 +05:30
it('should collapse when the icon arrow clicked while it is floating on page', () => {
2018-12-13 13:39:08 +05:30
$labelsIcon.click();
assertSidebarState('expanded');
$toggle.click();
assertSidebarState('collapsed');
});
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
it('should not hide collapsed icons', () => {
2021-03-08 18:12:59 +05:30
[].forEach.call(document.querySelectorAll('.sidebar-collapsed-icon'), (el) => {
2018-12-13 13:39:08 +05:30
expect(el.querySelector('.fa, svg').classList.contains('hidden')).toBeFalsy();
2018-03-17 18:26:18 +05:30
});
2017-08-17 22:00:37 +05:30
});
});
2018-12-13 13:39:08 +05:30
});