initial commit

packages/woocommerce-blocks/assets/js/base/hooks/test/use-position-relative-to-viewport.js

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import { render, screen, act } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { usePositionRelativeToViewport } from '../use-position-relative-to-viewport';
+
+describe( 'usePositionRelativeToViewport', () => {
+	function setup() {
+		const TestComponent = () => {
+			const [
+				referenceElement,
+				positionRelativeToViewport,
+			] = usePositionRelativeToViewport();
+
+			return (
+				<>
+					{ referenceElement }
+					{ positionRelativeToViewport === 'below' && (
+						<p data-testid="below"></p>
+					) }
+					{ positionRelativeToViewport === 'visible' && (
+						<p data-testid="visible"></p>
+					) }
+					{ positionRelativeToViewport === 'above' && (
+						<p data-testid="above"></p>
+					) }
+				</>
+			);
+		};
+
+		return render( <TestComponent /> );
+	}
+
+	it( "calls IntersectionObserver's `observe` and `unobserve` events", async () => {
+		const observe = jest.fn();
+		const unobserve = jest.fn();
+
+		// @ts-ignore
+		IntersectionObserver = jest.fn( () => ( {
+			observe,
+			unobserve,
+		} ) );
+
+		const { unmount } = setup();
+
+		expect( observe ).toHaveBeenCalled();
+		unmount();
+		expect( unobserve ).toHaveBeenCalled();
+	} );
+
+	it.each`
+		position       | isIntersecting | top
+		${ 'visible' } | ${ true }      | ${ 0 }
+		${ 'below' }   | ${ false }     | ${ 10 }
+		${ 'above' }   | ${ false }     | ${ 0 }
+		${ 'above' }   | ${ false }     | ${ -10 }
+	`(
+		"position relative to viewport is '$position' with isIntersecting=$isIntersecting and top=$top",
+		( { position, isIntersecting, top } ) => {
+			let intersectionObserverCallback = ( entries ) => entries;
+
+			// @ts-ignore
+			IntersectionObserver = jest.fn( ( callback ) => {
+				// @ts-ignore
+				intersectionObserverCallback = callback;
+
+				return {
+					observe: () => void null,
+					unobserve: () => void null,
+				};
+			} );
+
+			setup();
+
+			act( () => {
+				intersectionObserverCallback( [
+					{ isIntersecting, boundingClientRect: { top } },
+				] );
+			} );
+
+			expect( screen.getAllByTestId( position ) ).toHaveLength( 1 );
+		}
+	);
+} );

packages/woocommerce-blocks/assets/js/base/hooks/test/use-previous.js

@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import TestRenderer, { act } from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import { usePrevious } from '../use-previous';
+
+describe( 'usePrevious', () => {
+	const TestComponent = ( { testValue, validation } ) => {
+		const previousValue = usePrevious( testValue, validation );
+		return <div testValue={ testValue } previousValue={ previousValue } />;
+	};
+
+	let renderer;
+	beforeEach( () => ( renderer = null ) );
+
+	it( 'should be undefined at first pass', () => {
+		act( () => {
+			renderer = TestRenderer.create( <TestComponent testValue={ 1 } /> );
+		} );
+		const testValue = renderer.root.findByType( 'div' ).props.testValue;
+		const testPreviousValue = renderer.root.findByType( 'div' ).props
+			.previousValue;
+
+		expect( testValue ).toBe( 1 );
+		expect( testPreviousValue ).toBe( undefined );
+	} );
+
+	it( 'test new and previous value', () => {
+		let testValue;
+		let testPreviousValue;
+		act( () => {
+			renderer = TestRenderer.create( <TestComponent testValue={ 1 } /> );
+		} );
+
+		act( () => {
+			renderer.update( <TestComponent testValue={ 2 } /> );
+		} );
+		testValue = renderer.root.findByType( 'div' ).props.testValue;
+		testPreviousValue = renderer.root.findByType( 'div' ).props
+			.previousValue;
+		expect( testValue ).toBe( 2 );
+		expect( testPreviousValue ).toBe( 1 );
+
+		act( () => {
+			renderer.update( <TestComponent testValue={ 3 } /> );
+		} );
+		testValue = renderer.root.findByType( 'div' ).props.testValue;
+		testPreviousValue = renderer.root.findByType( 'div' ).props
+			.previousValue;
+		expect( testValue ).toBe( 3 );
+		expect( testPreviousValue ).toBe( 2 );
+	} );
+
+	it( 'should not update value if validation fails', () => {
+		let testValue;
+		let testPreviousValue;
+		act( () => {
+			renderer = TestRenderer.create(
+				<TestComponent testValue={ 1 } validation={ Number.isFinite } />
+			);
+		} );
+
+		act( () => {
+			renderer.update(
+				<TestComponent testValue="abc" validation={ Number.isFinite } />
+			);
+		} );
+		testValue = renderer.root.findByType( 'div' ).props.testValue;
+		testPreviousValue = renderer.root.findByType( 'div' ).props
+			.previousValue;
+		expect( testValue ).toBe( 'abc' );
+		expect( testPreviousValue ).toBe( 1 );
+
+		act( () => {
+			renderer.update(
+				<TestComponent testValue={ 3 } validation={ Number.isFinite } />
+			);
+		} );
+		testValue = renderer.root.findByType( 'div' ).props.testValue;
+		testPreviousValue = renderer.root.findByType( 'div' ).props
+			.previousValue;
+		expect( testValue ).toBe( 3 );
+		expect( testPreviousValue ).toBe( 1 );
+	} );
+} );

packages/woocommerce-blocks/assets/js/base/hooks/test/use-shallow-equal.js

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import TestRenderer, { act } from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import { useShallowEqual } from '../use-shallow-equal';
+
+describe( 'useShallowEqual', () => {
+	const TestComponent = ( { testValue } ) => {
+		const newValue = useShallowEqual( testValue );
+		return <div newValue={ newValue } />;
+	};
+	let renderer;
+	beforeEach( () => ( renderer = null ) );
+	it.each`
+		testValueA                  | aType         | testValueB                  | bType
+		${ { a: 'b', foo: 'bar' } } | ${ 'object' } | ${ { foo: 'bar', a: 'b' } } | ${ 'object' }
+		${ [ 'b', 'bar' ] }         | ${ 'array' }  | ${ [ 'b', 'bar' ] }         | ${ 'array' }
+		${ 1 }                      | ${ 'number' } | ${ 1 }                      | ${ 'number' }
+		${ '1' }                    | ${ 'string' } | ${ '1' }                    | ${ 'string' }
+		${ true }                   | ${ 'bool' }   | ${ true }                   | ${ 'bool' }
+	`(
+		'$testValueA ($aType) and $testValueB ($bType) are expected to be equal',
+		( { testValueA, testValueB } ) => {
+			let testPropValue;
+			act( () => {
+				renderer = TestRenderer.create(
+					<TestComponent testValue={ testValueA } />
+				);
+			} );
+			testPropValue = renderer.root.findByType( 'div' ).props.newValue;
+			expect( testPropValue ).toBe( testValueA );
+			// do update
+			act( () => {
+				renderer.update( <TestComponent testValue={ testValueB } /> );
+			} );
+			testPropValue = renderer.root.findByType( 'div' ).props.newValue;
+			expect( testPropValue ).toBe( testValueA );
+		}
+	);
+
+	it.each`
+		testValueA                  | aType         | testValueB                  | bType
+		${ { a: 'b', foo: 'bar' } } | ${ 'object' } | ${ { foo: 'bar', a: 'c' } } | ${ 'object' }
+		${ [ 'b', 'bar' ] }         | ${ 'array' }  | ${ [ 'bar', 'b' ] }         | ${ 'array' }
+		${ 1 }                      | ${ 'number' } | ${ '1' }                    | ${ 'string' }
+		${ 1 }                      | ${ 'number' } | ${ 2 }                      | ${ 'number' }
+		${ 1 }                      | ${ 'number' } | ${ true }                   | ${ 'bool' }
+		${ 0 }                      | ${ 'number' } | ${ false }                  | ${ 'bool' }
+	`(
+		'$testValueA ($aType) and $testValueB ($bType) are expected to not be equal',
+		( { testValueA, testValueB } ) => {
+			let testPropValue;
+			act( () => {
+				renderer = TestRenderer.create(
+					<TestComponent testValue={ testValueA } />
+				);
+			} );
+			testPropValue = renderer.root.findByType( 'div' ).props.newValue;
+			expect( testPropValue ).toBe( testValueA );
+			// do update
+			act( () => {
+				renderer.update( <TestComponent testValue={ testValueB } /> );
+			} );
+			testPropValue = renderer.root.findByType( 'div' ).props.newValue;
+			expect( testPropValue ).toBe( testValueB );
+		}
+	);
+} );