diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-18 11:18:50 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-18 11:18:50 +0000 |
commit | 8c7f4e9d5f36cff46365a7f8c4b9c21578c1e781 (patch) | |
tree | a77e7fe7a93de11213032ed4ab1f33a3db51b738 /spec/frontend/right_sidebar_spec.js | |
parent | 00b35af3db1abfe813a778f643dad221aad51fca (diff) | |
download | gitlab-ce-8c7f4e9d5f36cff46365a7f8c4b9c21578c1e781.tar.gz |
Add latest changes from gitlab-org/gitlab@13-1-stable-ee
Diffstat (limited to 'spec/frontend/right_sidebar_spec.js')
-rw-r--r-- | spec/frontend/right_sidebar_spec.js | 87 |
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(); + }); + }); + }); +}); |