@vention/machine-ui 3.27.0 → 3.29.1-test.0

package/src/lib/components/vention-menu/vention-menu.test.tsx

@@ -1,234 +0,0 @@
-import "@testing-library/jest-dom"
-
-import { Icon3dRotate, IconAddressBook } from "@tabler/icons-react"
-import { fireEvent } from "@testing-library/react"
-import { machineUiTheme } from "../../theme/machine-ui-theme"
-import { renderWithTheme } from "../../testing/utils"
-import { VentionMenu } from "./vention-menu"
-import { VentionMenuItemProps } from "./vention-menu-item/vention-menu-item"
-import { useContext, useState } from "react"
-import { VentionMenuContext } from "./vention-menu-context"
-
-const handleClickMock = jest.fn()
-
-const optionsArr: VentionMenuItemProps[] = [
-  { labelText: "Option1", onClick: handleClickMock, closeMenuOnClick: true },
-  { labelText: "Option2", onClick: handleClickMock, closeMenuOnClick: false, leftElement: <Icon3dRotate /> },
-  { labelText: "Option3", shortcutKey: "K", onClick: handleClickMock, closeMenuOnClick: true },
-  { labelText: "Option4", shortcutKey: "K", leftElement: <IconAddressBook />, onClick: handleClickMock, closeMenuOnClick: true },
-]
-
-const setShowMenuMock = jest.fn(show => show)
-describe("VentionMenu", () => {
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
-  it("should render the menu", () => {
-    const { queryByTestId } = renderWithTheme(<VentionMenu menuOptionsInfo={optionsArr} size="small" setShowMenu={setShowMenuMock} />)
-    const menuRootDiv = queryByTestId("menuRootDiv")
-    expect(menuRootDiv).toBeInTheDocument()
-  })
-
-  it("should render the menu with zIndex of theme.zIndex.modal", () => {
-    const { queryByTestId } = renderWithTheme(<VentionMenu />)
-    const menuRootDiv = queryByTestId("menuRootDiv")
-    expect(menuRootDiv).toHaveStyle({ zIndex: machineUiTheme.zIndex.modal })
-  })
-
-  it("should render medium menu", () => {
-    const { queryByTestId } = renderWithTheme(<VentionMenu menuOptionsInfo={optionsArr} size="medium" setShowMenu={setShowMenuMock} />)
-    const menuRootDiv = queryByTestId("menuRootDiv")
-    expect(menuRootDiv).toBeInTheDocument()
-  })
-
-  it("should render large menu", () => {
-    const { queryByTestId } = renderWithTheme(<VentionMenu menuOptionsInfo={optionsArr} size="large" setShowMenu={setShowMenuMock} />)
-    const menuRootDiv = queryByTestId("menuRootDiv")
-    expect(menuRootDiv).toBeInTheDocument()
-  })
-
-  it("should render x-large menu", () => {
-    const { queryByTestId } = renderWithTheme(<VentionMenu menuOptionsInfo={optionsArr} size="x-large" setShowMenu={setShowMenuMock} />)
-    const menuRootDiv = queryByTestId("menuRootDiv")
-    expect(menuRootDiv).toBeInTheDocument()
-  })
-
-  it("should render the menu header", () => {
-    const { getByRole, getByTestId } = renderWithTheme(
-      <VentionMenu setShowMenu={setShowMenuMock}>
-        <VentionMenu.Header labelText="Test Header" size="small" />
-      </VentionMenu>
-    )
-    expect(getByTestId("menuRootDiv")).toBeInTheDocument()
-    expect(getByRole("menuitem", { name: "Test Header" })).toBeInTheDocument()
-  })
-
-  it("should render the menu divider", () => {
-    const { getByRole, getByTestId } = renderWithTheme(
-      <VentionMenu setShowMenu={setShowMenuMock}>
-        <VentionMenu.Divider size="small" />
-      </VentionMenu>
-    )
-    expect(getByTestId("menuRootDiv")).toBeInTheDocument()
-    expect(getByRole("separator")).toBeInTheDocument()
-  })
-
-  it("should render the menu with composition", () => {
-    const { getByRole, getByTestId } = renderWithTheme(
-      <VentionMenu setShowMenu={setShowMenuMock}>
-        <VentionMenu.Item labelText="Option1" />
-        <VentionMenu.Item labelText="Option2" />
-      </VentionMenu>
-    )
-    expect(getByTestId("menuRootDiv")).toBeInTheDocument()
-    expect(getByRole("menuitem", { name: "Option1" })).toBeInTheDocument()
-    expect(getByRole("menuitem", { name: "Option2" })).toBeInTheDocument()
-  })
-
-  it("should render the menu with menu-items with a defined `children` prop", () => {
-    const { getByRole, getByTestId } = renderWithTheme(
-      <VentionMenu setShowMenu={setShowMenuMock}>
-        <VentionMenu.Item>Option1</VentionMenu.Item>
-        <VentionMenu.Item>Option2</VentionMenu.Item>
-      </VentionMenu>
-    )
-    expect(getByTestId("menuRootDiv")).toBeInTheDocument()
-    expect(getByRole("menuitem", { name: "Option1" })).toBeInTheDocument()
-    expect(getByRole("menuitem", { name: "Option2" })).toBeInTheDocument()
-  })
-
-  it("should call the onClick function when the option is clicked", () => {
-    const { getAllByTestId } = renderWithTheme(<VentionMenu menuOptionsInfo={optionsArr} size="x-large" setShowMenu={setShowMenuMock} />)
-    const menuItemDivs = getAllByTestId("menuOption")
-    fireEvent.click(menuItemDivs[0])
-    expect(handleClickMock).toHaveBeenCalled()
-  })
-
-  it("should close the menu when the option is clicked if `closeMenuOnClick` is `true`", () => {
-    const { getAllByTestId } = renderWithTheme(<VentionMenu menuOptionsInfo={optionsArr} closeMenuOnClick setShowMenu={setShowMenuMock} />)
-    const menuItemDivs = getAllByTestId("menuOption")
-    fireEvent.click(menuItemDivs[0])
-    expect(handleClickMock).toHaveBeenCalled()
-    expect(setShowMenuMock).toHaveBeenCalled()
-  })
-
-  it("should not close the menu when the option is clicked if `closeMenuOnClick` is `false`", () => {
-    const { getAllByTestId } = renderWithTheme(
-      <VentionMenu closeMenuOnClick={false} setShowMenu={setShowMenuMock}>
-        <VentionMenu.Item labelText="TestOption" />
-      </VentionMenu>
-    )
-    const menuItemDivs = getAllByTestId("menuOption")
-    fireEvent.click(menuItemDivs[0])
-    expect(setShowMenuMock).not.toHaveBeenCalled()
-  })
-
-  it("should take the menu item's `closeMenuOnClick` prop over the menu's props", () => {
-    const { getAllByTestId } = renderWithTheme(
-      <VentionMenu closeMenuOnClick setShowMenu={setShowMenuMock}>
-        <VentionMenu.Item labelText="TestOption" closeMenuOnClick={false} />
-      </VentionMenu>
-    )
-    const menuItemDivs = getAllByTestId("menuOption")
-    fireEvent.click(menuItemDivs[0])
-    expect(setShowMenuMock).not.toHaveBeenCalled()
-  })
-
-  it("should handle closing the menu when you click outside of the menu", () => {
-    // Bug with ClickAwayListener: https://github.com/mui/material-ui/issues/24783
-    // We need to use fakeTimers so that ClickAwayListener attaches event listeners
-    jest.useFakeTimers()
-
-    // Test Wrapper component to control showMenu state as parent
-    const VentionMenuTestWrapper = ({ optionsArr }) => {
-      const [showMenu, setShowMenu] = useState(true)
-
-      return <VentionMenu menuOptionsInfo={optionsArr} size="x-large" showMenu={showMenu} setShowMenu={setShowMenu} />
-    }
-
-    const { queryByTestId } = renderWithTheme(<VentionMenuTestWrapper optionsArr={optionsArr} />)
-    const menu = queryByTestId("menuRootDiv")
-
-    expect(menu).toBeInTheDocument()
-
-    jest.runAllTimers()
-
-    fireEvent.click(document)
-
-    expect(menu).not.toBeInTheDocument()
-  })
-
-  it("should not close the menu when you click inside the menu", () => {
-    const setShowMenuMock = jest.fn()
-    const { getAllByTestId } = renderWithTheme(<VentionMenu menuOptionsInfo={optionsArr} size="x-large" setShowMenu={setShowMenuMock} />)
-    const menuItemDivs = getAllByTestId("menuOption")
-
-    fireEvent.click(menuItemDivs[1]) // Menu item 1 has closeMenuOnClick set to false
-
-    expect(setShowMenuMock).not.toHaveBeenCalled()
-  })
-
-  it("should return null if showMenu is false", () => {
-    const { queryByTestId } = renderWithTheme(
-      <VentionMenu menuOptionsInfo={optionsArr} size="x-large" setShowMenu={setShowMenuMock} showMenu={false} />
-    )
-    const menuRootDiv = queryByTestId("menuRootDiv")
-
-    expect(menuRootDiv).toBeNull()
-  })
-
-  describe("nested menus", () => {
-    const subMenu = (
-      <>
-        <VentionMenu.Item labelText="SubOption1" />
-        <VentionMenu.Item labelText="SubOption2" />
-      </>
-    )
-    const optionsWithSubOptionsArr = [...optionsArr, { labelText: "Option5", subMenuItems: subMenu }]
-
-    it("should render the menu when there are submenus", () => {
-      const { queryAllByTestId } = renderWithTheme(
-        <VentionMenu menuOptionsInfo={optionsWithSubOptionsArr} size="small" setShowMenu={setShowMenuMock} />
-      )
-      const menuRootDiv = queryAllByTestId("menuRootDiv")[0]
-      expect(menuRootDiv).toBeInTheDocument()
-    })
-
-    it("should render the submenu only when its parent item is hovered", async () => {
-      const { findByRole, getByRole, queryByRole } = renderWithTheme(
-        <VentionMenu menuOptionsInfo={optionsWithSubOptionsArr} size="small" setShowMenu={setShowMenuMock} />
-      )
-      const menuOptionWithSubmenu = getByRole("menuitem", { name: "Option5" })
-      const menuOptionLabel = menuOptionWithSubmenu.parentElement
-
-      fireEvent.mouseOver(menuOptionLabel)
-
-      expect(await findByRole("menuitem", { name: "SubOption1" })).toBeInTheDocument()
-      expect(await findByRole("menuitem", { name: "SubOption2" })).toBeInTheDocument()
-
-      fireEvent.mouseOut(menuOptionLabel)
-
-      expect(queryByRole("menuitem", { name: "SubOption1" })).not.toBeInTheDocument()
-    })
-  })
-
-  describe("context", () => {
-    it("should have default values", () => {
-      let contextValues
-      const TestComponent = () => {
-        contextValues = useContext(VentionMenuContext)
-
-        return <>Test</>
-      }
-      renderWithTheme(<TestComponent />)
-      // this is only useful to get 100% test coverage
-      const res = contextValues.closeMenu()
-
-      expect(contextValues.closeMenuOnClick).toBe(false)
-      expect(contextValues.size).toBe("small")
-      expect(contextValues.menuWidth).toBe("280px")
-      expect(res).toBeUndefined()
-    })
-  })
-})

package/src/lib/components/vention-menu/vention-menu.tsx

@@ -1,44 +0,0 @@
-import { ClickAwayListener } from "@mui/material"
-import { VentionMenuList, VentionMenuListProps } from "./vention-menu-list"
-import { MenuSize } from "./vention-menu-styling-helpers"
-import { VentionMenuItem } from "./vention-menu-item/vention-menu-item"
-import { VentionMenuContext } from "./vention-menu-context"
-import { VentionMenuHeader } from "./vention-menu-item/vention-menu-header"
-import { VentionMenuDivider } from "./vention-menu-item/vention-menu-divider"
-
-export type VentionMenuProps = VentionMenuListProps & {
-  showMenu?: boolean
-  setShowMenu?: (show: boolean) => void
-  closeMenuOnClick?: boolean
-  size?: MenuSize
-  menuWidth?: string
-}
-
-export const VentionMenu = ({
-  showMenu = true,
-  setShowMenu,
-  closeMenuOnClick = true,
-  size = "small",
-  menuWidth = "280px",
-  children,
-  ...ventionMenuListProps
-}: VentionMenuProps) => {
-  const closeMenu = () => {
-    setShowMenu(false)
-  }
-
-  return showMenu ? (
-    <VentionMenuContext.Provider value={{ closeMenuOnClick, size, menuWidth, closeMenu }}>
-      <ClickAwayListener onClickAway={closeMenu}>
-        {/* the div is required for the click away to work properly */}
-        <div style={{ display: "inline-block" }}>
-          <VentionMenuList {...ventionMenuListProps}>{children}</VentionMenuList>
-        </div>
-      </ClickAwayListener>
-    </VentionMenuContext.Provider>
-  ) : null
-}
-
-VentionMenu.Item = VentionMenuItem
-VentionMenu.Header = VentionMenuHeader
-VentionMenu.Divider = VentionMenuDivider

package/src/lib/components/vention-modal/vention-modal.stories.tsx

@@ -1,204 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import React, { useState } from "react"
-
-import { VentionButton } from "../vention-button/vention-button"
-import { VentionModal, VentionModalProps } from "./vention-modal"
-import { tss } from "tss-react/mui"
-
-const StoryBookComponent = (props: VentionModalProps) => {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <>
-      <VentionButton
-        labelText="Open Modal"
-        onClick={() => {
-          setIsOpen(true)
-        }}
-      />
-      <VentionModal {...props} isOpen={isOpen} onClose={() => setIsOpen(false)} />
-    </>
-  )
-}
-
-const meta: Meta<typeof VentionModal> = {
-  component: VentionModal,
-  title: "Components/VentionModal",
-  render: StoryBookComponent,
-}
-
-export default meta
-type Story = StoryObj<typeof VentionModal>
-
-export const Medium: Story = {
-  args: {
-    modalSize: "medium",
-    type: "negative",
-    titleText: "Brief descriptive message",
-    body: "In a perfect world, content stays brief. Yet, when more words are essential, it unfolds like this.",
-    primaryButton: {
-      text: "Primary Button",
-      onClick: () => console.log("Primary button clicked"),
-    },
-    secondaryButton: {
-      text: "Secondary Button",
-      onClick: () => console.log("Secondary button clicked"),
-    },
-  },
-}
-
-export const DisabledButtons: Story = {
-  args: {
-    modalSize: "medium",
-    type: "negative",
-    titleText: "Brief descriptive message",
-    body: "In a perfect world, content stays brief. Yet, when more words are essential, it unfolds like this.",
-    primaryButton: {
-      text: "Primary Button",
-      onClick: () => console.log("Primary button clicked"),
-    },
-    secondaryButton: {
-      text: "Can't click me",
-      onClick: () => console.log("Secondary button clicked"),
-      disabled: true,
-    },
-  },
-}
-
-export const XLargeTouch: Story = {
-  args: {
-    modalSize: "x-large",
-    isTouchDevice: true,
-    type: "positive",
-    titleText: "Brief descriptive message",
-    body: "In a perfect world, content stays brief. Yet, when more words are essential, it unfolds like this.",
-    primaryButton: {
-      text: "Primary Button",
-      onClick: () => console.log("Primary button clicked"),
-    },
-    secondaryButton: {
-      text: "Secondary Button",
-      onClick: () => console.log("Secondary button clicked"),
-    },
-  },
-}
-
-export const XLargeTouchNoType: Story = {
-  args: {
-    modalSize: "x-large",
-    isTouchDevice: true,
-    type: "none",
-    titleText: "Reset robot connection",
-    body: "Resetting the robot connection will disconnect then reconnect the ControlCenter to the robot.",
-    primaryButton: {
-      text: "Reset Connection",
-      onClick: () => console.log("Primary button clicked"),
-    },
-    secondaryButton: {
-      text: "Cancel",
-      onClick: () => console.log("Secondary button clicked"),
-    },
-  },
-}
-
-export const Large: Story = {
-  args: {
-    modalSize: "large",
-    type: "positive",
-    titleText: "Long descriptive message",
-    body: "In a perfect world, content stays brief. Yet, when more words are essential, it unfolds like this.",
-    primaryButton: {
-      text: "Primary Button",
-      onClick: () => console.log("Primary button clicked"),
-    },
-    secondaryButton: {
-      text: "Secondary Button",
-      onClick: () => console.log("Secondary button clicked"),
-    },
-  },
-}
-
-export const SmallInfo: Story = {
-  args: {
-    modalSize: "small",
-    type: "info",
-    titleText: "Short message",
-    body: "In a perfect world, content stays brief. Yet, when more words are essential, it unfolds like this.",
-    primaryButton: {
-      text: "Primary Button",
-      onClick: () => console.log("Primary button clicked"),
-    },
-  },
-}
-
-export const SmallWarning: Story = {
-  args: {
-    modalSize: "small",
-    type: "warning",
-    titleText: "Short message",
-    body: "In a perfect world, content stays brief. Yet, when more words are essential, it unfolds like this.",
-    primaryButton: {
-      text: "Primary Button",
-      onClick: () => console.log("Primary button clicked"),
-      variant: "filled-brand",
-    },
-  },
-}
-
-const CustomBody = () => {
-  const { classes } = tss.create({
-    line1: { color: "green" },
-    line2: { color: "red", backgroundColor: "lightgrey", fontWeight: "bold" },
-  })()
-
-  return (
-    <div>
-      <div className={classes.line1}>You can use your own component instead of text</div>
-      <div className={classes.line2}>And style it any way you want</div>
-    </div>
-  )
-}
-
-export const WithCustomBody: Story = {
-  args: {
-    modalSize: "small",
-    type: "warning",
-    titleText: "With a custom body",
-    body: <CustomBody />,
-    primaryButton: {
-      text: "Primary Button",
-      onClick: () => console.log("Primary button clicked"),
-      variant: "filled-brand",
-    },
-  },
-}
-
-export const LeftAligned: Story = {
-  args: {
-    modalSize: "small",
-    type: "warning",
-    titleText: "Left Align",
-    body: "Instead of being centered, your text can be left aligned. This will also left align the icon.",
-    primaryButton: {
-      text: "Primary Button",
-      onClick: () => console.log("Primary button clicked"),
-      variant: "filled-brand",
-    },
-    textAlign: "left",
-  },
-}
-
-export const CustomWidth: Story = {
-  args: {
-    modalSize: "small",
-    type: "warning",
-    titleText: "Custom width",
-    body: "Sometime you need a wider modal because you don't want your text to wrap. It's often prettier if certain text fits on one line!",
-    primaryButton: {
-      text: "Primary Button",
-      onClick: () => console.log("Primary button clicked"),
-      variant: "filled-brand",
-    },
-    width: "1000px",
-  },
-}

package/src/lib/components/vention-modal/vention-modal.test.tsx

@@ -1,181 +0,0 @@
-import { fireEvent, screen } from "@testing-library/react"
-
-import { renderWithTheme } from "../../testing/utils"
-import { VentionModal, ventionModalTestIds } from "./vention-modal"
-import { ventionModalBaseTestIds } from "../vention-modal-base/vention-modal-base"
-
-function emptyFunction() {
-  return
-}
-
-describe("VentionModal", () => {
-  it("renders without crashing", () => {
-    renderWithTheme(<VentionModal titleText="Test" body="Test Body" type="info" isOpen={true} onClose={emptyFunction} />)
-    expect(screen.getByText("Test")).toBeInTheDocument()
-    expect(screen.getByText("Test Body")).toBeInTheDocument()
-  })
-
-  it("doesn't display modal unless opened", () => {
-    const { queryByTestId } = renderWithTheme(
-      <VentionModal titleText="Test" body="Test Body" type="info" isOpen={false} onClose={emptyFunction} />
-    )
-    expect(queryByTestId(ventionModalBaseTestIds.closeIcon)).not.toBeInTheDocument()
-  })
-
-  it("handles close button click", () => {
-    const handleClose = jest.fn()
-    const { getByTestId } = renderWithTheme(
-      <VentionModal titleText="Test" body="Test Body" type="info" onClose={handleClose} isOpen={true} />
-    )
-    fireEvent.click(getByTestId(ventionModalBaseTestIds.closeIcon))
-    expect(handleClose).toHaveBeenCalled()
-  })
-
-  it("renders with positive type", () => {
-    const { getByTestId } = renderWithTheme(
-      <VentionModal titleText="Test" body="Test Body" modalSize="small" type="positive" isOpen={true} onClose={emptyFunction} />
-    )
-    expect(getByTestId(ventionModalTestIds.positiveIcon)).toBeInTheDocument()
-  })
-
-  it("renders with info type", () => {
-    const { getByTestId } = renderWithTheme(
-      <VentionModal titleText="Test" body="Test Body" type="info" isOpen={true} onClose={emptyFunction} isTouchDevice />
-    )
-    expect(getByTestId(ventionModalTestIds.infoIcon)).toBeInTheDocument()
-  })
-
-  it("renders with warning type", () => {
-    const { getByTestId } = renderWithTheme(
-      <VentionModal titleText="Test" body="Test Body" type="warning" isOpen={true} onClose={emptyFunction} />
-    )
-    expect(getByTestId(ventionModalTestIds.warningIcon)).toBeInTheDocument()
-  })
-
-  it("renders with no type and isTouchDevice", () => {
-    const handleClickPrimary = jest.fn()
-    const handleClickSecondary = jest.fn()
-
-    renderWithTheme(
-      <VentionModal
-        titleText="Test"
-        body="Test Body"
-        type="none"
-        isTouchDevice
-        isOpen={true}
-        onClose={emptyFunction}
-        primaryButton={{ text: "Confirm", onClick: handleClickPrimary }}
-        secondaryButton={{ text: "Cancel", onClick: handleClickSecondary }}
-      />
-    )
-
-    fireEvent.click(screen.getByText("Confirm"))
-    expect(handleClickPrimary).toHaveBeenCalled()
-
-    fireEvent.click(screen.getByText("Cancel"))
-    expect(handleClickSecondary).toHaveBeenCalled()
-  })
-
-  it("renders with negative type", () => {
-    const { getByTestId } = renderWithTheme(
-      <VentionModal titleText="Test" body="Test Body" type="negative" isOpen={true} onClose={emptyFunction} />
-    )
-    expect(getByTestId(ventionModalTestIds.negativeIcon)).toBeInTheDocument()
-  })
-
-  it("handles primary button click", () => {
-    const handleClick = jest.fn()
-    renderWithTheme(
-      <VentionModal
-        titleText="Test"
-        body="Test Body"
-        type="info"
-        primaryButton={{ text: "Confirm", onClick: handleClick }}
-        isOpen={true}
-        onClose={emptyFunction}
-      />
-    )
-    fireEvent.click(screen.getByText("Confirm"))
-    expect(handleClick).toHaveBeenCalled()
-  })
-
-  it("handles primary button negative style", () => {
-    const handleClick = jest.fn()
-    renderWithTheme(
-      <VentionModal
-        titleText="Test"
-        body="Test Body"
-        type="negative"
-        primaryButton={{ text: "Confirm", onClick: handleClick }}
-        isOpen={true}
-        onClose={emptyFunction}
-      />
-    )
-    fireEvent.click(screen.getByText("Confirm"))
-    expect(handleClick).toHaveBeenCalled()
-  })
-
-  it("applies correct width based on modalSize", () => {
-    const { getByTestId } = renderWithTheme(
-      <VentionModal titleText="Test" body="Test Body" type="info" modalSize="large" isOpen={true} onClose={emptyFunction} />
-    )
-
-    const modalContainer = getByTestId(ventionModalBaseTestIds.modalContainer)
-    expect(modalContainer).toHaveStyle(`width: 480px`)
-  })
-
-  it("handles secondary button click", () => {
-    const handleClick = jest.fn()
-    renderWithTheme(
-      <VentionModal
-        titleText="Test"
-        body="Test Body"
-        type="info"
-        secondaryButton={{ text: "Cancel", onClick: handleClick }}
-        isOpen={true}
-        onClose={emptyFunction}
-        backDropClickClosable={false}
-      />
-    )
-    fireEvent.click(screen.getByText("Cancel"))
-    expect(handleClick).toHaveBeenCalled()
-  })
-
-  it("renders with correct styling for xx-large modal size", () => {
-    const { getByText } = renderWithTheme(
-      <VentionModal titleText="Test" body="Test Body" type="info" modalSize="xx-large" isOpen={true} onClose={emptyFunction} />
-    )
-
-    expect(getByText("Test")).toHaveClass("MuiTypography-hmiText28SemiBold")
-    expect(getByText("Test Body")).toHaveClass("MuiTypography-hmiText22Regular")
-  })
-
-  it("disabled buttons prevent clicks", () => {
-    const handlePrimary = jest.fn()
-    const handleSecondary = jest.fn()
-
-    renderWithTheme(
-      <VentionModal
-        titleText="Test"
-        body="Body"
-        type="info"
-        isOpen={true}
-        onClose={emptyFunction}
-        primaryButton={{ text: "Confirm", onClick: handlePrimary, disabled: true }}
-        secondaryButton={{ text: "Cancel", onClick: handleSecondary, disabled: true }}
-      />
-    )
-
-    const primaryBtn = screen.getByRole("button", { name: "Confirm" })
-    const secondaryBtn = screen.getByRole("button", { name: "Cancel" })
-
-    expect(primaryBtn).toBeDisabled()
-    expect(secondaryBtn).toBeDisabled()
-
-    fireEvent.click(primaryBtn)
-    fireEvent.click(secondaryBtn)
-
-    expect(handlePrimary).not.toHaveBeenCalled()
-    expect(handleSecondary).not.toHaveBeenCalled()
-  })
-})