import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { ThemeContext } from '@theorchard/suite-theming';
import { ThemeSwitcher } from '../themeSwitcher';

describe('<ThemeSwitcher>', () => {
    const theme = 'knr';
    const setTheme = vi.fn();

    const renderComponent = () =>
        render(<ThemeSwitcher />, {
            wrapper: ({ children }) => (
                <ThemeContext.Provider value={{ theme, setTheme }}>
                    {children}
                </ThemeContext.Provider>
            ),
        });

    afterEach(() => {
        setTheme.mockClear();
    });

    test('on dropdown option click, invokes setTheme', async () => {
        const { container, findByText } = renderComponent();

        const btnElement = container.querySelector('.dropdown-toggle');

        fireEvent.click(btnElement!);

        const awalOption = await findByText('AWAL');

        fireEvent.click(awalOption);

        expect(setTheme).toHaveBeenCalledTimes(1);
        expect(setTheme).toHaveBeenCalledWith('awal');
    });
});