import React from 'react';
import { render } from '@testing-library/react';
import PageSwitch from '../pageSwitch';

describe('<PageSwitch>', () => {
    const defaultView = 'one';
    const activeView = 'two';
    const views = {
        [defaultView]: () => <span>{defaultView}</span>,
        [activeView]: ({ data }: { data: string }) => (
            <div>
                <span>{activeView}</span>
                <span>{data}</span>
            </div>
        ),
        three: () => <span>THREE</span>,
    };

    test('renders active view', () => {
        const wrapper = render(
            <PageSwitch views={views} defaultView={defaultView} currentView={activeView} />
        );

        expect(wrapper.getByText(activeView)).toBeVisible();
        expect(wrapper.queryByText(defaultView)).toBeNull();
    });

    test('renders default view on no match', () => {
        const wrapper = render(
            <PageSwitch views={views} defaultView={defaultView} currentView="four" />
        );

        expect(wrapper.getByText(defaultView)).toBeVisible();
        expect(wrapper.queryByText(activeView)).toBeNull();
    });

    test('props are passed through', () => {
        const props = { data: 'EXTRA DATA' };

        const wrapper = render(
            <PageSwitch
                views={views}
                props={props}
                defaultView={defaultView}
                currentView={activeView}
            />
        );

        expect(wrapper.getByText(props.data)).toBeVisible();
    });
});