Only trigger loadCheck on open toggle, not close. Update specs and add right_sidebar_spec test for additions
This commit is contained in:
parent
68269d7a40
commit
ba76ddf281
4 changed files with 104 additions and 65 deletions
|
@ -67,13 +67,13 @@ const PARTICIPANTS_ROW_COUNT = 7;
|
|||
originalText = $(this).data("original-text");
|
||||
if (currentText === originalText) {
|
||||
$(this).text(lessText);
|
||||
|
||||
if (gl.lazyLoader) gl.lazyLoader.loadCheck();
|
||||
} else {
|
||||
$(this).text(originalText);
|
||||
}
|
||||
|
||||
$(".js-participants-hidden").toggle();
|
||||
|
||||
if (gl.lazyLoader) gl.lazyLoader.loadCheck();
|
||||
};
|
||||
|
||||
return IssuableContext;
|
||||
|
|
|
@ -29,29 +29,32 @@ import Cookies from 'js-cookie';
|
|||
$('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
|
||||
$('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
|
||||
|
||||
$document.on('click', '.js-sidebar-toggle', function(e, triggered) {
|
||||
var $allGutterToggleIcons, $this, $thisIcon;
|
||||
e.preventDefault();
|
||||
$this = $(this);
|
||||
$thisIcon = $this.find('i');
|
||||
$allGutterToggleIcons = $('.js-sidebar-toggle i');
|
||||
if ($thisIcon.hasClass('fa-angle-double-right')) {
|
||||
$allGutterToggleIcons.removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
|
||||
$('aside.right-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
|
||||
$('.page-with-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
|
||||
} else {
|
||||
$allGutterToggleIcons.removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
|
||||
$('aside.right-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
|
||||
$('.page-with-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
|
||||
}
|
||||
if (!triggered) {
|
||||
Cookies.set("collapsed_gutter", $('.right-sidebar').hasClass('right-sidebar-collapsed'));
|
||||
}
|
||||
if (gl.lazyLoader) gl.lazyLoader.loadCheck();
|
||||
});
|
||||
$document.on('click', '.js-sidebar-toggle', this.sidebarToggleClicked);
|
||||
return $(document).off('click', '.js-issuable-todo').on('click', '.js-issuable-todo', this.toggleTodo);
|
||||
};
|
||||
|
||||
Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
|
||||
var $allGutterToggleIcons, $this, $thisIcon;
|
||||
e.preventDefault();
|
||||
$this = $(this);
|
||||
$thisIcon = $this.find('i');
|
||||
$allGutterToggleIcons = $('.js-sidebar-toggle i');
|
||||
if ($thisIcon.hasClass('fa-angle-double-right')) {
|
||||
$allGutterToggleIcons.removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
|
||||
$('aside.right-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
|
||||
$('.page-with-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
|
||||
} else {
|
||||
$allGutterToggleIcons.removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
|
||||
$('aside.right-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
|
||||
$('.page-with-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
|
||||
|
||||
if (gl.lazyLoader) gl.lazyLoader.loadCheck();
|
||||
}
|
||||
if (!triggered) {
|
||||
Cookies.set("collapsed_gutter", $('.right-sidebar').hasClass('right-sidebar-collapsed'));
|
||||
}
|
||||
};
|
||||
|
||||
Sidebar.prototype.toggleTodo = function(e) {
|
||||
var $btnText, $this, $todoLoading, ajaxType, url;
|
||||
$this = $(e.currentTarget);
|
||||
|
|
|
@ -1,10 +1,16 @@
|
|||
/* global IssuableContext */
|
||||
import '~/issuable_context';
|
||||
import $ from 'jquery';
|
||||
|
||||
describe('IssuableContext', () => {
|
||||
describe('toggleHiddenParticipants', () => {
|
||||
const event = jasmine.createSpyObj('event', ['preventDefault']);
|
||||
|
||||
beforeEach(() => {
|
||||
spyOn($.fn, 'data').and.returnValue('data');
|
||||
spyOn($.fn, 'text').and.returnValue('data');
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
gl.lazyLoader = undefined;
|
||||
});
|
||||
|
|
|
@ -32,56 +32,86 @@ import '~/right_sidebar';
|
|||
};
|
||||
|
||||
describe('RightSidebar', function() {
|
||||
var fixtureName = 'issues/open-issue.html.raw';
|
||||
preloadFixtures(fixtureName);
|
||||
loadJSONFixtures('todos/todos.json');
|
||||
describe('fixture tests', () => {
|
||||
var fixtureName = 'issues/open-issue.html.raw';
|
||||
preloadFixtures(fixtureName);
|
||||
loadJSONFixtures('todos/todos.json');
|
||||
|
||||
beforeEach(function() {
|
||||
loadFixtures(fixtureName);
|
||||
this.sidebar = new Sidebar;
|
||||
$aside = $('.right-sidebar');
|
||||
$page = $('.page-with-sidebar');
|
||||
$icon = $aside.find('i');
|
||||
$toggle = $aside.find('.js-sidebar-toggle');
|
||||
return $labelsIcon = $aside.find('.sidebar-collapsed-icon');
|
||||
});
|
||||
it('should expand/collapse the sidebar when arrow is clicked', function() {
|
||||
assertSidebarState('expanded');
|
||||
$toggle.click();
|
||||
assertSidebarState('collapsed');
|
||||
$toggle.click();
|
||||
assertSidebarState('expanded');
|
||||
});
|
||||
it('should float over the page and when sidebar icons clicked', function() {
|
||||
$labelsIcon.click();
|
||||
return assertSidebarState('expanded');
|
||||
});
|
||||
it('should collapse when the icon arrow clicked while it is floating on page', function() {
|
||||
$labelsIcon.click();
|
||||
assertSidebarState('expanded');
|
||||
$toggle.click();
|
||||
return assertSidebarState('collapsed');
|
||||
});
|
||||
|
||||
it('should broadcast todo:toggle event when add todo clicked', function() {
|
||||
var todos = getJSONFixture('todos/todos.json');
|
||||
spyOn(jQuery, 'ajax').and.callFake(function() {
|
||||
var d = $.Deferred();
|
||||
var response = todos;
|
||||
d.resolve(response);
|
||||
return d.promise();
|
||||
beforeEach(function() {
|
||||
loadFixtures(fixtureName);
|
||||
this.sidebar = new Sidebar;
|
||||
$aside = $('.right-sidebar');
|
||||
$page = $('.page-with-sidebar');
|
||||
$icon = $aside.find('i');
|
||||
$toggle = $aside.find('.js-sidebar-toggle');
|
||||
return $labelsIcon = $aside.find('.sidebar-collapsed-icon');
|
||||
});
|
||||
it('should expand/collapse the sidebar when arrow is clicked', function() {
|
||||
assertSidebarState('expanded');
|
||||
$toggle.click();
|
||||
assertSidebarState('collapsed');
|
||||
$toggle.click();
|
||||
assertSidebarState('expanded');
|
||||
});
|
||||
it('should float over the page and when sidebar icons clicked', function() {
|
||||
$labelsIcon.click();
|
||||
return assertSidebarState('expanded');
|
||||
});
|
||||
it('should collapse when the icon arrow clicked while it is floating on page', function() {
|
||||
$labelsIcon.click();
|
||||
assertSidebarState('expanded');
|
||||
$toggle.click();
|
||||
return assertSidebarState('collapsed');
|
||||
});
|
||||
|
||||
var todoToggleSpy = spyOnEvent(document, 'todo:toggle');
|
||||
it('should broadcast todo:toggle event when add todo clicked', function() {
|
||||
var todos = getJSONFixture('todos/todos.json');
|
||||
spyOn(jQuery, 'ajax').and.callFake(function() {
|
||||
var d = $.Deferred();
|
||||
var response = todos;
|
||||
d.resolve(response);
|
||||
return d.promise();
|
||||
});
|
||||
|
||||
$('.issuable-sidebar-header .js-issuable-todo').click();
|
||||
var todoToggleSpy = spyOnEvent(document, 'todo:toggle');
|
||||
|
||||
expect(todoToggleSpy.calls.count()).toEqual(1);
|
||||
$('.issuable-sidebar-header .js-issuable-todo').click();
|
||||
|
||||
expect(todoToggleSpy.calls.count()).toEqual(1);
|
||||
});
|
||||
|
||||
it('should not hide collapsed icons', () => {
|
||||
[].forEach.call(document.querySelectorAll('.sidebar-collapsed-icon'), (el) => {
|
||||
expect(el.querySelector('.fa, svg').classList.contains('hidden')).toBeFalsy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should not hide collapsed icons', () => {
|
||||
[].forEach.call(document.querySelectorAll('.sidebar-collapsed-icon'), (el) => {
|
||||
expect(el.querySelector('.fa, svg').classList.contains('hidden')).toBeFalsy();
|
||||
describe('sidebarToggleClicked', () => {
|
||||
const event = jasmine.createSpyObj('event', ['preventDefault']);
|
||||
|
||||
beforeEach(() => {
|
||||
spyOn($.fn, 'hasClass').and.returnValue(false);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
gl.lazyLoader = undefined;
|
||||
});
|
||||
|
||||
it('calls loadCheck if lazyLoader is set', () => {
|
||||
gl.lazyLoader = jasmine.createSpyObj('lazyLoader', ['loadCheck']);
|
||||
|
||||
Sidebar.prototype.sidebarToggleClicked(event);
|
||||
|
||||
expect(gl.lazyLoader.loadCheck).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('does not throw if lazyLoader is not defined', () => {
|
||||
gl.lazyLoader = undefined;
|
||||
|
||||
const toggle = Sidebar.prototype.sidebarToggleClicked.bind(null, event);
|
||||
|
||||
expect(toggle).not.toThrow();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue