text: import React from 'react'
  import {
    HTMLInputElement,
    HTMLTableElement,
    render,
    SVGSVGElement,
    unmountComponentAtNode
  } from 'react-dom'
  import Table from '../index'
  import ReactTestUtils, { act } from 'react-dom/test-utils'
  import { row, col, fullTableStyling } from '../../example/src/table-data'
  
  // https://reactjs.org/docs/test-utils.html#simulate
  // Simulate functions gotten here
  
  let containHolder = null
  let searchFunc = null
  let downloadFunc = null
  let tableBulkClick = null
  
  describe('Table Component', () => {
    beforeEach(() => {
      // setup a DOM element as a render target
      containHolder = document.createElement('div')
      document.body.appendChild(containHolder)
  
      searchFunc = jest.fn()
      downloadFunc = jest.fn()
      tableBulkClick = jest.fn((e) => console.log(e))
    })
  
    afterEach(() => {
      // cleanup on exiting
      unmountComponentAtNode(containHolder)
      containHolder.remove()
      containHolder = null
      searchFunc = null
      downloadFunc = null
      tableBulkClick = null
    })
  
    test('Table Renders', () => {
      act(() => {
        render(tableComponent(), containHolder)
      })
  
      expect(containHolder.querySelector('table')).toBeInstanceOf(
        HTMLTableElement
      )
    })
  
    it('Shows Header Title', () => {
      act(() => {
        render(tableComponent(), containHolder)
      })
  
      expect(
        containHolder.querySelector('.react-table-top-caption').textContent
      ).toBe('My Table Is Good')
    })
  
    it('Shows Search Components', () => {
      act(() => {
        render(tableComponent(), containHolder)
      })
  
      expect(
        containHolder.querySelector('.table-top-search input')
      ).toBeInstanceOf(HTMLInputElement)
    })
  
    test('Export function gets called when download button is clicked', () => {
      // expect.assertions(1);
      act(() => {
        render(tableComponent(), containHolder)
      })
      const downloadBtn = document.querySelector('div.export-btn')
  
      expect(downloadFunc).not.toBeCalled()
      act(() => {
        ReactTestUtils.Simulate.click(downloadBtn)
      })
  
      expect(downloadFunc).toBeCalled()
    })
  
    describe('Table head tests', () => {
      it('shows exact column as described it col prop', () => {
        act(() => {
          render(tableComponent([]), containHolder)
        })
  
        const res = document.querySelectorAll('table thead tr th ')
        //  console.log(res.length, col.filter((data => data.useInDisplay !== false )).length,"true");
        expect(col.filter((data) => data.useInDisplay !== false).length).toBe(
          res.length
        )
      })
  
      it('shows plus 1 column for table head due to bulk action option', () => {
        act(() => {
          render(tableComponent(), containHolder)
        })
  
        const res = document.querySelectorAll('table thead tr th')
        expect(col.filter((data) => data.useInDisplay !== false).length + 1).toBe(
          res.length
        )
      })
    })
  
    describe('Bulk action api', () => {
      test('Clicking on select all marks all child boxes', () => {
        act(() => {
          render(tableComponent(), containHolder)
        })
  
        const bulkSelect = document.querySelector(
          'table thead tr th .bulk-checkbox'
        )
        const checkedInput = document.querySelectorAll(
          'tbody input[type="checkbox"]:checked'
        )
        expect(checkedInput.length).toBe(0)
  
        act(() => {
          ReactTestUtils.Simulate.click(bulkSelect)
        })
        const checked = document.querySelectorAll(
          'tbody input[type="checkbox"]:checked'
        )
        const allInputs = document.querySelectorAll(
          'tbody input[type="checkbox"]'
        )
  
        expect(checked.length).toBe(allInputs.length)
      })
  
      test('Checking few checboxes makes the interminate select all appear', () => {
        act(() => {
          render(tableComponent(), containHolder)
        })
  
        const bulkSelect = document.querySelector(
          'table thead tr th .bulk-checkbox'
        )
        let indeterminate = document.querySelector(
          'table thead tr th .bulk-checkbox.indeterminate'
        )
        expect(indeterminate).toBe(null)
  
        act(() => {
          ReactTestUtils.Simulate.click(bulkSelect)
        })
        const allInputs = document.querySelectorAll(
          'tbody input[type="checkbox"]'
        )
  
        act(() => {
          ReactTestUtils.Simulate.change(allInputs[0], {
            target: { checked: false }
          })
          // allInputs[0].checked = false;
        })
  
        act(() => {})
  
        // console.log(allInputs[0]);
        indeterminate = document.querySelector(
          'table thead tr th .bulk-checkbox.indeterminate'
        )
  
        expect(indeterminate).toBeInstanceOf(SVGSVGElement)
      })
  
      test('changing select option for bulk action and clicking on bulk action', () => {
        act(() => {
          render(tableComponent(), containHolder)
        })
  
        const bulkSelect = document.querySelector(
          'table thead tr th .bulk-checkbox'
        )
  
        act(() => {
          ReactTestUtils.Simulate.click(bulkSelect)
        })
  
        const dropdown = document.querySelector('.bulk-select-dropdown select')
  
        act(() => {
          // set the first as selected
          dropdown.children[1].selected = true
        })
  
        expect(dropdown.value).toBe('hello')
      })
    })
  
    it('Number of Table Row <tr/> is equivalent to perPage props length', () => {
      // As set in the table components
      const pageNum = 7
      act(() => {
        render(tableComponent(), containHolder)
      })
  
      expect(containHolder.querySelectorAll('tbody tr').length).toBe(pageNum)
    })
  
    it('NEXT page button Clicks', () => {
      act(() => {
        render(tableComponent(), containHolder)
      })
  
      // The first row object has this name
      expect(containHolder.innerHTML).toContain('Miracle Nwabueze')
  
      // This is the 8th object, and per page is 7
      expect(containHolder.innerHTML).not.toContain('Oluebube Odogwu')
  
      const nextButton = containHolder.querySelector('.next-button')
  
      const clickEvent = document.createEvent('CustomEvent')
      clickEvent.initCustomEvent('click', true, true, null)
  
      act(() => {
        nextButton.dispatchEvent(clickEvent)
      })
  
      expect(containHolder.innerHTML).toContain('Oluebube Odogwu')
      expect(containHolder.innerHTML).not.toContain('Miracle Nwabueze')
    })
  })
  
  function tableComponent(bulkActions = ['hello', 'hi', 'cool']) {
    return (
      <Table
        columns={col}
        rows={row}
        perPage={7}
        tableHeader='My Table Is Good'
        bulkSelectOptions={bulkActions}
        showSearch={true}
        // exportCsvFile = "FuckThisShit"
        onBulkAction={tableBulkClick}
        // shouldExport={true}
        onSearch={searchFunc}
        exportModify={downloadFunc}
        striped={true}
        bordered={true}
        hovered={true}
        styling={fullTableStyling}
        // rowRender ={this.rowcheck}
      ></Table>
    )
  }
  