import React from 'react';
import { render } from '../../test-utils';
import 'jest-styled-components';
import { Popover } from '../..';
import { SystemIcons } from '../../icons';
import { Position } from '../../types';

  
describe('<Popover />',()=>{
    it('renders title', async () => {
        const{getByText, queryByTestId} = render(
            <Popover position={Position.Bottom} topSectionProps={{text:'sample title'}} mainContent={<></>} showOnClick={false}>
                <></>
            </Popover>
        );

        expect(getByText('sample title')).toBeDefined();
        expect(queryByTestId('closeBtn')).toBeNull();
    })

    it('renders note and title', async () => {
        const{getByText, queryByTestId} = render(
            <Popover position={Position.Left} topSectionProps={{text:'sample title', note:'sample note'}} mainContent={<></>} showOnClick={false}>
                <></>
            </Popover>
        );

        expect(getByText('sample title')).toBeDefined();
        expect(getByText('sample note')).toBeDefined();
        expect(queryByTestId('closeBtn')).toBeNull();
    })

    it('renders close button', async () => {
        const{getByTestId} = render(
            <Popover position={Position.Bottom} topSectionProps={{text:'sample title'}} mainContent={<></>} showOnClick={true}>
                <></>
            </Popover>
        );

        expect(getByTestId('closeBtn')).toBeDefined();
    })

    it('renders text button', async () => {
        const{getByTestId} = render(
            <Popover position={Position.Right} bottomSectionProps={{textButton:{label:'sample button', icon:<SystemIcons.OpenNewWindow />, action:()=>{}}}} mainContent={<></>} showOnClick={true}>
                <></>
            </Popover>
        );

        expect(getByTestId('textBtn')).toBeDefined();
        expect(getByTestId('iconBtn').children).toHaveLength(0);
    })

    it('renders icon button', async () => {
        const{getByTestId, queryByTestId} = render(
            <Popover position={Position.Right} bottomSectionProps={{iconButtons:[{label:'sample button', icon:<SystemIcons.OpenNewWindow />, action:()=>{}}]}} mainContent={<></>} showOnClick={true}>
                <></>
            </Popover>
        );

        expect(queryByTestId('textBtn')).toBeNull();
        expect(getByTestId('iconBtn').children).toHaveLength(1);
    })
})