Merge pull request #11517 from artsy/janaehijaz/1106

feat(DIA-1106): updating 'back' and 'exit' icons for infinite discovery
artsy · Feb 7, 2025 · f1f8336 · f1f8336
2 parents dd9b616 + e9e4d6c
commit f1f8336
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git a/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx b/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx
@@ -1,4 +1,4 @@
-import { Flex, Screen, Spinner, Text, Touchable } from "@artsy/palette-mobile"
+import { ArrowBackIcon, CloseIcon, Flex, Screen, Spinner, Touchable } from "@artsy/palette-mobile"
 import { FancySwiper } from "app/Components/FancySwiper/FancySwiper"
 import { useToast } from "app/Components/Toast/toastHook"
 import { InfiniteDiscoveryArtworkCard } from "app/Scenes/InfiniteDiscovery/Components/InfiniteDiscoveryArtworkCard"
@@ -103,14 +103,14 @@ export const InfiniteDiscovery: React.FC<InfiniteDiscoveryProps> = ({
           <Screen.Header
             title="Discovery"
             leftElements={
-              <Touchable onPress={handleBackPressed}>
-                <Text variant="xs">Back</Text>
+              <Touchable onPress={handleBackPressed} testID="back-icon">
+                <ArrowBackIcon />
               </Touchable>
             }
             hideLeftElements={index === 0}
             rightElements={
-              <Touchable onPress={handleExitPressed}>
-                <Text variant="xs">Exit</Text>
+              <Touchable onPress={handleExitPressed} testID="close-icon">
+                <CloseIcon fill="black100" />
               </Touchable>
             }
           />

diff --git a/src/app/Scenes/InfiniteDiscovery/__tests__/InfiniteDiscovery.tests.tsx b/src/app/Scenes/InfiniteDiscovery/__tests__/InfiniteDiscovery.tests.tsx
@@ -22,36 +22,36 @@ xdescribe("InfiniteDiscovery", () => {
     jest.clearAllMocks()
   })
 
-  it("hides the back button if the current artwork is on the first artwork", async () => {
+  it("hides the back icon if the current artwork is on the first artwork", async () => {
     await renderAndFetchFirstBatch(mockFetchQuery)
 
-    expect(screen.queryByText("Back")).not.toBeOnTheScreen()
+    expect(screen.queryByTestId("back-icon")).not.toBeOnTheScreen()
   })
 
-  it("shows the back button if the current artwork is not the first artwork", async () => {
+  it("shows the back icon if the current artwork is not the first artwork", async () => {
     await renderAndFetchFirstBatch(mockFetchQuery)
 
     swipeLeft()
 
-    await screen.findByText("Back")
+    await screen.findByTestId("back-icon")
   })
 
-  it("returns to the previous artwork when the back button is pressed", async () => {
+  it("returns to the previous artwork when the back icon is pressed", async () => {
     await renderAndFetchFirstBatch(mockFetchQuery)
 
-    expect(screen.queryByText("Back")).not.toBeOnTheScreen()
+    expect(screen.queryByTestId("back-icon")).not.toBeOnTheScreen()
     swipeLeft()
 
-    await screen.findByText("Back")
+    await screen.findByTestId("back-icon")
 
-    fireEvent.press(screen.getByText("Back"))
-    expect(screen.queryByText("Back")).not.toBeOnTheScreen()
+    fireEvent.press(screen.getByTestId("back-icon"))
+    expect(screen.queryByTestId("back-icon")).not.toBeOnTheScreen()
   })
 
-  it("navigates to home view when the exit button is pressed", async () => {
+  it("navigates to home view when the close icon is pressed", async () => {
     await renderAndFetchFirstBatch(mockFetchQuery)
 
-    fireEvent.press(screen.getByText("Exit"))
+    fireEvent.press(screen.getByTestId("close-icon"))
     expect(goBack).toHaveBeenCalledTimes(1)
   })
 })