import React from 'react';
import { mount, shallow } from 'enzyme';

import InputFieldForPassword from '../InputFieldForPassword';

describe('InputFieldForPassword', () => {
  it('changes the input type to "text" when the button is clicked', () => {
    // given
    const component = mount(<InputFieldForPassword semantic="My test field" />);
    // when
    component.find('button').simulate('click');
    // then
    expect(component.find('input').prop('type')).toBe('text');
  });

  it('changes the input type back to "password" when the button is clicked again', () => {
    // given
    const component = mount(<InputFieldForPassword semantic="My test field" />);
    component.setState({
      showPassword: true,
    });
    // when
    component.find('button').simulate('click');
    // then
    expect(component.find('input').prop('type')).toBe('password');
  });

  it('matches the snapshot: password hidden', () => {
    const component = shallow(<InputFieldForPassword semantic="My test field" />);
    expect(component).toMatchSnapshot();
  });

  it('matches the snapshot: password visible', () => {
    const component = shallow(<InputFieldForPassword semantic="My test field" />);
    component.setState({
      showPassword: true,
    });
    expect(component).toMatchSnapshot();
  });
});