import React from 'react';
import { render, screen,} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import Checkbox from './Checkbox';

test('verify check', () => {
  const handleChange = () => {console.log("You clicked!")};
  render(<>
      <Checkbox onChange={handleChange}>One</Checkbox>
  </>);

  // get checkbox by text
  const checkboxOne = screen.getByRole("checkbox", { name: "One" });
  userEvent.click(checkboxOne);

  expect(checkboxOne).toBeChecked();
});

test('disabled checkbox not clickable', () => {
  const handleChange = () => {console.log("You clicked!")};
  render(<>
      <Checkbox disabled onChange={handleChange}>One</Checkbox>
  </>);

  // get checkbox by text
  const checkboxOne = screen.getByRole("checkbox", { name: "One" });
  userEvent.click(checkboxOne);

  expect(checkboxOne).not.toBeChecked();
});

test('checked checkbox becomes unchecked', () => {
  const handleChange = () => {console.log("You clicked!")};
  render(<>
      <Checkbox defaultChecked onChange={handleChange}>One</Checkbox>
  </>);

  // get checkbox by text
  const checkboxOne = screen.getByRole("checkbox", { name: "One" });
  //make sure the checkbox is checked by default
  expect(checkboxOne).toBeChecked();
  //now uncheck it
  userEvent.click(checkboxOne);

  expect(checkboxOne).not.toBeChecked();
});