text: // import 'jest-dom/extend-expect'
  import 'react-testing-library/cleanup-after-each'
  import jest from 'jest-mock'
  import React from 'react'
  import {render, fireEvent,  cleanup, getAllByValue} from 'react-testing-library'
  
  import DLBTest, {fullList,preSelected} from './DLBTest'
  import DoubleListBox from '../src/DoubleListBox/DoubleListBox';
  
  // where to get Keycodes
  //     https://codepen.io/chriscoyier/pen/mPgoYJ
  
  const SPACE_KEY = {key: ' ',          keyCode: 32, which: 32, }
  const RIGHT_KEY = {key: 'ArrowRight', keyCode: 39, which: 39, }
  const LEFT_KEY  = {key: 'ArrowLeft',  keyCode: 37, which: 37, }
  const ENTER_KEY = {key: 'Enter',      keyCode: 13, which: 13, }
  const ESC_KEY   = {key: 'Escape',     keyCode: 27, which: 27, }
  
  const rightClick = {button: 2}
  // how to use: fireEvent.click(getByText('Submit'), rightClick)
  
  const apple = fullList[0]
  const bannana = fullList[1]
  const peach = fullList[4]
  
  afterEach(cleanup)
  
  it('react-testing-library works!', () => {
    const onKeyDown = jest.fn()
    const {container, debug} = render(<input onKeyDown={onKeyDown} />)
    const node = container.getElementsByTagName('input')[0]
    fireEvent.keyDown(node, ENTER_KEY)
  
    expect(onKeyDown.mock.calls.length).toBe(1)
  })
  
  
  // https://stackoverflow.com/questions/47823616/mocking-clientheight-and-scrollheight-in-react-enzyme-for-test
  
  beforeEach(() => {
    Element.prototype.getBoundingClientRect = jest.fn(() => {
          return { width: 100, height: 10, top: 0, left: 0, bottom: 0, right: 0 };
        });
  });
  
  
  // moved ocoverage from  src/DoubleListBox 46.67 --> 58.95    DoubleListBox.js  54.12 --> 75.29
  it('DoubleListBox is section 508 compliant (move apple right)', () => {
  
      const {container, debug, getByTestId, getByText} = render(<DLBTest preselected={preSelected} />)
  
      let node = getByText(apple)
  
      fireEvent.keyDown(node, SPACE_KEY);
      fireEvent.keyDown(node, RIGHT_KEY);
      fireEvent.keyDown(node, SPACE_KEY);
  
      // const ans = getByTestId('current-fruitChoice').firstChild.textContent;
      const ans = getByTestId('current-fruitChoice').innerHTML;
  
      // should contain apple,
      //      but in react-test-library render arrow key does not drop over second column
      //      when not rendered in a real browser (enzyme's render or enzyme's mount, no real layout dimensions)
  
      expect(ans).not.toContain(apple)
    })
  
  it('DoubleListBox, move bannana left', () => {
      const {container, debug, getByTestId, getByText} = render(<DLBTest preselected={preSelected} />)
  
      let node = getByText(bannana)
  
      fireEvent.keyDown(node, SPACE_KEY);
      fireEvent.keyDown(node, LEFT_KEY);
      fireEvent.keyDown(node, SPACE_KEY);
  
      const ans = getByTestId('current-fruitChoice').innerHTML
  
      // Should .not.toContain bannana
      //      but in react-test-library render arrow key does not drop over first column
  
      expect(ans).toContain(bannana)
    })
  
  it('DoubleListBox click apple', () => {
  
    const {container, debug, getByTestId, getByText} = render(<DLBTest preselected={preSelected} />)
  
    let node = getByText(apple)
    fireEvent.click(node)
    fireEvent.keyDown(node, RIGHT_KEY)
    fireEvent.keyDown(node, ENTER_KEY)
  
    const ans = getByTestId('current-fruitChoice').innerHTML;
  
    expect(ans).not.toContain(apple)
  })
  
  it('DoubleListBox click apple, then ESC', () => {
  
    const {container, debug, getByTestId, getByText} = render(<DLBTest preselected={preSelected} />)
  
    const snack = apple
    let node = getByText(snack)
    fireEvent.click(node)
    fireEvent.keyDown(node, ESC_KEY)
  
    const ans = getByTestId('current-fruitChoice').innerHTML;
  
    expect(ans).not.toContain(snack)
  })
  
  it('DoubleListBox click bannana, then ESC', () => {
  
    const {container, debug, getByTestId, getByText} = render(<DLBTest preselected={preSelected} />)
  
    const snack = bannana
    let node = getByText(snack)
    fireEvent.click(node)
    fireEvent.keyDown(node, ESC_KEY)
  
    const ans = getByTestId('current-fruitChoice').innerHTML;
  
    expect(ans).toContain(snack)
  })
  
  it('DoubleListBox click one already clicked, then ESC', () => {
  
    const {container, debug, getByTestId, getByText} = render(<DLBTest preselected={preSelected} />)
  
    fireEvent.click(getByText(apple))
    fireEvent.click(getByText(bannana))
  
    fireEvent.click(getByText(bannana))
  
    const ans = getByTestId('current-fruitChoice').innerHTML;
  
    expect(ans).toContain(bannana)
  })
  
  it('DoubleListBox right click one already clicked', () => {
  
    const {container, debug, getByTestId, getByText} = render(<DLBTest preselected={preSelected} />)
  
    fireEvent.click(getByText(apple))
    fireEvent.click(getByText(bannana))
  
    fireEvent.click(getByText(bannana), rightClick)
  
    const ans = getByTestId('current-fruitChoice').innerHTML;
  
    expect(ans).toContain(bannana)
  })
  