Refactor right sidebarrefactor-right-sidebar

7 files changed, 315 insertions, 350 deletions

diff --git a/app/assets/javascripts/init_issuable_sidebar.js b/app/assets/javascripts/init_issuable_sidebar.js
index 32a1a269f9a..b145ccb7b58 100644
--- a/app/assets/javascripts/init_issuable_sidebar.js
+++ b/app/assets/javascripts/init_issuable_sidebar.js
@@ -5,6 +5,7 @@
 /* global Sidebar */
 
 import DueDateSelectors from './due_date_select';
+import RightSidebar from './right_sidebar/index';
 
 export default () => {
   const sidebarOptions = JSON.parse(document.querySelector('.js-sidebar-options').innerHTML);
@@ -16,5 +17,5 @@ export default () => {
   new IssuableContext(sidebarOptions.currentUser);
   gl.Subscription.bindAll('.subscription');
   new DueDateSelectors();
-  window.sidebar = new Sidebar();
+  new RightSidebar();
 };
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 4cf07e99161..db4cb5ebea0 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -98,7 +98,6 @@ import './projects_list';
 import './syntax_highlight';
 import './render_math';
 import './render_gfm';
-import './right_sidebar';
 import './search';
 import './search_autocomplete';
 import './smart_interval';
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
deleted file mode 100644
index a41548bd694..00000000000
--- a/app/assets/javascripts/right_sidebar.js
+++ /dev/null
@@ -1,228 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-unused-vars, consistent-return, one-var, one-var-declaration-per-line, quotes, prefer-template, object-shorthand, comma-dangle, no-else-return, no-param-reassign, max-len */
-
-import _ from 'underscore';
-import Cookies from 'js-cookie';
-
-(function() {
-  this.Sidebar = (function() {
-    function Sidebar(currentUser) {
-      this.toggleTodo = this.toggleTodo.bind(this);
-      this.sidebar = $('aside');
-
-      this.removeListeners();
-      this.addEventListeners();
-    }
-
-    Sidebar.prototype.removeListeners = function () {
-      this.sidebar.off('click', '.sidebar-collapsed-icon');
-      $('.dropdown').off('hidden.gl.dropdown');
-      $('.dropdown').off('loading.gl.dropdown');
-      $('.dropdown').off('loaded.gl.dropdown');
-      $(document).off('click', '.js-sidebar-toggle');
-    };
-
-    Sidebar.prototype.addEventListeners = function() {
-      const $document = $(document);
-
-      this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
-      $('.dropdown').on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
-      $('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
-      $('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
-
-      $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);
-      ajaxType = $this.attr('data-delete-path') ? 'DELETE' : 'POST';
-      if ($this.attr('data-delete-path')) {
-        url = "" + ($this.attr('data-delete-path'));
-      } else {
-        url = "" + ($this.data('url'));
-      }
-
-      $this.tooltip('hide');
-
-      return $.ajax({
-        url: url,
-        type: ajaxType,
-        dataType: 'json',
-        data: {
-          issuable_id: $this.data('issuable-id'),
-          issuable_type: $this.data('issuable-type')
-        },
-        beforeSend: (function(_this) {
-          return function() {
-            $('.js-issuable-todo').disable()
-              .addClass('is-loading');
-          };
-        })(this)
-      }).done((function(_this) {
-        return function(data) {
-          return _this.todoUpdateDone(data);
-        };
-      })(this));
-    };
-
-    Sidebar.prototype.todoUpdateDone = function(data) {
-      const deletePath = data.delete_path ? data.delete_path : null;
-      const attrPrefix = deletePath ? 'mark' : 'todo';
-      const $todoBtns = $('.js-issuable-todo');
-
-      $(document).trigger('todo:toggle', data.count);
-
-      $todoBtns.each((i, el) => {
-        const $el = $(el);
-        const $elText = $el.find('.js-issuable-todo-inner');
-
-        $el.removeClass('is-loading')
-          .enable()
-          .attr('aria-label', $el.data(`${attrPrefix}-text`))
-          .attr('data-delete-path', deletePath)
-          .attr('title', $el.data(`${attrPrefix}-text`));
-
-        if ($el.hasClass('has-tooltip')) {
-          $el.tooltip('fixTitle');
-        }
-
-        if ($el.data(`${attrPrefix}-icon`)) {
-          $elText.html($el.data(`${attrPrefix}-icon`));
-        } else {
-          $elText.text($el.data(`${attrPrefix}-text`));
-        }
-      });
-    };
-
-    Sidebar.prototype.sidebarDropdownLoading = function(e) {
-      var $loading, $sidebarCollapsedIcon, i, img;
-      $sidebarCollapsedIcon = $(this).closest('.block').find('.sidebar-collapsed-icon');
-      img = $sidebarCollapsedIcon.find('img');
-      i = $sidebarCollapsedIcon.find('i');
-      $loading = $('<i class="fa fa-spinner fa-spin"></i>');
-      if (img.length) {
-        img.before($loading);
-        return img.hide();
-      } else if (i.length) {
-        i.before($loading);
-        return i.hide();
-      }
-    };
-
-    Sidebar.prototype.sidebarDropdownLoaded = function(e) {
-      var $sidebarCollapsedIcon, i, img;
-      $sidebarCollapsedIcon = $(this).closest('.block').find('.sidebar-collapsed-icon');
-      img = $sidebarCollapsedIcon.find('img');
-      $sidebarCollapsedIcon.find('i.fa-spin').remove();
-      i = $sidebarCollapsedIcon.find('i');
-      if (img.length) {
-        return img.show();
-      } else {
-        return i.show();
-      }
-    };
-
-    Sidebar.prototype.sidebarCollapseClicked = function(e) {
-      var $block, sidebar;
-      if ($(e.currentTarget).hasClass('dont-change-state')) {
-        return;
-      }
-      sidebar = e.data;
-      e.preventDefault();
-      $block = $(this).closest('.block');
-      return sidebar.openDropdown($block);
-    };
-
-    Sidebar.prototype.openDropdown = function(blockOrName) {
-      var $block;
-      $block = _.isString(blockOrName) ? this.getBlock(blockOrName) : blockOrName;
-      if (!this.isOpen()) {
-        this.setCollapseAfterUpdate($block);
-        this.toggleSidebar('open');
-      }
-
-      // Wait for the sidebar to trigger('click') open
-      // so it doesn't cause our dropdown to close preemptively
-      setTimeout(() => {
-        $block.find('.js-sidebar-dropdown-toggle').trigger('click');
-      });
-    };
-
-    Sidebar.prototype.setCollapseAfterUpdate = function($block) {
-      $block.addClass('collapse-after-update');
-      return $('.page-with-sidebar').addClass('with-overlay');
-    };
-
-    Sidebar.prototype.onSidebarDropdownHidden = function(e) {
-      var $block, sidebar;
-      sidebar = e.data;
-      e.preventDefault();
-      $block = $(this).closest('.block');
-      return sidebar.sidebarDropdownHidden($block);
-    };
-
-    Sidebar.prototype.sidebarDropdownHidden = function($block) {
-      if ($block.hasClass('collapse-after-update')) {
-        $block.removeClass('collapse-after-update');
-        $('.page-with-sidebar').removeClass('with-overlay');
-        return this.toggleSidebar('hide');
-      }
-    };
-
-    Sidebar.prototype.triggerOpenSidebar = function() {
-      return this.sidebar.find('.js-sidebar-toggle').trigger('click');
-    };
-
-    Sidebar.prototype.toggleSidebar = function(action) {
-      if (action == null) {
-        action = 'toggle';
-      }
-      if (action === 'toggle') {
-        this.triggerOpenSidebar();
-      }
-      if (action === 'open') {
-        if (!this.isOpen()) {
-          this.triggerOpenSidebar();
-        }
-      }
-      if (action === 'hide') {
-        if (this.isOpen()) {
-          return this.triggerOpenSidebar();
-        }
-      }
-    };
-
-    Sidebar.prototype.isOpen = function() {
-      return this.sidebar.is('.right-sidebar-expanded');
-    };
-
-    Sidebar.prototype.getBlock = function(name) {
-      return this.sidebar.find(".block." + name);
-    };
-
-    return Sidebar;
-  })();
-}).call(window);
diff --git a/app/assets/javascripts/right_sidebar/index.js b/app/assets/javascripts/right_sidebar/index.js
new file mode 100644
index 00000000000..6275c2eace5
--- /dev/null
+++ b/app/assets/javascripts/right_sidebar/index.js
@@ -0,0 +1,202 @@
+import _ from 'underscore';
+import Cookies from 'js-cookie';
+
+export default class RightSidebar {
+  constructor() {
+    this.sidebar = $('aside');
+
+    this.removeListeners();
+    this.addEventListeners();
+  }
+
+  removeListeners() {
+    this.sidebar.off('click', '.sidebar-collapsed-icon');
+    $('.dropdown').off('hidden.gl.dropdown');
+    $('.dropdown').off('loading.gl.dropdown');
+    $('.dropdown').off('loaded.gl.dropdown');
+    $(document).off('click', '.js-sidebar-toggle');
+  }
+
+  addEventListeners() {
+    const $document = $(document);
+
+    this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
+    $('.dropdown').on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
+    $('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
+    $('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
+
+    $document.on('click', '.js-sidebar-toggle', this.sidebarToggleClicked);
+    $(document).off('click', '.js-issuable-todo').on('click', '.js-issuable-todo', RightSidebar.toggleTodo);
+  }
+
+  sidebarToggleClicked(e, triggered) {
+    e.preventDefault();
+
+    const $allGutterToggleIcons = $('.js-sidebar-toggle i');
+    const $this = $(this);
+    const $thisIcon = $this.find('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'));
+    }
+  }
+
+  static toggleTodo(e) {
+    const $currentTarget = $(e.currentTarget);
+    const ajaxType = $currentTarget.attr('data-delete-path') ? 'DELETE' : 'POST';
+    let url;
+
+    if ($currentTarget.attr('data-delete-path')) {
+      url = $currentTarget.attr('data-delete-path');
+    } else {
+      url = $currentTarget.data('url');
+    }
+
+    $currentTarget.tooltip('hide');
+
+    $.ajax({
+      url,
+      type: ajaxType,
+      dataType: 'json',
+      data: {
+        issuable_id: $currentTarget.data('issuable-id'),
+        issuable_type: $currentTarget.data('issuable-type'),
+      },
+      beforeSend: () => {
+        $('.js-issuable-todo').disable()
+          .addClass('is-loading');
+      },
+    }).done(data => RightSidebar.todoUpdateDone(data));
+  }
+
+  static todoUpdateDone(data) {
+    const deletePath = data.delete_path ? data.delete_path : null;
+    const attrPrefix = deletePath ? 'mark' : 'todo';
+    const $todoBtns = $('.js-issuable-todo');
+
+    $(document).trigger('todo:toggle', data.count);
+
+    $todoBtns.each((i, el) => {
+      const $el = $(el);
+      const $elText = $el.find('.js-issuable-todo-inner');
+
+      $el.removeClass('is-loading')
+        .enable()
+        .attr('aria-label', $el.data(`${attrPrefix}-text`))
+        .attr('data-delete-path', deletePath)
+        .attr('title', $el.data(`${attrPrefix}-text`));
+
+      if ($el.hasClass('has-tooltip')) {
+        $el.tooltip('fixTitle');
+      }
+
+      if ($el.data(`${attrPrefix}-icon`)) {
+        $elText.html($el.data(`${attrPrefix}-icon`));
+      } else {
+        $elText.text($el.data(`${attrPrefix}-text`));
+      }
+    });
+  }
+
+  sidebarDropdownLoading() {
+    const $sidebarCollapsedIcon = $(this).closest('.block').find('.sidebar-collapsed-icon');
+    const img = $sidebarCollapsedIcon.find('img');
+    const i = $sidebarCollapsedIcon.find('i');
+    const $loading = $('<i class="fa fa-spinner fa-spin"></i>');
+
+    if (img.length) {
+      img.before($loading);
+      img.hide();
+    } else if (i.length) {
+      i.before($loading);
+      i.hide();
+    }
+  }
+
+  sidebarCollapseClicked(e) {
+    if ($(e.currentTarget).hasClass('dont-change-state')) {
+      return;
+    }
+
+    e.preventDefault();
+
+    const sidebar = e.data;
+    const $block = $(this).closest('.block');
+    sidebar.openDropdown($block);
+  }
+
+  openDropdown(blockOrName) {
+    const $block = _.isString(blockOrName) ? this.getBlock(blockOrName) : blockOrName;
+    if (!this.isOpen()) {
+      RightSidebar.setCollapseAfterUpdate($block);
+      this.toggleSidebar('open');
+    }
+
+    // Wait for the sidebar to trigger('click') open
+    // so it doesn't cause our dropdown to close preemptively
+    setTimeout(() => {
+      $block.find('.js-sidebar-dropdown-toggle').trigger('click');
+    });
+  }
+
+  static setCollapseAfterUpdate($block) {
+    $block.addClass('collapse-after-update');
+    $('.page-with-sidebar').addClass('with-overlay');
+  }
+
+  onSidebarDropdownHidden(e) {
+    e.preventDefault();
+    const sidebar = e.data;
+    const $block = $(this).closest('.block');
+    sidebar.sidebarDropdownHidden($block);
+  }
+
+  sidebarDropdownHidden($block) {
+    if ($block.hasClass('collapse-after-update')) {
+      $block.removeClass('collapse-after-update');
+      $('.page-with-sidebar').removeClass('with-overlay');
+      this.toggleSidebar('hide');
+    }
+  }
+
+  triggerOpenSidebar() {
+    this.sidebar.find('.js-sidebar-toggle').trigger('click');
+  }
+
+  toggleSidebar(action = 'toggle') {
+    if (action === 'toggle') {
+      this.triggerOpenSidebar();
+    }
+
+    if (action === 'open') {
+      if (!this.isOpen()) {
+        this.triggerOpenSidebar();
+      }
+    }
+
+    if (action === 'hide') {
+      if (this.isOpen()) {
+        this.triggerOpenSidebar();
+      }
+    }
+  }
+
+  isOpen() {
+    return this.sidebar.is('.right-sidebar-expanded');
+  }
+
+  getBlock(name) {
+    return this.sidebar.find(`.block.${name}`);
+  }
+}
diff --git a/spec/javascripts/collapsed_sidebar_todo_spec.js b/spec/javascripts/collapsed_sidebar_todo_spec.js
index 974815fe939..7060418cc1d 100644
--- a/spec/javascripts/collapsed_sidebar_todo_spec.js
+++ b/spec/javascripts/collapsed_sidebar_todo_spec.js
@@ -1,7 +1,7 @@
 /* global Sidebar */
 /* eslint-disable no-new */
 import _ from 'underscore';
-import '~/right_sidebar';
+import RightSidebar from '~/right_sidebar/index';
 
 describe('Issuable right sidebar collapsed todo toggle', () => {
   const fixtureName = 'issues/open-issue.html.raw';
@@ -12,7 +12,7 @@ describe('Issuable right sidebar collapsed todo toggle', () => {
 
   beforeEach(() => {
     const todoData = getJSONFixture(jsonFixtureName);
-    new Sidebar();
+    new RightSidebar();
     loadFixtures(fixtureName);
 
     document.querySelector('.js-right-sidebar')
diff --git a/spec/javascripts/right_sidebar/index_spec.js b/spec/javascripts/right_sidebar/index_spec.js
new file mode 100644
index 00000000000..7a5757b6b01
--- /dev/null
+++ b/spec/javascripts/right_sidebar/index_spec.js
@@ -0,0 +1,109 @@
+import '~/commons/bootstrap';
+import RightSidebar from '~/right_sidebar/index';
+
+describe('RightSidebar', () => {
+  describe('fixture tests', () => {
+    let $aside;
+    let $toggle;
+    let $icon;
+    let $page;
+    let $labelsIcon;
+    const fixtureName = 'issues/open-issue.html.raw';
+
+    preloadFixtures(fixtureName);
+    loadJSONFixtures('todos/todos.json');
+
+    function 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);
+    }
+
+    beforeEach(() => {
+      loadFixtures(fixtureName);
+      new RightSidebar(); // eslint-disable-line no-new
+      $aside = $('.right-sidebar');
+      $page = $('.page-with-sidebar');
+      $icon = $aside.find('i');
+      $toggle = $aside.find('.js-sidebar-toggle');
+      $labelsIcon = $aside.find('.sidebar-collapsed-icon');
+    });
+
+    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', () => {
+      const todos = getJSONFixture('todos/todos.json');
+      spyOn(jQuery, 'ajax').and.callFake(() => {
+        const d = $.Deferred();
+        const response = todos;
+        d.resolve(response);
+        return d.promise();
+      });
+
+      const todoToggleSpy = spyOnEvent(document, 'todo:toggle');
+
+      $('.issuable-sidebar-header .js-issuable-todo').click();
+
+      expect(todoToggleSpy.calls.count()).toEqual(1);
+    });
+
+    it('should not hide collapsed icons', () => {
+      // todo replace foreach.call
+      [].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']);
+
+      RightSidebar.prototype.sidebarToggleClicked(event);
+
+      expect(gl.lazyLoader.loadCheck).toHaveBeenCalled();
+    });
+
+    it('does not throw if lazyLoader is not defined', () => {
+      gl.lazyLoader = undefined;
+
+      const toggle = RightSidebar.prototype.sidebarToggleClicked.bind(null, event);
+
+      expect(toggle).not.toThrow();
+    });
+  });
+});
diff --git a/spec/javascripts/right_sidebar_spec.js b/spec/javascripts/right_sidebar_spec.js
deleted file mode 100644
index 5505f983d71..00000000000
--- a/spec/javascripts/right_sidebar_spec.js
+++ /dev/null
@@ -1,118 +0,0 @@
-/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, new-parens, no-return-assign, new-cap, vars-on-top, max-len */
-/* global Sidebar */
-
-import '~/commons/bootstrap';
-import '~/right_sidebar';
-
-(function() {
-  var $aside, $icon, $labelsIcon, $page, $toggle, assertSidebarState;
-
-  this.sidebar = null;
-
-  $aside = null;
-
-  $toggle = null;
-
-  $icon = null;
-
-  $page = null;
-
-  $labelsIcon = null;
-
-  assertSidebarState = function(state) {
-    var shouldBeCollapsed, shouldBeExpanded;
-    shouldBeExpanded = state === 'expanded';
-    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);
-    return expect($icon.hasClass('fa-angle-double-left')).toBe(shouldBeCollapsed);
-  };
-
-  describe('RightSidebar', function() {
-    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();
-        });
-      });
-    });
-
-    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();
-      });
-    });
-  });
-}).call(window);