From a7d5dbde2996b82a83875462a40778a53140fea2 Mon Sep 17 00:00:00 2001
From: Eddie Maldonado <emaldonado@mbta.com>
Date: Tue, 28 Nov 2023 13:48:24 -0500
Subject: [PATCH] feat: show back buttons below 800px

---
 assets/src/components/viewHeader.tsx        |  5 +-
 assets/tests/components/viewHeader.test.tsx | 66 +++++++++++++++------
 2 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/assets/src/components/viewHeader.tsx b/assets/src/components/viewHeader.tsx
index 762f3df70..b40614ed9 100644
--- a/assets/src/components/viewHeader.tsx
+++ b/assets/src/components/viewHeader.tsx
@@ -31,11 +31,14 @@ const ViewHeader: ViewHeaderType = ({
 }): JSX.Element => {
   const deviceType = useScreenSize()
 
+  const screenSizeAllowsBackButton =
+    deviceType === "mobile" || deviceType === "mobile_landscape_tablet_portrait"
+
   return (
     <div className="c-view-header">
       {backlinkToView &&
       backlinkToView !== OpenView.None &&
-      deviceType === "mobile" ? (
+      screenSizeAllowsBackButton ? (
         <button
           className="c-view-header__backlink"
           onClick={followBacklink}
diff --git a/assets/tests/components/viewHeader.test.tsx b/assets/tests/components/viewHeader.test.tsx
index a6346d471..d0b49a1d3 100644
--- a/assets/tests/components/viewHeader.test.tsx
+++ b/assets/tests/components/viewHeader.test.tsx
@@ -1,10 +1,12 @@
 import { jest, describe, test, expect } from "@jest/globals"
+import "@testing-library/jest-dom/jest-globals"
 import React from "react"
 import { render } from "@testing-library/react"
 import ViewHeader from "../../src/components/viewHeader"
 import userEvent from "@testing-library/user-event"
 import useScreenSize from "../../src/hooks/useScreenSize"
 import { OpenView } from "../../src/state/pagePanelState"
+import { DeviceType } from "../../src/skate"
 
 jest.mock("../../src/hooks/useScreenSize", () => ({
   __esModule: true,
@@ -23,24 +25,50 @@ describe("ViewHeader", () => {
     expect(close).toHaveBeenCalled()
   })
 
-  test("backlink doesn't render on non-mobile breakpoints", () => {
-    const close = jest.fn()
-    const followBacklink = jest.fn()
-
-    const result = render(
-      <ViewHeader
-        title="My View"
-        closeView={close}
-        backlinkToView={OpenView.Swings}
-        followBacklink={followBacklink}
-      />
-    )
-
-    expect(result.queryByTitle("Swings")).toBeNull()
-  })
+  test.each<DeviceType>(["mobile", "mobile_landscape_tablet_portrait"])(
+    "backlink renders on %s breakpoint",
+    (breakpoint) => {
+      jest.mocked(useScreenSize).mockReturnValueOnce(breakpoint)
+
+      const close = jest.fn()
+      const followBacklink = jest.fn()
+
+      const result = render(
+        <ViewHeader
+          title="My View"
+          closeView={close}
+          backlinkToView={OpenView.Swings}
+          followBacklink={followBacklink}
+        />
+      )
+
+      expect(result.getByTitle("Swings")).toBeInTheDocument()
+    }
+  )
+
+  test.each<DeviceType>(["tablet", "desktop"])(
+    "backlink doesn't render on %s breakpoint",
+    (breakpoint) => {
+      jest.mocked(useScreenSize).mockReturnValueOnce(breakpoint)
+
+      const close = jest.fn()
+      const followBacklink = jest.fn()
+
+      const result = render(
+        <ViewHeader
+          title="My View"
+          closeView={close}
+          backlinkToView={OpenView.Swings}
+          followBacklink={followBacklink}
+        />
+      )
+
+      expect(result.queryByTitle("Swings")).toBeNull()
+    }
+  )
 
   test("backlink doesn't render when there's no view to return to", () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(() => "mobile")
+    jest.mocked(useScreenSize).mockImplementationOnce(() => "mobile")
 
     const close = jest.fn()
     const followBacklink = jest.fn()
@@ -58,7 +86,7 @@ describe("ViewHeader", () => {
   })
 
   test("backlink button invokes callback", async () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(() => "mobile")
+    jest.mocked(useScreenSize).mockImplementationOnce(() => "mobile")
 
     const close = jest.fn()
     const followBacklink = jest.fn()
@@ -79,7 +107,7 @@ describe("ViewHeader", () => {
   })
 
   test("backlink button renders for Late View", async () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(() => "mobile")
+    jest.mocked(useScreenSize).mockImplementationOnce(() => "mobile")
 
     const close = jest.fn()
     const followBacklink = jest.fn()
@@ -97,7 +125,7 @@ describe("ViewHeader", () => {
   })
 
   test("backlink button render for notifications drawer", async () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(() => "mobile")
+    jest.mocked(useScreenSize).mockImplementationOnce(() => "mobile")
 
     const close = jest.fn()
     const followBacklink = jest.fn()