Only trigger loadCheck on open toggle, not close. Update specs and add...

Only trigger loadCheck on open toggle, not close. Update specs and add right_sidebar_spec test for additions

app/assets/javascripts/issuable_context.js

@@ -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;

app/assets/javascripts/right_sidebar.js

@@ -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);

spec/javascripts/issuable_context_spec.js

 /* 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;
     });

spec/javascripts/right_sidebar_spec.js

@@ -32,56 +32,86 @@ import '~/right_sidebar';
   };
   describe('RightSidebar', function() {
-    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');
+    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();
+        });
+
+        var todoToggleSpy = spyOnEvent(document, 'todo:toggle');
+
+        $('.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 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();
+    describe('sidebarToggleClicked', () => {
+      const event = jasmine.createSpyObj('event', ['preventDefault']);
+
+      beforeEach(() => {
+        spyOn($.fn, 'hasClass').and.returnValue(false);
+      });
+
+      afterEach(() => {
+        gl.lazyLoader = undefined;
       });
-      var todoToggleSpy = spyOnEvent(document, 'todo:toggle');
-      $('.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('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();
       });
     });
   });