@vention/machine-ui 3.27.0

package/src/lib/components/vention-tree-item/vention-tree-item.test.tsx

@@ -0,0 +1,561 @@
+import "@testing-library/jest-dom"
+import { matchers } from "@emotion/jest"
+
+import { act, fireEvent, waitFor } from "@testing-library/react"
+
+import { renderWithTheme } from "../../testing/utils"
+import { machineUiTheme } from "../../theme/machine-ui-theme"
+import { VentionTreeItem } from "./vention-tree-item"
+import { IconAnchor, IconRobot } from "@tabler/icons-react"
+import { COLORS } from "../../theme/colors"
+import { useState } from "react"
+
+// Add the custom style matchers provided by '@emotion/jest' for testing hover styles, see test for 'showOnHover'
+expect.extend(matchers)
+
+describe("VentionTreeItem", () => {
+  it("renders label text when set", () => {
+    const labelText = "Item Label"
+    const { getByText } = renderWithTheme(<VentionTreeItem labelText={labelText} />)
+
+    const labelTextElement = getByText(labelText)
+    expect(labelTextElement).toBeInTheDocument()
+  })
+
+  describe("indentLevel", () => {
+    it.each([
+      [0, "16px"],
+      [1, "38px"],
+      [2, "60px"],
+    ])("should have the right padding for indentLevel=%i", (indentLevel, expectedPadding) => {
+      const labelText = "Item Label"
+      const { getByTestId } = renderWithTheme(<VentionTreeItem labelText={labelText} indentLevel={indentLevel} />)
+
+      const mainContentDiv = getByTestId("mainContent")
+
+      expect(mainContentDiv).toBeInTheDocument()
+      expect(mainContentDiv).toHaveStyle({ paddingLeft: expectedPadding })
+    })
+  })
+
+  describe("hasWarning", () => {
+    it("renders white background color when not set", () => {
+      const labelText = "Item Label"
+      const indentLevel = 0
+      const { getByTestId } = renderWithTheme(<VentionTreeItem labelText={labelText} indentLevel={indentLevel} />)
+
+      const mainContent = getByTestId("mainContent")
+      expect(mainContent).toHaveStyle({ backgroundColor: "white" })
+    })
+  })
+
+  describe("showOnHover", () => {
+    it("displays action button only on hover when showOnHover is set to true", async () => {
+      /**
+       * I wanted to test the visibility of the action button on hover event, but seems there are some issue with jest's toHaveStyle in regards to hover styles even after firing hover events on the target div.
+       * https://github.com/testing-library/jest-dom/issues/59
+       * Since we are using TSS for styling and that's built on top of @emtoion/react, I'm leveraging the @emotion/jest custom matcher, toHaveStyleRule, to at least assert the visibility style of the action button on hover
+       * https://emotion.sh/docs/@emotion/jest
+       * */
+
+      const labelText = "Item Label"
+      const indentLevel = 0
+      const actionButtons: React.ComponentProps<typeof VentionTreeItem>["actionButtons"] = [
+        { component: <IconRobot />, showOnHover: true, onClick: jest.fn() },
+        { component: <IconAnchor />, showOnHover: true, onClick: jest.fn() },
+      ]
+      const { getByTestId } = renderWithTheme(
+        <VentionTreeItem labelText={labelText} indentLevel={indentLevel} actionButtons={actionButtons} />
+      )
+
+      fireEvent.mouseEnter(getByTestId("mainContent"))
+
+      for (let i = 0; i < actionButtons.length; i++) {
+        const actionButtonContainer = getByTestId(`actionButtonContainer-${i}`)
+        expect(actionButtonContainer).toHaveStyle("visibility: hidden")
+        expect(actionButtonContainer).toHaveStyleRule("visibility", "visible", { target: ":hover" })
+      }
+    })
+
+    it("always displays the given action buttons when showOnHover is not set", async () => {
+      const labelText = "Item Label"
+      const indentLevel = 0
+      const actionButtons: React.ComponentProps<typeof VentionTreeItem>["actionButtons"] = [
+        { component: <IconRobot />, onClick: jest.fn() },
+        { component: <IconAnchor />, onClick: jest.fn() },
+      ]
+      const { getByTestId } = renderWithTheme(
+        <VentionTreeItem labelText={labelText} indentLevel={indentLevel} actionButtons={actionButtons} />
+      )
+
+      for (let i = 0; i < actionButtons.length; i++) {
+        const actionButtonContainer = getByTestId(`actionButtonContainer-${i}`)
+        expect(actionButtonContainer).toHaveStyle("visibility: visible")
+        expect(actionButtonContainer).toHaveStyleRule("visibility", "visible", { target: ":hover" })
+      }
+    })
+
+    it("should display the given action button where showOnHover is set to true, and not display for those set to false", async () => {
+      const labelText = "Item Label"
+      const indentLevel = 0
+
+      const handleClickMock = jest.fn()
+
+      const actionButtons: React.ComponentProps<typeof VentionTreeItem>["actionButtons"] = [
+        { component: <IconRobot />, showOnHover: true, onClick: jest.fn() },
+        { component: <IconAnchor />, showOnHover: false, onClick: handleClickMock },
+      ]
+      const { getByTestId } = renderWithTheme(
+        <VentionTreeItem labelText={labelText} indentLevel={indentLevel} actionButtons={actionButtons} />
+      )
+
+      const actionButtonContainer0 = getByTestId(`actionButtonContainer-0`)
+      const actionButtonContainer1 = getByTestId(`actionButtonContainer-1`)
+
+      expect(actionButtonContainer0).toHaveStyle("visibility: hidden")
+      expect(actionButtonContainer0).not.toHaveStyleRule("visibility", "hidden")
+
+      expect(actionButtonContainer1).toHaveStyle("visibility: visible")
+      expect(actionButtonContainer1).toHaveStyleRule("visibility", "visible")
+
+      fireEvent.click(actionButtonContainer1)
+
+      expect(handleClickMock).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("onClick", () => {
+    it("calls the onClick function when the item is clicked", () => {
+      const labelText = "Item Label"
+      const testID = "treeItem"
+      const indentLevel = 0
+      const handleClickMock = jest.fn()
+      const { getByTestId } = renderWithTheme(
+        <VentionTreeItem dataTestid={testID} labelText={labelText} indentLevel={indentLevel} onClick={handleClickMock} />
+      )
+
+      fireEvent.click(getByTestId(testID))
+      expect(handleClickMock).toHaveBeenCalledTimes(1)
+    })
+
+    it("calls the onClick function when the item icon is clicked", () => {
+      const labelText = "Item Label"
+      const testID = "treeItem"
+      const indentLevel = 0
+      const handleClickMock = jest.fn()
+      const { getByTestId } = renderWithTheme(
+        <VentionTreeItem
+          dataTestid={testID}
+          labelText={labelText}
+          indentLevel={indentLevel}
+          onClick={handleClickMock}
+          icon={<IconAnchor />}
+        />
+      )
+
+      fireEvent.click(getByTestId("treeItemIcon"))
+      expect(handleClickMock).toHaveBeenCalledTimes(1)
+    })
+
+    it("should not throw when onClick function is not provided to the tree item", () => {
+      const labelText = "Item Label"
+      const testID = "treeItem"
+      const indentLevel = 0
+      const { getByTestId } = renderWithTheme(<VentionTreeItem dataTestid={testID} labelText={labelText} indentLevel={indentLevel} />)
+
+      expect(() => {
+        fireEvent.click(getByTestId(testID))
+      }).not.toThrow()
+    })
+
+    it("should not throw when onClick function is not provided to the tree item icon", () => {
+      const labelText = "Item Label"
+      const testID = "treeItem"
+      const indentLevel = 0
+      const { getByTestId } = renderWithTheme(
+        <VentionTreeItem dataTestid={testID} labelText={labelText} indentLevel={indentLevel} icon={<IconAnchor />} />
+      )
+
+      expect(() => {
+        fireEvent.click(getByTestId("treeItemIcon"))
+      }).not.toThrow()
+    })
+  })
+
+  it("calls the onContextMenu function when the item is right clicked", () => {
+    const labelText = "Item Label"
+    const indentLevel = 0
+    const handleClickMock = jest.fn()
+    const { getByTestId } = renderWithTheme(
+      <VentionTreeItem labelText={labelText} indentLevel={indentLevel} onContextMenu={handleClickMock} />
+    )
+
+    fireEvent.contextMenu(getByTestId("mainContent"))
+    expect(handleClickMock).toHaveBeenCalledTimes(1)
+  })
+
+  it("onClick doesn't run when right clicking", () => {
+    // not sure why this needs to be tested but jest coverage is complaining about it
+    const labelText = "Item Label"
+    const indentLevel = 0
+    const testID = "treeItem"
+    const handleClickMock = jest.fn()
+    const { getByTestId } = renderWithTheme(
+      <VentionTreeItem
+        labelText={labelText}
+        dataTestid={testID}
+        indentLevel={indentLevel}
+        onContextMenu={undefined}
+        onClick={handleClickMock}
+      />
+    )
+
+    fireEvent.contextMenu(getByTestId(testID))
+    expect(handleClickMock).toHaveBeenCalledTimes(0)
+  })
+
+  describe("When hovering the tree item", () => {
+    it("calls the onMouseEnter function when the item is hovered and onMouseLeave when item is unhovered", () => {
+      const labelText = "Item Label"
+      const indentLevel = 0
+      const handleMouseEnter = jest.fn()
+      const handleMouseLeave = jest.fn()
+      const { getByTestId } = renderWithTheme(
+        <VentionTreeItem labelText={labelText} indentLevel={indentLevel} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} />
+      )
+
+      fireEvent.mouseEnter(getByTestId("mainContent"))
+      expect(handleMouseEnter).toHaveBeenCalledTimes(1)
+      fireEvent.mouseLeave(getByTestId("mainContent"))
+      expect(handleMouseLeave).toHaveBeenCalledTimes(1)
+    })
+
+    it("should not throw when onMouseEnter or onMouseLeave function is not provided to the tree item", () => {
+      const labelText = "Item Label"
+      const indentLevel = 0
+      const { getByTestId } = renderWithTheme(<VentionTreeItem labelText={labelText} indentLevel={indentLevel} />)
+
+      expect(() => {
+        fireEvent.mouseEnter(getByTestId("mainContent"))
+        fireEvent.mouseLeave(getByTestId("mainContent"))
+      }).not.toThrow()
+    })
+
+    it("should not show the actionButtonContainer when actionButtons are not provided and hovering the tree item", async () => {
+      const { queryByTestId } = renderWithTheme(<VentionTreeItem labelText={"Item Label"} indentLevel={0} />)
+
+      fireEvent.mouseEnter(queryByTestId("mainContent"))
+
+      expect(queryByTestId("actionButtonContainer")).toBeNull()
+    })
+
+    it("Should not show the actionButtonContainer if all buttons have showOnHover set to true, and show them when hovering", async () => {
+      const actionButtons: React.ComponentProps<typeof VentionTreeItem>["actionButtons"] = [
+        { component: <IconRobot />, showOnHover: true, onClick: jest.fn() },
+        { component: <IconAnchor />, showOnHover: true, onClick: jest.fn() },
+      ]
+      const { queryByTestId } = renderWithTheme(<VentionTreeItem labelText={"Item Label"} indentLevel={0} actionButtons={actionButtons} />)
+
+      expect(queryByTestId("actionButtonContainer")).toBeNull()
+
+      fireEvent.mouseEnter(queryByTestId("mainContent"))
+      expect(queryByTestId("actionButtonContainer")).not.toBeNull()
+    })
+
+    it("should show the actionButtonContainer if at least one button has showOnHover set to false", async () => {
+      const actionButtons: React.ComponentProps<typeof VentionTreeItem>["actionButtons"] = [
+        { component: <IconRobot />, showOnHover: true, onClick: jest.fn() },
+        { component: <IconAnchor />, showOnHover: false, onClick: jest.fn() },
+      ]
+      const { queryByTestId } = renderWithTheme(<VentionTreeItem labelText={"Item Label"} indentLevel={0} actionButtons={actionButtons} />)
+
+      expect(queryByTestId("actionButtonContainer")).not.toBeNull()
+    })
+  })
+
+  describe("Renaming label for tree item", () => {
+    it('calls the onLabelChange function when tree item is renamed through "Enter" key', () => {
+      const labelText = "Item Label"
+      const treeItemID = "treeItem"
+      const indentLevel = 0
+      const handleLabelChangeMock = jest.fn()
+      const Component = () => {
+        const [isRenaming, setIsRenaming] = useState(false)
+
+        return (
+          <VentionTreeItem
+            dataTestid={treeItemID}
+            onLabelChange={handleLabelChangeMock}
+            labelText={labelText}
+            indentLevel={indentLevel}
+            isRenaming={isRenaming}
+            onRenaming={setIsRenaming}
+          />
+        )
+      }
+      const { getByTestId } = renderWithTheme(<Component />)
+      const treeItem = getByTestId(treeItemID)
+      const newLabel = "New Label"
+
+      fireEvent.doubleClick(treeItem)
+      const treeInputElement = getByTestId("tree-item-text-input").querySelector("input")
+      fireEvent.input(treeInputElement, { target: { value: newLabel } })
+      fireEvent.keyUp(treeInputElement, { key: "Enter", code: "Enter" })
+
+      expect(handleLabelChangeMock).toHaveBeenCalledTimes(1)
+      expect(handleLabelChangeMock).toHaveBeenCalledWith(newLabel)
+      expect(treeInputElement).toHaveValue(newLabel)
+    })
+
+    it('calls the onLabelChange function when tree item is renamed through "blur"', () => {
+      const labelText = "Item Label"
+      const treeItemID = "treeItem"
+      const indentLevel = 0
+      const handleLabelChangeMock = jest.fn()
+
+      const Component = () => {
+        const [isRenaming, setIsRenaming] = useState(false)
+
+        return (
+          <VentionTreeItem
+            dataTestid={treeItemID}
+            onLabelChange={handleLabelChangeMock}
+            labelText={labelText}
+            indentLevel={indentLevel}
+            isRenaming={isRenaming}
+            onRenaming={setIsRenaming}
+          />
+        )
+      }
+
+      const { getByTestId } = renderWithTheme(<Component />)
+      const treeItem = getByTestId(treeItemID)
+      const newLabel = "New Label"
+
+      fireEvent.doubleClick(treeItem)
+      const treeInputElement = getByTestId("tree-item-text-input").querySelector("input")
+      fireEvent.input(treeInputElement, { target: { value: newLabel } })
+      fireEvent.blur(treeInputElement)
+
+      expect(handleLabelChangeMock).toHaveBeenCalledTimes(1)
+      expect(handleLabelChangeMock).toHaveBeenCalledWith(newLabel)
+      expect(treeInputElement).toHaveValue(newLabel)
+    })
+
+    it("should handle when onLabelChange not defined", () => {
+      const testID = "treeItem"
+      const labelText = "Item Label"
+      const indentLevel = 0
+      const Component = () => {
+        const [isRenaming, setIsRenaming] = useState(false)
+
+        return (
+          <VentionTreeItem
+            dataTestid={testID}
+            labelText={labelText}
+            indentLevel={indentLevel}
+            isRenaming={isRenaming}
+            onRenaming={setIsRenaming}
+          />
+        )
+      }
+      const { getByTestId } = renderWithTheme(<Component />)
+
+      expect(() => {
+        fireEvent.doubleClick(getByTestId(testID))
+        const treeInputElement = getByTestId("tree-item-text-input").querySelector("input")
+        fireEvent.keyUp(treeInputElement, { key: "Enter", code: "Enter" })
+      }).not.toThrow()
+    })
+
+    it("should handle when onRenaming not defined", () => {
+      const testID = "treeItem"
+      const labelText = "Item Label"
+      const indentLevel = 0
+      const Component = () => {
+        const [isRenaming, _] = useState(false)
+
+        return <VentionTreeItem dataTestid={testID} labelText={labelText} indentLevel={indentLevel} isRenaming={isRenaming} />
+      }
+      const { getByTestId } = renderWithTheme(<Component />)
+
+      expect(() => {
+        fireEvent.doubleClick(getByTestId(testID))
+      }).not.toThrow()
+    })
+  })
+
+  describe("isSelected", () => {
+    it("has white background when isSelected is not set", () => {
+      const labelText = "Item Label"
+      const indentLevel = 0
+      const { getByTestId } = renderWithTheme(<VentionTreeItem labelText={labelText} indentLevel={indentLevel} />)
+
+      const mainContent = getByTestId("mainContent")
+
+      expect(mainContent).toHaveStyle({ backgroundColor: "white" })
+    })
+
+    it("has yellow background when isSelected is set and hasWarning", () => {
+      const labelText = "Item Label"
+      const indentLevel = 0
+      const { getByTestId } = renderWithTheme(<VentionTreeItem labelText={labelText} indentLevel={indentLevel} isSelected hasWarning />)
+
+      const mainContent = getByTestId("mainContent")
+
+      expect(mainContent).toHaveStyle({ backgroundColor: machineUiTheme.palette.button.shaded })
+    })
+  })
+
+  describe("collapsable caret button", () => {
+    it("renders a collapsable button when children are present, and not visible when no children", () => {
+      const childItem = <VentionTreeItem labelText={"child"} indentLevel={1} />
+      const parentItem = (
+        <VentionTreeItem labelText={"parent"} indentLevel={0}>
+          {childItem}
+        </VentionTreeItem>
+      )
+      const { getAllByTestId } = renderWithTheme(parentItem)
+      const elements = getAllByTestId("collapsibleCaretButton")
+      const parentCaretButton = elements[0]
+      const childCaretButton = elements[1]
+
+      expect(parentCaretButton).toBeInTheDocument()
+      expect(parentCaretButton).toHaveStyle("visibility: visible")
+      expect(childCaretButton).toHaveStyle("visibility: hidden")
+    })
+
+    it("expands caret button on click", async () => {
+      const Component = () => {
+        const [isExpanded, setIsExpanded] = useState(false)
+
+        return (
+          <VentionTreeItem labelText={"parent"} indentLevel={0} isExpanded={isExpanded} onExpansionChange={setIsExpanded}>
+            <VentionTreeItem labelText={"child"} indentLevel={1} />
+          </VentionTreeItem>
+        )
+      }
+
+      const { getAllByTestId } = renderWithTheme(<Component />)
+      const elements = getAllByTestId("collapsibleCaretButton")
+      const parentCaretButton = elements[0]
+
+      act(() => {
+        fireEvent.click(parentCaretButton)
+      })
+
+      await waitFor(
+        () => {
+          expect(parentCaretButton).toHaveStyle("transform: rotate(90deg)")
+        },
+        { timeout: 1000 }
+      )
+    })
+
+    it("should have caret expanded when the default prop of isExpanded is true", () => {
+      const childItem = <VentionTreeItem labelText={"child"} indentLevel={1} />
+      const parentItem = (
+        <VentionTreeItem labelText={"parent"} indentLevel={0} isExpanded={true}>
+          {childItem}
+        </VentionTreeItem>
+      )
+      const { getAllByTestId } = renderWithTheme(parentItem)
+      const elements = getAllByTestId("collapsibleCaretButton")
+      const parentCaretButton = elements[0]
+
+      expect(parentCaretButton).toHaveStyle("transform: rotate(90deg)")
+    })
+
+    it("calls the onExpansionChange function when the item is expanded", () => {
+      const labelText = "Item Label"
+      const indentLevel = 0
+      const handleExpansionChangeMock = jest.fn()
+      const { getByTestId } = renderWithTheme(
+        <VentionTreeItem labelText={labelText} indentLevel={indentLevel} onExpansionChange={handleExpansionChangeMock} />
+      )
+
+      fireEvent.click(getByTestId("collapsibleCaretButton"))
+      expect(handleExpansionChangeMock).toHaveBeenCalledTimes(1)
+    })
+
+    it("should handled when onExpansionChange not defined", () => {
+      const labelText = "Item Label"
+      const indentLevel = 0
+      const { getByTestId } = renderWithTheme(<VentionTreeItem labelText={labelText} indentLevel={indentLevel} />)
+
+      expect(() => {
+        fireEvent.click(getByTestId("collapsibleCaretButton"))
+      }).not.toThrow()
+    })
+
+    it("should have captionRight when provided and onClick called", () => {
+      const labelText = "Item Label"
+      const indentLevel = 0
+      const click = jest.fn()
+      const captionsRight: React.ComponentProps<typeof VentionTreeItem>["captionsRight"] = [
+        {
+          text: "Caption R",
+          color: "orange",
+          onClick: click,
+        },
+        {
+          text: "Caption R2",
+          color: "blue",
+          onClick: click,
+        },
+      ]
+      const { getByTestId } = renderWithTheme(
+        <VentionTreeItem labelText={labelText} indentLevel={indentLevel} captionsRight={captionsRight} />
+      )
+
+      const captionRightDiv0 = getByTestId("captionRight-0")
+      const captionRightDiv1 = getByTestId("captionRight-1")
+
+      expect(captionRightDiv0).toHaveTextContent(captionsRight[0].text)
+      expect(captionRightDiv0).toHaveStyle(`color: ${captionsRight[0].color}`)
+      fireEvent.click(captionRightDiv0)
+
+      expect(captionRightDiv1).toHaveTextContent(captionsRight[1].text)
+      expect(captionRightDiv1).toHaveStyle(`color: ${captionsRight[1].color}`)
+      fireEvent.click(captionRightDiv1)
+
+      expect(click).toHaveBeenCalledTimes(2)
+    })
+
+    it("should not have onHover style when onClick is not provided", () => {
+      const labelText = "Item Label"
+      const indentLevel = 0
+      const captionRight: React.ComponentProps<typeof VentionTreeItem>["captionsRight"] = [
+        {
+          text: "Caption R",
+          color: "orange",
+          onClick: undefined,
+        },
+      ]
+      const { getByTestId } = renderWithTheme(
+        <VentionTreeItem labelText={labelText} indentLevel={indentLevel} captionsRight={captionRight} />
+      )
+      const captionRightDiv = getByTestId("captionRight")
+      fireEvent.mouseEnter(captionRightDiv)
+      expect(captionRightDiv).not.toHaveStyle(`background: ${COLORS.slate[200]}`)
+    })
+
+    it("does not render a caret when collapsible is false on a parent with children", () => {
+      const child = <VentionTreeItem dataTestid={"child-node"} labelText={"child"} indentLevel={1} />
+      const parent = (
+        <VentionTreeItem dataTestid={"parent-node"} labelText={"parent"} indentLevel={0} collapsible={false}>
+          {child}
+        </VentionTreeItem>
+      )
+
+      const { queryByTestId, getByTestId } = renderWithTheme(parent)
+
+      expect(queryByTestId("parent-node-collapse-button")).toBeNull()
+
+      // Child caret component will load, but will be hidden (no children)
+      const childCaret = getByTestId("child-node-collapse-button")
+      expect(childCaret).toBeInTheDocument()
+      expect(childCaret).toHaveStyle("visibility: hidden")
+    })
+  })
+})