import Enzyme from 'enzyme';
import React from 'react';

import { withDefaultTheme } from '../test/testUtil';
import { Popup } from './consentPopup';

const testComponent = (show: boolean = true, onClose = jest.fn()) => withDefaultTheme(<Popup
    preload={true}
    show={show}
    onClose={onClose}
    >
    <div data-type="popupcontent"/>
</Popup>
)

test('Renders the popup component', async () => {
    const component = Enzyme.mount(testComponent())

    const title = component.find('[data-type="Popup"]')
    expect(title.length).toEqual(1)
})

test('Renders the popup content on show = true', async () => {
    const component = Enzyme.mount(testComponent())

    const container = component.find('[data-type="PopupContent"]')
    const visible = container.getDOMNode()['style'].visibility
    expect(visible).toEqual('visible')

    const title = component.find('[data-type="popupcontent"]')
    expect(title.length).toEqual(1)
})


test('Hides the popup content on show = false', async () => {
    const component = Enzyme.mount(testComponent(false))

    const container = component.find('[data-type="PopupContent"]')
    const visible = container.getDOMNode()['style'].visibility
    expect(visible).toEqual('hidden')
    component.unmount()
})
