import * as React from 'react';
import { shallow } from 'enzyme';
import BasicInput from './BasicInput';
import TestComponentPropUtils from '../../../utils/TestComponentPropUtils';
import { Icons } from '../../icons/Icons'

describe('BasicInput', () => {
	it('renders without crashing', () => {
		shallow(<BasicInput />);
	});

	it('contains a regular input by default', () => {
		const component = shallow(<BasicInput />);

		expect(component.exists('input[type="text"]')).toBe(true);
		expect(component.exists('input[type="password"]')).toBe(false);
	});

	it('renders basic react props like id, className, and style as element attributes', () => {
		const shallowWrapper = shallow(<BasicInput {...TestComponentPropUtils.basicReactProps} />);
		TestComponentPropUtils.expectsBasicReactProps(shallowWrapper, false);
	});

	it('renders name attribute correctly', () => {
		const component = shallow(<BasicInput name="FormName" />);
		expect(component.exists('[name="FormName"]')).toBe(true);
	});

	it('renders an icon and error message for an invalid input', () => {
		const component = shallow(
			<BasicInput invalid invalidIcon={<Icons.Add />} invalidMessage="input is erroring" />
		);
		expect(component.containsMatchingElement(<Icons.Add />)).toBe(true);
		expect(component.contains('input is erroring')).toBe(true);
	});

	it('renders only the error message if no icon provided', () => {
		const component = shallow(<BasicInput invalid invalidMessage="input is erroring" />);
		expect(component.html().match('svg')).toBeNull();
		expect(component.contains('input is erroring')).toBe(true);
	});

	it('does not render an error message if input is valid', () => {
		const component = shallow(<BasicInput invalidMessage="input is erroring" />);
		expect(component.contains('input is erroring')).toBe(false);
	});
});