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 })