import React from 'react'
import ReactDOM from 'react-dom'

// TODO : I tried to make enzyme work here, but the menu attaches two
//   event handlers on keyup and mouseup to tell when the user has
//   clicked off or pressed escape and submenus need to be closed.
//   When running from Enzyme mount(), document didn't see to exist?
// import {mount} from 'enzyme'

import ZukeeperApp from '../src/zuKeeperApp'
import {mockTestData, removeAllTestDataMocks} from './lib/helpers'

const Adapter = require('enzyme-adapter-react-16')
const Enzyme = require('enzyme')
Enzyme.configure({adapter: new Adapter()})

// <div id='testBody/> is added to the DOM by testRunner.js
const testBodyEl = document.getElementById('testBody')


describe('with application context data', () => {

  describe('and rendered with functional child', () => {
    // eslint-disable-next-line
    let wrapper = null // it is used in tests when enzyme is used

    before(done => {
      mockTestData('get', '/applicationContext/getApplicationContext', 'applicationContext.json')
      mockTestData('get', '/mainMenu/menu.json', 'zuKeeperMenu.json')
      mockTestData('get', /\/workflow\/tasks.*/, 'workflowTasks.json')
      // wrapper = mount(
      wrapper = ReactDOM.render(
        <ZukeeperApp onUserAuthenticated={done}>
          {
            (applicationContext, currentUser) => {
              return (
                <h5>Hi {currentUser.fullName}, I am your next life changing zuKeeper App!</h5>
              )
            }
          }
        </ZukeeperApp>,
        testBodyEl,
      )
    })

    it('renders a functional child', () => {
      expect(testBodyEl.innerHTML).to.contain('zuKeeper App')
    })

    it('should have rendered the user name', () => {
      // see test/data/applicationContext.json
      expect(testBodyEl.innerHTML).to.contain('Zaphod')
    })

    after(() => {
      removeAllTestDataMocks()
    })
  }) // and rendered...

}) // with context...