@vention/machine-ui 3.27.0

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

@@ -0,0 +1,468 @@
+import "@testing-library/jest-dom"
+
+import { fireEvent, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+import { renderWithTheme } from "../../testing/utils"
+import { VentionCheckbox, VentionCheckboxSizes, VentionCheckboxPosition, VentionCheckboxTextAlign } from "./vention-checkbox"
+
+describe("VentionCheckbox", () => {
+  const mockOnChange = jest.fn()
+
+  beforeEach(() => {
+    mockOnChange.mockClear()
+  })
+
+  describe("Basic rendering", () => {
+    it("renders with default props", () => {
+      renderWithTheme(<VentionCheckbox labelText="Test" />)
+      const checkbox = screen.getByTestId("VentionCheckbox")
+      expect(checkbox).toBeInTheDocument()
+    })
+
+    it("renders with label text", () => {
+      renderWithTheme(<VentionCheckbox labelText="Test Label" />)
+      expect(screen.getByText("Test Label")).toBeInTheDocument()
+    })
+
+    it("renders with helper text", () => {
+      renderWithTheme(<VentionCheckbox labelText="Test Label" helperText="Helper text" />)
+      expect(screen.getByText("Test Label")).toBeInTheDocument()
+      expect(screen.getByText("Helper text")).toBeInTheDocument()
+    })
+
+    it("does not render helper text without label text", () => {
+      renderWithTheme(<VentionCheckbox helperText="Helper text" />)
+      expect(screen.queryByText("Helper text")).not.toBeInTheDocument()
+    })
+
+    it("renders without label when neither labelText nor helperText provided", () => {
+      renderWithTheme(<VentionCheckbox />)
+      // Look for Stack container instead of role="text"
+      const container = screen.getByTestId("VentionCheckbox").closest(".MuiStack-root")
+      const labelStack = container?.querySelector(".MuiStack-root:not(:first-child)")
+      expect(labelStack).not.toBeInTheDocument()
+    })
+  })
+
+  describe("Checkbox states", () => {
+    it("renders unchecked by default", () => {
+      renderWithTheme(<VentionCheckbox labelText="" />)
+      const checkbox = screen.getByRole("checkbox")
+      expect(checkbox).not.toBeChecked()
+    })
+
+    it("renders as checked when checked prop is true", () => {
+      renderWithTheme(<VentionCheckbox checked={true} />)
+      const checkbox = screen.getByRole("checkbox")
+      expect(checkbox).toBeChecked()
+    })
+
+    it("renders as disabled when disabled prop is true", () => {
+      renderWithTheme(<VentionCheckbox disabled={true} />)
+
+      // Check that wrapper has proper ARIA attributes
+      const checkbox = screen.getByTestId("VentionCheckbox")
+      expect(checkbox).toHaveAttribute("aria-disabled", "true")
+      expect(checkbox).toHaveClass("Mui-disabled")
+
+      // Check that the actual input is disabled
+      const input = screen.getByRole("checkbox")
+      expect(input).toBeDisabled()
+    })
+
+    it("calls onChange when clicked", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<VentionCheckbox onChange={mockOnChange} />)
+
+      // Click the actual checkbox input instead of the wrapper
+      const input = screen.getByRole("checkbox")
+      await user.click(input)
+      expect(mockOnChange).toHaveBeenCalledTimes(1)
+    })
+
+    it("prevents user interaction when disabled", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<VentionCheckbox disabled={true} onChange={mockOnChange} />)
+
+      const checkbox = screen.getByTestId("VentionCheckbox")
+      const input = screen.getByRole("checkbox")
+
+      // Verify it's properly disabled
+      expect(input).toBeDisabled()
+      expect(checkbox).toHaveStyle("pointer-events: none")
+
+      // userEvent respects disabled state and won't click
+      try {
+        await user.click(checkbox)
+      } catch (error) {
+        // This is expected - userEvent can't click disabled elements
+        expect(error.message).toContain("pointer-events: none")
+      }
+
+      expect(mockOnChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("Size variants", () => {
+    const sizes: VentionCheckboxSizes[] = ["small", "medium", "large"]
+
+    sizes.forEach(size => {
+      it(`renders with ${size} size`, () => {
+        renderWithTheme(<VentionCheckbox checkboxSize={size} labelText="Test" />)
+        const checkbox = screen.getByTestId("VentionCheckbox")
+        expect(checkbox).toBeInTheDocument()
+      })
+    })
+
+    it("applies correct typography for small size", () => {
+      renderWithTheme(<VentionCheckbox checkboxSize="small" labelText="Small Label" />)
+      const label = screen.getByText("Small Label")
+      expect(label).toHaveClass("MuiTypography-uiText12Regular")
+    })
+
+    it("applies correct typography for medium size", () => {
+      renderWithTheme(<VentionCheckbox checkboxSize="medium" labelText="Medium Label" />)
+      const label = screen.getByText("Medium Label")
+      expect(label).toHaveClass("MuiTypography-uiText14Regular")
+    })
+
+    it("applies correct typography for large size", () => {
+      renderWithTheme(<VentionCheckbox checkboxSize="large" labelText="Large Label" />)
+      const label = screen.getByText("Large Label")
+      expect(label).toHaveClass("MuiTypography-uiText14Regular")
+    })
+
+    // Test medium checkbox specific alignment
+    it("applies correct padding for medium size alignment", () => {
+      renderWithTheme(<VentionCheckbox checkboxSize="medium" labelText="Medium Label" />)
+      const checkboxContainer = screen.getByTestId("VentionCheckbox").closest(".MuiBox-root")
+      expect(checkboxContainer).toHaveStyle("padding-top: 2px")
+    })
+
+    it("does not apply padding for non-medium sizes", () => {
+      renderWithTheme(<VentionCheckbox checkboxSize="large" labelText="Large Label" />)
+      const checkboxContainer = screen.getByTestId("VentionCheckbox").closest(".MuiBox-root")
+      expect(checkboxContainer).toHaveStyle("padding-top: 0px")
+    })
+  })
+
+  describe("Position variants", () => {
+    it("renders checkbox on the left by default", () => {
+      renderWithTheme(<VentionCheckbox labelText="Test Label" />)
+      const container = screen.getByTestId("VentionCheckbox").closest(".MuiStack-root")
+      expect(container).not.toHaveStyle("flex-direction: row-reverse")
+    })
+
+    it("renders checkbox on the right when checkboxPosition is right", () => {
+      renderWithTheme(<VentionCheckbox labelText="Test Label" checkboxPosition="right" />)
+      const container = screen.getByTestId("VentionCheckbox").closest(".MuiStack-root")
+      expect(container).toHaveStyle("flex-direction: row-reverse")
+    })
+
+    const positions: VentionCheckboxPosition[] = ["left", "right"]
+    positions.forEach(position => {
+      it(`renders with checkbox position ${position}`, () => {
+        renderWithTheme(<VentionCheckbox checkboxPosition={position} labelText="Test" />)
+        const checkbox = screen.getByTestId("VentionCheckbox")
+        expect(checkbox).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe("Text alignment variants", () => {
+    const textAlignments: VentionCheckboxTextAlign[] = ["left", "center", "right"]
+
+    textAlignments.forEach(alignment => {
+      it(`renders with ${alignment} text alignment`, () => {
+        renderWithTheme(<VentionCheckbox labelText="Test Label" helperText="Helper text" textAlign={alignment} />)
+        const label = screen.getByText("Test Label")
+        const helper = screen.getByText("Helper text")
+
+        expect(label).toHaveStyle(`text-align: ${alignment}`)
+        expect(helper).toHaveStyle(`text-align: ${alignment}`)
+      })
+    })
+
+    it("applies default text alignment of left when textAlign is not specified", () => {
+      renderWithTheme(<VentionCheckbox labelText="Test Label" helperText="Helper text" />)
+      const label = screen.getByText("Test Label")
+      const helper = screen.getByText("Helper text")
+
+      expect(label).toHaveStyle("text-align: left")
+      expect(helper).toHaveStyle("text-align: left")
+    })
+
+    it("applies text alignment to label only when no helper text provided", () => {
+      renderWithTheme(<VentionCheckbox labelText="Test Label" textAlign="center" />)
+      const label = screen.getByText("Test Label")
+
+      expect(label).toHaveStyle("text-align: center")
+    })
+
+    it("applies text alignment to helper text only when label and helper exist", () => {
+      renderWithTheme(<VentionCheckbox labelText="Test Label" helperText="Helper text" textAlign="right" />)
+      const helper = screen.getByText("Helper text")
+
+      expect(helper).toHaveStyle("text-align: right")
+    })
+
+    // Test all combinations of text alignment with other props
+    describe("Text alignment with different sizes", () => {
+      const sizes: VentionCheckboxSizes[] = ["small", "medium", "large"]
+      const alignments: VentionCheckboxTextAlign[] = ["left", "center", "right"]
+
+      sizes.forEach(size => {
+        alignments.forEach(alignment => {
+          it(`applies ${alignment} alignment with ${size} size`, () => {
+            renderWithTheme(<VentionCheckbox checkboxSize={size} labelText="Test Label" helperText="Helper text" textAlign={alignment} />)
+            const label = screen.getByText("Test Label")
+            const helper = screen.getByText("Helper text")
+
+            expect(label).toHaveStyle(`text-align: ${alignment}`)
+            expect(helper).toHaveStyle(`text-align: ${alignment}`)
+          })
+        })
+      })
+    })
+
+    // Test text alignment with checkbox positions
+    describe("Text alignment with different positions", () => {
+      const positions: VentionCheckboxPosition[] = ["left", "right"]
+      const alignments: VentionCheckboxTextAlign[] = ["left", "center", "right"]
+
+      positions.forEach(position => {
+        alignments.forEach(alignment => {
+          it(`applies ${alignment} text alignment with checkbox position ${position}`, () => {
+            renderWithTheme(
+              <VentionCheckbox checkboxPosition={position} labelText="Test Label" helperText="Helper text" textAlign={alignment} />
+            )
+            const label = screen.getByText("Test Label")
+            const helper = screen.getByText("Helper text")
+
+            expect(label).toHaveStyle(`text-align: ${alignment}`)
+            expect(helper).toHaveStyle(`text-align: ${alignment}`)
+          })
+        })
+      })
+    })
+  })
+
+  describe("Input props", () => {
+    it("applies name prop", () => {
+      renderWithTheme(<VentionCheckbox name="test-checkbox" />)
+      const input = screen.getByRole("checkbox")
+      expect(input).toHaveAttribute("name", "test-checkbox")
+    })
+
+    it("applies value prop", () => {
+      renderWithTheme(<VentionCheckbox value="test-value" />)
+      const input = screen.getByRole("checkbox")
+      expect(input).toHaveAttribute("value", "test-value")
+    })
+  })
+
+  describe("Custom styling", () => {
+    it("applies custom className", () => {
+      renderWithTheme(<VentionCheckbox className="custom-class" />)
+      const container = screen.getByTestId("VentionCheckbox").closest(".MuiStack-root")
+      expect(container).toHaveClass("custom-class")
+    })
+  })
+
+  describe("Disabled state styling", () => {
+    it("applies disabled styling to label when disabled", () => {
+      renderWithTheme(<VentionCheckbox disabled={true} labelText="Disabled Label" />)
+      const label = screen.getByText("Disabled Label")
+      expect(label).toHaveClass("Mui-disabled")
+    })
+
+    it("applies disabled styling to helper text when disabled", () => {
+      renderWithTheme(<VentionCheckbox disabled={true} labelText="Disabled Label" helperText="Disabled Helper" />)
+      const helperText = screen.getByText("Disabled Helper")
+      expect(helperText).toHaveClass("Mui-disabled")
+    })
+  })
+
+  describe("Checkbox icon rendering", () => {
+    it("renders custom CheckboxIcon for unchecked state", () => {
+      renderWithTheme(<VentionCheckbox labelText="Test" />)
+      const checkbox = screen.getByTestId("VentionCheckbox")
+      expect(checkbox).toBeInTheDocument()
+      // The checkbox should not be checked and should use the custom icon
+      const input = screen.getByRole("checkbox")
+      expect(input).not.toBeChecked()
+    })
+
+    it("renders custom CheckboxIcon with checkmark for checked state", () => {
+      renderWithTheme(<VentionCheckbox checked={true} labelText="Test" />)
+      const input = screen.getByRole("checkbox")
+      expect(input).toBeChecked()
+      // Look for the SVG checkmark path
+      const svg = document.querySelector('svg path[d="M6 12l4 4 8-8"]')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it("applies reduced opacity to disabled checkbox icon", () => {
+      renderWithTheme(<VentionCheckbox disabled={true} labelText="Test" />)
+      // The disabled styling is applied via CSS, so we just verify the checkbox is disabled
+      const input = screen.getByRole("checkbox")
+      expect(input).toBeDisabled()
+    })
+  })
+
+  describe("Interaction tests", () => {
+    it("can be toggled on and off", async () => {
+      const user = userEvent.setup()
+      const handleChange = jest.fn()
+
+      const { rerender } = renderWithTheme(<VentionCheckbox checked={false} onChange={handleChange} />)
+
+      const input = screen.getByRole("checkbox")
+      expect(input).not.toBeChecked()
+
+      await user.click(input)
+      expect(handleChange).toHaveBeenCalledTimes(1)
+
+      rerender(<VentionCheckbox checked={true} onChange={handleChange} />)
+      const updatedInput = screen.getByRole("checkbox")
+      expect(updatedInput).toBeChecked()
+    })
+
+    it("supports keyboard interaction", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<VentionCheckbox onChange={mockOnChange} />)
+
+      const checkbox = screen.getByRole("checkbox")
+      await user.tab()
+      expect(checkbox).toHaveFocus()
+
+      await user.keyboard(" ") // Space key
+      expect(mockOnChange).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("Size dimensions", () => {
+    const sizeTests = [
+      { size: "small" as const, expectedWidth: "16px", expectedHeight: "16px" },
+      { size: "medium" as const, expectedWidth: "18px", expectedHeight: "18px" },
+      { size: "large" as const, expectedWidth: "22px", expectedHeight: "22px" },
+    ]
+
+    sizeTests.forEach(({ size, expectedWidth, expectedHeight }) => {
+      it(`applies correct dimensions for ${size} size`, () => {
+        renderWithTheme(<VentionCheckbox checkboxSize={size} labelText="Test" />)
+        const checkbox = screen.getByTestId("VentionCheckbox")
+        expect(checkbox).toBeInTheDocument()
+        // The dimensions are applied to the custom icon via getSizeStyles
+        // We can verify the checkbox renders without throwing
+      })
+    })
+  })
+
+  describe("All size and position combinations", () => {
+    const sizes: VentionCheckboxSizes[] = ["small", "medium", "large"]
+    const positions: VentionCheckboxPosition[] = ["left", "right"]
+
+    sizes.forEach(size => {
+      positions.forEach(position => {
+        it(`renders with size=${size} and position=${position}`, () => {
+          renderWithTheme(<VentionCheckbox checkboxSize={size} checkboxPosition={position} labelText="Test Label" />)
+          const checkbox = screen.getByTestId("VentionCheckbox")
+          expect(checkbox).toBeInTheDocument()
+          expect(screen.getByText("Test Label")).toBeInTheDocument()
+        })
+      })
+    })
+  })
+
+  describe("Default props", () => {
+    it("uses default props when not specified", () => {
+      renderWithTheme(<VentionCheckbox labelText="Default Test" />)
+      const checkbox = screen.getByTestId("VentionCheckbox")
+
+      // Should have default variant, size, position, and not be disabled
+      expect(checkbox).toBeInTheDocument()
+      expect(checkbox).not.toBeDisabled()
+
+      const input = checkbox.querySelector('input[type="checkbox"]')
+      expect(input).not.toBeChecked()
+
+      // Should have large size typography (default)
+      const label = screen.getByText("Default Test")
+      expect(label).toHaveClass("MuiTypography-uiText14Regular")
+    })
+
+    it("applies default checkboxSize of large", () => {
+      renderWithTheme(<VentionCheckbox labelText="Test" />)
+      const label = screen.getByText("Test")
+      // Large size uses uiText14Regular for label
+      expect(label).toHaveClass("MuiTypography-uiText14Regular")
+    })
+
+    it("applies default checkboxPosition of left", () => {
+      renderWithTheme(<VentionCheckbox labelText="Test" />)
+      const container = screen.getByTestId("VentionCheckbox").closest(".MuiStack-root")
+      expect(container).not.toHaveStyle("flex-direction: row-reverse")
+    })
+
+    it("applies default variant of outlined", () => {
+      renderWithTheme(<VentionCheckbox labelText="Test" />)
+      const checkbox = screen.getByTestId("VentionCheckbox")
+      expect(checkbox).toBeInTheDocument()
+      // Default variant is handled internally, just verify it renders
+    })
+  })
+
+  describe("Edge cases", () => {
+    it("handles undefined onChange gracefully", () => {
+      renderWithTheme(<VentionCheckbox />)
+      const checkbox = screen.getByTestId("VentionCheckbox")
+
+      // Should not throw error when clicked without onChange
+      expect(() => {
+        fireEvent.click(checkbox)
+      }).not.toThrow()
+    })
+
+    it("handles empty string labelText", () => {
+      renderWithTheme(<VentionCheckbox labelText="" />)
+
+      // Use the tss-react generated class that includes "labelText" in the name
+      const labelElement = document.querySelector('[class*="labelText"]')
+
+      expect(labelElement).not.toBeInTheDocument()
+    })
+
+    it("does not render helper text element when helperText is empty string", () => {
+      renderWithTheme(<VentionCheckbox labelText="Label" helperText="" />)
+
+      // Verify the label is there
+      expect(screen.getByText("Label")).toBeInTheDocument()
+
+      // Check that only the label typography element is rendered
+      const labelElement = document.querySelector('[class*="labelText"]')
+      const helperElements = document.querySelectorAll('[class*="helperText"]')
+
+      expect(labelElement).toBeInTheDocument()
+      expect(helperElements).toHaveLength(0) // No helper text should be rendered
+    })
+
+    it("only renders helper text when both labelText and helperText are provided", () => {
+      renderWithTheme(<VentionCheckbox helperText="Helper only" />)
+      expect(screen.queryByText("Helper only")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("FormControlLabel prop forwarding", () => {
+    it("forwards FormControlLabel props correctly", () => {
+      renderWithTheme(<VentionCheckbox labelText="Test" onChange={mockOnChange} value="test-value" name="test-name" />)
+
+      // Get the actual input element instead of the checkbox wrapper
+      const input = screen.getByTestId("VentionCheckbox").querySelector('input[type="checkbox"]')
+
+      expect(input).toHaveAttribute("value", "test-value")
+      expect(input).toHaveAttribute("name", "test-name")
+    })
+  })
+})