revert(gene): restore previous title and description meta tags

playwright/e2e/gene.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test"
+import { test, expect } from "@playwright/test"
 
 test.describe("Gene", () => {
   test("/gene/:id", async ({ page }) => {
@@ -7,8 +7,6 @@ test.describe("Gene", () => {
     await expect(page.locator("h1").first()).toContainText(
       "Contemporary Figurative Painting",
     )
-    await expect(page).toHaveTitle(
-      "Contemporary Figurative Painting - Art & Prints for Sale | Artsy",
-    )
+    await expect(page).toHaveTitle("Contemporary Figurative Painting | Artsy")
   })
 })

src/Apps/Gene/Components/GeneMeta.tsx

@@ -10,34 +10,19 @@ interface GeneMetaProps {
 const GeneMeta: React.FC<React.PropsWithChildren<GeneMetaProps>> = ({
   gene,
 }) => {
-  const title = buildTitle(gene)
-  const description = buildDescription(gene)
+  const fallbackDescription = `Explore ${gene.name} art on Artsy. Browse works by size, price, and medium.`
+  const title = `${gene.displayName || gene.name} | Artsy`
 
   return (
     <MetaTags
       title={title}
-      description={description}
+      description={gene.meta.description || fallbackDescription}
       pathname={gene.href}
       imageURL={gene.image?.cropped?.src}
     />
   )
 }
 
-function buildTitle(gene: GeneMeta_gene$data): string {
-  return `${gene.displayName || gene.name} - Art & Prints for Sale | Artsy`
-}
-
-function buildDescription(gene: GeneMeta_gene$data): string {
-  const description = [
-    gene.meta.description,
-    `Browse ${gene.name} art on Artsy.`,
-  ]
-    .filter(Boolean)
-    .join(" ")
-
-  return description
-}
-
 export const GeneMetaFragmentContainer = createFragmentContainer(GeneMeta, {
   gene: graphql`
     fragment GeneMeta_gene on Gene {

src/Apps/Gene/Routes/__tests__/GeneShow.jest.tsx

@@ -1,7 +1,7 @@
-import { screen } from "@testing-library/react"
 import { GeneShowFragmentContainer } from "Apps/Gene/Routes/GeneShow"
 import { MockBoot } from "DevTools/MockBoot"
 import { setupTestWrapperTL } from "DevTools/setupTestWrapperTL"
+import { screen } from "@testing-library/react"
 import type { GeneShowTestQuery } from "__generated__/GeneShowTestQuery.graphql"
 import { graphql } from "react-relay"
 
@@ -41,22 +41,34 @@ describe("GeneShow", () => {
     expect(screen.getByText("Display Name")).toBeInTheDocument()
   })
 
+  it("renders fallback title correctly", () => {
+    renderWithRelay({
+      Gene: () => ({
+        name: "Example Gene",
+        displayName: "",
+      }),
+    })
+
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument()
+    expect(screen.getAllByText("Example Gene")).toHaveLength(2)
+  })
+
   it("renders meta description and title from query", () => {
     renderWithRelay({
       Gene: () => ({
-        meta: { description: "Example Gene meta description." },
-        displayName: "Example Gene Display Name",
-        name: "Example Gene Name",
+        meta: { description: "Gene Meta Description" },
+        displayName: "Display Name",
+        name: "name",
       }),
     })
 
     expect(document.querySelector('meta[name="description"]')).toHaveAttribute(
       "content",
-      "Example Gene meta description. Browse Example Gene Name art on Artsy.",
+      "Gene Meta Description",
     )
     expect(document.querySelector('meta[name="title"]')).toHaveAttribute(
       "content",
-      "Example Gene Display Name - Art & Prints for Sale | Artsy",
+      "Display Name | Artsy",
     )
   })
 
@@ -71,11 +83,11 @@ describe("GeneShow", () => {
 
     expect(document.querySelector('meta[name="description"]')).toHaveAttribute(
       "content",
-      "Browse Design art on Artsy.",
+      "Explore Design art on Artsy. Browse works by size, price, and medium.",
     )
     expect(document.querySelector('meta[name="title"]')).toHaveAttribute(
       "content",
-      "Design - Art & Prints for Sale | Artsy",
+      "Design | Artsy",
     )
   })
 })