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

     1  import {
     2    render,
     3    screen,
     4    waitForElementToBeRemoved,
     5  } from "@testing-library/react"
     6  import userEvent from "@testing-library/user-event"
     7  import React from "react"
     8  import { buttonsByComponent } from "./ApiButton"
     9  import { mockUIButtonUpdates } from "./ApiButton.testhelpers"
    10  import Features, { FeaturesTestProvider } from "./feature"
    11  import {
    12    BulkAction,
    13    buttonsByAction,
    14    OverviewTableBulkActions,
    15  } from "./OverviewTableBulkActions"
    16  import { ResourceSelectionProvider } from "./ResourceSelectionContext"
    17  import { disableButton, oneUIButton } from "./testdata"
    18  
    19  const TEST_SELECTIONS = ["frontend", "backend"]
    20  
    21  const TEST_UIBUTTONS = [
    22    oneUIButton({ componentID: "database" }),
    23    disableButton("frontend", true),
    24    oneUIButton({ componentID: "frontend" }),
    25    disableButton("backend", false),
    26  ]
    27  
    28  const OverviewTableBulkActionsTestWrapper = (props: {
    29    resourceSelections: string[]
    30  }) => {
    31    const { resourceSelections } = props
    32    const features = new Features(null)
    33    return (
    34      <FeaturesTestProvider value={features}>
    35        <ResourceSelectionProvider initialValuesForTesting={resourceSelections}>
    36          <OverviewTableBulkActions uiButtons={TEST_UIBUTTONS} />
    37        </ResourceSelectionProvider>
    38      </FeaturesTestProvider>
    39    )
    40  }
    41  
    42  describe("OverviewTableBulkActions", () => {
    43    beforeEach(() => {
    44      mockUIButtonUpdates()
    45    })
    46  
    47    afterEach(() => {})
    48  
    49    describe("when there are NO resources selected", () => {
    50      it("does NOT display", () => {
    51        render(<OverviewTableBulkActionsTestWrapper resourceSelections={[]} />)
    52  
    53        expect(screen.queryByLabelText("Bulk resource actions")).toBeNull()
    54      })
    55    })
    56  
    57    describe("when there are resources selected", () => {
    58      beforeEach(() => {
    59        render(
    60          <OverviewTableBulkActionsTestWrapper
    61            resourceSelections={TEST_SELECTIONS}
    62          />
    63        )
    64      })
    65  
    66      it("does display", () => {
    67        expect(screen.queryByLabelText("Bulk resource actions")).not.toBeNull()
    68      })
    69  
    70      it("displays the selected resource count", () => {
    71        expect(
    72          screen.queryByText(`${TEST_SELECTIONS.length} selected`)
    73        ).not.toBeNull()
    74      })
    75  
    76      it("renders an 'Enable' button that does NOT require confirmation", async () => {
    77        const enableButton = screen.queryByLabelText("Trigger Enable")
    78        expect(enableButton).toBeTruthy()
    79  
    80        // Clicking the button should NOT bring up a confirmation step
    81        userEvent.click(enableButton as HTMLElement)
    82  
    83        // Clicking an action button will remove the selected resources
    84        // and the bulk action bar will no longer appear
    85        await waitForElementToBeRemoved(screen.queryByLabelText("Trigger Enable"))
    86      })
    87  
    88      it("renders a 'Disable' button that does require confirmation", () => {
    89        const disableButton = screen.queryByLabelText("Trigger Disable")
    90        expect(disableButton).toBeTruthy()
    91  
    92        // Clicking the button should bring up a confirmation step
    93        userEvent.click(disableButton as HTMLElement)
    94  
    95        expect(screen.queryByLabelText("Confirm Disable")).toBeTruthy()
    96        expect(screen.queryByLabelText("Cancel Disable")).toBeTruthy()
    97      })
    98  
    99      it("clears the selected resources after a button has been clicked", async () => {
   100        const enableButton = screen.queryByLabelText("Trigger Enable")
   101        expect(enableButton).toBeTruthy()
   102  
   103        // Click the enable button, since there's not the extra confirmation step
   104        userEvent.click(enableButton as HTMLElement)
   105  
   106        // Expect that the component doesn't appear any more since there are no selections
   107        await waitForElementToBeRemoved(
   108          screen.queryByLabelText("Bulk resource actions")
   109        )
   110      })
   111    })
   112  
   113    describe("buttonsByAction", () => {
   114      it("groups UIButtons by the bulk action they perform", () => {
   115        const componentButtons = buttonsByComponent(TEST_UIBUTTONS)
   116        const actionButtons = buttonsByAction(
   117          componentButtons,
   118          new Set(TEST_SELECTIONS)
   119        )
   120  
   121        expect(actionButtons).toStrictEqual({
   122          [BulkAction.Disable]: [TEST_UIBUTTONS[1], TEST_UIBUTTONS[3]],
   123        })
   124      })
   125    })
   126  })