ff, tests and touchable fix

Author: olerichter00

src/app/Components/ArtworkRail/ArtworkRailCard.tsx

@@ -92,30 +92,30 @@ export const ArtworkRailCard: React.FC<ArtworkRailCardProps> = ({
         contextScreenOwnerSlug={contextScreenOwnerSlug}
         contextScreenOwnerType={contextScreenOwnerType}
       >
-        <ContextMenuArtwork
-          contextModule={contextModule}
-          contextScreenOwnerType={contextScreenOwnerType}
-          onCreateAlertActionPress={() => setShowCreateArtworkAlertModal(true)}
-          onSupressArtwork={supressArtwork}
-          artwork={artwork}
-          artworkDisplayProps={{
-            dark,
-            showPartnerName,
-            hideArtistName,
-            lotLabel,
-            SalePriceComponent,
-          }}
-        >
-          <Box pr={2}>
-            <RouterLink
-              to={href || artwork.href}
-              underlayColor={backgroundColor}
-              activeOpacity={0.8}
-              onPress={onPress}
-              // To prevent navigation when opening the long-press context menu, `onLongPress` & `delayLongPress` need to be set (https://github.com/mpiannucci/react-native-context-menu-view/issues/60)
-              onLongPress={() => {}}
-              delayLongPress={400}
-              testID={testID}
+        <Box pr={2}>
+          <RouterLink
+            to={href || artwork.href}
+            underlayColor={backgroundColor}
+            activeOpacity={0.8}
+            onPress={onPress}
+            // To prevent navigation when opening the long-press context menu, `onLongPress` & `delayLongPress` need to be set (https://github.com/mpiannucci/react-native-context-menu-view/issues/60)
+            onLongPress={() => {}}
+            delayLongPress={400}
+            testID={testID}
+          >
+            <ContextMenuArtwork
+              contextModule={contextModule}
+              contextScreenOwnerType={contextScreenOwnerType}
+              onCreateAlertActionPress={() => setShowCreateArtworkAlertModal(true)}
+              onSupressArtwork={supressArtwork}
+              artwork={artwork}
+              artworkDisplayProps={{
+                dark,
+                showPartnerName,
+                hideArtistName,
+                lotLabel,
+                SalePriceComponent,
+              }}
             >
               <Flex
                 height={
@@ -161,9 +161,9 @@ export const ArtworkRailCard: React.FC<ArtworkRailCardProps> = ({
                   contextScreenOwnerType={contextScreenOwnerType}
                 />
               </Flex>
-            </RouterLink>
-          </Box>
-        </ContextMenuArtwork>
+            </ContextMenuArtwork>
+          </RouterLink>
+        </Box>
 
         <CreateArtworkAlertModal
           artwork={artwork}

src/app/Components/ContextMenu/ContextMenuArtwork.tsx

@@ -16,7 +16,7 @@ import { isEmpty } from "lodash"
 import { useState } from "react"
 import { InteractionManager, Platform } from "react-native"
 import ContextMenu, { ContextMenuAction, ContextMenuProps } from "react-native-context-menu-view"
-import { TouchableWithoutFeedback } from "react-native-gesture-handler"
+import { TouchableHighlight } from "react-native-gesture-handler"
 import { HapticFeedbackTypes, trigger } from "react-native-haptic-feedback"
 import { graphql, useFragment } from "react-relay"
 import { useTracking } from "react-tracking"
@@ -56,7 +56,8 @@ export const ContextMenuArtwork: React.FC<ContextMenuArtworkProps> = ({
 
   const { trackEvent } = useTracking()
   const { showShareSheet } = useShareSheet()
-  const enableContextMenu = useFeatureFlag("AREnableArtworkCardContextMenuIOS")
+  const enableContextMenuIOS = useFeatureFlag("AREnableArtworkCardContextMenuIOS")
+  const enableContextMenuAndroid = useFeatureFlag("AREnableArtworkCardContextMenuAndroid")
   const { submitMutation: dislikeArtworkMutation } = useDislikeArtwork()
   const isIOS = Platform.OS === "ios"
   const color = useColor()
@@ -223,25 +224,26 @@ export const ContextMenuArtwork: React.FC<ContextMenuArtworkProps> = ({
     )
   }
 
-  const [modalVisible, setModalVisible] = useState(false)
+  const [androidVisible, setAndroidVisible] = useState(false)
 
   const handleAndroidLongPress = () => {
-    setModalVisible(true)
+    setAndroidVisible(true)
   }
 
-  if (!enableContextMenu) {
-    return <>{children}</>
-  }
-
-  // TODO: Remove the `true ||` before merging!
-  if (true || !isIOS) {
+  // Fall back to a bottom sheet on Android
+  if (!isIOS && enableContextMenuAndroid) {
     return (
       <>
-        <TouchableWithoutFeedback onLongPress={handleAndroidLongPress}>
+        <TouchableHighlight
+          underlayColor={color("white100")}
+          activeOpacity={0.8}
+          onLongPress={handleAndroidLongPress}
+          onPress={undefined}
+        >
           {children}
-        </TouchableWithoutFeedback>
+        </TouchableHighlight>
 
-        <AutoHeightBottomSheet visible={modalVisible} onDismiss={() => setModalVisible(false)}>
+        <AutoHeightBottomSheet visible={androidVisible} onDismiss={() => setAndroidVisible(false)}>
           <Flex pb={4} pt={1} mx={2} height="100%">
             <Flex ml={-1} mb={1}>
               {artworkPreviewComponent(artwork)}
@@ -252,8 +254,8 @@ export const ContextMenuArtwork: React.FC<ContextMenuArtworkProps> = ({
                 return (
                   <Touchable
                     key={index}
-                    onPress={async () => {
-                      setModalVisible(false)
+                    onPress={() => {
+                      setAndroidVisible(false)
 
                       action.onPress?.()
                     }}
@@ -271,6 +273,10 @@ export const ContextMenuArtwork: React.FC<ContextMenuArtworkProps> = ({
     )
   }
 
+  if (!enableContextMenuIOS) {
+    return <>{children}</>
+  }
+
   return (
     <ContextMenu
       actions={contextActions}
@@ -279,7 +285,6 @@ export const ContextMenuArtwork: React.FC<ContextMenuArtworkProps> = ({
       preview={artworkPreviewComponent(artwork)}
       hideShadows={true}
       previewBackgroundColor={!!dark ? color("black100") : color("white100")}
-      disabled={!enableContextMenu}
     >
       {children}
     </ContextMenu>

src/app/Components/ContextMenu/__tests__/ContextMenuArtwork.tests.tsx

@@ -0,0 +1,69 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react-native"
+import { ArtworkRailCardTestsQuery } from "__generated__/ArtworkRailCardTestsQuery.graphql"
+import { ArtworkRailCard } from "app/Components/ArtworkRail/ArtworkRailCard"
+import { __globalStoreTestUtils__ } from "app/store/GlobalStore"
+import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
+import { Platform } from "react-native"
+import { graphql } from "react-relay"
+
+describe("ContextMenuArtwork", () => {
+  const { renderWithRelay } = setupTestWrapper<ArtworkRailCardTestsQuery>({
+    Component: (props) => {
+      if (!props.artwork) return null
+
+      return <ArtworkRailCard {...props} artwork={props.artwork} testID="artwork-card" />
+    },
+    query: graphql`
+      query ContextMenuArtworkTestsQuery @relay_test_operation {
+        artwork(id: "the-artwork") {
+          ...ArtworkRailCard_artwork
+        }
+      }
+    `,
+  })
+
+  describe("on Android", () => {
+    beforeEach(() => {
+      Platform.OS = "android"
+
+      __globalStoreTestUtils__?.injectFeatureFlags({
+        AREnableArtworkCardContextMenuAndroid: true,
+      })
+    })
+
+    it("shows context menu on long press", async () => {
+      renderWithRelay()
+
+      const artworkCard = screen.getByTestId("artwork-card")
+
+      fireEvent(artworkCard, "onLongPress")
+
+      await waitFor(() => {
+        expect(screen.getByText("Create alert")).toBeOnTheScreen()
+      })
+      await waitFor(() => {
+        expect(screen.getByText("Share")).toBeOnTheScreen()
+      })
+    })
+
+    describe("when feature flag is disabled", () => {
+      beforeEach(() => {
+        __globalStoreTestUtils__?.injectFeatureFlags({
+          AREnableArtworkCardContextMenuAndroid: false,
+        })
+      })
+
+      it("does NOT show context menu on long press", async () => {
+        renderWithRelay()
+
+        const artworkCard = screen.getByTestId("artwork-card")
+
+        fireEvent(artworkCard, "onLongPress")
+
+        await waitFor(() => {
+          expect(screen.queryByText("Create alert")).not.toBeOnTheScreen()
+        })
+      })
+    })
+  })
+})

src/app/store/config/features.ts

@@ -252,6 +252,12 @@ export const features = {
     showInDevMenu: true,
     echoFlagKey: "AREnableArtworkCardContextMenuIOS",
   },
+  AREnableArtworkCardContextMenuAndroid: {
+    description: "Enable long press menu on artwork cards for Android",
+    readyForRelease: true,
+    showInDevMenu: true,
+    echoFlagKey: "AREnableArtworkCardContextMenuAndroid",
+  },
 } satisfies { [key: string]: FeatureDescriptor }
 
 export interface DevToggleDescriptor {