github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/ResourceNameFilter.test.tsx (about) 1 import { render, RenderOptions, screen } from "@testing-library/react" 2 import userEvent from "@testing-library/user-event" 3 import React from "react" 4 import { MemoryRouter } from "react-router" 5 import { AnalyticsAction } from "./analytics" 6 import { 7 cleanupMockAnalyticsCalls, 8 expectIncrs, 9 mockAnalyticsCalls, 10 } from "./analytics_test_helpers" 11 import { accessorsForTesting, tiltfileKeyContext } from "./BrowserStorage" 12 import { 13 DEFAULT_OPTIONS, 14 ResourceListOptions, 15 ResourceListOptionsProvider, 16 RESOURCE_LIST_OPTIONS_KEY, 17 } from "./ResourceListOptionsContext" 18 import { ResourceNameFilter } from "./ResourceNameFilter" 19 20 const resourceListOptionsAccessor = accessorsForTesting<ResourceListOptions>( 21 RESOURCE_LIST_OPTIONS_KEY, 22 sessionStorage 23 ) 24 25 function customRender(component: JSX.Element, options?: RenderOptions) { 26 return render(component, { 27 wrapper: ({ children }) => ( 28 <MemoryRouter> 29 <tiltfileKeyContext.Provider value="test"> 30 <ResourceListOptionsProvider>{children}</ResourceListOptionsProvider> 31 </tiltfileKeyContext.Provider> 32 </MemoryRouter> 33 ), 34 }) 35 } 36 37 describe("ResourceNameFilter", () => { 38 beforeEach(() => { 39 mockAnalyticsCalls() 40 sessionStorage.clear() 41 localStorage.clear() 42 }) 43 44 afterEach(() => { 45 cleanupMockAnalyticsCalls() 46 sessionStorage.clear() 47 localStorage.clear() 48 }) 49 50 it("displays 'clear' button when there is input", () => { 51 resourceListOptionsAccessor.set({ 52 ...DEFAULT_OPTIONS, 53 resourceNameFilter: "wow", 54 }) 55 customRender(<ResourceNameFilter />) 56 57 expect(screen.getByLabelText("Clear name filter")).toBeInTheDocument() 58 }) 59 60 it("does NOT display 'clear' button when there is NO input", () => { 61 customRender(<ResourceNameFilter />) 62 63 expect(screen.queryByLabelText("Clear name filter")).toBeNull() 64 }) 65 66 it("reports analytics when input is cleared", () => { 67 resourceListOptionsAccessor.set({ 68 ...DEFAULT_OPTIONS, 69 resourceNameFilter: "wow again", 70 }) 71 customRender(<ResourceNameFilter />) 72 73 userEvent.click(screen.getByLabelText("Clear name filter")) 74 75 expectIncrs({ 76 name: "ui.web.clearResourceNameFilter", 77 tags: { action: AnalyticsAction.Click }, 78 }) 79 }) 80 81 describe("persistent state", () => { 82 it("reflects existing value in ResourceListOptionsContext", () => { 83 resourceListOptionsAccessor.set({ 84 ...DEFAULT_OPTIONS, 85 resourceNameFilter: "cool resource", 86 }) 87 customRender(<ResourceNameFilter />) 88 89 expect(screen.getByRole("textbox")).toHaveValue("cool resource") 90 }) 91 92 it("saves input to ResourceListOptionsContext", () => { 93 customRender(<ResourceNameFilter />) 94 95 userEvent.type(screen.getByRole("textbox"), "very cool resource") 96 97 expect(resourceListOptionsAccessor.get()?.resourceNameFilter).toBe( 98 "very cool resource" 99 ) 100 }) 101 }) 102 })