56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
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);
|
|
});
|
|
});
|