Switch test (#786)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: jindaljyoti

docs/app/docs/components/switch/docs/codeUsage.js

@@ -1,7 +1,7 @@
 const code = {
     javascript: {
         code: `
-import Switch from "@radui/ui/Switch"
+import Switch from "@radui/ui/Switch";
          
 const SwitchExample = () => (
     <div>

package-lock.json

@@ -6,7 +6,7 @@ const COMPONENT_NAME = 'Switch';
 
 export type SwitchProps = {
     defaultChecked? : boolean;
-    checked: boolean;
+    checked?: boolean;
     color?: string;
     children?: React.ReactNode;
     className?: string;
@@ -23,7 +23,7 @@ const Switch = ({ children, customRootClass = '', className = '', color = '', de
     const handleChecked = () => {
         const updatedState = !isChecked;
         setIsChecked(updatedState);
-        onChange(updatedState);
+        onChange(updatedState)
     };
 
     const data_attributes: Record<string, string> = {};
@@ -33,8 +33,9 @@ const Switch = ({ children, customRootClass = '', className = '', color = '', de
     }
     return (
         <>
-            <input type='checkbox' className={clsx(rootClass)} {...props} checked= {isChecked}/>
+            <input type='checkbox' className={clsx(rootClass)} {...props} checked= {isChecked} onChange={(e) => setIsChecked(e.target.checked)}/>
             <button type="button" onClick={handleChecked} role="switch" {...data_attributes}></button>
+           
         </>
     );
 };

src/components/ui/Switch/Switch.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import Switch from '../Switch';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
@@ -9,10 +10,12 @@ export default {
 
 const CheckBox = (args) => {
     const variants = ['classic', 'surface', 'solid'];
+    const [isChecked, setIsChecked] = useState(true)
+    
     const handleChange = (state) => {
         setIsChecked(state);
     };
-    return <SandboxEditor className="space-x-1">
+    return <SandboxEditor className="flex flex-col gap-2">
         {variants.map((variant, index) => (
             <Switch defaultChecked={args} key={index} variant={variant} onChange={handleChange} {...args}/>
         ))}
@@ -22,6 +25,24 @@ const CheckBox = (args) => {
 
 export const All = {};
 
+export const controlled = () => {
+    const [checked, setChecked] = useState(true);
+
+    const handleToggle = () => {
+         setChecked((prev) => !prev)
+    }
+         return <SandboxEditor>
+            <Switch checked={checked} onChange={handleToggle}/>
+        </SandboxEditor>
+}
+
+export const Uncontrolled = () => {
+    
+        return <SandboxEditor>
+            <Switch defaultChecked ={true} onChange={() => {}}/>
+
+        </SandboxEditor>
+}
 export const Color = {
     args: {
         color:"blue"

src/components/ui/Switch/stories/Switch.stories.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { fireEvent, render, screen } from '@testing-library/react';
+import Switch from "../Switch";
+
+describe('Switch Component', () => {
+    
+    test('renders correctly', () => {
+       render(<Switch checked={true} onChange={() => {}} />)
+       const inputElement = screen.getByRole('checkbox')
+       expect(inputElement).toBeInTheDocument();
+    })
+    
+    test('renders in controlled mode correctly', () => {
+        const handleChange = jest.fn();
+        render(<Switch checked={true} onChange={handleChange} />)
+        const switchElement = screen.getByRole('switch')
+        
+        fireEvent.click(switchElement)
+        expect(handleChange).toHaveBeenCalledWith(false)
+
+        fireEvent.click(switchElement)
+        expect(handleChange).toHaveBeenCalledWith(true)
+    })
+
+    test('renders in uncontrolled mode correctly with defaultChecked', () => {
+
+        render(<Switch defaultChecked={true} onChange={() => {}}/>)
+        const checkbox = screen.getByRole('checkbox')
+        expect(checkbox).toBeChecked()
+        })
+    
+    test('toggles state independently',() => {
+        render(<Switch  defaultChecked={false} onChange={() => {}} />)
+        const checkbox = screen.getByRole('checkbox')
+        expect(checkbox).not.toBeChecked()
+
+        fireEvent.click(checkbox)
+        expect(checkbox).toBeChecked()
+        
+        fireEvent.click(checkbox)
+        expect(checkbox).not.toBeChecked()  
+    })    
+  
+})