WIP: impl collapsed mode behavior

update tests

apps/app/src/components/Sidebar/SidebarContents.tsx

@@ -35,7 +35,7 @@ export const SidebarContents = memo(() => {
   }
 
   return (
-    <div className={`grw-sidebar-contents ${styles['grw-sidebar-contents']}`}>
+    <div className={`grw-sidebar-contents ${styles['grw-sidebar-contents']}`} data-testid="grw-sidebar-contents">
       <Contents />
     </div>
   );

apps/app/test/cypress/e2e/20-basic-features/20-basic-features--access-to-page.cy.ts

@@ -209,7 +209,7 @@ context('Access to Template Editing Mode', () => {
 
     // Open sidebar
     cy.collapseSidebar(false);
-    cy.getByTestid('grw-contextual-navigation-child').should('be.visible');
+    cy.getByTestid('grw-sidebar-contents').should('be.visible');
     cy.waitUntilSkeletonDisappear();
 
     // If PageTree is not active when the sidebar is opened, make it active
@@ -221,7 +221,7 @@ context('Access to Template Editing Mode', () => {
       });
 
     // Create page (/{parentPath}}/{newPagePath}) from PageTree
-    cy.getByTestid('grw-contextual-navigation-child').within(() => {
+    cy.getByTestid('grw-sidebar-contents').within(() => {
       cy.get('.grw-pagetree-item-children').first().as('pagetreeItem').within(() => {
         cy.get('#page-create-button-in-page-tree').first().click({force: true})
       });

apps/app/test/cypress/e2e/50-sidebar/50-sidebar--access-to-side-bar.cy.ts

@@ -27,7 +27,7 @@ describe('Access to sidebar', () => {
 
       describe('Test show/collapse button', () => {
         it('Successfully show sidebar', () => {
-          cy.getByTestid('grw-contextual-navigation-child').should('be.visible');
+          cy.getByTestid('grw-sidebar-contents').should('be.visible');
 
           cy.waitUntilSkeletonDisappear();
           cy.screenshot(`${ssPrefix}1-sidebar-shown`, {
@@ -40,7 +40,7 @@ describe('Access to sidebar', () => {
         it('Successfully collapse sidebar', () => {
           cy.getByTestid('grw-switch-collapse-button').click({force: true});
 
-          cy.getByTestid('grw-contextual-navigation-child').should('not.be.visible');
+          cy.getByTestid('grw-sidebar-contents').should('not.be.visible');
 
           cy.waitUntilSkeletonDisappear();
           cy.screenshot(`${ssPrefix}2-sidebar-collapsed`, {
@@ -62,7 +62,7 @@ describe('Access to sidebar', () => {
         });
 
         it('Successfully access to page tree', () => {
-          cy.getByTestid('grw-contextual-navigation-child').within(() => {
+          cy.getByTestid('grw-sidebar-contents').within(() => {
             cy.getByTestid('grw-pagetree-item-container').should('be.visible');
 
             cy.waitUntilSkeletonDisappear();
@@ -71,7 +71,7 @@ describe('Access to sidebar', () => {
         });
 
         it('Successfully hide page tree items', () => {
-          cy.getByTestid('grw-contextual-navigation-child').within(() => {
+          cy.getByTestid('grw-sidebar-contents').within(() => {
             cy.get('.grw-pagetree-open').should('be.visible');
 
             // hide page tree tiems
@@ -84,7 +84,7 @@ describe('Access to sidebar', () => {
         it('Successfully click Add to Bookmarks button', () => {
           cy.waitUntil(() => {
             // do
-            cy.getByTestid('grw-contextual-navigation-child').within(() => {
+            cy.getByTestid('grw-sidebar-contents').within(() => {
               cy.get('.grw-pagetree-item-children').first().as('pagetreeItem').within(() => {
                 cy.getByTestid('open-page-item-control-btn').find('button').first().invoke('css','display','block').click()
               });
@@ -102,7 +102,7 @@ describe('Access to sidebar', () => {
           // show dropdown again
           cy.waitUntil(() => {
             // do
-            cy.getByTestid('grw-contextual-navigation-child').within(() => {
+            cy.getByTestid('grw-sidebar-contents').within(() => {
               cy.get('.grw-pagetree-item-children').first().as('pagetreeItem').within(() => {
                 cy.getByTestid('open-page-item-control-btn').find('button').first().invoke('css','display','block').click()
               });
@@ -117,7 +117,7 @@ describe('Access to sidebar', () => {
         it('Successfully show duplicate page modal', () => {
           cy.waitUntil(() => {
             // do
-            cy.getByTestid('grw-contextual-navigation-child').within(() => {
+            cy.getByTestid('grw-sidebar-contents').within(() => {
               cy.get('.grw-pagetree-item-children').first().as('pagetreeItem').within(() => {
                 cy.getByTestid('open-page-item-control-btn').find('button').first().invoke('css','display','block').click()
               });
@@ -142,7 +142,7 @@ describe('Access to sidebar', () => {
         it('Successfully rename page', () => {
           cy.waitUntil(() => {
             // do
-            cy.getByTestid('grw-contextual-navigation-child').within(() => {
+            cy.getByTestid('grw-sidebar-contents').within(() => {
               cy.get('.grw-pagetree-item-children').first().as('pagetreeItem').within(() => {
                 cy.getByTestid('open-page-item-control-btn').find('button').first().invoke('css','display','block').click()
               });
@@ -165,7 +165,7 @@ describe('Access to sidebar', () => {
         it('Successfully show delete page modal', () => {
           cy.waitUntil(() => {
             // do
-            cy.getByTestid('grw-contextual-navigation-child').within(() => {
+            cy.getByTestid('grw-sidebar-contents').within(() => {
               cy.get('.grw-pagetree-item-children').first().as('pagetreeItem').within(() => {
                 cy.getByTestid('open-page-item-control-btn').find('button').first().invoke('css','display','block').click()
               });
@@ -197,7 +197,7 @@ describe('Access to sidebar', () => {
         });
 
         it('Successfully access to custom sidebar', () => {
-          cy.getByTestid('grw-contextual-navigation-child').within(() => {
+          cy.getByTestid('grw-sidebar-contents').within(() => {
             cy.get('.grw-sidebar-content-header > h3').find('a');
 
             cy.waitUntilSkeletonDisappear();
@@ -261,7 +261,7 @@ describe('Access to sidebar', () => {
         });
 
         it('Successfully access to tags', () => {
-          cy.getByTestid('grw-contextual-navigation-child').within(() => {
+          cy.getByTestid('grw-sidebar-contents').within(() => {
             cy.getByTestid('grw-tags-list').should('be.visible');
 
             cy.screenshot(`${ssPrefix}tags-1-access-to-tags`, { blackout: blackoutOverride });

apps/app/test/cypress/support/commands.ts

@@ -81,8 +81,8 @@ Cypress.Commands.add('collapseSidebar', (isCollapsed: boolean, waitUntilSaving =
 
   cy.getByTestid('grw-sidebar').should('be.visible').within(() => {
 
-    const isSidebarContextualNavigationHidden = isHiddenByTestId('grw-contextual-navigation-child');
-    if (isSidebarContextualNavigationHidden === isCollapsed) {
+    const isSidebarContentsHidden = isHiddenByTestId('grw-sidebar-contents');
+    if (isSidebarContentsHidden === isCollapsed) {
       return;
     }
 
@@ -96,7 +96,7 @@ Cypress.Commands.add('collapseSidebar', (isCollapsed: boolean, waitUntilSaving =
       }
 
       // wait until
-      return cy.getByTestid('grw-contextual-navigation-child').then($contents => isHidden($contents) === isCollapsed);
+      return cy.getByTestid('grw-sidebar-contents').then($contents => isHidden($contents) === isCollapsed);
     });
   });