github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/HelpSearchBar.test.tsx (about)

     1  import { render, RenderOptions, screen } from "@testing-library/react"
     2  import userEvent from "@testing-library/user-event"
     3  import { MemoryRouter } from "react-router"
     4  import { tiltfileKeyContext } from "./BrowserStorage"
     5  import { HelpSearchBar } from "./HelpSearchBar"
     6  
     7  function customRender(component: JSX.Element, options?: RenderOptions) {
     8    return render(
     9      <MemoryRouter>
    10        <tiltfileKeyContext.Provider value="test">
    11          {component}
    12        </tiltfileKeyContext.Provider>
    13      </MemoryRouter>,
    14      options
    15    )
    16  }
    17  
    18  describe("HelpSearchBar", () => {
    19    it("does NOT display 'clear' button when there is NO input", () => {
    20      customRender(<HelpSearchBar />)
    21  
    22      expect(screen.queryByLabelText("Clear search term")).toBeNull()
    23    })
    24  
    25    it("displays 'clear' button when there is input", () => {
    26      customRender(<HelpSearchBar />)
    27  
    28      userEvent.type(screen.getByLabelText("Search Tilt Docs"), "wow")
    29  
    30      expect(screen.getByLabelText("Clear search term")).toBeInTheDocument()
    31    })
    32  
    33    it("should change the search value on input change", () => {
    34      const searchTerm = "so search"
    35      customRender(<HelpSearchBar />)
    36  
    37      userEvent.type(screen.getByLabelText("Search Tilt Docs"), searchTerm)
    38  
    39      expect(screen.getByRole("textbox")).toHaveValue(searchTerm)
    40    })
    41  
    42    it("should open search in new tab on submission", () => {
    43      const windowOpenSpy = jest.fn()
    44      window.open = windowOpenSpy
    45      const searchTerm = "such term"
    46      const searchResultsPage = new URL(`https://docs.tilt.dev/search`)
    47      searchResultsPage.searchParams.set("q", searchTerm)
    48      searchResultsPage.searchParams.set("utm_source", "tiltui")
    49  
    50      customRender(<HelpSearchBar />)
    51  
    52      userEvent.type(screen.getByLabelText("Search Tilt Docs"), searchTerm)
    53      userEvent.keyboard("{Enter}")
    54  
    55      expect(windowOpenSpy).toBeCalledWith(searchResultsPage)
    56    })
    57  
    58    it("should clear the search value after submission", () => {
    59      const searchTerm = "much find"
    60      customRender(<HelpSearchBar />)
    61  
    62      userEvent.type(screen.getByLabelText("Search Tilt Docs"), searchTerm)
    63      userEvent.keyboard("{Enter}")
    64  
    65      expect(screen.getByRole("textbox")).toHaveValue("")
    66    })
    67  })