web: use react testing library instead of enzyme in select tests

web/src/AccountMenu.test.tsx

@@ -1,11 +1,7 @@
-import { mount } from "enzyme"
+import { render, screen } from "@testing-library/react"
 import React from "react"
 import ReactModal from "react-modal"
-import {
-  AccountMenuContent,
-  MenuContentButtonSignUp,
-  MenuContentButtonTiltCloud,
-} from "./AccountMenu"
+import { AccountMenuContent } from "./AccountMenu"
 
 beforeEach(() => {
   // Note: `body` is used as the app element _only_ in a test env
@@ -15,7 +11,7 @@ beforeEach(() => {
 })
 
 it("renders Sign Up button when user is not signed in", () => {
-  const root = mount(
+  render(
     <AccountMenuContent
       tiltCloudUsername=""
       tiltCloudSchemeHost="http://cloud.tilt.dev"
@@ -25,11 +21,13 @@ it("renders Sign Up button when user is not signed in", () => {
     />
   )
 
-  expect(root.find(MenuContentButtonSignUp)).toHaveLength(1)
+  expect(
+    screen.getByRole("button", { name: "Link Tilt to Tilt Cloud" })
+  ).toBeInTheDocument()
 })
 
 it("renders TiltCloud button when user is signed in", () => {
-  const root = mount(
+  render(
     <AccountMenuContent
       tiltCloudUsername="amaia"
       tiltCloudSchemeHost="http://cloud.tilt.dev"
@@ -38,6 +36,7 @@ it("renders TiltCloud button when user is signed in", () => {
       isSnapshot={false}
     />
   )
-
-  expect(root.find(MenuContentButtonTiltCloud)).toHaveLength(1)
+  expect(
+    screen.getByRole("link", { name: "View Tilt Cloud" })
+  ).toBeInTheDocument()
 })

web/src/BrowerStorage.test.tsx

@@ -1,4 +1,4 @@
-import { mount } from "enzyme"
+import { render, screen } from "@testing-library/react"
 import React from "react"
 import {
   makeKey,
@@ -23,7 +23,7 @@ describe("localStorageContext", () => {
       return null
     }
 
-    mount(
+    render(
       <tiltfileKeyContext.Provider value={"test"}>
         <ValueSetter />
       </tiltfileKeyContext.Provider>
@@ -41,18 +41,20 @@ describe("localStorageContext", () => {
     )
 
     function ValueGetter() {
-      const [value, setValue] = usePersistentState<string>(
+      const [value, _setValue] = usePersistentState<string>(
         "test-key",
         "initial"
       )
-      return <p>{value}</p>
+      return <p aria-label="saved value">{value}</p>
     }
-    let root = mount(
+    render(
       <tiltfileKeyContext.Provider value="test">
         <ValueGetter />
       </tiltfileKeyContext.Provider>
     )
 
-    expect(root.find("p").text()).toEqual("test-read-value")
+    expect(screen.getByLabelText("saved value")).toHaveTextContent(
+      "test-read-value"
+    )
   })
 })

web/src/ClearLogs.test.tsx

@@ -1,4 +1,5 @@
-import { mount } from "enzyme"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import React from "react"
 import { AnalyticsAction } from "./analytics"
 import {
@@ -48,12 +49,14 @@ describe("ClearLogs", () => {
 
   it("clears all resources", () => {
     const logStore = createPopulatedLogStore()
-    const root = mount(
+    render(
       <LogStoreProvider value={logStore}>
         <ClearLogs resourceName={ResourceName.all} />
       </LogStoreProvider>
     )
-    root.find(ClearLogs).simulate("click")
+
+    userEvent.click(screen.getByRole("button"))
+
     expect(logStore.spans).toEqual({})
     expect(logStore.allLog()).toHaveLength(0)
 
@@ -65,17 +68,20 @@ describe("ClearLogs", () => {
 
   it("clears a specific resource", () => {
     const logStore = createPopulatedLogStore()
-    const root = mount(
+    render(
       <LogStoreProvider value={logStore}>
         <ClearLogs resourceName={"vigoda"} />
       </LogStoreProvider>
     )
-    root.find(ClearLogs).simulate("click")
+
+    userEvent.click(screen.getByRole("button"))
+
     expect(Object.keys(logStore.spans).sort()).toEqual([
       "_",
       "build:m2",
       "pod:m2-def456",
     ])
+
     expect(logLinesToString(logStore.allLog(), false)).toEqual(
       "global 1\nglobal 2\nm2 build line 1\nm2 runtime line 1"
     )

web/src/HeaderBar.test.tsx

@@ -1,43 +1,57 @@
-import { fireEvent } from "@testing-library/dom"
-import { mount } from "enzyme"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import React from "react"
 import { act } from "react-dom/test-utils"
 import { MemoryRouter } from "react-router-dom"
-import { TwoResources } from "./HeaderBar.stories"
-import HelpDialog from "./HelpDialog"
+import { AnalyticsType } from "./analytics"
+import HeaderBar from "./HeaderBar"
 import { SnapshotActionTestProvider } from "./snapshot"
+import { nResourceView } from "./testdata"
 
-it("renders shortcuts dialog on ?", () => {
-  const root = mount(
-    <MemoryRouter initialEntries={["/"]}>{TwoResources()}</MemoryRouter>
-  )
+describe("HeaderBar", () => {
+  describe("keyboard shortcuts", () => {
+    const openModal = jest.fn()
 
-  expect(root.find(HelpDialog).props().open).toEqual(false)
-  act(() => void fireEvent.keyDown(document.body, { key: "?" }))
-  root.update()
-  expect(root.find(HelpDialog).props().open).toEqual(true)
-  root.unmount()
-})
+    beforeEach(() => {
+      openModal.mockReset()
+
+      const snapshotAction = {
+        enabled: true,
+        openModal,
+      }
+
+      render(
+        <MemoryRouter initialEntries={["/"]}>
+          <SnapshotActionTestProvider value={snapshotAction}>
+            <HeaderBar
+              view={nResourceView(2)}
+              currentPage={AnalyticsType.Detail}
+              isSocketConnected={true}
+            />
+          </SnapshotActionTestProvider>
+        </MemoryRouter>
+      )
+    })
+
+    it("opens the help dialog on '?' keypress", () => {
+      // Expect that the help dialog is NOT visible at start
+      expect(screen.queryByRole("heading", { name: /Help/i })).toBeNull()
+
+      act(() => {
+        userEvent.keyboard("?")
+      })
+
+      expect(screen.getByRole("heading", { name: /Help/i })).toBeInTheDocument()
+    })
+
+    it("calls `openModal` snapshot callback on 's' keypress", () => {
+      expect(openModal).not.toBeCalled()
+
+      act(() => {
+        userEvent.keyboard("s")
+      })
 
-it("opens snapshot modal on s", () => {
-  let opened = 0
-  let snapshot = {
-    enabled: true,
-    openModal: () => {
-      opened++
-    },
-  }
-  const root = mount(
-    <MemoryRouter initialEntries={["/"]}>
-      <SnapshotActionTestProvider value={snapshot}>
-        {TwoResources()}
-      </SnapshotActionTestProvider>
-    </MemoryRouter>
-  )
-
-  expect(opened).toEqual(0)
-  act(() => void fireEvent.keyDown(document.body, { key: "s" }))
-  root.update()
-  expect(opened).toEqual(1)
-  root.unmount()
+      expect(openModal).toBeCalledTimes(1)
+    })
+  })
 })

web/src/HelpSearchBar.test.tsx

@@ -1,41 +1,42 @@
-import { mount } from "enzyme"
+import { render, RenderOptions, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import { MemoryRouter } from "react-router"
 import { tiltfileKeyContext } from "./BrowserStorage"
-import { ClearHelpSearchBarButton, HelpSearchBar } from "./HelpSearchBar"
+import { HelpSearchBar } from "./HelpSearchBar"
 
-const HelpSearchBarTestWrapper = () => (
-  <MemoryRouter>
-    <tiltfileKeyContext.Provider value="test">
-      <HelpSearchBar />
-    </tiltfileKeyContext.Provider>
-  </MemoryRouter>
-)
+function customRender(component: JSX.Element, options?: RenderOptions) {
+  return render(
+    <MemoryRouter>
+      <tiltfileKeyContext.Provider value="test">
+        {component}
+      </tiltfileKeyContext.Provider>
+    </MemoryRouter>,
+    options
+  )
+}
 
 describe("HelpSearchBar", () => {
   it("does NOT display 'clear' button when there is NO input", () => {
-    const root = mount(<HelpSearchBarTestWrapper />)
-    const button = root.find(ClearHelpSearchBarButton)
-    expect(button.length).toBe(0)
+    customRender(<HelpSearchBar />)
+
+    expect(screen.queryByLabelText("Clear search term")).toBeNull()
   })
 
   it("displays 'clear' button when there is input", () => {
-    const searchTerm = "wow"
-    const root = mount(<HelpSearchBarTestWrapper />)
-    const searchField = root.find("input")
-    searchField.simulate("change", { target: { value: searchTerm } })
+    customRender(<HelpSearchBar />)
+
+    userEvent.type(screen.getByLabelText("Search Tilt Docs"), "wow")
 
-    const button = root.find(ClearHelpSearchBarButton)
-    expect(button.length).toBe(1)
+    expect(screen.getByLabelText("Clear search term")).toBeInTheDocument()
   })
 
   it("should change the search value on input change", () => {
     const searchTerm = "so search"
-    const root = mount(<HelpSearchBarTestWrapper />)
-    const searchField = root.find("input")
-    searchField.simulate("change", { target: { value: searchTerm } })
+    customRender(<HelpSearchBar />)
+
+    userEvent.type(screen.getByLabelText("Search Tilt Docs"), searchTerm)
 
-    const searchFieldAfterChange = root.find("input")
-    expect(searchFieldAfterChange.prop("value")).toBe(searchTerm)
+    expect(screen.getByRole("textbox")).toHaveValue(searchTerm)
   })
 
   it("should open search in new tab on submision", () => {
@@ -46,22 +47,21 @@ describe("HelpSearchBar", () => {
     searchResultsPage.searchParams.set("q", searchTerm)
     searchResultsPage.searchParams.set("utm_source", "tiltui")
 
-    const root = mount(<HelpSearchBarTestWrapper />)
-    const searchField = root.find("input")
-    searchField.simulate("change", { target: { value: searchTerm } })
-    searchField.simulate("keyPress", { key: "Enter" })
+    customRender(<HelpSearchBar />)
+
+    userEvent.type(screen.getByLabelText("Search Tilt Docs"), searchTerm)
+    userEvent.keyboard("{Enter}")
 
     expect(windowOpenSpy).toBeCalledWith(searchResultsPage)
   })
 
   it("should clear the search value after submission", () => {
     const searchTerm = "much find"
-    const root = mount(<HelpSearchBarTestWrapper />)
-    const searchField = root.find("input")
-    searchField.simulate("change", { target: { value: searchTerm } })
-    searchField.simulate("keyPress", { key: "Enter" })
+    customRender(<HelpSearchBar />)
+
+    userEvent.type(screen.getByLabelText("Search Tilt Docs"), searchTerm)
+    userEvent.keyboard("{Enter}")
 
-    const searchFieldAfterChange = root.find("input")
-    expect(searchFieldAfterChange.prop("value")).toBe("")
+    expect(screen.getByRole("textbox")).toHaveValue("")
   })
 })

web/src/HelpSearchBar.tsx

@@ -67,6 +67,7 @@ export function HelpSearchBar(props: { className?: string }) {
         <SearchSvg fill={Color.grayLightest} />
       </InputAdornment>
     ),
+    "aria-label": "Search Tilt Docs",
   }
 
   function handleKeyPress(e: KeyboardEvent) {
@@ -90,16 +91,16 @@ export function HelpSearchBar(props: { className?: string }) {
         <ClearHelpSearchBarButton
           onClick={onClearClick}
           analyticsName="ui.web.clearHelpSearchBar"
+          aria-label="Clear search term"
         >
-          <CloseSvg fill={Color.grayLightest} />
+          <CloseSvg role="presentation" fill={Color.grayLightest} />
         </ClearHelpSearchBarButton>
       </InputAdornment>
     )
   }
 
   return (
     <HelpSearchBarTextField
-      aria-label="Search Tilt Docs"
       className={props.className}
       value={searchValue}
       placeholder="Search Tilt Docs..."