Move and update sticky features test

https://youtrack.weseek.co.jp/issue/GW-7949
- Move and rename sticky test spec file
- Update click to scroll top test
- Simplify selector on waitUntil implementation

packages/app/test/cypress/integration/23-sticky/23-sticky--fab.spec.ts → packages/app/test/cypress/integration/20-basic-features/20-basic-features--sticky-fab.spec.ts

@@ -11,7 +11,7 @@ context('Access to sticky Fab', () => {
     cy.visit('/');
 
     cy.waitUntilSkeletonDisappear();
-    cy.collapseSidebar(true);
+    cy.collapseSidebar(true, true);
   });
 
   it('Fab display changes on scroll down and up', () => {
@@ -22,9 +22,7 @@ context('Access to sticky Fab', () => {
       // Scroll the window 250px down is enough to trigger sticky effect
        cy.scrollTo(0, 250);
       // wait until
-      return cy.getByTestid('grw-fab-container').within(() => {
-        return cy.getByTestid('grw-fab-page-create-button').then($elem => $elem.hasClass('visible'));
-      });
+      return cy.getByTestid('grw-fab-page-create-button').then($elem => $elem.hasClass('visible'));
     });
     cy.screenshot(`${ssPrefix}is-visible-on-scroll-down`);
 
@@ -34,11 +32,8 @@ context('Access to sticky Fab', () => {
       // Scroll the window back to top
       cy.scrollTo(0, 0);
       // wait until
-      return cy.getByTestid('grw-fab-container').within(() => {
-        return cy.getByTestid('grw-fab-page-create-button').then($elem => $elem.hasClass('invisible'));
-      });
+      return cy.getByTestid('grw-fab-page-create-button').then($elem => $elem.hasClass('invisible'));
     });
-
     cy.screenshot(`${ssPrefix}is-invisible-on-scroll-top`);
   });
 
@@ -50,9 +45,7 @@ context('Access to sticky Fab', () => {
       // Scroll the window 250px down is enough to trigger sticky effect
        cy.scrollTo(0, 250);
       // wait until
-      return cy.getByTestid('grw-fab-container').within(() => {
         return cy.getByTestid('grw-fab-page-create-button').then($elem => $elem.hasClass('visible'));
-      });
     });
 
     // Move to /Sandbox page
@@ -61,7 +54,7 @@ context('Access to sticky Fab', () => {
     cy.waitUntilSkeletonDisappear();
     cy.collapseSidebar(true);
 
-
+    cy.waitUntil(() => cy.getByTestid('grw-fab-page-create-button').then($elem => $elem.hasClass('invisible')));
     cy.screenshot(`${ssPrefix}is-not-visible-on-move-to-other-pages`);
   });
 
@@ -70,17 +63,15 @@ context('Access to sticky Fab', () => {
       //do
       // Scroll the window back to top
       cy.scrollTo(0, 250);
+
       // wait until
-      return cy.getByTestid('grw-fab-container').within(() => {
-        return cy.getByTestid('grw-fab-page-create-button').then($elem => $elem.hasClass('visible'));
+      return cy.getByTestid('grw-fab-page-create-button')
+      .should('have.class', 'visible')
+      .within(() => {
+        cy.get('.btn-create-page').click();
+        return true;
       });
     });
-    cy.waitUntil(() => {
-      //do
-      cy.getByTestid('grw-fab-page-create-button').click();
-      // wait until
-      return cy.getByTestid('page-create-modal').then($elem => $elem.is(':visible'));
-    });
 
     cy.getByTestid('page-create-modal').should('be.visible').within(() => {
       cy.screenshot(`${ssPrefix}new-page-modal-opened-from-fab`);
@@ -89,15 +80,22 @@ context('Access to sticky Fab', () => {
   });
 
   it('Able to scroll page to top', () => {
-    cy.getByTestid('grw-fab-container').within(() => {
-       cy.getByTestid('grw-fab-return-to-top').should('have.class', 'visible');
-    });
 
+    // Initial scroll down
     cy.waitUntil(() => {
-      //do
-      cy.getByTestid('grw-fab-return-to-top').click();
+      // do
+      // Scroll the window 250px down is enough to trigger sticky effect
+      cy.scrollTo(0, 250);
+
       // wait until
-      return cy.getByTestid('grw-fab-return-to-top').then($elem => $elem.hasClass('invisible'));
+      return cy.getByTestid('grw-fab-return-to-top')
+        .should('have.class', 'visible')
+        .then(() => {
+          cy.waitUntil(() => {
+            cy.get('.btn-scroll-to-top').click();
+            return cy.getByTestid('grw-fab-return-to-top').should('have.class', 'invisible');
+          });
+        });
     });
 
     cy.screenshot(`${ssPrefix}scroll-page-to-top`);

packages/app/test/cypress/integration/23-sticky/23-sticky--for-guest.spec.ts → packages/app/test/cypress/integration/20-basic-features/20-basic-features--sticky-for-guest.spec.ts

@@ -36,10 +36,10 @@ context('Access sticky sub navigation switcher and Fab for guest', () => {
       // do
       // Scroll the window 250px down is enough to trigger sticky effect
        cy.scrollTo(0, 250);
+
       // wait until
-      return cy.getByTestid('grw-fab-container').within(() => {
-        return cy.getByTestid('grw-fab-return-to-top').then($elem => $elem.hasClass('visible'));
-      });
+      return cy.getByTestid('grw-fab-return-to-top').then($elem => $elem.hasClass('visible'));
+
     });
     cy.screenshot(`${ssPrefix}fab-is-visible-on-scroll-down`);
 
@@ -48,10 +48,9 @@ context('Access sticky sub navigation switcher and Fab for guest', () => {
       // do
       // Scroll page to top
        cy.scrollTo(0, 0);
-      // wait until
-      return cy.getByTestid('grw-fab-container').within(() => {
-        return cy.getByTestid('grw-fab-return-to-top').then($elem => !$elem.hasClass('visible'));
-      });
+
+       // wait until
+      return cy.getByTestid('grw-fab-return-to-top').then($elem => !$elem.hasClass('visible'));
     });
     cy.screenshot(`${ssPrefix}fab-is-invisible-on-scroll-down`);
 

packages/app/test/cypress/integration/23-sticky/23-sticky--subnavigation-switcher.spec.ts → packages/app/test/cypress/integration/20-basic-features/20-basic-features--sticky-subnavigation-switcher.spec.ts

@@ -11,7 +11,7 @@ context('Access to sticky sub navigation switcher ', () => {
     cy.visit('/');
 
     cy.waitUntilSkeletonDisappear();
-    cy.collapseSidebar(true);
+    cy.collapseSidebar(true, true);
   });
 
   it('Sub navigation sticky changes when scrolling down and up', () => {
@@ -55,7 +55,7 @@ context('Access to sticky sub navigation switcher ', () => {
     cy.waitUntilSkeletonDisappear();
     cy.collapseSidebar(true);
 
-    cy.getByTestid('grw-subnav-switcher').should('have.class', 'grw-subnav-switcher-hidden');
+    cy.getByTestid('grw-subnav-switcher').then($elem => $elem.hasClass('grw-subnav-switcher-hidden'))
     cy.screenshot(`${ssPrefix}is-not-sticky-on-move-to-other-pages`);
   });
 
@@ -68,23 +68,21 @@ context('Access to sticky sub navigation switcher ', () => {
       // wait until
       return cy.getByTestid('grw-subnav-switcher').then($elem => !$elem.hasClass('grw-subnav-switcher-hidden'));
     });
-
-    cy.getByTestid('grw-subnav-switcher').within(() => {
-      cy.waitUntil(() => {
-        // do
-        cy.getByTestid('editor-button').click();
-        // until
-        return cy.get('.layout-root').then($elem => $elem.hasClass('editing'));
+    cy.waitUntil(() => {
+      cy.getByTestid('grw-subnav-switcher').within(() => {
+        cy.getByTestid('editor-button').should('be.visible').click();
       });
+      return cy.get('.layout-root').then($elem => $elem.hasClass('editing'));
     });
+    cy.get('.grw-editor-navbar-bottom').should('be.visible');
     cy.screenshot(`${ssPrefix}open-editor-when-sticky`);
   });
 
   it('Sub navigation is sticky when on small window', () => {
     cy.waitUntil(() => {
       // do
-      // Scroll the window 250px down is enough to trigger sticky effect
-      cy.scrollTo(0, 250);
+      // Scroll the window 500px down
+      cy.scrollTo(0, 500);
 
       // wait until
       return cy.getByTestid('grw-subnav-switcher').then($elem => !$elem.hasClass('grw-subnav-switcher-hidden'));