@etus/ui 0.1.0

package/src/components/forms/InputGroup/InputGroup.test.tsx

@@ -0,0 +1,782 @@
+// InputGroup/InputGroup.test.tsx
+import { fireEvent, render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { describe, expect, it, vi } from "vitest"
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "./InputGroup"
+
+expect.extend(toHaveNoViolations)
+
+// ============================================
+// INPUTGROUP RENDERING TESTS
+// ============================================
+describe("InputGroup", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<InputGroup data-testid="input-group">Content</InputGroup>)
+      expect(screen.getByTestId("input-group")).toBeInTheDocument()
+    })
+
+    it("renders children content", () => {
+      render(
+        <InputGroup>
+          <InputGroupInput aria-label="Test input" />
+        </InputGroup>
+      )
+      expect(screen.getByLabelText("Test input")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <InputGroup className="custom-class" data-testid="input-group">
+          Content
+        </InputGroup>
+      )
+      expect(screen.getByTestId("input-group")).toHaveClass("custom-class")
+    })
+
+    it("has data-slot attribute", () => {
+      render(<InputGroup data-testid="input-group">Content</InputGroup>)
+      expect(screen.getByTestId("input-group")).toHaveAttribute(
+        "data-slot",
+        "input-group"
+      )
+    })
+
+    it("has role=group for accessibility", () => {
+      render(<InputGroup data-testid="input-group">Content</InputGroup>)
+      expect(screen.getByTestId("input-group")).toHaveAttribute("role", "group")
+    })
+
+    it("passes through data-* attributes", () => {
+      render(
+        <InputGroup data-custom="value" data-testid="input-group">
+          Content
+        </InputGroup>
+      )
+      expect(screen.getByTestId("input-group")).toHaveAttribute(
+        "data-custom",
+        "value"
+      )
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies default size (md)", () => {
+      render(<InputGroup data-testid="input-group">Content</InputGroup>)
+      expect(screen.getByTestId("input-group")).toHaveClass("h-9")
+    })
+
+    it("applies sm size", () => {
+      render(
+        <InputGroup data-testid="input-group" size="sm">
+          Content
+        </InputGroup>
+      )
+      expect(screen.getByTestId("input-group")).toHaveClass("h-8")
+    })
+
+    it("applies md size", () => {
+      render(
+        <InputGroup data-testid="input-group" size="md">
+          Content
+        </InputGroup>
+      )
+      expect(screen.getByTestId("input-group")).toHaveClass("h-9")
+    })
+
+    it("applies lg size", () => {
+      render(
+        <InputGroup data-testid="input-group" size="lg">
+          Content
+        </InputGroup>
+      )
+      expect(screen.getByTestId("input-group")).toHaveClass("h-10")
+    })
+  })
+
+  // ============================================
+  // DISABLED STATE TESTS
+  // ============================================
+  describe("Disabled State", () => {
+    it("sets data-disabled when disabled", () => {
+      render(
+        <InputGroup disabled data-testid="input-group">
+          Content
+        </InputGroup>
+      )
+      expect(screen.getByTestId("input-group")).toHaveAttribute("data-disabled")
+    })
+
+    it("does not set data-disabled when not disabled", () => {
+      render(<InputGroup data-testid="input-group">Content</InputGroup>)
+      expect(screen.getByTestId("input-group")).not.toHaveAttribute(
+        "data-disabled"
+      )
+    })
+  })
+})
+
+// ============================================
+// INPUTGROUPADDON RENDERING TESTS
+// ============================================
+describe("InputGroupAddon", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<InputGroupAddon data-testid="addon">Content</InputGroupAddon>)
+      expect(screen.getByTestId("addon")).toBeInTheDocument()
+    })
+
+    it("renders children content", () => {
+      render(<InputGroupAddon>Addon Content</InputGroupAddon>)
+      expect(screen.getByText("Addon Content")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <InputGroupAddon className="custom-class" data-testid="addon">
+          Content
+        </InputGroupAddon>
+      )
+      expect(screen.getByTestId("addon")).toHaveClass("custom-class")
+    })
+
+    it("has data-slot attribute", () => {
+      render(<InputGroupAddon data-testid="addon">Content</InputGroupAddon>)
+      expect(screen.getByTestId("addon")).toHaveAttribute(
+        "data-slot",
+        "input-group-addon"
+      )
+    })
+
+    it("has role=group attribute", () => {
+      render(<InputGroupAddon data-testid="addon">Content</InputGroupAddon>)
+      expect(screen.getByTestId("addon")).toHaveAttribute("role", "group")
+    })
+  })
+
+  // ============================================
+  // ADDON ALIGNMENT TESTS
+  // ============================================
+  describe("Alignment Variants", () => {
+    it("applies inline-start alignment by default", () => {
+      render(<InputGroupAddon data-testid="addon">Content</InputGroupAddon>)
+      expect(screen.getByTestId("addon")).toHaveAttribute(
+        "data-align",
+        "inline-start"
+      )
+      expect(screen.getByTestId("addon")).toHaveClass("order-first")
+    })
+
+    it("applies inline-start alignment explicitly", () => {
+      render(
+        <InputGroupAddon align="inline-start" data-testid="addon">
+          Content
+        </InputGroupAddon>
+      )
+      expect(screen.getByTestId("addon")).toHaveAttribute(
+        "data-align",
+        "inline-start"
+      )
+      expect(screen.getByTestId("addon")).toHaveClass("pl-3")
+    })
+
+    it("applies inline-end alignment", () => {
+      render(
+        <InputGroupAddon align="inline-end" data-testid="addon">
+          Content
+        </InputGroupAddon>
+      )
+      expect(screen.getByTestId("addon")).toHaveAttribute(
+        "data-align",
+        "inline-end"
+      )
+      expect(screen.getByTestId("addon")).toHaveClass("order-last")
+      expect(screen.getByTestId("addon")).toHaveClass("pr-3")
+    })
+
+    it("applies block-start alignment", () => {
+      render(
+        <InputGroupAddon align="block-start" data-testid="addon">
+          Content
+        </InputGroupAddon>
+      )
+      expect(screen.getByTestId("addon")).toHaveAttribute(
+        "data-align",
+        "block-start"
+      )
+      expect(screen.getByTestId("addon")).toHaveClass("order-first")
+      expect(screen.getByTestId("addon")).toHaveClass("w-full")
+    })
+
+    it("applies block-end alignment", () => {
+      render(
+        <InputGroupAddon align="block-end" data-testid="addon">
+          Content
+        </InputGroupAddon>
+      )
+      expect(screen.getByTestId("addon")).toHaveAttribute(
+        "data-align",
+        "block-end"
+      )
+      expect(screen.getByTestId("addon")).toHaveClass("order-last")
+      expect(screen.getByTestId("addon")).toHaveClass("w-full")
+    })
+  })
+
+  // ============================================
+  // ADDON CLICK BEHAVIOR
+  // ============================================
+  describe("Click Behavior", () => {
+    it("focuses input on click", () => {
+      render(
+        <InputGroup>
+          <InputGroupAddon data-testid="addon">$</InputGroupAddon>
+          <InputGroupInput aria-label="Amount" data-testid="input" />
+        </InputGroup>
+      )
+      fireEvent.click(screen.getByTestId("addon"))
+      expect(screen.getByTestId("input")).toHaveFocus()
+    })
+  })
+})
+
+// ============================================
+// INPUTGROUPBUTTON RENDERING TESTS
+// ============================================
+describe("InputGroupButton", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<InputGroupButton data-testid="button">Click</InputGroupButton>)
+      expect(screen.getByTestId("button")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <InputGroupButton className="custom-class" data-testid="button">
+          Click
+        </InputGroupButton>
+      )
+      expect(screen.getByTestId("button")).toHaveClass("custom-class")
+    })
+
+    it("has type=button by default", () => {
+      render(<InputGroupButton data-testid="button">Click</InputGroupButton>)
+      expect(screen.getByTestId("button")).toHaveAttribute("type", "button")
+    })
+
+    it("accepts custom type", () => {
+      render(
+        <InputGroupButton data-testid="button" type="submit">
+          Submit
+        </InputGroupButton>
+      )
+      expect(screen.getByTestId("button")).toHaveAttribute("type", "submit")
+    })
+  })
+
+  // ============================================
+  // BUTTON SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies xs size by default", () => {
+      render(<InputGroupButton data-testid="button">Click</InputGroupButton>)
+      expect(screen.getByTestId("button")).toHaveAttribute("data-size", "xs")
+      expect(screen.getByTestId("button")).toHaveClass("h-6")
+    })
+
+    it("applies sm size", () => {
+      render(
+        <InputGroupButton data-testid="button" size="sm">
+          Click
+        </InputGroupButton>
+      )
+      expect(screen.getByTestId("button")).toHaveAttribute("data-size", "sm")
+      expect(screen.getByTestId("button")).toHaveClass("h-8")
+    })
+
+    it("applies icon-xs size", () => {
+      render(
+        <InputGroupButton data-testid="button" size="icon-xs">
+          X
+        </InputGroupButton>
+      )
+      expect(screen.getByTestId("button")).toHaveAttribute("data-size", "icon-xs")
+      expect(screen.getByTestId("button")).toHaveClass("size-6")
+    })
+
+    it("applies icon-sm size", () => {
+      render(
+        <InputGroupButton data-testid="button" size="icon-sm">
+          X
+        </InputGroupButton>
+      )
+      expect(screen.getByTestId("button")).toHaveAttribute("data-size", "icon-sm")
+      expect(screen.getByTestId("button")).toHaveClass("size-8")
+    })
+  })
+
+  // ============================================
+  // BUTTON VARIANT TESTS
+  // ============================================
+  describe("Button Variants", () => {
+    it("uses ghost variant by default", () => {
+      render(<InputGroupButton data-testid="button">Click</InputGroupButton>)
+      // Verify button is rendered (ghost is default)
+      expect(screen.getByTestId("button")).toBeInTheDocument()
+    })
+
+    it("accepts custom variant", () => {
+      render(
+        <InputGroupButton data-testid="button" variant="outline">
+          Click
+        </InputGroupButton>
+      )
+      expect(screen.getByTestId("button")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // BUTTON EVENT TESTS
+  // ============================================
+  describe("Events", () => {
+    it("calls onClick when clicked", async () => {
+      const handleClick = vi.fn()
+      const user = userEvent.setup()
+
+      render(
+        <InputGroupButton data-testid="button" onClick={handleClick}>
+          Click
+        </InputGroupButton>
+      )
+
+      await user.click(screen.getByTestId("button"))
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})
+
+// ============================================
+// INPUTGROUPTEXT RENDERING TESTS
+// ============================================
+describe("InputGroupText", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<InputGroupText data-testid="text">$</InputGroupText>)
+      expect(screen.getByTestId("text")).toBeInTheDocument()
+    })
+
+    it("renders children content", () => {
+      render(<InputGroupText>https://</InputGroupText>)
+      expect(screen.getByText("https://")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <InputGroupText className="custom-class" data-testid="text">
+          $
+        </InputGroupText>
+      )
+      expect(screen.getByTestId("text")).toHaveClass("custom-class")
+    })
+
+    it("renders as span element", () => {
+      render(<InputGroupText data-testid="text">$</InputGroupText>)
+      expect(screen.getByTestId("text").tagName).toBe("SPAN")
+    })
+  })
+
+  // ============================================
+  // INPUTGROUPTEXT STYLING TESTS
+  // ============================================
+  describe("Styling", () => {
+    it("has flex display", () => {
+      render(<InputGroupText data-testid="text">$</InputGroupText>)
+      expect(screen.getByTestId("text")).toHaveClass("flex")
+    })
+
+    it("has items-center alignment", () => {
+      render(<InputGroupText data-testid="text">$</InputGroupText>)
+      expect(screen.getByTestId("text")).toHaveClass("items-center")
+    })
+
+    it("has text-sm size", () => {
+      render(<InputGroupText data-testid="text">$</InputGroupText>)
+      expect(screen.getByTestId("text")).toHaveClass("text-sm")
+    })
+
+    it("has text-muted-foreground color", () => {
+      render(<InputGroupText data-testid="text">$</InputGroupText>)
+      expect(screen.getByTestId("text")).toHaveClass("text-muted-foreground")
+    })
+  })
+})
+
+// ============================================
+// INPUTGROUPINPUT RENDERING TESTS
+// ============================================
+describe("InputGroupInput", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<InputGroupInput aria-label="Test" data-testid="input" />)
+      expect(screen.getByTestId("input")).toBeInTheDocument()
+    })
+
+    it("has data-slot attribute", () => {
+      render(<InputGroupInput aria-label="Test" data-testid="input" />)
+      expect(screen.getByTestId("input")).toHaveAttribute(
+        "data-slot",
+        "input-group-control"
+      )
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <InputGroupInput
+          aria-label="Test"
+          className="custom-class"
+          data-testid="input"
+        />
+      )
+      expect(screen.getByTestId("input")).toHaveClass("custom-class")
+    })
+
+    it("passes through placeholder", () => {
+      render(<InputGroupInput placeholder="Enter text" />)
+      expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // INPUT STYLING TESTS
+  // ============================================
+  describe("Styling", () => {
+    it("has flex-1 for proper sizing", () => {
+      render(<InputGroupInput aria-label="Test" data-testid="input" />)
+      expect(screen.getByTestId("input")).toHaveClass("flex-1")
+    })
+
+    it("has border-0 for no border", () => {
+      render(<InputGroupInput aria-label="Test" data-testid="input" />)
+      expect(screen.getByTestId("input")).toHaveClass("border-0")
+    })
+
+    it("has shadow-none for no shadow", () => {
+      render(<InputGroupInput aria-label="Test" data-testid="input" />)
+      expect(screen.getByTestId("input")).toHaveClass("shadow-none")
+    })
+
+    it("has focus-visible:ring-0 for no focus ring", () => {
+      render(<InputGroupInput aria-label="Test" data-testid="input" />)
+      expect(screen.getByTestId("input")).toHaveClass("focus-visible:ring-0")
+    })
+  })
+
+  // ============================================
+  // INPUT STATE TESTS
+  // ============================================
+  describe("States", () => {
+    it("handles disabled state", () => {
+      render(<InputGroupInput disabled aria-label="Test" data-testid="input" />)
+      expect(screen.getByTestId("input")).toBeDisabled()
+    })
+
+    it("handles readOnly state", () => {
+      render(<InputGroupInput readOnly aria-label="Test" data-testid="input" />)
+      expect(screen.getByTestId("input")).toHaveAttribute("readonly")
+    })
+
+    it("handles required state", () => {
+      render(<InputGroupInput required aria-label="Test" data-testid="input" />)
+      expect(screen.getByTestId("input")).toBeRequired()
+    })
+
+    it("handles aria-invalid state", () => {
+      render(
+        <InputGroupInput
+          aria-invalid="true"
+          aria-label="Test"
+          data-testid="input"
+        />
+      )
+      expect(screen.getByTestId("input")).toHaveAttribute(
+        "aria-invalid",
+        "true"
+      )
+    })
+  })
+
+  // ============================================
+  // INPUT EVENT TESTS
+  // ============================================
+  describe("Events", () => {
+    it("calls onChange when value changes", () => {
+      const handleChange = vi.fn()
+      render(
+        <InputGroupInput
+          aria-label="Test"
+          data-testid="input"
+          onChange={handleChange}
+        />
+      )
+      fireEvent.change(screen.getByTestId("input"), { target: { value: "test" } })
+      expect(handleChange).toHaveBeenCalledTimes(1)
+    })
+
+    it("allows typing", async () => {
+      const user = userEvent.setup()
+      render(<InputGroupInput aria-label="Test" data-testid="input" />)
+
+      await user.type(screen.getByTestId("input"), "hello")
+      expect(screen.getByTestId("input")).toHaveValue("hello")
+    })
+  })
+})
+
+// ============================================
+// INPUTGROUPTEXTAREA RENDERING TESTS
+// ============================================
+describe("InputGroupTextarea", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<InputGroupTextarea aria-label="Test" data-testid="textarea" />)
+      expect(screen.getByTestId("textarea")).toBeInTheDocument()
+    })
+
+    it("has data-slot attribute", () => {
+      render(<InputGroupTextarea aria-label="Test" data-testid="textarea" />)
+      expect(screen.getByTestId("textarea")).toHaveAttribute(
+        "data-slot",
+        "input-group-control"
+      )
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <InputGroupTextarea
+          aria-label="Test"
+          className="custom-class"
+          data-testid="textarea"
+        />
+      )
+      expect(screen.getByTestId("textarea")).toHaveClass("custom-class")
+    })
+
+    it("passes through placeholder", () => {
+      render(<InputGroupTextarea aria-label="Test" placeholder="Enter text" />)
+      expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // TEXTAREA STYLING TESTS
+  // ============================================
+  describe("Styling", () => {
+    it("has flex-1 for proper sizing", () => {
+      render(<InputGroupTextarea aria-label="Test" data-testid="textarea" />)
+      expect(screen.getByTestId("textarea")).toHaveClass("flex-1")
+    })
+
+    it("has resize-none for no resizing", () => {
+      render(<InputGroupTextarea aria-label="Test" data-testid="textarea" />)
+      expect(screen.getByTestId("textarea")).toHaveClass("resize-none")
+    })
+
+    it("has border-0 for no border", () => {
+      render(<InputGroupTextarea aria-label="Test" data-testid="textarea" />)
+      expect(screen.getByTestId("textarea")).toHaveClass("border-0")
+    })
+  })
+})
+
+// ============================================
+// COMBINED COMPONENT TESTS
+// ============================================
+describe("Combined Components", () => {
+  it("renders InputGroup with left addon", () => {
+    render(
+      <InputGroup data-testid="group">
+        <InputGroupAddon align="inline-start" data-testid="addon">
+          <InputGroupText>$</InputGroupText>
+        </InputGroupAddon>
+        <InputGroupInput aria-label="Amount" data-testid="input" />
+      </InputGroup>
+    )
+    expect(screen.getByTestId("group")).toBeInTheDocument()
+    expect(screen.getByTestId("addon")).toBeInTheDocument()
+    expect(screen.getByTestId("input")).toBeInTheDocument()
+    expect(screen.getByText("$")).toBeInTheDocument()
+  })
+
+  it("renders InputGroup with right addon", () => {
+    render(
+      <InputGroup data-testid="group">
+        <InputGroupInput aria-label="Domain" data-testid="input" />
+        <InputGroupAddon align="inline-end" data-testid="addon">
+          <InputGroupText>.com</InputGroupText>
+        </InputGroupAddon>
+      </InputGroup>
+    )
+    expect(screen.getByTestId("group")).toBeInTheDocument()
+    expect(screen.getByTestId("addon")).toBeInTheDocument()
+    expect(screen.getByTestId("input")).toBeInTheDocument()
+    expect(screen.getByText(".com")).toBeInTheDocument()
+  })
+
+  it("renders InputGroup with both addons", () => {
+    render(
+      <InputGroup data-testid="group">
+        <InputGroupAddon align="inline-start">
+          <InputGroupText>https://</InputGroupText>
+        </InputGroupAddon>
+        <InputGroupInput aria-label="URL" data-testid="input" />
+        <InputGroupAddon align="inline-end">
+          <InputGroupText>.com</InputGroupText>
+        </InputGroupAddon>
+      </InputGroup>
+    )
+    expect(screen.getByText("https://")).toBeInTheDocument()
+    expect(screen.getByTestId("input")).toBeInTheDocument()
+    expect(screen.getByText(".com")).toBeInTheDocument()
+  })
+
+  it("renders InputGroup with button addon", () => {
+    render(
+      <InputGroup data-testid="group">
+        <InputGroupInput aria-label="Search" data-testid="input" />
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton data-testid="button">Search</InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+    )
+    expect(screen.getByTestId("group")).toBeInTheDocument()
+    expect(screen.getByTestId("input")).toBeInTheDocument()
+    expect(screen.getByTestId("button")).toBeInTheDocument()
+  })
+
+  it("renders InputGroup with textarea", () => {
+    render(
+      <InputGroup data-testid="group">
+        <InputGroupAddon align="block-start">
+          <InputGroupText>Message</InputGroupText>
+        </InputGroupAddon>
+        <InputGroupTextarea aria-label="Message" data-testid="textarea" />
+      </InputGroup>
+    )
+    expect(screen.getByTestId("group")).toBeInTheDocument()
+    expect(screen.getByTestId("textarea")).toBeInTheDocument()
+    expect(screen.getByText("Message")).toBeInTheDocument()
+  })
+})
+
+// ============================================
+// ACCESSIBILITY TESTS
+// ============================================
+describe("Accessibility", () => {
+  it("InputGroup has no accessibility violations", async () => {
+    const { container } = render(
+      <InputGroup aria-label="Email input">
+        <InputGroupInput aria-label="Email" />
+      </InputGroup>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("InputGroup with addons has no accessibility violations", async () => {
+    const { container } = render(
+      <InputGroup aria-label="Amount input">
+        <InputGroupAddon align="inline-start">
+          <InputGroupText>$</InputGroupText>
+        </InputGroupAddon>
+        <InputGroupInput aria-label="Amount" />
+      </InputGroup>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("InputGroup with button has no accessibility violations", async () => {
+    const { container } = render(
+      <InputGroup aria-label="Search">
+        <InputGroupInput aria-label="Search query" />
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton>Search</InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("InputGroup has role=group attribute", () => {
+    render(<InputGroup data-testid="group">Content</InputGroup>)
+    expect(screen.getByTestId("group")).toHaveAttribute("role", "group")
+  })
+
+  it("InputGroup can have aria-label", () => {
+    render(
+      <InputGroup aria-label="Email input" data-testid="group">
+        <InputGroupInput aria-label="Email" />
+      </InputGroup>
+    )
+    expect(screen.getByTestId("group")).toHaveAttribute(
+      "aria-label",
+      "Email input"
+    )
+  })
+
+  it("InputGroup can have aria-labelledby", () => {
+    render(
+      <>
+        <span id="group-label">Input Group Label</span>
+        <InputGroup aria-labelledby="group-label" data-testid="group">
+          <InputGroupInput aria-label="Input" />
+        </InputGroup>
+      </>
+    )
+    expect(screen.getByTestId("group")).toHaveAttribute(
+      "aria-labelledby",
+      "group-label"
+    )
+  })
+
+  it("InputGroup with all size variants has no violations", async () => {
+    const { container } = render(
+      <div>
+        <InputGroup aria-label="Small">
+          <InputGroupInput aria-label="Small input" size="sm" />
+        </InputGroup>
+        <InputGroup aria-label="Medium">
+          <InputGroupInput aria-label="Medium input" size="md" />
+        </InputGroup>
+        <InputGroup aria-label="Large">
+          <InputGroupInput aria-label="Large input" size="lg" />
+        </InputGroup>
+      </div>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("InputGroupTextarea has no accessibility violations", async () => {
+    const { container } = render(
+      <InputGroup aria-label="Message input">
+        <InputGroupTextarea aria-label="Message" />
+      </InputGroup>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})