cypress: Fix flaky tests related to sidebar

Set sidebar state (collapsed / expanded) once css animation has finished
in order to make associated cypress test reliable.

Also set "enableRemember" option from adminlte PushMenu and remove custom
code that was doing the same operation as it is not needed anymore
(see https://adminlte.io/docs/3.0/javascript/push-menu.html).

Closes T2341

cypress/integration/sidebar.spec.js

@@ -36,16 +36,14 @@ describe('Sidebar tests On Large Screen', function() {
     let collapseWidth;
     cy.get('.swh-push-menu')
       .click()
-      .get('.swh-sidebar')
-      .wait(250)
+      .get('.swh-sidebar-collapsed')
       .invoke('width')
       .then((width) => {
         collapseWidth = width;
       })
       .get('.swh-push-menu')
       .click()
-      .get('.swh-sidebar')
-      .wait(250)
+      .get('.swh-sidebar-expanded')
       .invoke('width')
       .then(openWidth => {
         assert.isBelow(collapseWidth, openWidth);

swh/web/assets/src/bundles/webapp/webapp-utils.js

@@ -10,9 +10,9 @@ import {selectText} from 'utils/functions';
 import {BREAKPOINT_MD} from 'utils/constants';
 
 let collapseSidebar = false;
-let previousSidebarState = localStorage.getItem('swh-sidebar-collapsed');
+let previousSidebarState = localStorage.getItem('remember.lte.pushmenu');
 if (previousSidebarState !== undefined) {
-  collapseSidebar = JSON.parse(previousSidebarState);
+  collapseSidebar = previousSidebarState === 'sidebar-collapse';
 }
 
 $(document).on('DOMContentLoaded', () => {
@@ -64,6 +64,36 @@ $(document).ready(() => {
     }
   });
 
+  const mainSideBar = $('.main-sidebar');
+
+  function updateSidebarState() {
+    const body = $('body');
+    if (body.hasClass('sidebar-collapse') &&
+        !mainSideBar.hasClass('swh-sidebar-collapsed')) {
+      mainSideBar.removeClass('swh-sidebar-expanded');
+      mainSideBar.addClass('swh-sidebar-collapsed');
+      $('.swh-words-logo-swh').css('visibility', 'visible');
+    } else if (!body.hasClass('sidebar-collapse') &&
+               !mainSideBar.hasClass('swh-sidebar-expanded')) {
+      mainSideBar.removeClass('swh-sidebar-collapsed');
+      mainSideBar.addClass('swh-sidebar-expanded');
+      $('.swh-words-logo-swh').css('visibility', 'hidden');
+    }
+    // ensure correct sidebar state when loading a page
+    if (body.hasClass('hold-transition')) {
+      setTimeout(() => {
+        updateSidebarState();
+      });
+    }
+  }
+
+  // set sidebar state after collapse / expand animation
+  mainSideBar.on('transitionend', evt => {
+    updateSidebarState();
+  });
+
+  updateSidebarState();
+
   // ensure footer do not overflow main content for mobile devices
   // or after resizing the browser window
   ensureNoFooterOverflow();
@@ -145,9 +175,6 @@ export function initPage(page) {
 
     // triggered when unloading the current page
     $(window).on('unload', () => {
-      // backup sidebar state (collapsed/expanded)
-      let sidebarCollapsed = $('body').hasClass('sidebar-collapse');
-      localStorage.setItem('swh-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
       // backup current browse page
       if (page === 'browse') {
         sessionStorage.setItem('last-browse-page', window.location);

swh/web/templates/layout.html

@@ -108,7 +108,9 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
       </div>
       <nav class="main-header navbar navbar-expand-lg navbar-light navbar-static-top" id="swh-navbar">
         <div class="navbar-header">
-          <a class="nav-link swh-push-menu" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
+          <a class="nav-link swh-push-menu" data-widget="pushmenu" data-enable-remember="true" href="#">
+            <i class="fa fa-bars"></i>
+          </a>
         </div>
         <div class="navbar" style="width: 94%;">
           <div class="swh-navbar-content">

[Phabricator Migration user]

Some references in the commit message have been migrated:

• T2341 is now #2341 (closed)