github.com/tilt-dev/tilt@v0.36.0/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 { accessorsForTesting, tiltfileKeyContext } from "./BrowserStorage"
     6  import {
     7    DEFAULT_OPTIONS,
     8    ResourceListOptions,
     9    ResourceListOptionsProvider,
    10    RESOURCE_LIST_OPTIONS_KEY,
    11  } from "./ResourceListOptionsContext"
    12  import { ResourceNameFilter } from "./ResourceNameFilter"
    13  
    14  const resourceListOptionsAccessor = accessorsForTesting<ResourceListOptions>(
    15    RESOURCE_LIST_OPTIONS_KEY,
    16    sessionStorage
    17  )
    18  
    19  function customRender(component: JSX.Element, options?: RenderOptions) {
    20    return render(component, {
    21      wrapper: ({ children }) => (
    22        <MemoryRouter>
    23          <tiltfileKeyContext.Provider value="test">
    24            <ResourceListOptionsProvider>{children}</ResourceListOptionsProvider>
    25          </tiltfileKeyContext.Provider>
    26        </MemoryRouter>
    27      ),
    28    })
    29  }
    30  
    31  describe("ResourceNameFilter", () => {
    32    beforeEach(() => {
    33      sessionStorage.clear()
    34      localStorage.clear()
    35    })
    36  
    37    afterEach(() => {
    38      sessionStorage.clear()
    39      localStorage.clear()
    40    })
    41  
    42    it("displays 'clear' button when there is input", () => {
    43      resourceListOptionsAccessor.set({
    44        ...DEFAULT_OPTIONS,
    45        resourceNameFilter: "wow",
    46      })
    47      customRender(<ResourceNameFilter />)
    48  
    49      expect(screen.getByLabelText("Clear name filter")).toBeInTheDocument()
    50    })
    51  
    52    it("does NOT display 'clear' button when there is NO input", () => {
    53      customRender(<ResourceNameFilter />)
    54  
    55      expect(screen.queryByLabelText("Clear name filter")).toBeNull()
    56    })
    57  
    58    describe("persistent state", () => {
    59      it("reflects existing value in ResourceListOptionsContext", () => {
    60        resourceListOptionsAccessor.set({
    61          ...DEFAULT_OPTIONS,
    62          resourceNameFilter: "cool resource",
    63        })
    64        customRender(<ResourceNameFilter />)
    65  
    66        expect(screen.getByRole("textbox")).toHaveValue("cool resource")
    67      })
    68  
    69      it("saves input to ResourceListOptionsContext", () => {
    70        customRender(<ResourceNameFilter />)
    71  
    72        userEvent.type(screen.getByRole("textbox"), "very cool resource")
    73  
    74        expect(resourceListOptionsAccessor.get()?.resourceNameFilter).toBe(
    75          "very cool resource"
    76        )
    77      })
    78    })
    79  })