test(parallax): pin #2052 sticky-layer-in-component regression (#2530)

Author: joshuaellis

tests/e2e/parallax.spec.tsx

@@ -53,6 +53,35 @@ function BaseDemo({ horizontal = false }: DemoProps) {
   )
 }
 
+// Sticky layer wrapped in a component rather than passed as a direct child of
+// Parallax — the scenario reported in #2052.
+function WrappedSticky() {
+  return (
+    <ParallaxLayer sticky={{ start: 1, end: 2 }} data-testid="sticky-layer">
+      <div>Sticky</div>
+    </ParallaxLayer>
+  )
+}
+
+function WrappedStickyDemo() {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: WIDTH,
+        height: HEIGHT,
+      }}
+    >
+      <Parallax pages={3} data-testid="container">
+        <ParallaxLayer offset={1} speed={1} data-testid="default-layer" />
+        <WrappedSticky />
+      </Parallax>
+    </div>
+  )
+}
+
 function transformOf(testId: string): string {
   const el = page.getByTestId(testId).element() as HTMLElement
   return el.style.transform
@@ -134,6 +163,28 @@ describe('Parallax - vertical', () => {
   })
 })
 
+describe('Parallax - sticky layer wrapped in a component (#2052)', () => {
+  beforeEach(async () => {
+    await page.viewport(WIDTH, HEIGHT)
+    render(<WrappedStickyDemo />)
+  })
+
+  // Skipped: documents a known, unfixed limitation. Parallax decides DOM
+  // placement by reading `child.props.sticky` while walking its children with
+  // React.Children.map, which traverses the static element tree and never
+  // renders components — so a wrapped layer's `sticky` prop is invisible and it
+  // lands inside the scrolling content, scrolling away between start and end.
+  // A real fix moves the placement decision into the layer (e.g. createPortal).
+  // Unskip when #2052 is fixed.
+  it.skip('keeps the sticky layer a direct child of the container, not the scrolling content', async () => {
+    const sticky = page.getByTestId('sticky-layer').element() as HTMLElement
+    // A sticky layer must render as a sibling of the scrolling content div
+    // (i.e. a direct child of the container), otherwise it scrolls away and
+    // vanishes between its start and end offsets.
+    expect(sticky.parentElement?.dataset.testid).toBe('container')
+  })
+})
+
 describe('Parallax - horizontal', () => {
   beforeEach(async () => {
     await page.viewport(WIDTH, HEIGHT)