test: page in various screens

toptal · Jul 24, 2023 · 2454b83 · 2454b83
1 parent d738901
commit 2454b83
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -14,7 +14,6 @@ const PageHamburgerPortal = ({ children }: Props) => {
 
   useEffect(() => {
     setIsMounted(true)
-
     if (hamburgerRef?.current) {
       setContainer(hamburgerRef.current)
     }