Sticky sub-navigation switcher and fab test

https://youtrack.weseek.co.jp/issue/GW-7949
- Add data-testid for grw-subnav-switcher and grw-fab-page-create-button
- Create cypress spec for sub navigation switcher and Fab

packages/app/src/components/Fab.tsx

@@ -68,7 +68,11 @@ export const Fab = (): JSX.Element => {
 
   const PageCreateButton = useCallback(() => {
     return (
-      <div className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: '2.3rem', right: '4rem' }}>
+      <div
+        className={`rounded-circle position-absolute ${animateClasses}`}
+        style={{ bottom: '2.3rem', right: '4rem' }}
+        data-testid="grw-fab-page-create-button"
+      >
         <button
           type="button"
           className={`btn btn-lg btn-create-page btn-primary rounded-circle p-0 ${buttonClasses}`}

packages/app/src/components/Navbar/GrowiSubNavigationSwitcher.tsx

@@ -83,7 +83,7 @@ export const GrowiSubNavigationSwitcher = (props: GrowiSubNavigationSwitcherProp
   }
 
   return (
-    <div className={`${styles['grw-subnav-switcher']} ${isSticky ? '' : 'grw-subnav-switcher-hidden'}`}>
+    <div className={`${styles['grw-subnav-switcher']} ${isSticky ? '' : 'grw-subnav-switcher-hidden'}`} data-testid="grw-subnav-switcher" >
       <div
         id="grw-subnav-fixed-container"
         className={`grw-subnav-fixed-container ${styles['grw-subnav-fixed-container']} position-fixed grw-subnav-append-shadow-container`}

packages/app/test/cypress/integration/23-sticky/23-sticky--fab.spec.ts

@@ -0,0 +1,93 @@
+context('Access to sticky Fab', () => {
+  const ssPrefix = 'fab-';
+
+  beforeEach(() => {
+    // login
+    cy.fixture("user-admin.json").then(user => {
+      cy.login(user.username, user.password);
+    });
+
+    // Visit /
+    cy.visit('/');
+
+    cy.waitUntilSkeletonDisappear();
+    cy.collapseSidebar(true);
+  });
+
+  it('Fab is displayed on scroll down', () => {
+    cy.waitUntil(() => {
+      // 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-page-create-button').then($elem => $elem.hasClass('visible'));
+      });
+    });
+
+    cy.screenshot(`${ssPrefix}is-sticky-on-scroll-down`);
+  });
+
+  it('Fab is invisible on scroll top', () => {
+    cy.waitUntil(() => {
+      //do
+      // 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'));
+      });
+    });
+
+    cy.screenshot(`${ssPrefix}is-invisible-on-scroll-top`);
+  });
+
+  it('Fab is not displayed when move to other pages', () => {
+    // Move to /Sandbox page
+    cy.visit('/Sandbox');
+
+    cy.waitUntilSkeletonDisappear();
+    cy.collapseSidebar(true);
+
+
+    cy.screenshot(`${ssPrefix}is-not-visible-on-move-to-other-pages`);
+  });
+
+  it('Able to open create page modal from fab', () => {
+    cy.waitUntil(() => {
+      //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'));
+      });
+    });
+    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`);
+      cy.get('button.close').click();
+    });
+  });
+
+  it('Able to scroll page to top', () => {
+    cy.getByTestid('grw-fab-container').within(() => {
+       cy.getByTestid('grw-fab-return-to-top').should('have.class', 'visible');
+    });
+
+    cy.waitUntil(() => {
+      //do
+      cy.getByTestid('grw-fab-return-to-top').click();
+      // wait until
+      return cy.getByTestid('grw-fab-return-to-top').then($elem => $elem.hasClass('invisible'));
+    });
+
+    cy.screenshot(`${ssPrefix}scroll-page-to-top`);
+  });
+});

packages/app/test/cypress/integration/23-sticky/23-sticky--subnavigation-switcher.spec.ts

@@ -0,0 +1,74 @@
+context('Access to sticky sub navigation switcher ', () => {
+  const ssPrefix = 'subnav-switcher-';
+
+  beforeEach(() => {
+    // login
+    cy.fixture("user-admin.json").then(user => {
+      cy.login(user.username, user.password);
+    });
+
+    // Visit /
+    cy.visit('/');
+
+    cy.waitUntilSkeletonDisappear();
+    cy.collapseSidebar(true);
+  });
+
+  it('Sub navigation is sticky when scrolling down', () => {
+    cy.waitUntil(() => {
+      // do
+      // Scroll the window 250px down is enough to trigger sticky effect
+      cy.scrollTo(0, 250);
+
+      // wait until
+      return cy.getByTestid('grw-subnav-switcher').then($elem => !$elem.hasClass('grw-subnav-switcher-hidden'));
+    });
+    cy.screenshot(`${ssPrefix}is-sticky-on-scroll-down`);
+  });
+
+  it('Sub navigation is not sticky when scrolling top', () => {
+
+    cy.waitUntil(() => {
+      // do
+      // Scroll page to top
+      cy.scrollTo(0, 0);
+
+      // wait until
+      return cy.getByTestid('grw-subnav-switcher').then($elem => $elem.hasClass('grw-subnav-switcher-hidden'));
+    });
+    cy.screenshot(`${ssPrefix}is-not-sticky-on-scroll-top`);
+  });
+
+  it('Sub navigation is not sticky when move to other pages', () => {
+    // Move to /Sandbox page
+    cy.visit('/Sandbox');
+
+    cy.waitUntilSkeletonDisappear();
+    cy.collapseSidebar(true);
+
+
+    cy.getByTestid('grw-subnav-switcher').should('have.class', 'grw-subnav-switcher-hidden');
+    cy.screenshot(`${ssPrefix}is-not-sticky-on-move-to-other-pages`);
+  });
+
+  it('Able to click buttons on sub navigation switcher when sticky', () => {
+    cy.waitUntil(() => {
+      // do
+      // Scroll the window 250px down is enough to trigger sticky effect
+      cy.scrollTo(0, 250);
+
+      // 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.screenshot(`${ssPrefix}open-editor-when-sticky`);
+  });
+});