chore(tabs): Address misc remaining feedback (#8818)

chore(tabs): address misc feedback

src/app/Scenes/Activity/Activity.tests.tsx

@@ -1,10 +1,28 @@
-import { screen } from "@testing-library/react-native"
+import { fireEvent, screen } from "@testing-library/react-native"
 import { flushPromiseQueue } from "app/utils/tests/flushPromiseQueue"
+import { mockTrackEvent } from "app/utils/tests/globallyMockedStuff"
 import { renderWithHookWrappersTL } from "app/utils/tests/renderWithWrappers"
 import { resolveMostRecentRelayOperation } from "app/utils/tests/resolveMostRecentRelayOperation"
 import { createMockEnvironment } from "relay-test-utils"
 import { Activity } from "./Activity"
 
+jest.mock("@artsy/palette-mobile", () => {
+  const palette = jest.requireActual("@artsy/palette-mobile")
+  return {
+    ...palette,
+    Tabs: {
+      ...palette.Tabs,
+      TabsWithHeader: (props: any) => {
+        // Simulate the tab change event by calling the prop immediately
+        if (props.onTabChange) {
+          props.onTabChange({ tabName: "Alerts" })
+        }
+        return <>{props.children}</>
+      },
+    },
+  }
+})
+
 describe("Activity", () => {
   let mockEnvironment: ReturnType<typeof createMockEnvironment>
 
@@ -87,21 +105,20 @@ describe("Activity", () => {
     expect(screen.queryByText("Notification Three")).toBeNull()
   })
 
-  // fit("should track event when the tab is tapped", () => {
-  //   const { getByText } = renderWithHookWrappersTL(<Activity />, mockEnvironment)
-
-  //   // TODO: Fix this test
-  //   fireEvent.press(getByText("Alerts"))
-
-  //   expect(mockTrackEvent.mock.calls[0]).toMatchInlineSnapshot(`
-  //     [
-  //       {
-  //         "action": "clickedActivityPanelTab",
-  //         "tab_name": "Alerts",
-  //       },
-  //     ]
-  //   `)
-  // })
+  it("should track event when the tab is tapped", () => {
+    const { getByText } = renderWithHookWrappersTL(<Activity />, mockEnvironment)
+
+    fireEvent.press(getByText("Alerts"))
+
+    expect(mockTrackEvent.mock.calls[0]).toMatchInlineSnapshot(`
+      [
+        {
+          "action": "clickedActivityPanelTab",
+          "tab_name": "Alerts",
+        },
+      ]
+    `)
+  })
 })
 
 const notifications = {

src/app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResults.tests.tsx

@@ -1,10 +1,25 @@
+import { Tabs, Text } from "@artsy/palette-mobile"
 import { fireEvent, screen } from "@testing-library/react-native"
 import { ArtQuizResultsTabsTestsQuery } from "__generated__/ArtQuizResultsTabsTestsQuery.graphql"
 import { ArtQuizResultsTabs } from "app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizResultsTabs"
 import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
 import { graphql } from "react-relay"
 
+jest.mock("@artsy/palette-mobile", () => {
+  const palette = jest.requireActual("@artsy/palette-mobile")
+
+  return {
+    ...palette,
+    Tabs: {
+      ...palette.Tabs,
+      TabsWithHeader: jest.fn(),
+    },
+  }
+})
+
 describe("ArtQuizResults", () => {
+  const TabsWithHeader = Tabs.TabsWithHeader as jest.Mock
+
   const { renderWithRelay } = setupTestWrapper<ArtQuizResultsTabsTestsQuery>({
     Component: ({ me }) => <ArtQuizResultsTabs me={me} />,
     query: graphql`
@@ -21,23 +36,37 @@ describe("ArtQuizResults", () => {
     `,
   })
 
-  xit.each([
+  it.each([
     [
-      "Works you liked",
-      "Explore Art We Think You'll Love",
+      "worksYouLiked",
+      "Explore Your Quiz Results",
       "We think you’ll enjoy these recommendations based on your likes. Keep saving and following to continue tailoring Artsy to you.",
     ],
     [
-      "Works for You",
-      "Explore Your Quiz Results",
+      "worksForYou",
+      "Explore Art We Think You'll Love",
       "We think you’ll enjoy these recommendations based on your likes. To tailor Artsy to your art tastes, follow artists and save works you love.",
     ],
     [
-      "Artists for You",
-      "Explore Your Quiz Results",
+      "artistsForYou",
+      "Explore Art We Think You'll Love",
       "We think you’ll enjoy these recommendations based on your likes. To tailor Artsy to your art tastes, follow artists and save works you love.",
     ],
   ])("should display expected header for %s tab", (selected, title, subtitle) => {
+    TabsWithHeader.mockImplementation((props) => {
+      // Simulate the tab change event by calling the prop immediately
+      if (props.onTabChange) {
+        props.onTabChange({ tabName: selected })
+      }
+      return (
+        <>
+          <Text>{props.title}</Text>
+          {props.BelowTitleHeaderComponent()}
+          {props.children}
+        </>
+      )
+    })
+
     renderWithRelay()
 
     const tab = screen.getByText(selected)

src/app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizExploreArtists.tsx

@@ -17,18 +17,20 @@ export const ArtQuizExploreArtists = ({
 
   return (
     <Tabs.FlatList
+      key="ArtQuizExplorArtists"
       data={artworks}
       initialNumToRender={2}
       renderItem={({ item }) => {
         return <ArtQuizArtist artistData={item.artist} />
       }}
-      keyExtractor={(item, index) => String(item?.artist?.internalID || index)}
+      keyExtractor={(item) => item.internalID as string}
     />
   )
 }
 
 const artQuizExploreArtistsFragment = graphql`
   fragment ArtQuizExploreArtists_artworks on Artwork @relay(plural: true) {
+    internalID
     artist {
       internalID
       ...ArtQuizArtist_artist

src/app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizResultsTabs.tsx

@@ -1,31 +1,25 @@
 import { Flex, Tabs } from "@artsy/palette-mobile"
 import { ArtQuizResultsQuery$data } from "__generated__/ArtQuizResultsQuery.graphql"
 import { ArtQuizResultsTabs_me$key } from "__generated__/ArtQuizResultsTabs_me.graphql"
-
 import { ArtQuizExploreArtists } from "app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizExploreArtists"
 import { ArtQuizExploreArtworks } from "app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizExploreArtworks"
 import { ArtQuizLikedArtworks } from "app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizLikedArtworks"
 import { ArtQuizResultsTabsHeader } from "app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizResultsTabsHeader"
 import { navigate } from "app/system/navigation/navigate"
 import { useState } from "react"
-
 import { graphql, useFragment } from "react-relay"
 
-enum Tab {
-  worksYouLiked = "Works you liked",
-  exploreWorks = "Works for You",
-  exploreArtists = "Artists for You",
-}
+type TabName = "worksYouLiked" | "exploreWorks" | "exploreArtists"
 
 export const ArtQuizResultsTabs = ({ me }: { me: ArtQuizResultsQuery$data["me"] }) => {
   const queryResult = useFragment<ArtQuizResultsTabs_me$key>(artQuizResultsTabsFragment, me)?.quiz
 
-  const [activeTab, setActiveTab] = useState<string>("worksYouLiked")
+  const [activeTab, setActiveTab] = useState<TabName>("worksYouLiked")
 
   const savedArtworks = queryResult?.savedArtworks!
   const recommendedArtworks = queryResult?.recommendedArtworks!
   const title =
-    activeTab !== "worksYouLiked" ? "Explore Art We Think You'll Love" : "Explore Your Quiz Results"
+    activeTab === "worksYouLiked" ? "Explore Your Quiz Results" : "Explore Art We Think You'll Love"
 
   return (
     <Tabs.TabsWithHeader
@@ -36,10 +30,10 @@ export const ArtQuizResultsTabs = ({ me }: { me: ArtQuizResultsQuery$data["me"]
         onBack: () => navigate("/"),
       }}
       onTabPress={(tabName) => {
-        setActiveTab(tabName)
+        setActiveTab(tabName as TabName)
       }}
       onTabChange={({ tabName }) => {
-        setActiveTab(tabName)
+        setActiveTab(tabName as TabName)
       }}
       BelowTitleHeaderComponent={() => {
         if (activeTab === "worksYouLiked") {
@@ -57,17 +51,17 @@ export const ArtQuizResultsTabs = ({ me }: { me: ArtQuizResultsQuery$data["me"]
         )
       }}
     >
-      <Tabs.Tab name="worksYouLiked" label={Tab.worksYouLiked}>
+      <Tabs.Tab name="worksYouLiked" label="Works you liked">
         <Tabs.Lazy>
           <ArtQuizLikedArtworks savedArtworks={savedArtworks} />
         </Tabs.Lazy>
       </Tabs.Tab>
-      <Tabs.Tab name="worksForYou" label={Tab.exploreWorks}>
+      <Tabs.Tab name="worksForYou" label="Works for You">
         <Tabs.Lazy>
           <ArtQuizExploreArtworks recommendedArtworks={recommendedArtworks} />
         </Tabs.Lazy>
       </Tabs.Tab>
-      <Tabs.Tab name="artistsForYou" label={Tab.exploreArtists}>
+      <Tabs.Tab name="artistsForYou" label="Artists for You">
         <Tabs.Lazy>
           <ArtQuizExploreArtists savedArtworks={savedArtworks} />
         </Tabs.Lazy>

src/app/Scenes/Favorites/FavoriteArtists.tsx

@@ -103,7 +103,7 @@ class Artists extends React.Component<Props, State> {
                 <ArtistListItem
                   artist={item.artist!}
                   withFeedback
-                  containerStyle={{ paddingHorizontal: 20, paddingVertical: 5 }}
+                  containerStyle={{ paddingHorizontal: space(2), paddingVertical: space(0.5) }}
                 />
               )
             }}

src/app/Scenes/Partner/Components/PartnerShows.tsx

@@ -103,7 +103,7 @@ export const PartnerShows: React.FC<{
 
   return (
     <Tabs.FlatList
-      contentContainerStyle={{ paddingHorizontal: 20, paddingTop: 20 }}
+      contentContainerStyle={{ paddingHorizontal: space(2), paddingTop: space(2) }}
       data={sections}
       renderItem={({ item }) => item.content}
       // using tabIsActive here to render only the minimal UI on this tab before the user actually switches to it