import { render, screen } from '@testing-library/react';
import { usePathname } from 'next/navigation';
import { TabLink } from './TabLink';
import type { Mock } from 'vitest';

vi.mock('next/navigation', () => ({
    usePathname: vi.fn(() => '/test/path'),
}));

describe('<TabLink>', () => {
    it('should render link', () => {
        render(<TabLink href="https://">Link</TabLink>);

        expect(screen.getByRole('link')).toBeVisible();
    });

    it('link should have correct href', () => {
        render(<TabLink href="https://">Link</TabLink>);

        expect(screen.getByRole('link')).toHaveAttribute('href', 'https://');
    });

    it('link should have correct class', () => {
        render(<TabLink href="profile">Profile</TabLink>);

        expect(screen.getByRole('link')).toHaveClass(
            'text-12',
            'font-medium',
            'uppercase',
            'tracking-wider',
            'hover:no-underline',
            'border-b-2',
            'pb-1',
            'border-transparent',
            'text-gray-500',
            'hover:text-gray-700'
        );
    });

    describe('when active', () => {
        it('link should have correct class', () => {
            (usePathname as Mock).mockReturnValue('/profile');
            render(<TabLink href="profile">Profile</TabLink>);

            expect(screen.getByRole('link')).toHaveClass(
                'border-gray-900',
                'text-gray-900',
                'hover:text-black'
            );
        });

        it('should be active when href has a leading slash', () => {
            (usePathname as Mock).mockReturnValue('/en/profile/123/settings');
            render(<TabLink href="/settings">Settings</TabLink>);

            expect(screen.getByRole('link')).toHaveClass(
                'border-gray-900',
                'text-gray-900',
                'hover:text-black'
            );
        });

        it('should be active when href has a trailing slash', () => {
            (usePathname as Mock).mockReturnValue('/en/profile/123/settings');
            render(<TabLink href="settings/">Settings</TabLink>);

            expect(screen.getByRole('link')).toHaveClass(
                'border-gray-900',
                'text-gray-900',
                'hover:text-black'
            );
        });
    });
});