import React from 'react';
import { render as trender } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { axe, toHaveNoViolations } from 'jest-axe';
import userEvent from '@testing-library/user-event';
import { FormPassword } from './FormPassword';
import { FormLabel } from '../formLabel/FormLabel';

expect.extend(toHaveNoViolations);

function render({ label = 'FormPassword', name = 'form_name', ...props }) {
  return trender(
    <>
      <FormLabel htmlFor="inputPwd">{label}</FormLabel>
      <FormPassword name={name} {...props} id="inputPwd" />
    </>
  );
}

describe('FormPassword', () => {
  test('should be well formed ', async () => {
    const { container } = render({});
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
  test('should have default password value ', async () => {
    const { getByLabelText } = render({ defaultValue: 'Password' });
    const input = getByLabelText('FormPassword');
    expect(input).toHaveValue('Password');
  });
  test('should have by default password type', () => {
    const { getByLabelText, queryByTestId } = render({ defaultValue: 'Password' });
    const input = getByLabelText('FormPassword');
    expect(input.type).toEqual('password');
    const icon = queryByTestId('icon-password');
    expect(icon).toHaveClass('as--fa-eye-slash');
  });
  test('should have an inline option', () => {
    const { getByLabelText } = render({ isInline: true });
    const input = getByLabelText('FormPassword');
    expect(input).toHaveClass('as--inline');
  });
  test('should have an disabled option', () => {
    const { getByLabelText } = render({ isInline: true });
    const input = getByLabelText('FormPassword');
    expect(input).toHaveProperty('disabled');
  });
  test('should have a changed value after editing', () => {
    const { getByLabelText } = render({ defaultValue: 'Password' });
    const input = getByLabelText('FormPassword');
    expect(input.type).toEqual('password');
    userEvent.clear(input);
    userEvent.type(input, 'changedPassword');
    expect(input).toHaveValue('changedPassword');
  });
  test('should change the input type after clicking on button show/hide', () => {
    const { getByLabelText, queryByRole } = render({ defaultValue: 'Password' });
    const input = getByLabelText('FormPassword');
    expect(input.type).toEqual('password');
    const btn = queryByRole('button');
    userEvent.click(btn);
    expect(input.type).toEqual('text');
    userEvent.click(btn);
    expect(input.type).toEqual('password');
  });
});
