test(frontend): Add tests for sidebar

New test cases have been added for the
sidebar component checking for successful rendering, toggle
functionality verification, and validation of transition application
to navigation when the toggle button is clicked.

Refs: #1

src/sections/dashboard/components/sidebar/sidebar.test.tsx

@@ -0,0 +1,36 @@
+import { render, fireEvent, screen } from '@testing-library/react';
+import Sidebar from '@/sections/dashboard/components/sidebar/sidebar';
+import React from 'react';
+
+describe('Sidebar', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should render Sidebar without throwing an error', () => {
+    const sidebar = render(<Sidebar />);
+    expect(sidebar).toBeTruthy();
+  });
+
+  it('given sidebar is closed when the toggle button is clicked then should toggle to open ', () => {
+    const mockHandleToggle = jest.fn();
+    jest.spyOn(React, 'useState').mockReturnValue([false, mockHandleToggle]);
+
+    render(<Sidebar />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(mockHandleToggle).toHaveBeenCalledWith(true);
+  });
+
+  it('should apply transition to nav when the toggle button is clicked', () => {
+    render(<Sidebar />);
+    const button = screen.getByRole('button');
+
+    fireEvent.click(button);
+
+    const nav = screen.getByTestId('sidebar-nav');
+    expect(nav.className).toContain('duration-500');
+  });
+});

src/sections/dashboard/components/sidebar/sidebar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 
 import { cn } from '@/lib/utils';
 import { Separator } from '@/components/ui/separator';
@@ -33,7 +33,7 @@ interface SidebarProps {
 
 export default function Sidebar({ className }: Readonly<SidebarProps>) {
   const { isOpen, toggle } = useSidebar();
-  const [switched, setSwitched] = useState(false);
+  const [switched, setSwitched] = React.useState(false);
 
   const handleToggle = () => {
     setSwitched(true);
@@ -48,6 +48,7 @@ export default function Sidebar({ className }: Readonly<SidebarProps>) {
         isOpen ? 'w-72' : 'w-[78px]',
         className
       )}
+      data-testid='sidebar-nav'
     >
       <div className='space-y-4 py-4'>
         <div className='px-3 py-2'>