import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';

vi.mock('@/Layouts/Web/WebLayout', () => ({ default: ({ children }) => <>{children}</> }));

import Tutorials from '@/Pages/Web/Tutorials';

describe('Web/Tutorials page', () => {
    it('renders without crashing', () => {
        render(<Tutorials />);
    });

    it('sets the correct page title', () => {
        render(<Tutorials />);
        expect(document.title).toBe('Tutorials & Guides — Upepo POS');
    });

    it('displays Guides in heading', () => {
        render(<Tutorials />);
        expect(screen.getByText('Guides')).toBeInTheDocument();
    });

    it('renders filter buttons or tabs', () => {
        render(<Tutorials />);
        const buttons = screen.getAllByRole('button');
        expect(buttons.length).toBeGreaterThan(0);
    });

    it('filter tab interaction works', async () => {
        render(<Tutorials />);
        const buttons = screen.getAllByRole('button');
        if (buttons.length > 1) {
            await userEvent.click(buttons[1]);
            expect(buttons[1]).toBeInTheDocument();
        }
    });
});