From 8c5e288dbc39ffb7ebee770a7106d441e9da5f24 Mon Sep 17 00:00:00 2001
From: Mounir Dhahri <soussouheros@gmail.com>
Date: Sat, 7 Sep 2024 15:11:55 +0200
Subject: [PATCH] feat: add ArtworksRailHomeViewSection tracking (#10706)

---
 .../ArtworksRailHomeViewSection.tests.tsx     | 98 +++++++++++++++++++
 .../Sections/ArtworksRailHomeViewSection.tsx  | 22 ++++-
 2 files changed, 118 insertions(+), 2 deletions(-)
 create mode 100644 src/app/Scenes/HomeView/Sections/ArtworksRailHomeViewSection.tests.tsx

diff --git a/src/app/Scenes/HomeView/Sections/ArtworksRailHomeViewSection.tests.tsx b/src/app/Scenes/HomeView/Sections/ArtworksRailHomeViewSection.tests.tsx
new file mode 100644
index 00000000000..ad240e4246f
--- /dev/null
+++ b/src/app/Scenes/HomeView/Sections/ArtworksRailHomeViewSection.tests.tsx
@@ -0,0 +1,98 @@
+import { fireEvent, screen } from "@testing-library/react-native"
+import { ArtworksRailHomeViewSectionTestsQuery } from "__generated__/ArtworksRailHomeViewSectionTestsQuery.graphql"
+import { ArtworksRailHomeViewSection } from "app/Scenes/HomeView/Sections/ArtworksRailHomeViewSection"
+import { navigate } from "app/system/navigation/navigate"
+import { mockTrackEvent } from "app/utils/tests/globallyMockedStuff"
+import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
+import { graphql } from "react-relay"
+
+describe("ArtworksRailHomeViewSection", () => {
+  const { renderWithRelay } = setupTestWrapper<ArtworksRailHomeViewSectionTestsQuery>({
+    Component: (props) => {
+      if (!props.homeView.section) {
+        return null
+      }
+      return <ArtworksRailHomeViewSection section={props.homeView.section} />
+    },
+    query: graphql`
+      query ArtworksRailHomeViewSectionTestsQuery @relay_test_operation {
+        homeView {
+          section(id: "home-view-section-new-works-for-you") {
+            ... on ArtworksRailHomeViewSection {
+              ...ArtworksRailHomeViewSection_section
+            }
+          }
+        }
+      }
+    `,
+  })
+
+  it("renders nothing when no artworks", () => {
+    const { toJSON } = renderWithRelay({
+      HomeViewComponent: () => ({
+        title: "New Works for You",
+      }),
+      ArtworkConnection: () => ({
+        totalCount: 0,
+        edges: [],
+      }),
+    })
+
+    expect(toJSON()).toBeNull()
+  })
+
+  it("renders a list of artworks", () => {
+    renderWithRelay({
+      ArtworksRailHomeViewSection: () => ({
+        internalID: "home-view-section-new-works-for-you",
+        component: {
+          title: "New Works for You",
+        },
+        artworksConnection: {
+          edges: [
+            {
+              node: {
+                internalID: "artwork-1-id",
+                slug: "artwork-1-slug",
+                title: "Artwork 1",
+                href: "/artwork-1-href",
+              },
+            },
+            {
+              node: {
+                internalID: "artwork-2-id",
+                slug: "artwork-2-slug",
+                title: "Artwork 2",
+                href: "/artwork-2-href",
+              },
+            },
+          ],
+        },
+      }),
+    })
+
+    expect(screen.getByText("New Works for You")).toBeOnTheScreen()
+    expect(screen.getByText(/Artwork 1/)).toBeOnTheScreen()
+    expect(screen.getByText(/Artwork 2/)).toBeOnTheScreen()
+
+    fireEvent.press(screen.getByText(/Artwork 2/))
+
+    expect(mockTrackEvent.mock.calls[0]).toMatchInlineSnapshot(`
+        [
+          {
+            "action": "tappedArtworkGroup",
+            "context_module": "home-view-section-new-works-for-you",
+            "context_screen_owner_type": "home",
+            "destination_screen_owner_id": "artwork-2-id",
+            "destination_screen_owner_slug": "artwork-2-slug",
+            "destination_screen_owner_type": "artwork",
+            "horizontal_slide_position": 1,
+            "module_height": "single",
+            "type": "thumbnail",
+          },
+        ]
+      `)
+
+    expect(navigate).toHaveBeenCalledWith("/artwork-2-href")
+  })
+})
diff --git a/src/app/Scenes/HomeView/Sections/ArtworksRailHomeViewSection.tsx b/src/app/Scenes/HomeView/Sections/ArtworksRailHomeViewSection.tsx
index 7053c4fed05..48ec990a9b6 100644
--- a/src/app/Scenes/HomeView/Sections/ArtworksRailHomeViewSection.tsx
+++ b/src/app/Scenes/HomeView/Sections/ArtworksRailHomeViewSection.tsx
@@ -1,11 +1,14 @@
+import { ContextModule } from "@artsy/cohesion"
 import { Flex } from "@artsy/palette-mobile"
 import { ArtworksRailHomeViewSection_section$key } from "__generated__/ArtworksRailHomeViewSection_section.graphql"
 import { LargeArtworkRail } from "app/Components/ArtworkRail/LargeArtworkRail"
 import { SectionTitle } from "app/Components/SectionTitle"
+import LegacyHomeAnalytics from "app/Scenes/Home/homeAnalytics"
 import { navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
 import { View } from "react-native"
 import { graphql, useFragment } from "react-relay"
+import { useTracking } from "react-tracking"
 
 interface ArtworksRailHomeViewSectionProps {
   section: ArtworksRailHomeViewSection_section$key
@@ -14,14 +17,28 @@ interface ArtworksRailHomeViewSectionProps {
 export const ArtworksRailHomeViewSection: React.FC<ArtworksRailHomeViewSectionProps> = ({
   section,
 }) => {
+  const tracking = useTracking()
+
   const data = useFragment(fragment, section)
   const title = data.component?.title
   const artworks = extractNodes(data.artworksConnection)
   const componentHref = data.component?.behaviors?.viewAll?.href
 
-  if (!artworks || artworks.length === 0) return null
+  if (!artworks || artworks.length === 0) {
+    return null
+  }
+
+  const handleOnArtworkPress = (artwork: any, position: number) => {
+    tracking.trackEvent(
+      LegacyHomeAnalytics.artworkThumbnailTapEvent(
+        data.internalID as ContextModule,
+        artwork.slug,
+        artwork.internalID,
+        position,
+        "single"
+      )
+    )
 
-  const handleOnArtworkPress = (artwork: any, _position: any) => {
     navigate(artwork.href)
   }
 
@@ -59,6 +76,7 @@ export const ArtworksRailHomeViewSection: React.FC<ArtworksRailHomeViewSectionPr
 
 const fragment = graphql`
   fragment ArtworksRailHomeViewSection_section on ArtworksRailHomeViewSection {
+    internalID
     component {
       title
       behaviors {