2018-03-09 20:18:59 +00:00
|
|
|
import $ from 'jquery';
|
2018-02-02 11:16:57 +00:00
|
|
|
import MockAdapter from 'axios-mock-adapter';
|
2017-03-13 21:48:32 +00:00
|
|
|
import '~/commons/bootstrap';
|
2018-02-02 11:16:57 +00:00
|
|
|
import axios from '~/lib/utils/axios_utils';
|
2017-12-15 12:57:08 +00:00
|
|
|
import Sidebar from '~/right_sidebar';
|
2016-08-08 21:19:46 +00:00
|
|
|
|
2018-10-17 07:13:26 +00:00
|
|
|
let $aside = null;
|
|
|
|
let $toggle = null;
|
|
|
|
let $icon = null;
|
|
|
|
let $page = null;
|
|
|
|
let $labelsIcon = null;
|
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
const assertSidebarState = state => {
|
2018-10-17 07:13:26 +00:00
|
|
|
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($icon.hasClass('fa-angle-double-right')).toBe(shouldBeExpanded);
|
|
|
|
expect($aside.hasClass('right-sidebar-collapsed')).toBe(shouldBeCollapsed);
|
|
|
|
expect($page.hasClass('right-sidebar-collapsed')).toBe(shouldBeCollapsed);
|
|
|
|
expect($icon.hasClass('fa-angle-double-left')).toBe(shouldBeCollapsed);
|
|
|
|
};
|
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
describe('RightSidebar', () => {
|
2018-10-17 07:13:26 +00:00
|
|
|
describe('fixture tests', () => {
|
2019-03-26 16:03:28 +00:00
|
|
|
const fixtureName = 'issues/open-issue.html';
|
2018-10-17 07:13:26 +00:00
|
|
|
preloadFixtures(fixtureName);
|
|
|
|
let mock;
|
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
beforeEach(() => {
|
2018-10-17 07:13:26 +00:00
|
|
|
loadFixtures(fixtureName);
|
|
|
|
mock = new MockAdapter(axios);
|
|
|
|
new Sidebar(); // eslint-disable-line no-new
|
|
|
|
$aside = $('.right-sidebar');
|
|
|
|
$page = $('.layout-page');
|
|
|
|
$icon = $aside.find('i');
|
|
|
|
$toggle = $aside.find('.js-sidebar-toggle');
|
|
|
|
$labelsIcon = $aside.find('.sidebar-collapsed-icon');
|
|
|
|
});
|
2018-02-02 12:36:51 +00:00
|
|
|
|
2018-10-17 07:13:26 +00:00
|
|
|
afterEach(() => {
|
|
|
|
mock.restore();
|
|
|
|
});
|
2018-02-02 12:36:51 +00:00
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
it('should expand/collapse the sidebar when arrow is clicked', () => {
|
2018-10-17 07:13:26 +00:00
|
|
|
assertSidebarState('expanded');
|
|
|
|
$toggle.click();
|
|
|
|
assertSidebarState('collapsed');
|
|
|
|
$toggle.click();
|
|
|
|
assertSidebarState('expanded');
|
|
|
|
});
|
2018-10-09 17:01:49 +00:00
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
it('should float over the page and when sidebar icons clicked', () => {
|
2018-10-17 07:13:26 +00:00
|
|
|
$labelsIcon.click();
|
|
|
|
assertSidebarState('expanded');
|
|
|
|
});
|
2018-10-09 17:01:49 +00:00
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
it('should collapse when the icon arrow clicked while it is floating on page', () => {
|
2018-10-17 07:13:26 +00:00
|
|
|
$labelsIcon.click();
|
|
|
|
assertSidebarState('expanded');
|
|
|
|
$toggle.click();
|
|
|
|
assertSidebarState('collapsed');
|
|
|
|
});
|
2017-09-28 12:27:52 +00:00
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
it('should broadcast todo:toggle event when add todo clicked', done => {
|
2018-10-17 07:13:26 +00:00
|
|
|
const todos = getJSONFixture('todos/todos.json');
|
|
|
|
mock.onPost(/(.*)\/todos$/).reply(200, todos);
|
2017-09-28 12:27:52 +00:00
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
const todoToggleSpy = jest.fn();
|
|
|
|
$(document).on('todo:toggle', todoToggleSpy);
|
2017-09-28 12:27:52 +00:00
|
|
|
|
2018-10-17 07:13:26 +00:00
|
|
|
$('.issuable-sidebar-header .js-issuable-todo').click();
|
2017-09-28 12:27:52 +00:00
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
setImmediate(() => {
|
|
|
|
expect(todoToggleSpy.mock.calls.length).toEqual(1);
|
2018-02-02 11:16:57 +00:00
|
|
|
|
2018-10-17 07:13:26 +00:00
|
|
|
done();
|
2017-09-28 12:27:52 +00:00
|
|
|
});
|
2018-10-17 07:13:26 +00:00
|
|
|
});
|
2017-09-28 12:27:52 +00:00
|
|
|
|
2018-10-17 07:13:26 +00:00
|
|
|
it('should not hide collapsed icons', () => {
|
|
|
|
[].forEach.call(document.querySelectorAll('.sidebar-collapsed-icon'), el => {
|
|
|
|
expect(el.querySelector('.fa, svg').classList.contains('hidden')).toBeFalsy();
|
2017-09-28 12:27:52 +00:00
|
|
|
});
|
2016-07-24 20:45:11 +00:00
|
|
|
});
|
|
|
|
});
|
2018-10-17 07:13:26 +00:00
|
|
|
});
|