Simple Payments Block: Add tests (#19084)

Co-authored-by: Glen Davies <glen.davies@a8c.com>

projects/plugins/jetpack/changelog/add-simple-payments-tests

@@ -0,0 +1,3 @@
+Significance: patch
+Type: compat
+Comment: Simple payments block: add tests (no public changelog required).

projects/plugins/jetpack/extensions/blocks/simple-payments/constants.js

@@ -4,11 +4,11 @@ export const DEFAULT_CURRENCY = 'USD';
 
 /**
  * Currencies should be supported by PayPal:
- * @link https://developer.paypal.com/docs/api/reference/currency-codes/
+ * https://developer.paypal.com/docs/api/reference/currency-codes/
  *
  * List has to be in sync with list at the widget's backend side and API's backend side:
- * @link https://github.com/Automattic/jetpack/blob/31efa189ad223c0eb7ad085ac0650a23facf9ef5/modules/widgets/simple-payments.php#L19-L44
- * @link https://github.com/Automattic/jetpack/blob/31efa189ad223c0eb7ad085ac0650a23facf9ef5/modules/simple-payments/simple-payments.php#L386-L415
+ * https://github.com/Automattic/jetpack/blob/31efa189ad223c0eb7ad085ac0650a23facf9ef5/modules/widgets/simple-payments.php#L19-L44
+ * https://github.com/Automattic/jetpack/blob/31efa189ad223c0eb7ad085ac0650a23facf9ef5/modules/simple-payments/simple-payments.php#L386-L415
  *
  * Indian Rupee not supported because at the time of the creation of this file
  * because it's limited to in-country PayPal India accounts only.

projects/plugins/jetpack/extensions/blocks/simple-payments/controls.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, PanelBody, TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export function PanelControls( { setAttributes, postLinkText } ) {
+	return (
+		<PanelBody title={ __( 'Settings', 'jetpack' ) } initialOpen={ false }>
+			<BaseControl
+				label={ __( 'Purchase link text', 'jetpack' ) }
+				help={ __(
+					'Enter the text you want to display on a purchase link used as fallback when the PayPal button cannot be used (e.g. emails, AMP, etc.)',
+					'jetpack'
+				) }
+				className="jetpack-simple-payments__purchase-link-text"
+			>
+				<TextControl
+					placeholder={ __( 'Click here to purchase', 'jetpack' ) }
+					onChange={ newPostLinkText => setAttributes( { postLinkText: newPostLinkText } ) }
+					value={ postLinkText }
+				/>
+			</BaseControl>
+		</PanelBody>
+	);
+}

projects/plugins/jetpack/extensions/blocks/simple-payments/depecrated/v2/save.js

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */

projects/plugins/jetpack/extensions/blocks/simple-payments/edit.js

@@ -14,10 +14,8 @@ import { Component } from '@wordpress/element';
 import { compose, withInstanceId } from '@wordpress/compose';
 import { dispatch, withSelect } from '@wordpress/data';
 import {
-	BaseControl,
 	Disabled,
 	ExternalLink,
-	PanelBody,
 	SelectControl,
 	TextareaControl,
 	TextControl,
@@ -33,8 +31,9 @@ import ProductPlaceholder from './product-placeholder';
 import FeaturedMedia from './featured-media';
 import { decimalPlaces, formatPrice } from './utils';
 import { SIMPLE_PAYMENTS_PRODUCT_POST_TYPE, SUPPORTED_CURRENCY_LIST } from './constants';
+import { PanelControls } from './controls';
 
-class SimplePaymentsEdit extends Component {
+export class SimplePaymentsEdit extends Component {
 	state = {
 		fieldEmailError: null,
 		fieldPriceError: null,
@@ -247,7 +246,7 @@ class SimplePaymentsEdit extends Component {
 	 * This method does not include validation UI. Currency selection should not allow for invalid
 	 * values. It is primarily to ensure that the currency is valid to save.
 	 *
-	 * @return  {boolean} True if currency is valid
+	 * @returns  {boolean} True if currency is valid
 	 */
 	validateCurrency = () => {
 		const { currency } = this.props.attributes;
@@ -259,7 +258,7 @@ class SimplePaymentsEdit extends Component {
 	 *
 	 * Stores error message in state.fieldPriceError
 	 *
-	 * @returns {Boolean} True when valid, false when invalid
+	 * @returns {boolean} True when valid, false when invalid
 	 */
 	validatePrice = () => {
 		const { currency, price } = this.props.attributes;
@@ -330,7 +329,7 @@ class SimplePaymentsEdit extends Component {
 	 *
 	 * Stores error message in state.fieldEmailError
 	 *
-	 * @returns {Boolean} True when valid, false when invalid
+	 * @returns {boolean} True when valid, false when invalid
 	 */
 	validateEmail = () => {
 		const { email } = this.props.attributes;
@@ -367,7 +366,7 @@ class SimplePaymentsEdit extends Component {
 	 *
 	 * Stores error message in state.fieldTitleError
 	 *
-	 * @returns {Boolean} True when valid, false when invalid
+	 * @returns {boolean} True when valid, false when invalid
 	 */
 	validateTitle = () => {
 		const { title } = this.props.attributes;
@@ -430,24 +429,10 @@ class SimplePaymentsEdit extends Component {
 
 	renderSettings = () => (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings', 'jetpack' ) } initialOpen={ false }>
-				<BaseControl
-					label={ __( 'Purchase link text', 'jetpack' ) }
-					help={ __(
-						'Enter the text you want to display on a purchase link used as fallback when the PayPal button cannot be used (e.g. emails, AMP, etc.)',
-						'jetpack'
-					) }
-					className="jetpack-simple-payments__purchase-link-text"
-				>
-					<TextControl
-						placeholder={ __( 'Click here to purchase', 'jetpack' ) }
-						onChange={ newPostLinkText =>
-							this.props.setAttributes( { postLinkText: newPostLinkText } )
-						}
-						value={ this.props.attributes.postLinkText }
-					/>
-				</BaseControl>
-			</PanelBody>
+			<PanelControls
+				postLinkText={ this.props.attributes.postLinkText }
+				setAttributes={ this.props.setAttributes }
+			/>
 		</InspectorControls>
 	);
 

projects/plugins/jetpack/extensions/blocks/simple-payments/save.js

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */

projects/plugins/jetpack/extensions/blocks/simple-payments/test/controls.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+
+/**
+ * Internal dependencies
+ */
+import { PanelControls } from '../controls';
+
+const setAttributes = jest.fn();
+
+const panelProps = {
+	postLinKText: 'Click here to buy',
+	setAttributes,
+};
+
+beforeEach( () => {
+	setAttributes.mockClear();
+} );
+
+describe( 'Panel controls', () => {
+	test( 'shows purchase text input when settings tab expanded', () => {
+		render( <PanelControls { ...panelProps } /> );
+		userEvent.click( screen.getByText( 'Settings' ) );
+		expect( screen.getByPlaceholderText( 'Click here to purchase' ) ).toBeInTheDocument();
+	} );
+
+	test( 'sets postLinkText attribute when post link text field updated', () => {
+		render( <PanelControls { ...panelProps } /> );
+		userEvent.click( screen.getByText( 'Settings' ) );
+		userEvent.type( screen.getByPlaceholderText( 'Click here to purchase' ), 'A' );
+		expect( setAttributes ).toHaveBeenCalledWith( { postLinkText: 'A' } );
+	} );
+} );

projects/plugins/jetpack/extensions/blocks/simple-payments/test/edit.js

@@ -0,0 +1,135 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+
+/**
+ * Internal dependencies
+ */
+import { SimplePaymentsEdit } from '../edit';
+
+const setAttributes = jest.fn();
+
+const props = {
+	attributes: {
+		productId: 1,
+	},
+	postLinKText: 'Click here to buy',
+	setAttributes,
+	isSelected: true,
+};
+
+beforeEach( () => {
+	setAttributes.mockClear();
+} );
+
+describe( 'Edit component', () => {
+	test( 'shows Pay with Paypal image but no input fields if not selected', () => {
+		const notSelectedProps = { ...props, isSelected: false };
+		render( <SimplePaymentsEdit { ...notSelectedProps } /> );
+		expect( screen.getByAltText( 'Pay with PayPal' ) ).toBeInTheDocument();
+		expect( screen.queryByPlaceholderText( 'Item name' ) ).not.toBeInTheDocument();
+	} );
+
+	test( 'shows input fields if selected', () => {
+		render( <SimplePaymentsEdit { ...props } /> );
+		expect( screen.getByLabelText( 'Item name' ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Describe your item in a few words' ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Currency' ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Price' ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Email' ) ).toBeInTheDocument();
+	} );
+
+	test( 'updates item name attribute if item name input updated', () => {
+		render( <SimplePaymentsEdit { ...props } /> );
+		userEvent.type( screen.getByLabelText( 'Item name' ), 'A' );
+		expect( setAttributes ).toHaveBeenCalledWith( { title: 'A' } );
+	} );
+
+	test( 'validates name', () => {
+		const notSelectedProps = {
+			...props,
+			isSelected: false,
+			attributes: { title: '' },
+		};
+		const { rerender } = render( <SimplePaymentsEdit { ...props } /> );
+
+		rerender( <SimplePaymentsEdit { ...notSelectedProps } /> );
+
+		expect( screen.getByText( 'Please add a brief title', { exact: false } ) ).toBeInTheDocument();
+	} );
+
+	test( 'updates description attribute if description input updated', () => {
+		render( <SimplePaymentsEdit { ...props } /> );
+		userEvent.type( screen.getByLabelText( 'Describe your item in a few words' ), 'B' );
+		expect( setAttributes ).toHaveBeenCalledWith( { content: 'B' } );
+	} );
+
+	test( 'updates price attribute if price input updated', () => {
+		render( <SimplePaymentsEdit { ...props } /> );
+		userEvent.paste( screen.getByLabelText( 'Price' ), 1 );
+		expect( setAttributes ).toHaveBeenCalledWith( { price: 1 } );
+	} );
+
+	test( 'validates price', () => {
+		const notSelectedProps = {
+			...props,
+			isSelected: false,
+			attributes: { price: 0 },
+		};
+		const { rerender } = render( <SimplePaymentsEdit { ...props } /> );
+
+		rerender( <SimplePaymentsEdit { ...notSelectedProps } /> );
+
+		expect(
+			screen.getByText( 'If you’re selling something, you need a price tag', { exact: false } )
+		).toBeInTheDocument();
+	} );
+
+	test( 'sets currency attribute', () => {
+		render( <SimplePaymentsEdit { ...props } /> );
+		userEvent.selectOptions( screen.getByLabelText( 'Currency' ), [ 'AUD' ] );
+
+		expect( setAttributes ).toHaveBeenCalledWith( { currency: 'AUD' } );
+	} );
+
+	test( 'toggles allow multiple', () => {
+		render( <SimplePaymentsEdit { ...props } /> );
+		userEvent.click( screen.getByLabelText( 'Allow people to buy more than one item at a time' ) );
+
+		expect( setAttributes ).toHaveBeenCalledWith( { multiple: true } );
+	} );
+
+	test( 'updates email attribute if email input updated', () => {
+		render( <SimplePaymentsEdit { ...props } /> );
+		userEvent.paste( screen.getByPlaceholderText( 'Email' ), 'bob@bob.com' );
+		expect( setAttributes ).toHaveBeenCalledWith( { email: 'bob@bob.com' } );
+	} );
+
+	test( 'validates email', () => {
+		const notSelectedProps = {
+			...props,
+			isSelected: false,
+			attributes: { email: 'my-invalid-email' },
+		};
+		const { rerender } = render( <SimplePaymentsEdit { ...props } /> );
+
+		rerender( <SimplePaymentsEdit { ...notSelectedProps } /> );
+
+		expect( screen.getByText( 'not a valid email address', { exact: false } ) ).toBeInTheDocument();
+	} );
+
+	test( 'displays title and price fields when not selected', () => {
+		const notSelectedProps = {
+			...props,
+			isSelected: false,
+			attributes: { email: 'bob@bob.com', currency: 'USD', price: 10.00, title: 'White TShirt' },
+		};
+		render( <SimplePaymentsEdit { ...notSelectedProps } /> );
+
+		expect( screen.getByText( 'White TShirt' ) ).toBeInTheDocument();
+		expect( screen.getByText( '$10.00' ) ).toBeInTheDocument();
+	} );
+} );

projects/plugins/jetpack/extensions/blocks/simple-payments/test/fixtures/jetpack__simple-payments.html

@@ -0,0 +1,3 @@
+<!-- wp:jetpack/simple-payments {"email":"bob@bob.com","featuredMediaId":11,"multiple":true,"currency":"EUR","price":10,"productId":573} -->
+<div class="jetpack-simple-payments-wrapper jetpack-simple-payments-573"><div class="jetpack-simple-payments-product"><div class="jetpack-simple-payments-product-image"><div class="jetpack-simple-payments-image"><figure><img src="https://bob.com/2019/08/headphones.jpg" alt="Placeholder Image"/></figure></div></div><div class="jetpack-simple-payments-details"><div class="jetpack-simple-payments-title"><p>Headphones</p></div><div class="jetpack-simple-payments-description"><p>Green headphones</p></div><div class="jetpack-simple-payments-price"><p>€10.00</p></div><a class="jetpack-simple-payments-purchase" href="https://bob.com/?p=572" target="_blank" rel="noopener noreferrer">Click here to purchase.</a></div></div></div>
+<!-- /wp:jetpack/simple-payments -->

projects/plugins/jetpack/extensions/blocks/simple-payments/test/fixtures/jetpack__simple-payments.json

@@ -0,0 +1,23 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "jetpack/simple-payments",
+        "isValid": true,
+        "attributes": {
+            "currency": "EUR",
+            "content": "Green headphones",
+            "email": "bob@bob.com",
+            "featuredMediaId": 11,
+            "featuredMediaUrl": "https://bob.com/2019/08/headphones.jpg",
+            "featuredMediaTitle": "Placeholder Image",
+            "multiple": true,
+            "postLinkUrl": "https://bob.com/?p=572",
+            "postLinkText": "Click here to purchase.",
+            "price": 10,
+            "productId": 573,
+            "title": "Headphones"
+        },
+        "innerBlocks": [],
+        "originalContent": "<div class=\"jetpack-simple-payments-wrapper jetpack-simple-payments-573\"><div class=\"jetpack-simple-payments-product\"><div class=\"jetpack-simple-payments-product-image\"><div class=\"jetpack-simple-payments-image\"><figure><img src=\"https://bob.com/2019/08/headphones.jpg\" alt=\"Placeholder Image\"/></figure></div></div><div class=\"jetpack-simple-payments-details\"><div class=\"jetpack-simple-payments-title\"><p>Headphones</p></div><div class=\"jetpack-simple-payments-description\"><p>Green headphones</p></div><div class=\"jetpack-simple-payments-price\"><p>€10.00</p></div><a class=\"jetpack-simple-payments-purchase\" href=\"https://bob.com/?p=572\" target=\"_blank\" rel=\"noopener noreferrer\">Click here to purchase.</a></div></div></div>"
+    }
+]

projects/plugins/jetpack/extensions/blocks/simple-payments/test/fixtures/jetpack__simple-payments.parsed.json

@@ -0,0 +1,18 @@
+[
+    {
+        "blockName": "jetpack/simple-payments",
+        "attrs": {
+            "email": "bob@bob.com",
+            "featuredMediaId": 11,
+            "multiple": true,
+            "currency": "EUR",
+            "price": 10,
+            "productId": 573
+        },
+        "innerBlocks": [],
+        "innerHTML": "\n<div class=\"jetpack-simple-payments-wrapper jetpack-simple-payments-573\"><div class=\"jetpack-simple-payments-product\"><div class=\"jetpack-simple-payments-product-image\"><div class=\"jetpack-simple-payments-image\"><figure><img src=\"https://bob.com/2019/08/headphones.jpg\" alt=\"Placeholder Image\"/></figure></div></div><div class=\"jetpack-simple-payments-details\"><div class=\"jetpack-simple-payments-title\"><p>Headphones</p></div><div class=\"jetpack-simple-payments-description\"><p>Green headphones</p></div><div class=\"jetpack-simple-payments-price\"><p>€10.00</p></div><a class=\"jetpack-simple-payments-purchase\" href=\"https://bob.com/?p=572\" target=\"_blank\" rel=\"noopener noreferrer\">Click here to purchase.</a></div></div></div>\n",
+        "innerContent": [
+            "\n<div class=\"jetpack-simple-payments-wrapper jetpack-simple-payments-573\"><div class=\"jetpack-simple-payments-product\"><div class=\"jetpack-simple-payments-product-image\"><div class=\"jetpack-simple-payments-image\"><figure><img src=\"https://bob.com/2019/08/headphones.jpg\" alt=\"Placeholder Image\"/></figure></div></div><div class=\"jetpack-simple-payments-details\"><div class=\"jetpack-simple-payments-title\"><p>Headphones</p></div><div class=\"jetpack-simple-payments-description\"><p>Green headphones</p></div><div class=\"jetpack-simple-payments-price\"><p>€10.00</p></div><a class=\"jetpack-simple-payments-purchase\" href=\"https://bob.com/?p=572\" target=\"_blank\" rel=\"noopener noreferrer\">Click here to purchase.</a></div></div></div>\n"
+        ]
+    }
+]

projects/plugins/jetpack/extensions/blocks/simple-payments/test/fixtures/jetpack__simple-payments.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:jetpack/simple-payments {"currency":"EUR","email":"bob@bob.com","featuredMediaId":11,"multiple":true,"price":10,"productId":573} -->
+<div class="jetpack-simple-payments-wrapper jetpack-simple-payments-573"><div class="jetpack-simple-payments-product"><div class="jetpack-simple-payments-product-image"><div class="jetpack-simple-payments-image"><figure><img src="https://bob.com/2019/08/headphones.jpg" alt="Placeholder Image"/></figure></div></div><div class="jetpack-simple-payments-details"><div class="jetpack-simple-payments-title"><p>Headphones</p></div><div class="jetpack-simple-payments-description"><p>Green headphones</p></div><div class="jetpack-simple-payments-price"><p>€10.00</p></div><a class="jetpack-simple-payments-purchase" href="https://bob.com/?p=572" target="_blank" rel="noopener noreferrer">Click here to purchase.</a></div></div></div>
+<!-- /wp:jetpack/simple-payments -->

projects/plugins/jetpack/extensions/blocks/simple-payments/test/fixtures/jetpack__simple-payments__deprecated-1.html

@@ -0,0 +1,3 @@
+<!-- wp:jetpack/simple-payments {"email":"bob@bob.com","featuredMediaId":11,"multiple":true,"currency":"EUR","price":10,"productId":573} -->
+[simple-payment id="573"]
+<!-- /wp:jetpack/simple-payments -->