Add interaction tests for pagelayout sticky

src/PageLayout/PageLayout.stories.tsx

@@ -600,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,
@@ -617,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">

src/PageLayout/interaction.stories.tsx

@@ -1,7 +1,8 @@
 import {Meta} from '@storybook/react'
-import {StickyPane} from './PageLayout.stories'
-import {within} from '@storybook/testing-library'
+import {StickyPane, CustomStickyHeader} from './PageLayout.stories'
+import {within, fireEvent} from '@storybook/testing-library'
 import {expect} from '@storybook/jest'
+import {setTimeout} from 'timers/promises'
 
 const meta: Meta = {
   title: 'Layout/PageLayout/interactions',
@@ -389,5 +390,41 @@ NonStickyPane.play = async ({canvasElement}: {canvasElement: HTMLElement}) => {
   const paragraphRect = paragraph0.getBoundingClientRect()
   expect(isInViewPort(paragraphRect)).toBe(false)
 }
+
+CustomStickyHeader.argTypes = {
+  sticky: {
+    type: 'boolean',
+    defaultValue: true
+  },
+  stickyTop: {
+    type: 'string',
+    defaultValue: '8rem'
+  },
+  numParagraphsInPane: {
+    type: 'number',
+    defaultValue: 10
+  },
+  numParagraphsInContent: {
+    type: 'number',
+    defaultValue: 30
+  }
+}
+
+CustomStickyHeader.play = async ({canvasElement}: {canvasElement: HTMLElement}) => {
+  const canvas = within(canvasElement)
+  const contentToScroll = await canvas.getByTestId('content3')
+  contentToScroll.scrollIntoView()
+
+  // fireEvent alternative?
+  const storyWindow = await canvas.getByTestId('story-window')
+  await fireEvent.scroll(storyWindow, {top: 600})
+
+  const stickyPaneFirstParagraph = await canvas.getByTestId('paragraph0')
+  const paragraphBoundaries = stickyPaneFirstParagraph.getBoundingClientRect()
+  const stickyHeader = await canvas.getByTestId('sticky-header')
+  const stickyHeaderBoundaries = stickyHeader.getBoundingClientRect()
+  expect(isInViewPort(paragraphBoundaries)).toBe(true)
+  expect(isInViewPort(stickyHeaderBoundaries)).toBe(true)
+}
 export default meta
-export {StickyPane, NonStickyPane}
+export {StickyPane, NonStickyPane, CustomStickyHeader}