/**
 * Parvez M Robin
 * this@parvezmrobin.com
 * Apr 04, 2020
 */

/* eslint-env jest */

import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { act } from 'react-dom/test-utils';
import pretty from 'pretty';
import { fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import TagControl from './TagControl';

/** @type {HTMLElement} */
let container = null;
beforeEach(() => {
  // setup a DOM element as a render target
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

it('should open TagControl on click', () => {
  act(() => {
    render(<TagControl
      value={[]}
      isValid
      options={['1', '2', '3']}
      onChange={() => {
      }}
    />, container);
  });

  container.querySelector('input').dispatchEvent(new MouseEvent('click', { bubbles: true }));
  console.log(pretty(container.innerHTML)); // expected contain an `ul`

  fireEvent.click(container.querySelector('input'));
  console.log(pretty(container.innerHTML)); // expected contain an `ul`
});