github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/ClusterStatusDialog.test.tsx (about)

     1  import { render, screen } from "@testing-library/react"
     2  import React from "react"
     3  import {
     4    ClusterStatusDialog,
     5    ClusterStatusDialogProps,
     6    CLUSTER_STATUS_HEALTHY,
     7    getDefaultCluster,
     8  } from "./ClusterStatusDialog"
     9  import { clusterConnection } from "./testdata"
    10  
    11  const TEST_BUTTON = document.createElement("button")
    12  TEST_BUTTON.textContent = "Cluster status"
    13  
    14  const DEFAULT_TEST_PROPS: ClusterStatusDialogProps = {
    15    open: true,
    16    onClose: () => console.log("closing dialog"),
    17    anchorEl: TEST_BUTTON,
    18  }
    19  const HEALTHY_CLUSTER = clusterConnection()
    20  const UNHEALTHY_CLUSTER = clusterConnection("Yikes, something went wrong.")
    21  
    22  describe("ClusterStatusDialog", () => {
    23    // Note: the MUI dialog component doesn't have good a11y markup,
    24    // so use the presence of the dialog close button to determine
    25    // whether or not the dialog has rendered.
    26    it("does NOT render if there is no cluster information", () => {
    27      render(<ClusterStatusDialog {...DEFAULT_TEST_PROPS} />)
    28  
    29      expect(screen.queryByLabelText("Close dialog")).toBeNull()
    30    })
    31  
    32    it("renders if there is cluster information", () => {
    33      render(
    34        <ClusterStatusDialog
    35          {...DEFAULT_TEST_PROPS}
    36          clusterConnection={HEALTHY_CLUSTER}
    37        />
    38      )
    39  
    40      expect(screen.queryByLabelText("Close dialog")).toBeTruthy()
    41    })
    42  
    43    it("renders Kubernetes connection information", () => {
    44      // The expected properties are hardcoded based on the test data
    45      // and order of properties in the property list component
    46      const expectedProperties = [
    47        "Product",
    48        "Context",
    49        "Namespace",
    50        "Architecture",
    51        "Local registry",
    52      ]
    53      const clusterStatus = HEALTHY_CLUSTER.status
    54      const k8sStatus = clusterStatus?.connection?.kubernetes
    55      const expectedDescriptions = [
    56        k8sStatus?.product,
    57        k8sStatus?.context,
    58        k8sStatus?.namespace,
    59        clusterStatus?.arch,
    60        clusterStatus?.registry?.host,
    61      ]
    62  
    63      render(
    64        <ClusterStatusDialog
    65          {...DEFAULT_TEST_PROPS}
    66          clusterConnection={HEALTHY_CLUSTER}
    67        />
    68      )
    69  
    70      const k8sProperties = screen
    71        .getAllByRole("term")
    72        .map((dt) => dt.textContent)
    73      const k8sDescriptions = screen
    74        .getAllByRole("definition")
    75        .map((dd) => dd.textContent)
    76  
    77      expect(k8sProperties).toStrictEqual(expectedProperties)
    78      expect(k8sDescriptions).toStrictEqual(expectedDescriptions)
    79    })
    80  
    81    it("displays `healthy` status with healthy icon if there is no error", () => {
    82      render(
    83        <ClusterStatusDialog
    84          {...DEFAULT_TEST_PROPS}
    85          clusterConnection={HEALTHY_CLUSTER}
    86        />
    87      )
    88  
    89      expect(screen.getByTestId("healthy-icon")).toBeTruthy()
    90      expect(screen.findByText(CLUSTER_STATUS_HEALTHY)).toBeTruthy()
    91      expect(screen.queryByTestId("unhealthy-icon")).toBeNull()
    92    })
    93  
    94    it("displays the error message with the unhealthy icon if there is an error", () => {
    95      render(
    96        <ClusterStatusDialog
    97          {...DEFAULT_TEST_PROPS}
    98          clusterConnection={UNHEALTHY_CLUSTER}
    99        />
   100      )
   101  
   102      expect(screen.getByTestId("unhealthy-icon")).toBeTruthy()
   103      expect(
   104        screen.getByText(UNHEALTHY_CLUSTER.status?.error as string)
   105      ).toBeTruthy()
   106      expect(screen.queryByTestId("healthy-icon")).toBeNull()
   107    })
   108  
   109    describe("getDefaultCluster", () => {
   110      const defaultCluster = clusterConnection()
   111      const nonDefaultClusterA = clusterConnection()
   112      nonDefaultClusterA.metadata!.name = "special"
   113      const nonDefaultClusterB = clusterConnection()
   114      nonDefaultClusterB.metadata!.name = "extra-special"
   115  
   116      it("returns the default cluster when it is present", () => {
   117        expect(
   118          getDefaultCluster([
   119            defaultCluster,
   120            nonDefaultClusterA,
   121            nonDefaultClusterB,
   122          ])
   123        ).toEqual(defaultCluster)
   124      })
   125  
   126      it("returns undefined when there are no clusters", () => {
   127        expect(getDefaultCluster()).toBe(undefined)
   128      })
   129  
   130      it("returns undefined when there is no default cluster", () => {
   131        expect(getDefaultCluster([nonDefaultClusterA, nonDefaultClusterB])).toBe(
   132          undefined
   133        )
   134      })
   135    })
   136  })