summaryrefslogtreecommitdiff
path: root/spec/frontend/right_sidebar_spec.js
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/right_sidebar_spec.js')
-rw-r--r--spec/frontend/right_sidebar_spec.js87
1 files changed, 87 insertions, 0 deletions
diff --git a/spec/frontend/right_sidebar_spec.js b/spec/frontend/right_sidebar_spec.js
new file mode 100644
index 00000000000..d80d80152a5
--- /dev/null
+++ b/spec/frontend/right_sidebar_spec.js
@@ -0,0 +1,87 @@
+import $ from 'jquery';
+import MockAdapter from 'axios-mock-adapter';
+import '~/commons/bootstrap';
+import axios from '~/lib/utils/axios_utils';
+import Sidebar from '~/right_sidebar';
+
+let $aside = null;
+let $toggle = null;
+let $icon = 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($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);
+};
+
+describe('RightSidebar', () => {
+ describe('fixture tests', () => {
+ const fixtureName = 'issues/open-issue.html';
+ preloadFixtures(fixtureName);
+ let mock;
+
+ beforeEach(() => {
+ 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');
+ });
+
+ afterEach(() => {
+ mock.restore();
+ });
+
+ 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 broadcast todo:toggle event when add todo clicked', done => {
+ const todos = getJSONFixture('todos/todos.json');
+ mock.onPost(/(.*)\/todos$/).reply(200, todos);
+
+ const todoToggleSpy = jest.fn();
+ $(document).on('todo:toggle', todoToggleSpy);
+
+ $('.issuable-sidebar-header .js-issuable-todo').click();
+
+ setImmediate(() => {
+ expect(todoToggleSpy.mock.calls.length).toEqual(1);
+
+ done();
+ });
+ });
+
+ it('should not hide collapsed icons', () => {
+ [].forEach.call(document.querySelectorAll('.sidebar-collapsed-icon'), el => {
+ expect(el.querySelector('.fa, svg').classList.contains('hidden')).toBeFalsy();
+ });
+ });
+ });
+});