rebase from live enviornment

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/hocs/test/with-categories.jsx

@@ -0,0 +1,107 @@
+// We need to disable the following eslint check as it's only applicable
+// to testing-library/react not `react-test-renderer` used here
+/* eslint-disable testing-library/await-async-query */
+
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+import * as mockUtils from '@woocommerce/editor-components/utils';
+
+/**
+ * Internal dependencies
+ */
+import withCategories from '../with-categories';
+import * as mockBaseUtils from '../../base/utils/errors';
+
+jest.mock( '@woocommerce/editor-components/utils', () => ( {
+	getCategories: jest.fn(),
+} ) );
+
+jest.mock( '../../base/utils/errors', () => ( {
+	formatError: jest.fn(),
+} ) );
+
+const mockCategories = [
+	{ id: 1, name: 'Clothing' },
+	{ id: 2, name: 'Food' },
+];
+const TestComponent = withCategories( ( props ) => {
+	return (
+		<div
+			data-error={ props.error }
+			data-isLoading={ props.isLoading }
+			data-categories={ props.categories }
+		/>
+	);
+} );
+const render = () => {
+	return TestRenderer.create( <TestComponent /> );
+};
+
+describe( 'withCategories Component', () => {
+	let renderer;
+	afterEach( () => {
+		mockUtils.getCategories.mockReset();
+	} );
+
+	describe( 'lifecycle events', () => {
+		beforeEach( () => {
+			mockUtils.getCategories.mockImplementation( () =>
+				Promise.resolve()
+			);
+			renderer = render();
+		} );
+
+		it( 'getCategories is called on mount', () => {
+			const { getCategories } = mockUtils;
+			expect( getCategories ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+
+	describe( 'when the API returns categories data', () => {
+		beforeEach( () => {
+			mockUtils.getCategories.mockImplementation( () =>
+				Promise.resolve( mockCategories )
+			);
+			renderer = render();
+		} );
+
+		it( 'sets the categories props', () => {
+			const props = renderer.root.findByType( 'div' ).props;
+
+			expect( props[ 'data-error' ] ).toBeNull();
+			expect( props[ 'data-isLoading' ] ).toBe( false );
+			expect( props[ 'data-categories' ] ).toEqual( mockCategories );
+		} );
+	} );
+
+	describe( 'when the API returns an error', () => {
+		const error = { message: 'There was an error.' };
+		const getCategoriesPromise = Promise.reject( error );
+		const formattedError = { message: 'There was an error.', type: 'api' };
+
+		beforeEach( () => {
+			mockUtils.getCategories.mockImplementation(
+				() => getCategoriesPromise
+			);
+			mockBaseUtils.formatError.mockImplementation(
+				() => formattedError
+			);
+			renderer = render();
+		} );
+
+		test( 'sets the error prop', async () => {
+			await expect( () => getCategoriesPromise() ).toThrow();
+
+			const { formatError } = mockBaseUtils;
+			const props = renderer.root.findByType( 'div' ).props;
+
+			expect( formatError ).toHaveBeenCalledWith( error );
+			expect( formatError ).toHaveBeenCalledTimes( 1 );
+			expect( props[ 'data-error' ] ).toEqual( formattedError );
+			expect( props[ 'data-isLoading' ] ).toBe( false );
+			expect( props[ 'data-categories' ] ).toEqual( [] );
+		} );
+	} );
+} );

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/hocs/test/with-category.jsx

@@ -0,0 +1,131 @@
+// We need to disable the following eslint check as it's only applicable
+// to testing-library/react not `react-test-renderer` used here
+/* eslint-disable testing-library/await-async-query */
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+import * as mockUtils from '@woocommerce/editor-components/utils';
+
+/**
+ * Internal dependencies
+ */
+import withCategory from '../with-category';
+import * as mockBaseUtils from '../../base/utils/errors';
+
+jest.mock( '@woocommerce/editor-components/utils', () => ( {
+	getCategory: jest.fn(),
+} ) );
+
+jest.mock( '../../base/utils/errors', () => ( {
+	formatError: jest.fn(),
+} ) );
+
+const mockCategory = { name: 'Clothing' };
+const attributes = { categoryId: 1 };
+const TestComponent = withCategory( ( props ) => {
+	return (
+		<div
+			data-error={ props.error }
+			data-getCategory={ props.getCategory }
+			data-isLoading={ props.isLoading }
+			data-category={ props.category }
+		/>
+	);
+} );
+const render = () => {
+	return TestRenderer.create( <TestComponent attributes={ attributes } /> );
+};
+
+describe( 'withCategory Component', () => {
+	let renderer;
+	afterEach( () => {
+		mockUtils.getCategory.mockReset();
+	} );
+
+	describe( 'lifecycle events', () => {
+		beforeEach( () => {
+			mockUtils.getCategory.mockImplementation( () => Promise.resolve() );
+			renderer = render();
+		} );
+
+		it( 'getCategory is called on mount with passed in category id', () => {
+			const { getCategory } = mockUtils;
+
+			expect( getCategory ).toHaveBeenCalledWith( attributes.categoryId );
+			expect( getCategory ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'getCategory is called on component update', () => {
+			const { getCategory } = mockUtils;
+			const newAttributes = { ...attributes, categoryId: 2 };
+			renderer.update( <TestComponent attributes={ newAttributes } /> );
+
+			expect( getCategory ).toHaveBeenNthCalledWith(
+				2,
+				newAttributes.categoryId
+			);
+			expect( getCategory ).toHaveBeenCalledTimes( 2 );
+		} );
+
+		it( 'getCategory is hooked to the prop', () => {
+			const { getCategory } = mockUtils;
+			const props = renderer.root.findByType( 'div' ).props;
+
+			props[ 'data-getCategory' ]();
+
+			expect( getCategory ).toHaveBeenCalledTimes( 2 );
+		} );
+	} );
+
+	describe( 'when the API returns category data', () => {
+		beforeEach( () => {
+			mockUtils.getCategory.mockImplementation( ( categoryId ) =>
+				Promise.resolve( { ...mockCategory, id: categoryId } )
+			);
+			renderer = render();
+		} );
+
+		it( 'sets the category props', () => {
+			const props = renderer.root.findByType( 'div' ).props;
+
+			expect( props[ 'data-error' ] ).toBeNull();
+			expect( typeof props[ 'data-getCategory' ] ).toBe( 'function' );
+			expect( props[ 'data-isLoading' ] ).toBe( false );
+			expect( props[ 'data-category' ] ).toEqual( {
+				...mockCategory,
+				id: attributes.categoryId,
+			} );
+		} );
+	} );
+
+	describe( 'when the API returns an error', () => {
+		const error = { message: 'There was an error.' };
+		const getCategoryPromise = Promise.reject( error );
+		const formattedError = { message: 'There was an error.', type: 'api' };
+
+		beforeEach( () => {
+			mockUtils.getCategory.mockImplementation(
+				() => getCategoryPromise
+			);
+			mockBaseUtils.formatError.mockImplementation(
+				() => formattedError
+			);
+			renderer = render();
+		} );
+
+		test( 'sets the error prop', async () => {
+			await expect( () => getCategoryPromise() ).toThrow();
+
+			const { formatError } = mockBaseUtils;
+			const props = renderer.root.findByType( 'div' ).props;
+
+			expect( formatError ).toHaveBeenCalledWith( error );
+			expect( formatError ).toHaveBeenCalledTimes( 1 );
+			expect( props[ 'data-error' ] ).toEqual( formattedError );
+			expect( typeof props[ 'data-getCategory' ] ).toBe( 'function' );
+			expect( props[ 'data-isLoading' ] ).toBe( false );
+			expect( props[ 'data-category' ] ).toBeNull();
+		} );
+	} );
+} );

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/hocs/test/with-product-variations.jsx

@@ -0,0 +1,185 @@
+// We need to disable the following eslint check as it's only applicable
+// to testing-library/react not `react-test-renderer` used here
+/* eslint-disable testing-library/await-async-query */
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+import * as mockUtils from '@woocommerce/editor-components/utils';
+
+/**
+ * Internal dependencies
+ */
+import withProductVariations from '../with-product-variations';
+import * as mockBaseUtils from '../../base/utils/errors';
+
+jest.mock( '@woocommerce/editor-components/utils', () => ( {
+	getProductVariations: jest.fn(),
+} ) );
+
+jest.mock( '../../base/utils/errors', () => ( {
+	formatError: jest.fn(),
+} ) );
+
+const mockProducts = [
+	{ id: 1, name: 'Hoodie', variations: [ { id: 3 }, { id: 4 } ] },
+	{ id: 2, name: 'Backpack' },
+];
+const mockVariations = [
+	{ id: 3, name: 'Blue' },
+	{ id: 4, name: 'Red' },
+];
+const TestComponent = withProductVariations( ( props ) => {
+	return (
+		<div
+			data-error={ props.error }
+			data-expandedProduct={ props.expandedProduct }
+			data-isLoading={ props.isLoading }
+			data-variations={ props.variations }
+			data-variationsLoading={ props.variationsLoading }
+		/>
+	);
+} );
+const render = () => {
+	return TestRenderer.create(
+		<TestComponent
+			error={ null }
+			isLoading={ false }
+			products={ mockProducts }
+			selected={ [ 1 ] }
+			showVariations={ true }
+		/>
+	);
+};
+
+describe( 'withProductVariations Component', () => {
+	let renderer;
+	afterEach( () => {
+		mockUtils.getProductVariations.mockReset();
+	} );
+
+	describe( 'lifecycle events', () => {
+		beforeEach( () => {
+			mockUtils.getProductVariations.mockImplementation( () =>
+				Promise.resolve( mockVariations )
+			);
+		} );
+
+		it( 'getProductVariations is called on mount', () => {
+			renderer = render();
+			const { getProductVariations } = mockUtils;
+
+			expect( getProductVariations ).toHaveBeenCalledWith( 1 );
+			expect( getProductVariations ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'getProductVariations is called on component update', () => {
+			renderer = TestRenderer.create(
+				<TestComponent
+					error={ null }
+					isLoading={ false }
+					products={ mockProducts }
+				/>
+			);
+			const { getProductVariations } = mockUtils;
+
+			expect( getProductVariations ).toHaveBeenCalledTimes( 0 );
+
+			renderer.update(
+				<TestComponent
+					error={ null }
+					isLoading={ false }
+					products={ mockProducts }
+					selected={ [ 1 ] }
+					showVariations={ true }
+				/>
+			);
+
+			expect( getProductVariations ).toHaveBeenCalledWith( 1 );
+			expect( getProductVariations ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'getProductVariations is not called if selected product has no variations', () => {
+			TestRenderer.create(
+				<TestComponent
+					error={ null }
+					isLoading={ false }
+					products={ mockProducts }
+					selected={ [ 2 ] }
+					showVariations={ true }
+				/>
+			);
+			const { getProductVariations } = mockUtils;
+
+			expect( getProductVariations ).toHaveBeenCalledTimes( 0 );
+		} );
+
+		it( 'getProductVariations is called if selected product is a variation', () => {
+			TestRenderer.create(
+				<TestComponent
+					error={ null }
+					isLoading={ false }
+					products={ mockProducts }
+					selected={ [ 3 ] }
+					showVariations={ true }
+				/>
+			);
+			const { getProductVariations } = mockUtils;
+
+			expect( getProductVariations ).toHaveBeenCalledWith( 1 );
+			expect( getProductVariations ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+
+	describe( 'when the API returns variations data', () => {
+		beforeEach( () => {
+			mockUtils.getProductVariations.mockImplementation( () =>
+				Promise.resolve( mockVariations )
+			);
+			renderer = render();
+		} );
+
+		it( 'sets the variations props', () => {
+			const props = renderer.root.findByType( 'div' ).props;
+			const expectedVariations = {
+				1: [
+					{ id: 3, name: 'Blue', parent: 1 },
+					{ id: 4, name: 'Red', parent: 1 },
+				],
+			};
+
+			expect( props[ 'data-error' ] ).toBeNull();
+			expect( props[ 'data-isLoading' ] ).toBe( false );
+			expect( props[ 'data-variations' ] ).toEqual( expectedVariations );
+		} );
+	} );
+
+	describe( 'when the API returns an error', () => {
+		const error = { message: 'There was an error.' };
+		const getProductVariationsPromise = Promise.reject( error );
+		const formattedError = { message: 'There was an error.', type: 'api' };
+
+		beforeEach( () => {
+			mockUtils.getProductVariations.mockImplementation(
+				() => getProductVariationsPromise
+			);
+			mockBaseUtils.formatError.mockImplementation(
+				() => formattedError
+			);
+			renderer = render();
+		} );
+
+		test( 'sets the error prop', async () => {
+			await expect( () => getProductVariationsPromise() ).toThrow();
+
+			const { formatError } = mockBaseUtils;
+			const props = renderer.root.findByType( 'div' ).props;
+
+			expect( formatError ).toHaveBeenCalledWith( error );
+			expect( formatError ).toHaveBeenCalledTimes( 1 );
+			expect( props[ 'data-error' ] ).toEqual( formattedError );
+			expect( props[ 'data-isLoading' ] ).toBe( false );
+			expect( props[ 'data-variations' ] ).toEqual( { 1: null } );
+		} );
+	} );
+} );

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/hocs/test/with-product.jsx

@@ -0,0 +1,129 @@
+// We need to disable the following eslint check as it's only applicable
+// to testing-library/react not `react-test-renderer` used here
+/* eslint-disable testing-library/await-async-query */
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+import * as mockUtils from '@woocommerce/editor-components/utils';
+
+/**
+ * Internal dependencies
+ */
+import withProduct from '../with-product';
+import * as mockBaseUtils from '../../base/utils/errors';
+
+jest.mock( '@woocommerce/editor-components/utils', () => ( {
+	getProduct: jest.fn(),
+} ) );
+
+jest.mock( '../../base/utils/errors', () => ( {
+	formatError: jest.fn(),
+} ) );
+
+const mockProduct = { name: 'T-Shirt' };
+const attributes = { productId: 1 };
+const TestComponent = withProduct( ( props ) => {
+	return (
+		<div
+			data-error={ props.error }
+			data-getProduct={ props.getProduct }
+			data-isLoading={ props.isLoading }
+			data-product={ props.product }
+		/>
+	);
+} );
+const render = () => {
+	return TestRenderer.create( <TestComponent attributes={ attributes } /> );
+};
+
+describe( 'withProduct Component', () => {
+	let renderer;
+	afterEach( () => {
+		mockUtils.getProduct.mockReset();
+	} );
+
+	describe( 'lifecycle events', () => {
+		beforeEach( () => {
+			mockUtils.getProduct.mockImplementation( () => Promise.resolve() );
+			renderer = render();
+		} );
+
+		it( 'getProduct is called on mount with passed in product id', () => {
+			const { getProduct } = mockUtils;
+
+			expect( getProduct ).toHaveBeenCalledWith( attributes.productId );
+			expect( getProduct ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'getProduct is called on component update', () => {
+			const { getProduct } = mockUtils;
+			const newAttributes = { ...attributes, productId: 2 };
+			renderer.update( <TestComponent attributes={ newAttributes } /> );
+
+			expect( getProduct ).toHaveBeenNthCalledWith(
+				2,
+				newAttributes.productId
+			);
+			expect( getProduct ).toHaveBeenCalledTimes( 2 );
+		} );
+
+		it( 'getProduct is hooked to the prop', () => {
+			const { getProduct } = mockUtils;
+			const props = renderer.root.findByType( 'div' ).props;
+
+			props[ 'data-getProduct' ]();
+
+			expect( getProduct ).toHaveBeenCalledTimes( 2 );
+		} );
+	} );
+
+	describe( 'when the API returns product data', () => {
+		beforeEach( () => {
+			mockUtils.getProduct.mockImplementation( ( productId ) =>
+				Promise.resolve( { ...mockProduct, id: productId } )
+			);
+			renderer = render();
+		} );
+
+		it( 'sets the product props', () => {
+			const props = renderer.root.findByType( 'div' ).props;
+
+			expect( props[ 'data-error' ] ).toBeNull();
+			expect( typeof props[ 'data-getProduct' ] ).toBe( 'function' );
+			expect( props[ 'data-isLoading' ] ).toBe( false );
+			expect( props[ 'data-product' ] ).toEqual( {
+				...mockProduct,
+				id: attributes.productId,
+			} );
+		} );
+	} );
+
+	describe( 'when the API returns an error', () => {
+		const error = { message: 'There was an error.' };
+		const getProductPromise = Promise.reject( error );
+		const formattedError = { message: 'There was an error.', type: 'api' };
+
+		beforeEach( () => {
+			mockUtils.getProduct.mockImplementation( () => getProductPromise );
+			mockBaseUtils.formatError.mockImplementation(
+				() => formattedError
+			);
+			renderer = render();
+		} );
+
+		test( 'sets the error prop', async () => {
+			await expect( () => getProductPromise() ).toThrow();
+
+			const { formatError } = mockBaseUtils;
+			const props = renderer.root.findByType( 'div' ).props;
+
+			expect( formatError ).toHaveBeenCalledWith( error );
+			expect( formatError ).toHaveBeenCalledTimes( 1 );
+			expect( props[ 'data-error' ] ).toEqual( formattedError );
+			expect( typeof props[ 'data-getProduct' ] ).toBe( 'function' );
+			expect( props[ 'data-isLoading' ] ).toBe( false );
+			expect( props[ 'data-product' ] ).toBeNull();
+		} );
+	} );
+} );

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/hocs/test/with-searched-products.jsx

@@ -0,0 +1,90 @@
+// We need to disable the following eslint check as it's only applicable
+// to testing-library/react not `react-test-renderer` used here
+/* eslint-disable testing-library/await-async-query */
+/**
+ * External dependencies
+ */
+import TestRenderer, { act } from 'react-test-renderer';
+import * as mockUtils from '@woocommerce/editor-components/utils';
+import { useDebouncedCallback } from 'use-debounce';
+
+/**
+ * Internal dependencies
+ */
+import withSearchedProducts from '../with-searched-products';
+
+// Add a mock implementation of debounce for testing so we can spy on the onSearch call.
+jest.mock( 'use-debounce', () => {
+	return {
+		useDebouncedCallback: jest
+			.fn()
+			.mockImplementation(
+				( search ) => () => mockUtils.getProducts( search )
+			),
+	};
+} );
+
+jest.mock( '@woocommerce/block-settings', () => ( {
+	__esModule: true,
+	blocksConfig: {
+		productCount: 101,
+	},
+} ) );
+
+// Mock the getProducts values for tests.
+mockUtils.getProducts = jest.fn().mockImplementation( () =>
+	Promise.resolve( [
+		{ id: 10, name: 'foo', parent: 0 },
+		{ id: 20, name: 'bar', parent: 0 },
+	] )
+);
+
+describe( 'withSearchedProducts Component', () => {
+	const { getProducts } = mockUtils;
+	afterEach( () => {
+		useDebouncedCallback.mockClear();
+		mockUtils.getProducts.mockClear();
+	} );
+	const TestComponent = withSearchedProducts(
+		( { selected, products, isLoading, onSearch } ) => {
+			return (
+				<div
+					data-products={ products }
+					data-selected={ selected }
+					data-isLoading={ isLoading }
+					data-onSearch={ onSearch }
+				/>
+			);
+		}
+	);
+	describe( 'lifecycle tests', () => {
+		const selected = [ 10 ];
+		let props, renderer;
+
+		act( () => {
+			renderer = TestRenderer.create(
+				<TestComponent selected={ selected } />
+			);
+		} );
+
+		it( 'has expected values for props', () => {
+			props = renderer.root.findByType( 'div' ).props;
+			expect( props[ 'data-selected' ] ).toEqual( selected );
+			expect( props[ 'data-products' ] ).toEqual( [
+				{ id: 10, name: 'foo', parent: 0 },
+				{ id: 20, name: 'bar', parent: 0 },
+			] );
+		} );
+
+		it( 'debounce and getProducts is called on search event', async () => {
+			props = renderer.root.findByType( 'div' ).props;
+
+			act( () => {
+				props[ 'data-onSearch' ]();
+			} );
+
+			expect( useDebouncedCallback ).toHaveBeenCalled();
+			expect( getProducts ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+} );

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/hocs/test/with-transform-single-select-to-multiple-select.js

@@ -0,0 +1,37 @@
+// We need to disable the following eslint check as it's only applicable
+// to testing-library/react not `react-test-renderer` used here
+/* eslint-disable testing-library/await-async-query */
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import withTransformSingleSelectToMultipleSelect from '../with-transform-single-select-to-multiple-select';
+
+const TestComponent = withTransformSingleSelectToMultipleSelect( ( props ) => {
+	return <div selected={ props.selected } />;
+} );
+
+describe( 'withTransformSingleSelectToMultipleSelect Component', () => {
+	describe( 'when the API returns an error', () => {
+		it( 'converts the selected value into an array', () => {
+			const selected = 123;
+			const renderer = TestRenderer.create(
+				<TestComponent selected={ selected } />
+			);
+			const props = renderer.root.findByType( 'div' ).props;
+			expect( props.selected ).toEqual( [ selected ] );
+		} );
+
+		it( 'passes an empty array as the selected prop if selected was null', () => {
+			const renderer = TestRenderer.create(
+				<TestComponent selected={ null } />
+			);
+			const props = renderer.root.findByType( 'div' ).props;
+			expect( props.selected ).toEqual( [] );
+		} );
+	} );
+} );