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

/**
 * Internal dependencies
 */
import withScrollToTop from '../index';

const TestComponent = withScrollToTop( ( props ) => (
	<span { ...props }>
		<button />
	</span>
) );

const focusedMock = jest.fn();
const scrollIntoViewMock = jest.fn();

const mockedButton = {
	focus: focusedMock,
};
const render = ( { inView } ) => {
	return TestRenderer.create( <TestComponent />, {
		createNodeMock: ( element ) => {
			if ( element.type === 'button' ) {
				return mockedButton;
			}
			if ( element.type === 'div' ) {
				return {
					getBoundingClientRect: () => ( {
						bottom: inView ? 0 : -10,
					} ),
					parentElement: {
						querySelectorAll: () => [ mockedButton ],
					},
					scrollIntoView: scrollIntoViewMock,
				};
			}
			return null;
		},
	} );
};

describe( 'withScrollToTop Component', () => {
	afterEach( () => {
		focusedMock.mockReset();
		scrollIntoViewMock.mockReset();
	} );

	describe( 'if component is not in view', () => {
		beforeEach( () => {
			const renderer = render( { inView: false } );
			const props = renderer.root.findByType( 'span' ).props;
			props.scrollToTop( { focusableSelector: 'button' } );
		} );

		it( 'scrolls to top of the component when scrollToTop is called', () => {
			expect( scrollIntoViewMock ).toHaveBeenCalledTimes( 1 );
		} );

		it( 'moves focus to top of the component when scrollToTop is called', () => {
			expect( focusedMock ).toHaveBeenCalledTimes( 1 );
		} );
	} );

	describe( 'if component is in view', () => {
		beforeEach( () => {
			const renderer = render( { inView: true } );
			const props = renderer.root.findByType( 'span' ).props;
			props.scrollToTop( { focusableSelector: 'button' } );
		} );

		it( "doesn't scroll to top of the component when scrollToTop is called", () => {
			expect( scrollIntoViewMock ).toHaveBeenCalledTimes( 0 );
		} );
		it( 'moves focus to top of the component when scrollToTop is called', () => {
			expect( focusedMock ).toHaveBeenCalledTimes( 1 );
		} );
	} );
} );