gui/apps/kitchen-sink/e2e/SheetScrollableDrag.test.ts

/**
 * Detox E2E Test for Sheet + ScrollView gesture coordination with RNGH
 *
 * Tests the smooth handoff behavior between sheet dragging and scrollview scrolling:
 * 1. At top snap point + swipe up → scroll content naturally
 * 2. At top snap point + swipe down → drag sheet down (NOT scroll)
 * 3. Scrolled down + drag down → scroll to top THEN hand off to sheet drag
 * 4. Dragging up + hit sheet top → continue into scrolling
 *
 * These tests run on iOS only where RNGH integration matters most.
 *
 * Sync is kept disabled throughout (KeyboardProvider keeps the main thread busy).
 * Taps and swipes both work with sync disabled in this test.
 */

import { by, device, element, expect, waitFor } from 'detox'
import { remountDirectUseCase } from './utils/navigation'
import { safeLaunchApp } from './utils/detox'

// only run on iOS - Android behavior is different
const isAndroid = () => device.getPlatform() === 'android'

// Launch model: launch the native app ONCE with directUseCase, then remount the
// case in-app per test (deep link, no relaunch). Each "Case" test assumes a
// freshly-closed sheet at scrollY=0, which the remount restores. skipEnableSync
// throughout: KeyboardProvider keeps the main thread busy and taps/swipes work
// with sync disabled here.
describe('SheetScrollableDrag - RNGH Integration', () => {
  beforeAll(async () => {
    if (isAndroid()) return
    await safeLaunchApp({
      newInstance: true,
      launchArgs: { directUseCase: 'SheetScrollableDrag' },
    })
    await waitFor(element(by.id('sheet-scrollable-drag-trigger')))
      .toExist()
      .withTimeout(180000)
  })

  beforeEach(async () => {
    if (isAndroid()) return
    await remountDirectUseCase('sheet-scrollable-drag-trigger', {
      skipEnableSync: true,
    })
  })

  it('should show RNGH enabled', async () => {
    if (isAndroid()) return
    await expect(element(by.id('sheet-scrollable-drag-rngh-status'))).toHaveText(
      'RNGH: ✓ enabled'
    )
  })

  it('should open sheet at position 0', async () => {
    if (isAndroid()) return
    await element(by.id('sheet-scrollable-drag-trigger')).tap()
    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
      .toBeVisible()
      .withTimeout(3000)

    // wait for animation
    await new Promise((r) => setTimeout(r, 400))

    // should be at position 0 (top snap)
    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 0'
    )
    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
      'ScrollView Y: 0'
    )
  })

  it('Case 1: swipe DOWN at scrollY=0 should drag sheet, NOT scroll', async () => {
    if (isAndroid()) return

    // open sheet
    await element(by.id('sheet-scrollable-drag-trigger')).tap()
    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
      .toBeVisible()
      .withTimeout(3000)
    await new Promise((r) => setTimeout(r, 400))

    // verify starting state
    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 0'
    )
    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
      'ScrollView Y: 0'
    )

    // Item 0 should be visible
    await expect(element(by.id('sheet-scrollable-drag-item-0'))).toBeVisible()

    // swipe DOWN on scrollview - should drag sheet, NOT scroll
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.5)
    await new Promise((r) => setTimeout(r, 400))

    // EXPECTED: sheet moved to position 1, scroll stayed at 0
    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
    const scrollAttr = await element(
      by.id('sheet-scrollable-drag-scroll-y')
    ).getAttributes()
    console.log(
      'Case 1 result - Position:',
      (posAttr as any).text,
      'Scroll:',
      (scrollAttr as any).text
    )

    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 1'
    )
    // Item 0 should still be visible (no scroll happened)
    await expect(element(by.id('sheet-scrollable-drag-item-0'))).toBeVisible()
  })

  it('Case 2: at top snap, swipe UP should scroll content', async () => {
    if (isAndroid()) return

    // open sheet
    await element(by.id('sheet-scrollable-drag-trigger')).tap()
    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
      .toBeVisible()
      .withTimeout(3000)
    await new Promise((r) => setTimeout(r, 400))

    // verify starting state - at top, scroll at 0
    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 0'
    )
    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
      'ScrollView Y: 0'
    )

    // swipe UP on scrollview - should scroll content
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'slow', 0.5)
    await new Promise((r) => setTimeout(r, 400))

    // EXPECTED: sheet stays at position 0, content scrolled
    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
    const scrollAttr = await element(
      by.id('sheet-scrollable-drag-scroll-y')
    ).getAttributes()
    console.log(
      'Case 2 result - Position:',
      (posAttr as any).text,
      'Scroll:',
      (scrollAttr as any).text
    )

    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 0'
    )
    // scroll should have increased (not checking item visibility due to header content above items)
    const scrollText = (scrollAttr as any).text as string
    const scrollValue = parseInt(scrollText.replace('ScrollView Y: ', ''), 10)
    if (scrollValue < 50) {
      throw new Error(`Expected scroll > 50, got ${scrollValue}`)
    }
  })

  it('Case 3: drag sheet up from position 1 should NOT scroll simultaneously', async () => {
    if (isAndroid()) return

    // open sheet
    await element(by.id('sheet-scrollable-drag-trigger')).tap()
    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
      .toBeVisible()
      .withTimeout(3000)
    await new Promise((r) => setTimeout(r, 400))

    // first drag down to position 1
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.4)
    await new Promise((r) => setTimeout(r, 500))
    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 1'
    )

    // verify scroll is still at 0 after first drag
    const scrollAfterDragDown = await element(
      by.id('sheet-scrollable-drag-scroll-y')
    ).getAttributes()
    console.log('Case 3 - scroll after drag down:', (scrollAfterDragDown as any).text)

    // now drag UP back to position 0
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'fast', 0.6)
    await new Promise((r) => setTimeout(r, 500)) // extra wait for scroll reset

    // EXPECTED: sheet back at position 0, scroll should still be 0 (no simultaneous scroll)
    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
    const scrollAttr = await element(
      by.id('sheet-scrollable-drag-scroll-y')
    ).getAttributes()
    console.log(
      'Case 3 result - Position:',
      (posAttr as any).text,
      'Scroll:',
      (scrollAttr as any).text
    )

    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 0'
    )
    // Note: scroll may have some drift due to async gesture handling
    // The important thing is sheet reached position 0
  })

  it('Case 4: scroll down, then swipe down should scroll back to 0 first', async () => {
    if (isAndroid()) return

    // open sheet
    await element(by.id('sheet-scrollable-drag-trigger')).tap()
    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
      .toBeVisible()
      .withTimeout(3000)
    await new Promise((r) => setTimeout(r, 400))

    // first scroll down (swipe up)
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'slow', 0.5)
    await new Promise((r) => setTimeout(r, 400))

    // verify we scrolled
    await expect(element(by.id('sheet-scrollable-drag-item-0'))).not.toBeVisible()

    const scrollBefore = await element(
      by.id('sheet-scrollable-drag-scroll-y')
    ).getAttributes()
    console.log('Case 4 - scroll before swipe down:', (scrollBefore as any).text)

    // now swipe DOWN - should scroll back first
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.6)
    await new Promise((r) => setTimeout(r, 500))

    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
    const scrollAttr = await element(
      by.id('sheet-scrollable-drag-scroll-y')
    ).getAttributes()
    console.log(
      'Case 4 result - Position:',
      (posAttr as any).text,
      'Scroll:',
      (scrollAttr as any).text
    )

    // sheet should still be at 0 (scroll absorbed the swipe)
    // OR if strong swipe: scroll at 0 and sheet moved
  })

  it('Case 5: HANDOFF - scroll to 0 then drag sheet in one gesture', async () => {
    if (isAndroid()) return

    // open sheet
    await element(by.id('sheet-scrollable-drag-trigger')).tap()
    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
      .toBeVisible()
      .withTimeout(3000)
    await new Promise((r) => setTimeout(r, 400))

    // first scroll down a bit
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'slow', 0.3)
    await new Promise((r) => setTimeout(r, 300))

    const scrollBefore = await element(
      by.id('sheet-scrollable-drag-scroll-y')
    ).getAttributes()
    console.log('Case 5 - scroll position before:', (scrollBefore as any).text)

    // long swipe down - should scroll to 0 then drag sheet
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.8)
    await new Promise((r) => setTimeout(r, 400))

    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
    const scrollAttr = await element(
      by.id('sheet-scrollable-drag-scroll-y')
    ).getAttributes()
    console.log(
      'Case 5 HANDOFF result - Position:',
      (posAttr as any).text,
      'Scroll:',
      (scrollAttr as any).text
    )

    // scroll should have gone to 0, sheet should have moved to position 1
    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
      'ScrollView Y: 0'
    )
    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 1'
    )
  })

  it('Case 6: multiple direction changes without getting stuck', async () => {
    if (isAndroid()) return

    // open sheet
    await element(by.id('sheet-scrollable-drag-trigger')).tap()
    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
      .toBeVisible()
      .withTimeout(3000)
    await new Promise((r) => setTimeout(r, 400))

    // verify starting state
    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 0'
    )

    // 1. swipe down to position 1
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.4)
    await new Promise((r) => setTimeout(r, 500))
    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 1'
    )
    console.log('Direction change test: moved to position 1')

    // 2. swipe up back to position 0
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'slow', 0.5)
    await new Promise((r) => setTimeout(r, 500))
    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 0'
    )
    console.log('Direction change test: back to position 0')

    // 3. now scroll up (content should scroll since at top)
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'slow', 0.3)
    await new Promise((r) => setTimeout(r, 400))
    const scrollAfter = await element(
      by.id('sheet-scrollable-drag-scroll-y')
    ).getAttributes()
    const scrollVal = parseInt(
      (scrollAfter as any).text.replace('ScrollView Y: ', ''),
      10
    )
    console.log('Direction change test: scroll Y after swipe up:', scrollVal)
    if (scrollVal < 30) {
      throw new Error(
        `Expected scroll > 30 after swipe up at position 0, got ${scrollVal}`
      )
    }

    // 4. swipe down - should scroll back first, then drag sheet
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.7)
    await new Promise((r) => setTimeout(r, 400))

    const finalPos = await element(
      by.id('sheet-scrollable-drag-position')
    ).getAttributes()
    const finalScroll = await element(
      by.id('sheet-scrollable-drag-scroll-y')
    ).getAttributes()
    console.log(
      'Direction change test: final state - Position:',
      (finalPos as any).text,
      'Scroll:',
      (finalScroll as any).text
    )

    // should have scrolled to 0 and moved sheet
    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
      'ScrollView Y: 0'
    )
  })

  it('Case 7: drag UP from position 1 - scroll locked during drag, final position 0', async () => {
    if (isAndroid()) return

    // NOTE: This test documents a known trade-off in the RNGH implementation.
    // During drag from position 1, the scroll gesture still fires (enabling handoff in Case 9),
    // but scroll is LOCKED to position 0 via scrollTo. The final scroll position is 0.
    // Some scroll events may fire during drag (maxScrollY > 0), but they're immediately reset.

    // open sheet
    await element(by.id('sheet-scrollable-drag-trigger')).tap()
    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
      .toBeVisible()
      .withTimeout(3000)
    await new Promise((r) => setTimeout(r, 400))

    // first drag down to position 1
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.4)
    await new Promise((r) => setTimeout(r, 500))
    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 1'
    )

    // verify scroll is at 0
    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
      'ScrollView Y: 0'
    )

    const countBeforeAttr = await element(
      by.id('sheet-scrollable-drag-scroll-count')
    ).getAttributes()
    const countBefore = parseInt(
      ((countBeforeAttr as any).text as string).replace('Scroll events: ', ''),
      10
    )

    // drag UP - sheet moves to position 0
    // scroll events may fire but are locked to 0
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'fast', 0.5)
    await new Promise((r) => setTimeout(r, 500))

    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
    const scrollAttr = await element(
      by.id('sheet-scrollable-drag-scroll-y')
    ).getAttributes()
    const maxScrollAttr = await element(
      by.id('sheet-scrollable-drag-max-scroll-y')
    ).getAttributes()
    const countAfterAttr = await element(
      by.id('sheet-scrollable-drag-scroll-count')
    ).getAttributes()
    const countAfter = parseInt(
      ((countAfterAttr as any).text as string).replace('Scroll events: ', ''),
      10
    )
    const lockedScrollEvents = countAfter - countBefore
    console.log(
      'Case 7 result - Position:',
      (posAttr as any).text,
      'Scroll:',
      (scrollAttr as any).text,
      'MaxScroll:',
      (maxScrollAttr as any).text,
      'LockedScrollEvents:',
      lockedScrollEvents
    )

    // sheet should be at position 0
    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 0'
    )
    // FINAL scroll position should be 0 (locked during drag)
    // NOTE: maxScrollY may be > 0 due to scroll events firing before lock kicks in
    // This is acceptable trade-off to enable handoff (Case 9)
    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
      'ScrollView Y: 0'
    )
    if (lockedScrollEvents > 3) {
      throw new Error(
        `Expected locked drag to emit <= 3 scroll events, got ${lockedScrollEvents}`
      )
    }
  })

  it('Case 9: HANDOFF - drag UP from position 1, continue into scroll in one gesture', async () => {
    if (isAndroid()) return

    // This tests the critical handoff: sheet at position 1, single long drag UP
    // should move sheet to top THEN scroll content

    // open sheet
    await element(by.id('sheet-scrollable-drag-trigger')).tap()
    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
      .toBeVisible()
      .withTimeout(3000)
    await new Promise((r) => setTimeout(r, 400))

    // first drag down to position 1
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('down', 'slow', 0.4)
    await new Promise((r) => setTimeout(r, 500))
    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 1'
    )
    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
      'ScrollView Y: 0'
    )

    // CRITICAL: one LONG swipe UP - should:
    // 1. Move sheet from position 1 to position 0
    // 2. Continue into scrolling without lifting finger
    // Using 'slow' speed to give more time for handoff detection
    await element(by.id('sheet-scrollable-drag-scrollview')).swipe('up', 'slow', 0.9)
    // shorter wait - maybe scroll resets over time?
    await new Promise((r) => setTimeout(r, 100))

    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
    const scrollAttr = await element(
      by.id('sheet-scrollable-drag-scroll-y')
    ).getAttributes()
    const maxScrollAttr = await element(
      by.id('sheet-scrollable-drag-max-scroll-y')
    ).getAttributes()
    console.log(
      'Case 9 HANDOFF UP result - Position:',
      (posAttr as any).text,
      'Scroll:',
      (scrollAttr as any).text,
      'MaxScroll:',
      (maxScrollAttr as any).text
    )

    // sheet should be at position 0
    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 0'
    )
    // AND scroll should have happened (handoff successful)
    // NOTE: Check maxScrollY instead of current scrollY because iOS scroll deceleration
    // can cause the scroll to bounce back after gesture ends
    const maxScrollText = (maxScrollAttr as any).text as string
    const maxScrollValue = parseInt(maxScrollText.replace('Max scroll Y: ', ''), 10)
    if (maxScrollValue < 50) {
      throw new Error(
        `Expected max scroll > 50 after handoff, got ${maxScrollValue}. Handoff from sheet to scroll failed!`
      )
    }
  })

  it('Case 8: rubber band at top - dragging up keeps sheet at top without scrolling', async () => {
    if (isAndroid()) return

    // NOTE: This test verifies the OUTCOME of rubber band behavior
    // (sheet stays at position 0, no scroll happens)
    // The actual visual rubber band effect (sheet moves past top then springs back)
    // requires video/screenshot analysis during the gesture - documented in plans/native-gestures.md

    // open sheet
    await element(by.id('sheet-scrollable-drag-trigger')).tap()
    await waitFor(element(by.id('sheet-scrollable-drag-frame')))
      .toBeVisible()
      .withTimeout(3000)
    await new Promise((r) => setTimeout(r, 400))

    // verify at position 0 (top snap)
    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 0'
    )
    await expect(element(by.id('sheet-scrollable-drag-scroll-y'))).toHaveText(
      'ScrollView Y: 0'
    )

    // drag UP on handle - should NOT scroll content
    // the resist() function applies rubber band effect visually
    // the sheet should spring back to top position
    await element(by.id('sheet-scrollable-drag-handle')).swipe('up', 'fast', 0.5)
    await new Promise((r) => setTimeout(r, 400)) // wait for spring animation

    const posAttr = await element(by.id('sheet-scrollable-drag-position')).getAttributes()
    const scrollAttr = await element(
      by.id('sheet-scrollable-drag-max-scroll-y')
    ).getAttributes()
    console.log(
      'Case 8 result - Position:',
      (posAttr as any).text,
      'MaxScroll:',
      (scrollAttr as any).text
    )

    // sheet should still be at position 0 after rubber band release
    await expect(element(by.id('sheet-scrollable-drag-position'))).toHaveText(
      'Sheet position: 0'
    )
    // frame should still be visible (not dismissed)
    await expect(element(by.id('sheet-scrollable-drag-frame'))).toBeVisible()
    // scroll should NOT have happened during drag
    await expect(element(by.id('sheet-scrollable-drag-max-scroll-y'))).toHaveText(
      'Max scroll Y: 0'
    )
  })
})