From 2454b8343f43db0ca26869d9cca4dd8126f7bb63 Mon Sep 17 00:00:00 2001
From: Aleksandr Shumilov <alexander.shumilov@toptal.com>
Date: Thu, 20 Jul 2023 20:50:47 +0200
Subject: [PATCH] test: page in various screens

---
 cypress/component/Page.spec.tsx               | 36 +++++++++++---
 packages/picasso/src/Page/story/index.jsx     | 48 +++++++++----------
 .../src/PageHamburger/PageHamburger.tsx       |  1 +
 .../src/PageHamburger/PageHamburgerPortal.tsx |  1 -
 4 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/cypress/component/Page.spec.tsx b/cypress/component/Page.spec.tsx
index ba833c53495..598767cc003 100644
--- a/cypress/component/Page.spec.tsx
+++ b/cypress/component/Page.spec.tsx
@@ -8,6 +8,7 @@ const containerHeight = '30rem'
 enum TestIds {
   WRAPPER = 'wrapper',
   SIDEBAR_SCROLLABLE_CONTAINER = 'sidebar-scrollable-container',
+  MENU_CONTAINER = 'menu-container',
 }
 
 const Paragraph = () => (
@@ -35,7 +36,7 @@ const Sidebar = (props: PageSidebarProps) => (
     }}
     {...props}
   >
-    <Page.Sidebar.Menu>
+    <Page.Sidebar.Menu data-testid={TestIds.MENU_CONTAINER}>
       <Page.Sidebar.Item selected>Overview</Page.Sidebar.Item>
       <Page.Sidebar.Item>Jobs</Page.Sidebar.Item>
       <Page.Sidebar.Item>Candidates</Page.Sidebar.Item>
@@ -100,12 +101,12 @@ const Example = ({ sidebarProps }: ExampleProps) => (
     data-testid={TestIds.WRAPPER}
     style={{ height: containerHeight, overflowY: 'scroll' }}
   >
-    <Page hamburgerId='banner-and-sidebar-example'>
-      <Page.TopBar rightContent={<RightContent />} title='Default example' />
-      <Page.Banner>
-        We are now in the process of reviewing your profile. After your profile
-        has been checked, we will reach to you via email about next steps.
-      </Page.Banner>
+    <Page>
+      <Page.TopBar
+        rightContent={<RightContent />}
+        title='Default example'
+        testIds={{ hamburger: 'hamburger-button' }}
+      />
       <Page.Content>
         <Sidebar {...sidebarProps} />
         <Page.Article>
@@ -168,4 +169,25 @@ describe('Page', () => {
       })
     })
   })
+
+  // TODO: add tests for 1280, 1800 behaviour
+  describe.only('when page is rendered on a screen sizes smaller than 1280px', () => {
+    Cypress._.each([400, 600, 800, 1279], width => {
+      describe(`when page is rendered on a ${width} screen width`, () => {
+        it('renders hamburger menu and hides sidebar', () => {
+          cy.viewport(width, 600)
+          cy.mount(<Example />)
+
+          cy.getByTestId('hamburger-button').should('be.visible')
+          cy.getByTestId('hamburger-button').realClick()
+
+          cy.getByTestId(TestIds.MENU_CONTAINER).should('be.visible')
+
+          cy.getByTestId('hamburger-button').realClick()
+
+          cy.getByTestId(TestIds.MENU_CONTAINER).should('not.visible')
+        })
+      })
+    })
+  })
 })
diff --git a/packages/picasso/src/Page/story/index.jsx b/packages/picasso/src/Page/story/index.jsx
index 17986b382c7..a20e4a6fed1 100644
--- a/packages/picasso/src/Page/story/index.jsx
+++ b/packages/picasso/src/Page/story/index.jsx
@@ -32,33 +32,33 @@ page
     description:
       'Page has centered content and restricted width of 1200px or 75rem',
   })
-  .addExample('Page/story/WideWidth.example.tsx', {
-    title: 'Wide width',
-    description:
-      'Page has centered content and restricted width of 1440px or 90rem',
-  })
-  .addExample('Page/story/FullWidth.example.tsx', {
-    title: 'Full width',
-  })
-  .addExample('Page/story/Scroll.example.tsx', 'Scroll with overflow')
-  .addExample('Page/story/WithBanner.example.tsx', {
-    title: 'With Banner',
-  })
-  .addExample('Page/story/WithCompoundBanner.example.tsx', {
-    title: 'With Compound Banner',
-  })
-  .addExample('Page/story/WithBannerAndSidebar.example.tsx', {
-    title: 'With Banner and Sidebar',
-  })
+  // .addExample('Page/story/WideWidth.example.tsx', {
+  //   title: 'Wide width',
+  //   description:
+  //     'Page has centered content and restricted width of 1440px or 90rem',
+  // })
+  // .addExample('Page/story/FullWidth.example.tsx', {
+  //   title: 'Full width',
+  // })
+  // .addExample('Page/story/Scroll.example.tsx', 'Scroll with overflow')
+  // .addExample('Page/story/WithBanner.example.tsx', {
+  //   title: 'With Banner',
+  // })
+  // .addExample('Page/story/WithCompoundBanner.example.tsx', {
+  //   title: 'With Compound Banner',
+  // })
+  // .addExample('Page/story/WithBannerAndSidebar.example.tsx', {
+  //   title: 'With Banner and Sidebar',
+  // })
 
-page.connect(pageHelmetStory.chapter)
+// page.connect(pageHelmetStory.chapter)
 
-page.connect(pageContentStory.chapter)
+// page.connect(pageContentStory.chapter)
 
-page.connect(pageArticleStory.chapter)
+// page.connect(pageArticleStory.chapter)
 
-page.connect(pageFooterStory.chapter)
+// page.connect(pageFooterStory.chapter)
 
-page.connect(pageBannerStory.chapter)
+// page.connect(pageBannerStory.chapter)
 
-page.connect(pageAutocompleteStory.chapter)
+// page.connect(pageAutocompleteStory.chapter)
diff --git a/packages/picasso/src/PageHamburger/PageHamburger.tsx b/packages/picasso/src/PageHamburger/PageHamburger.tsx
index 4f24289de1d..5ce2585576d 100644
--- a/packages/picasso/src/PageHamburger/PageHamburger.tsx
+++ b/packages/picasso/src/PageHamburger/PageHamburger.tsx
@@ -34,6 +34,7 @@ const PageHamburger = ({ id, 'data-testid': dataTestId }: Props) => {
       })}
       classes={{ content: classes.responsiveWrapperContent }}
       offset={{ top: 0.4 }}
+      disablePortal
       popperOptions={{
         modifiers: {
           flip: { enabled: false },
diff --git a/packages/picasso/src/PageHamburger/PageHamburgerPortal.tsx b/packages/picasso/src/PageHamburger/PageHamburgerPortal.tsx
index d83c56aa1b9..0b295ab0d71 100644
--- a/packages/picasso/src/PageHamburger/PageHamburgerPortal.tsx
+++ b/packages/picasso/src/PageHamburger/PageHamburgerPortal.tsx
@@ -14,7 +14,6 @@ const PageHamburgerPortal = ({ children }: Props) => {
 
   useEffect(() => {
     setIsMounted(true)
-
     if (hamburgerRef?.current) {
       setContainer(hamburgerRef.current)
     }