import { formatMessage } from '@orchard/frontend-localization';
import { render as domRender } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { ROUTE_ACCOUNT, ROUTE_HOME } from 'src/constants/routes';
import MainNav, { TERM_ACCOUNT, TERM_HOME } from '../mainNav';

describe('<MainNav>', () => {
    const render = (pathname = '/') => domRender(<MainNav />, {
        wrapper: ({ children }) => (
            <MemoryRouter
                initialEntries={[{ pathname }]}
                initialIndex={0}
            >
                {children}
            </MemoryRouter>
        )
    });

    test.each([
        [ROUTE_HOME, TERM_HOME],
        [ROUTE_ACCOUNT, TERM_ACCOUNT]
    ])('renders "%s" link', (route, term) => {
        const { getByText } = render();
        const element = getByText(formatMessage(term));
        expect(element).toBeVisible();
        expect(element?.getAttribute('href')).toEqual(route);
    });

    describe.each([
        [ROUTE_HOME, TERM_HOME],
        [ROUTE_ACCOUNT, TERM_ACCOUNT]
    ])('with route: "%s"', (route, term) => {
        test(`renders "${term}" link as active`, () => {
            const { getByText } = render(route);
            const element = getByText(formatMessage(term));
            expect(element?.classList.contains('LeftNav-menu-item-selected')).toEqual(true);
        });
    });
});