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