ToggleGroup tests

Author: GoldGroove06

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

@@ -9,20 +9,85 @@ const items = [
 ];
 
 describe('ToggleGroup component', () => {
-    it('renders correctly', () => {
-        const { container } = render(<ToggleGroup />);
+    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();
+        }
     });
 
-    it('renders the correct number of ToggleItem components', () => {
+    test('renders the correct number of ToggleItem components', () => {
         const { getAllByText } = render(<ToggleGroup items={items} />);
         expect(getAllByText(/Item/).length).toBe(items.length);
     });
 
-    // it('passes the correct props to ToggleGroupRoot', () => {
-    //     render(<ToggleGroup type="multiple" items={items}/>);
-    //     const toggleGroupRoot = document.querySelector('.rad-ui-toggle-group');
-    //     console.log(toggleGroupRoot.children)
+    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');
+
+    });
+
 });