This commit is contained in:
55
tests/components/SidebarNavItem.test.tsx
Normal file
55
tests/components/SidebarNavItem.test.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { UserCircleIcon } from '@heroicons/react/24/outline';
|
||||
import { fireEvent, screen } from '@testing-library/react';
|
||||
import { Route, Routes } from 'react-router-dom';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { SidebarNavItem } from '../../src/components/SidebarNavItem';
|
||||
import { renderWithRouter } from '../helpers/renderWithRouter';
|
||||
|
||||
describe('SidebarNavItem', () => {
|
||||
it('renders active style and collapsed label behavior', () => {
|
||||
renderWithRouter(
|
||||
<Routes>
|
||||
<Route
|
||||
path="/users"
|
||||
element={<SidebarNavItem to="/users" label="Users" icon={UserCircleIcon} collapsed />}
|
||||
/>
|
||||
</Routes>,
|
||||
{ route: '/users' },
|
||||
);
|
||||
|
||||
const link = screen.getByRole('link', { name: 'Users' });
|
||||
expect(link.className).toContain('ui-accent-active');
|
||||
expect(link.className).toContain('mx-auto');
|
||||
expect(screen.getByText('Users').className).toContain('lg:hidden');
|
||||
});
|
||||
|
||||
it('renders inactive style and triggers onClick', () => {
|
||||
const onClick = vi.fn();
|
||||
renderWithRouter(
|
||||
<Routes>
|
||||
<Route path="/users" element={<div>Users page</div>} />
|
||||
<Route
|
||||
path="/profile"
|
||||
element={
|
||||
<SidebarNavItem
|
||||
to="/users"
|
||||
label="Users"
|
||||
icon={UserCircleIcon}
|
||||
collapsed={false}
|
||||
onClick={onClick}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Routes>,
|
||||
{ route: '/profile' },
|
||||
);
|
||||
|
||||
const link = screen.getByRole('link', { name: 'Users' });
|
||||
expect(link.className).toContain('hover:bg-zinc-500/15');
|
||||
expect(link.className).toContain('lg:w-full');
|
||||
expect(screen.getByText('Users').className).toContain('truncate');
|
||||
|
||||
fireEvent.click(link);
|
||||
expect(onClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user