Cleanup code and tests

tests/integration/RadioGroup.integration.test.jsx

@@ -14,10 +14,10 @@ describe("RadioGroup Integration", () => {
   it("works in form context", async () => {
     const user = userEvent.setup();
     const handleSubmit = vi.fn();
-    
+
     function TestForm() {
       const [value, setValue] = useState("option1");
-      
+
       return (
         <form onSubmit={handleSubmit}>
           <RadioGroup
@@ -53,10 +53,10 @@ describe("RadioGroup Integration", () => {
   it("handles keyboard navigation", async () => {
     const user = userEvent.setup();
     const handleChange = vi.fn();
-    
+
     function KeyboardForm() {
       const [value, setValue] = useState("option1");
-      
+
       return (
         <RadioGroup
           name="keyboard-radio-group"
@@ -70,15 +70,15 @@ describe("RadioGroup Integration", () => {
     render(<KeyboardForm />);
 
     const radioButtons = screen.getAllByRole("radio");
-    
+
     // Focus first radio button
     radioButtons[0].focus();
     expect(radioButtons[0]).toHaveFocus();
-    
+
     // Navigate to second radio button
     await user.tab();
     expect(radioButtons[1]).toHaveFocus();
-    
+
     // Activate with Space
     await user.keyboard(" ");
     expect(screen.getByDisplayValue("option2")).toBeChecked();
@@ -88,10 +88,14 @@ describe("RadioGroup Integration", () => {
     function ModeSwitchForm() {
       const [mode, setMode] = useState("standard");
       const [value, setValue] = useState("option1");
-      
+
       return (
         <div>
-          <button onClick={() => setMode(mode === "standard" ? "inverse" : "standard")}>
+          <button
+            onClick={() =>
+              setMode(mode === "standard" ? "inverse" : "standard")
+            }
+          >
             Toggle Mode
           </button>
           <RadioGroup
@@ -110,16 +114,20 @@ describe("RadioGroup Integration", () => {
 
     const toggleButton = screen.getByRole("button");
     const radioButtons = screen.getAllByRole("radio");
-    
+
     // Initially standard mode
-    radioButtons.forEach(button => {
-      expect(button).toHaveClass("outline-[var(--color-border-default-tertiary)]");
+    radioButtons.forEach((button) => {
+      expect(button).toHaveClass(
+        "outline-[var(--color-border-default-tertiary)]",
+      );
     });
-    
+
     // Switch to inverse mode
     await user.click(toggleButton);
-    radioButtons.forEach(button => {
-      expect(button).toHaveClass("outline-[var(--color-border-inverse-primary)]");
+    radioButtons.forEach((button) => {
+      expect(button).toHaveClass(
+        "outline-[var(--color-border-inverse-primary)]",
+      );
     });
   });
 
@@ -127,7 +135,7 @@ describe("RadioGroup Integration", () => {
     function StateForm() {
       const [value, setValue] = useState("option1");
       const [count, setCount] = useState(0);
-      
+
       return (
         <div>
           <button onClick={() => setCount(count + 1)}>
@@ -148,10 +156,10 @@ describe("RadioGroup Integration", () => {
 
     const radioButtons = screen.getAllByRole("radio");
     const reRenderButton = screen.getByRole("button");
-    
+
     // Should be checked initially
     expect(radioButtons[0]).toHaveAttribute("aria-checked", "true");
-    
+
     // Re-render should maintain state
     user.click(reRenderButton);
     expect(radioButtons[0]).toHaveAttribute("aria-checked", "true");
@@ -161,7 +169,7 @@ describe("RadioGroup Integration", () => {
     function MultiGroupForm() {
       const [group1Value, setGroup1Value] = useState("option1");
       const [group2Value, setGroup2Value] = useState("option1");
-      
+
       return (
         <div>
           <div>
@@ -191,27 +199,27 @@ describe("RadioGroup Integration", () => {
 
     // Both groups should work independently
     // Find the Option 2 in group1 by filtering getAllByDisplayValue by name
-    const group1Option2Input = screen.getAllByDisplayValue("option2").find(
-      input => input.getAttribute("name") === "group1"
-    );
+    const group1Option2Input = screen
+      .getAllByDisplayValue("option2")
+      .find((input) => input.getAttribute("name") === "group1");
     const group1Option2 = group1Option2Input.closest("label");
-    
+
     // Find the Option 3 in group2 by filtering getAllByDisplayValue by name
-    const group2Option3Input = screen.getAllByDisplayValue("option3").find(
-      input => input.getAttribute("name") === "group2"
-    );
+    const group2Option3Input = screen
+      .getAllByDisplayValue("option3")
+      .find((input) => input.getAttribute("name") === "group2");
     const group2Option3 = group2Option3Input.closest("label");
-    
+
     await user.click(group1Option2);
     await user.click(group2Option3);
-    
-    const group1Inputs = screen.getAllByDisplayValue("option2").filter(
-      input => input.getAttribute("name") === "group1"
-    );
-    const group2Inputs = screen.getAllByDisplayValue("option3").filter(
-      input => input.getAttribute("name") === "group2"
-    );
-    
+
+    const group1Inputs = screen
+      .getAllByDisplayValue("option2")
+      .filter((input) => input.getAttribute("name") === "group1");
+    const group2Inputs = screen
+      .getAllByDisplayValue("option3")
+      .filter((input) => input.getAttribute("name") === "group2");
+
     expect(group1Inputs[0]).toBeChecked();
     expect(group2Inputs[0]).toBeChecked();
   });
@@ -220,7 +228,7 @@ describe("RadioGroup Integration", () => {
     function ControlledForm() {
       const [controlledValue, setControlledValue] = useState("option1");
       const [uncontrolledValue, setUncontrolledValue] = useState("option1");
-      
+
       return (
         <div>
           <div>
@@ -250,27 +258,27 @@ describe("RadioGroup Integration", () => {
 
     // Both should work the same way
     // Find the Option 2 in controlled group by filtering getAllByDisplayValue by name
-    const controlledOption2Input = screen.getAllByDisplayValue("option2").find(
-      input => input.getAttribute("name") === "controlled"
-    );
+    const controlledOption2Input = screen
+      .getAllByDisplayValue("option2")
+      .find((input) => input.getAttribute("name") === "controlled");
     const controlledOption2 = controlledOption2Input.closest("label");
-    
+
     // Find the Option 2 in uncontrolled group by filtering getAllByDisplayValue by name
-    const uncontrolledOption2Input = screen.getAllByDisplayValue("option2").find(
-      input => input.getAttribute("name") === "uncontrolled"
-    );
+    const uncontrolledOption2Input = screen
+      .getAllByDisplayValue("option2")
+      .find((input) => input.getAttribute("name") === "uncontrolled");
     const uncontrolledOption2 = uncontrolledOption2Input.closest("label");
-    
+
     await user.click(controlledOption2);
     await user.click(uncontrolledOption2);
-    
-    const controlledInputs = screen.getAllByDisplayValue("option2").filter(
-      input => input.getAttribute("name") === "controlled"
-    );
-    const uncontrolledInputs = screen.getAllByDisplayValue("option2").filter(
-      input => input.getAttribute("name") === "uncontrolled"
-    );
-    
+
+    const controlledInputs = screen
+      .getAllByDisplayValue("option2")
+      .filter((input) => input.getAttribute("name") === "controlled");
+    const uncontrolledInputs = screen
+      .getAllByDisplayValue("option2")
+      .filter((input) => input.getAttribute("name") === "uncontrolled");
+
     expect(controlledInputs[0]).toBeChecked();
     expect(uncontrolledInputs[0]).toBeChecked();
   });
@@ -278,13 +286,13 @@ describe("RadioGroup Integration", () => {
   it("handles accessibility in complex forms", () => {
     function AccessibleForm() {
       const [value, setValue] = useState("option1");
-      
+
       const accessibleOptions = [
         { value: "option1", label: "Option 1", ariaLabel: "First option" },
         { value: "option2", label: "Option 2", ariaLabel: "Second option" },
         { value: "option3", label: "Option 3", ariaLabel: "Third option" },
       ];
-      
+
       return (
         <form>
           <fieldset>
@@ -305,16 +313,16 @@ describe("RadioGroup Integration", () => {
 
     const radioGroup = screen.getByRole("radiogroup");
     const radioButtons = screen.getAllByRole("radio");
-    
+
     // Should have proper accessibility attributes
     expect(radioGroup).toHaveAttribute("aria-label", "Accessible radio group");
-    
-    radioButtons.forEach(button => {
+
+    radioButtons.forEach((button) => {
       expect(button).toHaveAttribute("role", "radio");
       expect(button).toHaveAttribute("aria-checked");
       expect(button).toHaveAttribute("tabIndex", "0");
     });
-    
+
     // Should have aria-labels
     expect(radioButtons[0]).toHaveAttribute("aria-label", "First option");
     expect(radioButtons[1]).toHaveAttribute("aria-label", "Second option");
@@ -325,10 +333,14 @@ describe("RadioGroup Integration", () => {
     function DynamicForm() {
       const [value, setValue] = useState("option1");
       const [options, setOptions] = useState(defaultOptions);
-      
+
       return (
         <div>
-          <button onClick={() => setOptions([...options, { value: "option4", label: "Option 4" }])}>
+          <button
+            onClick={() =>
+              setOptions([...options, { value: "option4", label: "Option 4" }])
+            }
+          >
             Add Option
           </button>
           <RadioGroup
@@ -345,10 +357,10 @@ describe("RadioGroup Integration", () => {
     render(<DynamicForm />);
 
     const addButton = screen.getByRole("button");
-    
+
     // Initially 3 options
     expect(screen.getAllByRole("radio")).toHaveLength(3);
-    
+
     // Add option
     await user.click(addButton);
     expect(screen.getAllByRole("radio")).toHaveLength(4);
@@ -358,7 +370,7 @@ describe("RadioGroup Integration", () => {
   it("handles empty options gracefully", () => {
     function EmptyForm() {
       const [value, setValue] = useState("");
-      
+
       return (
         <RadioGroup
           name="empty-radio-group"
@@ -379,10 +391,10 @@ describe("RadioGroup Integration", () => {
   it("maintains single selection behavior", async () => {
     const user = userEvent.setup();
     const handleChange = vi.fn();
-    
+
     function SingleSelectionForm() {
       const [value, setValue] = useState("option1");
-      
+
       return (
         <RadioGroup
           name="single-selection-radio-group"
@@ -399,21 +411,21 @@ describe("RadioGroup Integration", () => {
     render(<SingleSelectionForm />);
 
     const radioButtons = screen.getAllByRole("radio");
-    
+
     // Initially option1 should be selected
     expect(radioButtons[0]).toHaveAttribute("aria-checked", "true");
     expect(radioButtons[1]).toHaveAttribute("aria-checked", "false");
     expect(radioButtons[2]).toHaveAttribute("aria-checked", "false");
-    
+
     // Click option2
     const option2 = screen.getByText("Option 2").closest("label");
     await user.click(option2);
-    
+
     // Only option2 should be selected
     expect(radioButtons[0]).toHaveAttribute("aria-checked", "false");
     expect(radioButtons[1]).toHaveAttribute("aria-checked", "true");
     expect(radioButtons[2]).toHaveAttribute("aria-checked", "false");
-    
+
     expect(handleChange).toHaveBeenCalledWith("option2");
   });
 });