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