@hanzogui/kitchen-sink 3.0.5

package/e2e/SafeArea.test.ts

@@ -0,0 +1,57 @@
+/**
+ * Test for $safeAreaTop, $safeAreaBottom, $safeAreaLeft, $safeAreaRight tokens
+ * Verifies that safe area tokens resolve and render correctly on native
+ */
+
+import { by, device, element, expect } from 'detox'
+import { navigateToTestCase } from './utils/navigation'
+
+// SafeAreaCase component is not implemented yet (entirely commented out)
+// TODO: enable once SafeAreaCase is implemented
+describe.skip('SafeArea', () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true })
+  })
+
+  beforeEach(async () => {
+    await device.reloadReactNative()
+    await navigateToTestCase('SafeAreaCase', 'safe-area-case')
+  })
+
+  it('should navigate to SafeAreaCase test case', async () => {
+    await expect(element(by.id('safe-area-case'))).toBeVisible()
+  })
+
+  it('should render paddingTop with $safeAreaTop token', async () => {
+    await expect(element(by.id('token-padding-top'))).toBeVisible()
+  })
+
+  it('should render paddingBottom with $safeAreaBottom token', async () => {
+    await expect(element(by.id('token-padding-bottom'))).toBeVisible()
+  })
+
+  it('should render marginLeft with $safeAreaLeft token', async () => {
+    await expect(element(by.id('token-margin-left'))).toBeVisible()
+  })
+
+  it('should render marginRight with $safeAreaRight token', async () => {
+    await expect(element(by.id('token-margin-right'))).toBeVisible()
+  })
+
+  it('should render combined safe area tokens', async () => {
+    await expect(element(by.id('token-combined'))).toBeVisible()
+  })
+
+  it('should display safe area status', async () => {
+    await expect(element(by.id('safe-area-status'))).toBeVisible()
+  })
+
+  it('should display initial insets', async () => {
+    await expect(element(by.id('initial-insets'))).toBeVisible()
+  })
+
+  it('should display visual safe area bars', async () => {
+    await expect(element(by.id('safe-area-top-bar'))).toBeVisible()
+    await expect(element(by.id('safe-area-bottom-bar'))).toBeVisible()
+  })
+})

package/e2e/SelectAndroidOnPress.test.ts

@@ -0,0 +1,181 @@
+/**
+ * Detox E2E Test for issue #3436: Select onValueChange not firing on Android physical devices
+ * https://github.com/hanzoai/gui/issues/3436
+ *
+ * The bug: On physical Android devices, tapping a Select.Item does not trigger onValueChange.
+ * Console logging shows onPressIn and onPressOut fire, but onPress never does.
+ *
+ * This test verifies that:
+ * 1. The Select trigger can be tapped to open the sheet
+ * 2. Tapping an item closes the sheet AND updates the selected value
+ * 3. The change count increments (proving onValueChange was called)
+ *
+ * Note: This test is Android-specific - skip on iOS
+ */
+
+import { by, device, element, expect, waitFor } from 'detox'
+import { navigateToTestCase } from './utils/navigation'
+
+// helper to skip tests on iOS
+const skipOnIOS = () => {
+  if (device.getPlatform() === 'ios') {
+    return true
+  }
+  return false
+}
+
+describe('SelectAndroidOnPress (#3436)', () => {
+  beforeAll(async () => {
+    if (skipOnIOS()) return
+    await device.launchApp({ newInstance: true })
+  })
+
+  beforeEach(async () => {
+    if (skipOnIOS()) return
+    await device.reloadReactNative()
+    await navigateToTestCase('SelectAndroidOnPress', 'select-android-trigger')
+  })
+
+  it('should render the test case screen', async () => {
+    if (skipOnIOS()) return
+    await expect(element(by.id('select-android-title'))).toBeVisible()
+    await expect(element(by.id('select-android-trigger'))).toBeVisible()
+  })
+
+  it('should open the Select sheet when trigger is tapped', async () => {
+    if (skipOnIOS()) return
+    // tap the select trigger
+    await element(by.id('select-android-trigger')).tap()
+
+    // wait for sheet to open and items to be visible
+    await waitFor(element(by.id('select-android-item-apple')))
+      .toBeVisible()
+      .withTimeout(5000)
+
+    // verify other items are also visible
+    await expect(element(by.id('select-android-item-pear'))).toBeVisible()
+  })
+
+  it('should update value when item is tapped - THIS IS THE BUG TEST', async () => {
+    if (skipOnIOS()) return
+    // verify initial state: no value selected, change count is 0
+    await expect(element(by.id('select-android-selected-value'))).toHaveText(
+      'Selected value: (none)'
+    )
+    await expect(element(by.id('select-android-change-count'))).toHaveText(
+      'Change count: 0'
+    )
+
+    // open the select
+    await element(by.id('select-android-trigger')).tap()
+
+    // wait for items to appear
+    await waitFor(element(by.id('select-android-item-apple')))
+      .toBeVisible()
+      .withTimeout(5000)
+
+    // tap an item - THIS IS WHERE THE BUG MANIFESTS
+    // on physical Android devices, this tap fires onPressIn/onPressOut but NOT onPress
+    await element(by.id('select-android-item-pear')).tap()
+
+    // wait for the sheet to close
+    await waitFor(element(by.id('select-android-item-apple')))
+      .not.toBeVisible()
+      .withTimeout(5000)
+
+    // THE KEY ASSERTIONS - these fail on physical Android due to the bug:
+    // the value should have been updated
+    await expect(element(by.id('select-android-selected-value'))).toHaveText(
+      'Selected value: pear'
+    )
+    // the change count should have incremented (proving onValueChange was called)
+    await expect(element(by.id('select-android-change-count'))).toHaveText(
+      'Change count: 1'
+    )
+  })
+
+  it('should handle tap with slight movement (simulates physical device jitter)', async () => {
+    if (skipOnIOS()) return
+    // This test simulates the physical device behavior where slight finger
+    // movement during a tap can cause the responder to be stolen by the Sheet's ScrollView
+    //
+    // On physical devices, fingers are never perfectly still during a tap.
+    // This small movement can trigger onMoveShouldSetResponder on the parent ScrollView,
+    // which steals the responder and prevents onPress from firing on the child.
+    await expect(element(by.id('select-android-change-count'))).toHaveText(
+      'Change count: 0'
+    )
+
+    // open the select
+    await element(by.id('select-android-trigger')).tap()
+
+    await waitFor(element(by.id('select-android-item-peach')))
+      .toBeVisible()
+      .withTimeout(5000)
+
+    // simulate a "jiggly" tap by using longPressAndDrag with small vertical movement
+    // this mimics what physical devices do when fingers aren't perfectly still
+    // the small vertical movement (0.01 = ~1% of element height) should NOT prevent selection
+    // but before the fix, it would cause the ScrollView to steal responder
+    await element(by.id('select-android-item-peach')).longPressAndDrag(
+      150, // duration in ms
+      0.5, // start at center X
+      0.5, // start at center Y
+      element(by.id('select-android-item-peach')), // stay on same element
+      0.5, // end at same X
+      0.55, // end slightly lower (5% vertical movement, simulating finger jitter)
+      'slow', // slow speed to simulate real finger
+      50 // short hold
+    )
+
+    // wait for potential sheet close (give it time)
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+
+    // verify selection worked despite the slight movement
+    // if the fix works, peach should be selected
+    // if the fix doesn't work, the responder was stolen and nothing was selected
+    await expect(element(by.id('select-android-selected-value'))).toHaveText(
+      'Selected value: peach'
+    )
+    await expect(element(by.id('select-android-change-count'))).toHaveText(
+      'Change count: 1'
+    )
+  })
+
+  it('should allow multiple selections', async () => {
+    if (skipOnIOS()) return
+    // first selection
+    await element(by.id('select-android-trigger')).tap()
+    await waitFor(element(by.id('select-android-item-apple')))
+      .toBeVisible()
+      .withTimeout(5000)
+    await element(by.id('select-android-item-apple')).tap()
+    await waitFor(element(by.id('select-android-item-apple')))
+      .not.toBeVisible()
+      .withTimeout(5000)
+
+    await expect(element(by.id('select-android-selected-value'))).toHaveText(
+      'Selected value: apple'
+    )
+    await expect(element(by.id('select-android-change-count'))).toHaveText(
+      'Change count: 1'
+    )
+
+    // second selection - change to blackberry
+    await element(by.id('select-android-trigger')).tap()
+    await waitFor(element(by.id('select-android-item-blackberry')))
+      .toBeVisible()
+      .withTimeout(5000)
+    await element(by.id('select-android-item-blackberry')).tap()
+    await waitFor(element(by.id('select-android-item-blackberry')))
+      .not.toBeVisible()
+      .withTimeout(5000)
+
+    await expect(element(by.id('select-android-selected-value'))).toHaveText(
+      'Selected value: blackberry'
+    )
+    await expect(element(by.id('select-android-change-count'))).toHaveText(
+      'Change count: 2'
+    )
+  })
+})

package/e2e/SelectRemount.test.ts

@@ -0,0 +1,137 @@
+/**
+ * Test for issue #1859: Select not working when mounted, unmounted, and mounted again
+ * https://github.com/hanzoai/gui/issues/1859
+ *
+ * Using Detox for more reliable cross-platform native testing.
+ */
+
+import { by, device, element, expect, waitFor } from 'detox'
+import { navigateToTestCase } from './utils/navigation'
+
+describe('SelectRemount', () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true })
+  })
+
+  beforeEach(async () => {
+    // Reload the app to start fresh on home screen
+    await device.reloadReactNative()
+    // Navigate to SelectRemount test case from home screen
+    await navigateToTestCase('SelectRemount', 'remount-button')
+  })
+
+  it('should navigate to SelectRemount test case', async () => {
+    // Verify we're on the right screen by checking for the remount button
+    await expect(element(by.id('remount-button'))).toBeVisible()
+  })
+
+  it('should open Select on first mount', async () => {
+    // Disable synchronization during sheet animations - spring animations can be slow to settle
+    await device.disableSynchronization()
+
+    try {
+      // Tap the select trigger
+      await element(by.id('select-remount-test-trigger')).tap()
+
+      // Wait for Select options to appear with timeout
+      await waitFor(element(by.id('select-remount-test-option-apple')))
+        .toBeVisible()
+        .withTimeout(10000)
+
+      // Close Select by pressing back on Android or tapping outside on iOS
+      if (device.getPlatform() === 'android') {
+        await device.pressBack()
+      } else {
+        await device.tap({ x: 200, y: 100 })
+      }
+
+      // Wait for sheet to close
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+    } finally {
+      // Re-enable synchronization
+      await device.enableSynchronization()
+    }
+  })
+
+  it('should open Select after unmount/remount cycle', async () => {
+    // Disable synchronization during sheet animations - spring animations can be slow to settle
+    await device.disableSynchronization()
+
+    try {
+      // Tap remount button to unmount and remount the Select
+      await element(by.id('remount-button')).tap()
+
+      // Wait a moment for remount to complete
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      // Try to open the Select again - THIS IS THE KEY TEST for #1859
+      await element(by.id('select-remount-test-trigger')).tap()
+
+      // If the bug exists, the Select won't open. With the fix, options should be visible
+      await waitFor(element(by.id('select-remount-test-option-apple')))
+        .toBeVisible()
+        .withTimeout(10000)
+
+      // Close Select
+      if (device.getPlatform() === 'android') {
+        await device.pressBack()
+      } else {
+        await device.tap({ x: 200, y: 100 })
+      }
+
+      // Wait for sheet to close
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+    } finally {
+      // Re-enable synchronization
+      await device.enableSynchronization()
+    }
+  })
+
+  it('should work with multiple Selects after remount', async () => {
+    // Verify we're on the SelectRemount screen
+    await expect(element(by.id('remount-button'))).toBeVisible()
+
+    // Disable synchronization during sheet animations - spring animations can be slow to settle
+    await device.disableSynchronization()
+
+    try {
+      // Tap remount to reset state
+      await element(by.id('remount-button')).tap()
+
+      // Wait for remount to complete and first Select to be ready
+      await waitFor(element(by.id('select-remount-test-trigger')))
+        .toBeVisible()
+        .withTimeout(8000)
+
+      // Small delay to ensure element is interactive after becoming visible
+      await new Promise((resolve) => setTimeout(resolve, 500))
+
+      // Test first Select
+      await element(by.id('select-remount-test-trigger')).tap()
+
+      // Wait for Select sheet/content to animate in
+      await waitFor(element(by.id('select-remount-test-option-apple')))
+        .toBeVisible()
+        .withTimeout(10000)
+
+      // Select an option to close the Select instead of pressing back
+      await element(by.id('select-remount-test-option-apple')).tap()
+
+      // wait for first sheet to fully close before interacting with second select
+      await waitFor(element(by.id('select-remount-test-2-trigger')))
+        .toBeVisible()
+        .withTimeout(15000)
+
+      // ensure element is interactive after sheet animation settles
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      await element(by.id('select-remount-test-2-trigger')).tap()
+      await waitFor(element(by.id('select-remount-test-2-option-apple')))
+        .toBeVisible()
+        .withTimeout(10000)
+    } finally {
+      // Re-enable synchronization
+      await device.enableSynchronization()
+    }
+  })
+})