import { createElement } from 'react'
import ReactTestUtils from 'react-dom/test-utils'

import Overlay from '../Overlay'
import styles from '../styles.css'

describe('Overlay', () => {
  const testbed = createTestbed(Overlay)

  const itRendersChildren = (testbedInstance) => {
    it('renders children', () => {
      const childClassname = 'childElement'
      const childDiv = createElement('div', { className: childClassname }, 'child element')
      testbedInstance.render({ children: childDiv })
      const componentWithClass = testbedInstance.findChildrenByClass(
        childClassname
      )[0]

      expect(componentWithClass).to.not.be.undefined()
    })
  }

  context('when hideOverlay is true', () => {
    const testbed = createTestbed(Overlay, { hideOverlay: true })
    itRendersChildren(testbed)

    it('does not render the overlay', () => {
      testbed.render()
      const overlay = testbed.findChildrenByClass(styles.overlay)[0]
      expect(overlay).to.be.undefined()
    })
  })

  context('when hideOverlay is false', () => {
    const testbed = createTestbed(Overlay, { hideOverlay: false })
    itRendersChildren(testbed)

    it('renders the overlay', () => {
      testbed.render()
      const overlay = testbed.findChildrenByClass(styles.overlay)[0]
      expect(overlay).to.not.be.undefined()
    })
  })

  it('allows for a wrapperClassName', () => {
    const wrapperClassName = 'steve'
    testbed.render({ wrapperClassName: wrapperClassName })

    const componentWithClass = testbed.findChildrenByClass(
      wrapperClassName
    )[0]

    expect(componentWithClass).to.not.be.undefined()
  })

  it('allows for an ariaLabel', () => {
    const ariaLabel = 'Example téxt with spaces and Áccents!'
    testbed.render({ ariaLabel: ariaLabel })

    const componentWithAriaLabel = testbed.findChildrenByClass(
      styles.root
    )[0]

    expect(componentWithAriaLabel.getAttribute('aria-label')).to.equal(ariaLabel)
  })

  it('handles an onClick callback', () => {
    const clickStub = sinon.stub()
    testbed.render({ onClick: clickStub })

    ReactTestUtils.Simulate.click(testbed.findChildrenByClass(styles.overlay)[0])
    expect(clickStub.called).to.be.true()
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', (done) => {
      testbed.render()
      testbed.checkA11yStandards(done)
    })
  })
})
