Add interaction tests for pagelayout sticky (#2241)

* Add interaction tests for pagelayout sticky Maybe add a wait Remove wait times * The second check makes things flaky * add interaction tests for custom sticky header * remove unnecessary import * remove fireEvent scroll Co-authored-by: Armagan Ersoz <broccolinisoup@github.com>
primer · Aug 31, 2022 · a348400 · a348400
1 parent 9c013e1
commit a348400
Show file tree

Hide file tree

Showing 2 changed files with 485 additions and 37 deletions.
diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx
@@ -489,27 +489,38 @@ export const StickyPane: Story = args => (
     </PageLayout.Header>
     <PageLayout.Content padding="normal" width="large">
       <Box sx={{display: 'grid', gap: 3}}>
-        {Array.from({length: args.numParagraphsInContent}).map((_, i) => (
-          <Box key={i} as="p" sx={{margin: 0}}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non ipsum.
-            Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor
-            felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet massa purus.
-            Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus in imperdiet. Ut
-            blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod nisi. Nullam tincidunt
-            est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
-          </Box>
-        ))}
+        {Array.from({length: args.numParagraphsInContent}).map((_, i) => {
+          const testId = `content${i}`
+          return (
+            <Box key={i} as="p" sx={{margin: 0}}>
+              <span data-testid={testId}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
+                ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
+                et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
+                massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
+                in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
+                nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
+              </span>
+            </Box>
+          )
+        })}
       </Box>
     </PageLayout.Content>
     <PageLayout.Pane position="start" padding="normal" divider="line" sticky={args.sticky}>
       <Box sx={{display: 'grid', gap: 3}}>
-        {Array.from({length: args.numParagraphsInPane}).map((_, i) => (
-          <Box key={i} as="p" sx={{margin: 0}}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non ipsum.
-            Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor
-            felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet massa purus.
-          </Box>
-        ))}
+        {Array.from({length: args.numParagraphsInPane}).map((_, i) => {
+          const testId = `paragraph${i}`
+          return (
+            <Box key={i} as="p" sx={{margin: 0}}>
+              <span data-testid={testId}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
+                ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
+                et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
+                massa purus.
+              </span>
+            </Box>
+          )
+        })}
       </Box>
     </PageLayout.Pane>
     <PageLayout.Footer padding="normal" divider="line">
@@ -589,8 +600,9 @@ NestedScrollContainer.argTypes = {
 
 export const CustomStickyHeader: Story = args => (
   // a box to create a sticky top element that will be on the consumer side and outside of the PageLayout component
-  <Box>
+  <Box data-testid="story-window">
     <Box
+      data-testid="sticky-header"
       sx={{
         position: 'sticky',
         top: 0,
@@ -606,29 +618,40 @@ export const CustomStickyHeader: Story = args => (
     </Box>
     <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
       <PageLayout.Content padding="normal" width="large">
-        <Box sx={{display: 'grid', gap: 3}}>
-          {Array.from({length: args.numParagraphsInContent}).map((_, i) => (
-            <Box key={i} as="p" sx={{margin: 0}}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non ipsum.
-              Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et,
-              auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet massa
-              purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus in
-              imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod nisi.
-              Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
-            </Box>
-          ))}
+        <Box sx={{display: 'grid', gap: 3}} data-testid="scrollContainer">
+          {Array.from({length: args.numParagraphsInContent}).map((_, i) => {
+            const testId = `content${i}`
+            return (
+              <Box key={i} as="p" sx={{margin: 0}}>
+                <span data-testid={testId}>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
+                  ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius
+                  tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec
+                  sit amet massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor
+                  auctor tellus in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum
+                  auctor euismod nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut
+                  ornare.
+                </span>
+              </Box>
+            )
+          })}
         </Box>
       </PageLayout.Content>
       <PageLayout.Pane position="start" padding="normal" divider="line" sticky stickyTop={args.stickyTop}>
         <Box sx={{display: 'grid', gap: 3}}>
-          {Array.from({length: args.numParagraphsInPane}).map((_, i) => (
-            <Box key={i} as="p" sx={{margin: 0}}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non ipsum.
-              Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et,
-              auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet massa
-              purus.
-            </Box>
-          ))}
+          {Array.from({length: args.numParagraphsInPane}).map((_, i) => {
+            const testId = `paragraph${i}`
+            return (
+              <Box key={i} as="p" sx={{margin: 0}}>
+                <span data-testid={testId}>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
+                  ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius
+                  tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec
+                  sit amet massa purus.
+                </span>
+              </Box>
+            )
+          })}
         </Box>
       </PageLayout.Pane>
       <PageLayout.Footer padding="normal" divider="line">