github.com/tilt-dev/tilt@v0.36.0/web/src/OverviewSidebarOptions.test.tsx (about)

     1  import { render, screen } from "@testing-library/react"
     2  import userEvent from "@testing-library/user-event"
     3  import React, { ReactElement } from "react"
     4  import { MemoryRouter } from "react-router"
     5  import { accessorsForTesting, tiltfileKeyContext } from "./BrowserStorage"
     6  import Features, { FeaturesTestProvider, Flag } from "./feature"
     7  import {
     8    TenResourcesWithLabels,
     9    TestsWithErrors,
    10    TwoResourcesTwoTests,
    11  } from "./OverviewResourceSidebar.stories"
    12  import { OverviewSidebarOptionsRoot } from "./OverviewSidebarOptions"
    13  import { ResourceGroupsContextProvider } from "./ResourceGroupsContext"
    14  import {
    15    DEFAULT_OPTIONS,
    16    ResourceListOptions,
    17    ResourceListOptionsProvider,
    18    RESOURCE_LIST_OPTIONS_KEY,
    19  } from "./ResourceListOptionsContext"
    20  import { ResourceNameFilterTextField } from "./ResourceNameFilter"
    21  import { SidebarItemNameRoot, SidebarItemRoot } from "./SidebarItemView"
    22  import {
    23    SidebarListSectionItemsRoot,
    24    SidebarResourcesRoot,
    25  } from "./SidebarResources"
    26  
    27  const resourceListOptionsAccessor = accessorsForTesting<ResourceListOptions>(
    28    RESOURCE_LIST_OPTIONS_KEY,
    29    sessionStorage
    30  )
    31  /**
    32   * TODO (lizz): These tests behave more like integration tests
    33   * and test the SidebarOptions component within the larger `SidebarResources`
    34   * component. The tests should be moved over to that component's test suite
    35   * and refactored with the react-testing-library changes.
    36   */
    37  
    38  function assertSidebarItemsAndOptions(
    39    root: HTMLElement,
    40    names: string[],
    41    expectAlertsOnTop: boolean,
    42    expectedResourceNameFilter?: string
    43  ) {
    44    let sidebar = Array.from(root.querySelectorAll(SidebarResourcesRoot))
    45    expect(sidebar).toHaveLength(1)
    46  
    47    // only check items in the "all resources" section, i.e. don't look at starred things
    48    // or we'll have duplicates
    49    let all = sidebar[0].querySelector(SidebarListSectionItemsRoot)!
    50    let items = Array.from(all.querySelectorAll(SidebarItemRoot))
    51    const observedNames = items.map(
    52      (i) => i.querySelector(SidebarItemNameRoot)?.textContent
    53    )
    54    expect(observedNames).toEqual(names)
    55  
    56    let optSetter = Array.from(
    57      sidebar[0].querySelectorAll(OverviewSidebarOptionsRoot)
    58    )
    59    expect(optSetter).toHaveLength(1)
    60  
    61    let checkbox = optSetter[0].querySelector(
    62      "input[type=checkbox]"
    63    ) as HTMLInputElement
    64    expect(checkbox.checked).toEqual(expectAlertsOnTop)
    65    if (expectedResourceNameFilter !== undefined) {
    66      expect(
    67        optSetter[0].querySelector(ResourceNameFilterTextField)!.textContent
    68      ).toEqual(expectedResourceNameFilter)
    69    }
    70  }
    71  
    72  beforeEach(() => {})
    73  
    74  afterEach(() => {
    75    localStorage.clear()
    76    resourceListOptionsAccessor.set({
    77      ...DEFAULT_OPTIONS,
    78    })
    79  })
    80  
    81  function renderContainer(x: ReactElement) {
    82    const features = new Features({
    83      [Flag.Labels]: true,
    84    })
    85    const { container } = render(
    86      <MemoryRouter>
    87        <FeaturesTestProvider value={features}>
    88          <tiltfileKeyContext.Provider value="test">
    89            <ResourceGroupsContextProvider>
    90              <ResourceListOptionsProvider>{x}</ResourceListOptionsProvider>
    91            </ResourceGroupsContextProvider>
    92          </tiltfileKeyContext.Provider>
    93        </FeaturesTestProvider>
    94      </MemoryRouter>
    95    )
    96    return container
    97  }
    98  
    99  describe("overview sidebar options", () => {
   100    it("says no matches found", () => {
   101      resourceListOptionsAccessor.set({
   102        ...DEFAULT_OPTIONS,
   103        resourceNameFilter: "asdfawfwef",
   104      })
   105      const container = renderContainer(<TwoResourcesTwoTests />)
   106      const resourceSectionItems = Array.from(
   107        container
   108          .querySelector(SidebarListSectionItemsRoot)!
   109          .querySelectorAll("li")
   110      )
   111      expect(resourceSectionItems.map((n) => n.textContent)).toEqual([
   112        "No matching resources",
   113      ])
   114    })
   115  })
   116  
   117  it("toggles/untoggles Alerts On Top sorting when button clicked", () => {
   118    const { container } = render(TestsWithErrors())
   119  
   120    const origOrder = [
   121      "(Tiltfile)",
   122      "test_0",
   123      "test_1",
   124      "test_2",
   125      "test_3",
   126      "test_4",
   127      "test_5",
   128      "test_6",
   129      "test_7",
   130    ]
   131    const alertsOnTopOrder = [
   132      "test_0",
   133      "test_2",
   134      "test_4",
   135      "test_6",
   136      "(Tiltfile)",
   137      "test_1",
   138      "test_3",
   139      "test_5",
   140      "test_7",
   141    ]
   142    assertSidebarItemsAndOptions(container, origOrder, false)
   143  
   144    let aotToggle = screen.getByLabelText("Alerts on top")
   145    userEvent.click(aotToggle)
   146  
   147    assertSidebarItemsAndOptions(container, alertsOnTopOrder, true)
   148  
   149    userEvent.click(aotToggle)
   150    assertSidebarItemsAndOptions(container, origOrder, false)
   151  })