tests and refactoring for toggle and toggleGroup component

src/components/ui/Toggle/Toggle.tsx

@@ -43,7 +43,7 @@ const Toggle: React.FC<ToggleProps> = ({
     return (
 
         <TogglePrimitive
-            className={clsx(rootClass)}
+            className={clsx(rootClass, className)}
             pressed={isPressed}
             onPressedChange={handlePressed}
             data-state={isPressed ? 'on' : 'off'}

src/components/ui/Toggle/stories/Toggle.stories.js

@@ -34,6 +34,6 @@ const Template = (args) => {
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const All = {
     args: {
-        className: ''
+        className: '',
     }
 };

src/components/ui/Toggle/tests/Toggle.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Toggle from '../Toggle';
+
+describe('Toggle component', () => {
+    test('renders children correctly', () => {
+        const { getByText } = render(<Toggle pressed={false} onChange={() => {}}>Test Toggle</Toggle>);
+        expect(getByText('Test Toggle')).toBeInTheDocument();
+    });
+
+    test('applies customRootClass correctly', () => {
+        const { container } = render(<Toggle pressed={false} customRootClass="custom-class" onChange={() => {}}>Test Toggle</Toggle>);
+        expect(container.firstChild).toHaveClass('custom-class');
+    });
+
+    test('applies className correctly', () => {
+        const { container } = render(<Toggle pressed={false} className="test-class" onChange={() => {}}>Test Toggle</Toggle>);
+        expect(container.firstChild).toHaveClass('test-class');
+    });
+
+    test('handles pressed state correctly', () => {
+        const { container, rerender } = render(<Toggle pressed={false} onChange={() => {}}>Test Toggle</Toggle>);
+        expect(container.firstChild).toHaveAttribute('aria-pressed', 'false');
+
+        rerender(<Toggle pressed={false} onChange={() => {}}>Test Toggle</Toggle>);
+        fireEvent.click(container.firstChild);
+        expect(container.firstChild).toHaveAttribute('aria-pressed', 'true');
+
+        rerender(<Toggle pressed={true} onChange={() => {}}>Test Toggle</Toggle>);
+        fireEvent.click(container.firstChild);
+        expect(container.firstChild).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    test('handles disabled state correctly', () => {
+        const { container } = render(<Toggle pressed={false} disabled={true} onChange={() => {}}>Test Toggle</Toggle>);
+        expect(container.firstChild).toBeDisabled();
+    });
+
+    test('calls onChange callback correctly', () => {
+        const handleChange = jest.fn();
+        const { getByText } = render(<Toggle pressed={false} onChange={handleChange}>Test Toggle</Toggle>);
+
+        fireEvent.click(getByText('Test Toggle'));
+        expect(handleChange).toHaveBeenCalledWith(true);
+
+        fireEvent.click(getByText('Test Toggle'));
+        expect(handleChange).toHaveBeenCalledWith(false);
+    });
+});

src/components/ui/ToggleGroup/ToggleGroup.tsx

@@ -5,7 +5,7 @@ import ToggleItem from './fragments/ToggleItem';
 
 const COMPONENT_NAME = 'ToggleGroup';
 
-const ToggleGroup = ({ type = 'single', items = [] }) => {
+const ToggleGroup = ({ type = 'single', items = [] as { value: any; label: any }[] }) => {
     return (
         <ToggleGroupRoot type={type} componentName={COMPONENT_NAME}>
             {

src/components/ui/ToggleGroup/contexts/toggleContext.tsx

@@ -4,6 +4,14 @@ export type ToggleContextType = {
     type: 'single' | 'multiple';
     activeToggles: any[];
     setActiveToggles: (toggles: any[]) => void;
+    nextItem: () => void;
+    previousItem: () => void;
 };
 
-export const ToggleContext = createContext<ToggleContextType>({});
+export const ToggleContext = createContext<ToggleContextType>({
+    type: 'single',
+    activeToggles: [],
+    setActiveToggles: () => {},
+    nextItem: () => {},
+    previousItem: () => {},
+});

src/components/ui/ToggleGroup/fragments/ToggleGroupRoot.tsx

@@ -14,18 +14,24 @@ const ToggleGroupRoot = ({ type = 'multiple', className = '', loop = true, custo
     const [activeToggles, setActiveToggles] = useState(value || []);
 
     const nextItem = () => {
-        const batches = getAllBatchElements(toggleGroupRef?.current);
-        const nextItem = getNextBatchItem(batches, loop);
-        if (nextItem) {
-            nextItem?.focus();
+        const currentRef = toggleGroupRef.current;
+        if (currentRef) {
+            const batches = getAllBatchElements(currentRef);
+            const nextItem = getNextBatchItem(batches, loop);
+            if (nextItem) {
+                (nextItem as HTMLElement)?.focus();
+            }
         }
     };
 
     const previousItem = () => {
-        const batches = getAllBatchElements(toggleGroupRef?.current);
-        const prevItem = getPrevBatchItem(batches, loop);
-        if (prevItem) {
-            prevItem?.focus();
+        const currentRef = toggleGroupRef?.current;
+        if (currentRef) {
+            const batches = getAllBatchElements(currentRef);
+            const prevItem = getPrevBatchItem(batches, loop);
+            if (prevItem) {
+                (prevItem as HTMLElement)?.focus();
+            }
         }
     };
 

src/components/ui/ToggleGroup/fragments/ToggleItem.tsx

@@ -4,9 +4,9 @@ import { ToggleContext } from '../contexts/toggleContext';
 import TogglePrimitive from '~/core/primitives/Toggle';
 
 export type ToggleItemProps = {
-    children: React.ReactNode;
-    value: any;
-    props: any;
+    children?: React.ReactNode;
+    value?: any;
+    props?: any;
 };
 
 const ToggleItem = ({ children, value = null, ...props }:ToggleItemProps) => {

src/components/ui/ToggleGroup/tests/ToggleGroup.test.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import ToggleGroup from '../ToggleGroup';
+
+const items = [
+    { value: 'item1', label: 'Item 1' },
+    { value: 'item2', label: 'Item 2' },
+    { value: 'item3', label: 'Item 3' },
+];
+
+describe('ToggleGroup component', () => {
+    test('renders correctly', () => {
+        const { container } = render(<ToggleGroup items={items}/>);
+        expect(container.firstChild).toBeInTheDocument();
+        const toggleGroupRoot = document.querySelector('.rad-ui-toggle-group');
+
+        for (let i = 0; i < items.length; i++) {
+            expect(toggleGroupRoot.children[i]).toBeInTheDocument();
+        }
+    });
+
+    test('renders the correct number of ToggleItem components', () => {
+        const { getAllByText } = render(<ToggleGroup items={items} />);
+        expect(getAllByText(/Item/).length).toBe(items.length);
+    });
+
+    test('ToggleGroup handles multiple selection', () => {
+        render(<ToggleGroup type="multiple" items={items}/>);
+        const toggleGroupRoot = document.querySelector('.rad-ui-toggle-group');
+        fireEvent.click(toggleGroupRoot.children[0]);
+        fireEvent.click(toggleGroupRoot.children[1]);
+
+        expect(toggleGroupRoot.children[0]).toHaveAttribute('aria-pressed', 'true');
+        expect(toggleGroupRoot.children[0]).toHaveAttribute('data-active', 'true');
+
+        expect(toggleGroupRoot.children[1]).toHaveAttribute('aria-pressed', 'true');
+        expect(toggleGroupRoot.children[1]).toHaveAttribute('data-active', 'true');
+
+        expect(toggleGroupRoot.children[2]).toHaveAttribute('aria-pressed', 'false');
+
+
+    });
+
+    test('ToggleGroup handles multiple selection with variation in toggles', () => {
+        render(<ToggleGroup type="multiple" items={items}/>);
+        const toggleGroupRoot = document.querySelector('.rad-ui-toggle-group');
+        fireEvent.click(toggleGroupRoot.children[0]);
+        fireEvent.click(toggleGroupRoot.children[1]);
+        fireEvent.click(toggleGroupRoot.children[2]);
+        fireEvent.click(toggleGroupRoot.children[1]);
+
+        expect(toggleGroupRoot.children[0]).toHaveAttribute('aria-pressed', 'true');
+        expect(toggleGroupRoot.children[0]).toHaveAttribute('data-active', 'true');
+
+        expect(toggleGroupRoot.children[1]).toHaveAttribute('aria-pressed', 'false');
+
+        expect(toggleGroupRoot.children[2]).toHaveAttribute('aria-pressed', 'true');
+        expect(toggleGroupRoot.children[2]).toHaveAttribute('data-active', 'true');
+
+    });
+
+    test('ToggleGroup handles single selection', () => {
+        render(<ToggleGroup type="single" items={items}/>);
+        const toggleGroupRoot = document.querySelector('.rad-ui-toggle-group');
+        fireEvent.click(toggleGroupRoot.children[0]);
+
+        expect(toggleGroupRoot.children[0]).toHaveAttribute('aria-pressed', 'true');
+        expect(toggleGroupRoot.children[0]).toHaveAttribute('data-active', 'true');
+
+        expect(toggleGroupRoot.children[1]).toHaveAttribute('aria-pressed', 'false');
+        expect(toggleGroupRoot.children[2]).toHaveAttribute('aria-pressed', 'false');
+
+    });
+
+    test('ToggleGroup handles single selection with variation in toggles', () => {
+        render(<ToggleGroup type="single" items={items}/>);
+        const toggleGroupRoot = document.querySelector('.rad-ui-toggle-group');
+
+        fireEvent.click(toggleGroupRoot.children[0]);
+        fireEvent.click(toggleGroupRoot.children[1]);
+        fireEvent.click(toggleGroupRoot.children[2]);
+        fireEvent.click(toggleGroupRoot.children[1]);
+
+        expect(toggleGroupRoot.children[0]).toHaveAttribute('aria-pressed', 'false');
+
+        expect(toggleGroupRoot.children[1]).toHaveAttribute('aria-pressed', 'true');
+        expect(toggleGroupRoot.children[1]).toHaveAttribute('data-active', 'true');
+
+        expect(toggleGroupRoot.children[2]).toHaveAttribute('aria-pressed', 'false');
+
+    });
+
+});