/**
 * External dependencies
 */
import TestRenderer from 'react-test-renderer';

/**
 * Internal dependencies
 */
import FormStep from '..';

describe( 'FormStep', () => {
	test( 'should render a div if no title or legend is provided', () => {
		const component = TestRenderer.create(
			<FormStep>Dolor sit amet</FormStep>
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should apply id and className props', () => {
		const component = TestRenderer.create(
			<FormStep id="my-id" className="my-classname">
				Dolor sit amet
			</FormStep>
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should render a fieldset if a legend is provided', () => {
		const component = TestRenderer.create(
			<FormStep legend="Lorem Ipsum 2">Dolor sit amet</FormStep>
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should render a fieldset with heading if a title is provided', () => {
		const component = TestRenderer.create(
			<FormStep title="Lorem Ipsum">Dolor sit amet</FormStep>
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'fieldset legend should default to legend prop when title and legend are defined', () => {
		const component = TestRenderer.create(
			<FormStep title="Lorem Ipsum" legend="Lorem Ipsum 2">
				Dolor sit amet
			</FormStep>
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should remove step number CSS class if prop is false', () => {
		const component = TestRenderer.create(
			<FormStep title="Lorem Ipsum" showStepNumber={ false }>
				Dolor sit amet
			</FormStep>
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should render step heading content', () => {
		const component = TestRenderer.create(
			<FormStep
				title="Lorem Ipsum"
				stepHeadingContent={ () => (
					<span>Some context to render next to the heading</span>
				) }
			>
				Dolor sit amet
			</FormStep>
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should render step description', () => {
		const component = TestRenderer.create(
			<FormStep title="Lorem Ipsum" description="This is the description">
				Dolor sit amet
			</FormStep>
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should set disabled prop to the fieldset element when disabled is true', () => {
		const component = TestRenderer.create(
			<FormStep title="Lorem Ipsum" disabled={ true }>
				Dolor sit amet
			</FormStep>
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );
} );