From 4e79b475a73bd8d147deb45ff83f95d09e892fa3 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Wed, 17 Feb 2021 15:16:54 +1300
Subject: [PATCH 01/10] Test

---
 .../send-a-message/whatsapp-button/edit.js    | 204 +--------------
 .../whatsapp-button/settings.js               | 232 ++++++++++++++++++
 .../whatsapp-button/test/edit.js              |  44 ++++
 .../whatsapp-button/test/settings.js          |  45 ++++
 projects/plugins/jetpack/jest.config.js       |   3 +-
 projects/plugins/jetpack/package.json         |   2 +
 .../plugins/jetpack/tests/jest-globals.js     |   9 +
 projects/plugins/jetpack/yarn.lock            |  46 +++-
 8 files changed, 380 insertions(+), 205 deletions(-)
 create mode 100644 projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/settings.js
 create mode 100644 projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/edit.js
 create mode 100644 projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js
 create mode 100644 projects/plugins/jetpack/tests/jest-globals.js

diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
index 2c1fd7511d5fa..65664f111bafd 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -2,53 +2,21 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { __, _x } from '@wordpress/i18n';
-import { useEffect, useState, useCallback } from '@wordpress/element';
+import { useEffect, useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-import {
-	Button,
-	BaseControl,
-	TextControl,
-	TextareaControl,
-	SelectControl,
-	PanelBody,
-	ToolbarGroup,
-	Dropdown,
-	Path,
-	ToggleControl,
-} from '@wordpress/components';
-import {
-	BlockControls,
-	InspectorControls,
-	RichText,
-	PanelColorSettings,
-} from '@wordpress/block-editor';
-import { DOWN } from '@wordpress/keycodes';
+import { ToolbarGroup } from '@wordpress/components';
+import { BlockControls, InspectorControls, RichText } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { countryCodes } from '../shared/countrycodes.js';
-import renderMaterialIcon from '../../../shared/render-material-icon';
-import HelpMessage from '../../../shared/help-message';
+import WhatsAppButtonSettings from './settings';
 import './view.scss';
 
-const WHATSAPP_GREEN = '#25D366';
-const WHATSAPP_DARK = '#465B64';
-const WHATSAPP_LIGHT = '#F4F4F4';
-
 export default function WhatsAppButtonEdit( { attributes, setAttributes, className, clientId } ) {
-	const {
-		countryCode,
-		phoneNumber,
-		buttonText,
-		firstMessage,
-		colorClass,
-		backgroundColor,
-		openInNewTab,
-	} = attributes;
+	const { countryCode, buttonText, colorClass, backgroundColor } = attributes;
 
-	const [ isValidPhoneNumber, setIsValidPhoneNumber ] = useState( true );
 	const { selectBlock } = useDispatch( 'core/block-editor' );
 
 	const getCountryCode = useCallback( async () => {
@@ -84,119 +52,6 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 		}
 	}, [ clientId, countryCode, getCountryCode, selectBlock ] );
 
-	const validatePhoneNumber = newPhoneNumber => {
-		// No alphabetical characters but allow dots, dashes, and brackets.
-		// These will be stripped for the WhatsApp API (only numbers), but retain
-		// them in the UI for a more readable number for the user.
-		const phoneNumberRegEx = RegExp( /^[+]?[\s./0-9]*[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/, 'g' );
-
-		if ( undefined === newPhoneNumber || newPhoneNumber.length < 1 ) {
-			return false;
-		}
-
-		return phoneNumberRegEx.test( countryCode.replace( /\D/g, '' ) + newPhoneNumber );
-	};
-
-	const setBackgroundColor = color => {
-		setAttributes( { backgroundColor: color } );
-
-		if ( color === undefined || color === WHATSAPP_GREEN || color === WHATSAPP_DARK ) {
-			return setAttributes( { colorClass: 'dark' } );
-		}
-
-		setAttributes( { colorClass: 'light' } );
-	};
-
-	const renderSettingsToggle = ( isOpen, onToggle ) => {
-		const openOnArrowDown = event => {
-			if ( ! isOpen && event.keyCode === DOWN ) {
-				event.preventDefault();
-				event.stopPropagation();
-				onToggle();
-			}
-		};
-
-		return (
-			<Button
-				className="components-toolbar__control jetpack-contact-form__toggle"
-				label={ __( 'WhatsApp Button Settings', 'jetpack' ) }
-				onClick={ onToggle }
-				onKeyDown={ openOnArrowDown }
-				icon={ renderMaterialIcon(
-					<Path d="M10.82 12.49c.02-.16.04-.32.04-.49 0-.17-.02-.33-.04-.49l1.08-.82c.1-.07.12-.21.06-.32l-1.03-1.73c-.06-.11-.2-.15-.31-.11l-1.28.5c-.27-.2-.56-.36-.87-.49l-.2-1.33c0-.12-.11-.21-.24-.21H5.98c-.13 0-.24.09-.26.21l-.2 1.32c-.31.12-.6.3-.87.49l-1.28-.5c-.12-.05-.25 0-.31.11l-1.03 1.73c-.06.12-.03.25.07.33l1.08.82c-.02.16-.03.33-.03.49 0 .17.02.33.04.49l-1.09.83c-.1.07-.12.21-.06.32l1.03 1.73c.06.11.2.15.31.11l1.28-.5c.27.2.56.36.87.49l.2 1.32c.01.12.12.21.25.21h2.06c.13 0 .24-.09.25-.21l.2-1.32c.31-.12.6-.3.87-.49l1.28.5c.12.05.25 0 .31-.11l1.03-1.73c.06-.11.04-.24-.06-.32l-1.1-.83zM7 13.75c-.99 0-1.8-.78-1.8-1.75s.81-1.75 1.8-1.75 1.8.78 1.8 1.75S8 13.75 7 13.75zM18 1.01L8 1c-1.1 0-2 .9-2 2v3h2V5h10v14H8v-1H6v3c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99z" />
-				) }
-			/>
-		);
-	};
-
-	const renderPhoneSettings = () => {
-		return (
-			<BaseControl
-				label={ __( 'Phone Number', 'jetpack' ) }
-				help={ __(
-					'Enter the phone number you use for WhatsApp and would like to be contacted on.',
-					'jetpack'
-				) }
-				className="jetpack-whatsapp-button__phonenumber"
-			>
-				<SelectControl
-					value={ countryCode }
-					onChange={ value => setAttributes( { countryCode: value } ) }
-					options={ countryCodes }
-				/>
-
-				<TextControl
-					placeholder={ __( 'Your phone number…', 'jetpack' ) }
-					onChange={ newPhoneNumber => {
-						setAttributes( { phoneNumber: newPhoneNumber } );
-
-						if ( newPhoneNumber.length === 0 ) {
-							setIsValidPhoneNumber( true );
-						}
-
-						if ( newPhoneNumber.length > 2 ) {
-							setIsValidPhoneNumber( validatePhoneNumber( newPhoneNumber ) );
-						}
-					} }
-					value={ phoneNumber }
-				/>
-
-				{ ! isValidPhoneNumber && (
-					<HelpMessage isError className="jetpack-whatsapp-error">
-						{ __( 'Please enter a valid phone number.', 'jetpack' ) }
-					</HelpMessage>
-				) }
-			</BaseControl>
-		);
-	};
-
-	const renderSettings = () => {
-		return (
-			<>
-				{ renderPhoneSettings() }
-				<TextareaControl
-					label={ __( 'Default First Message', 'jetpack' ) }
-					help={ __(
-						'The default first message that will be sent by visitors when using this button.',
-						'jetpack'
-					) }
-					value={ firstMessage }
-					onChange={ text => setAttributes( { firstMessage: text } ) }
-				/>
-
-				<ToggleControl
-					label={ __( 'Open in new tab', 'jetpack' ) }
-					checked={ openInNewTab }
-					onChange={ newValue => setAttributes( { openInNewTab: newValue } ) }
-					help={ __(
-						'When the button is tapped, should a new tab be opened if the visitor does not have WhatsApp installed?',
-						'jetpack'
-					) }
-				/>
-			</>
-		);
-	};
-
 	const getBlockClassNames = () => {
 		return classnames( className, colorClass ? 'is-color-' + colorClass : undefined );
 	};
@@ -205,57 +60,12 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 		<div className={ getBlockClassNames() }>
 			{ ToolbarGroup && (
 				<BlockControls>
-					<ToolbarGroup>
-						<Dropdown
-							position="bottom right"
-							className="jetpack-whatsapp-button-settings-selector"
-							contentClassName="jetpack-whatsapp-button__popover"
-							renderToggle={ ( { isOpen, onToggle } ) => renderSettingsToggle( isOpen, onToggle ) }
-							renderContent={ () => renderPhoneSettings() }
-						/>
-					</ToolbarGroup>
+					<WhatsAppButtonSettings context="toolbar" setAttributes={ setAttributes } attributes />
 				</BlockControls>
 			) }
 
 			<InspectorControls>
-				<PanelBody title={ __( 'WhatsApp Button Settings', 'jetpack' ) } initialOpen={ true }>
-					{ renderSettings() }
-				</PanelBody>
-
-				<PanelColorSettings
-					title={ __( 'Color Settings', 'jetpack' ) }
-					initialOpen={ false }
-					colorSettings={ [
-						{
-							value: backgroundColor,
-							onChange: color => setBackgroundColor( color ),
-							label: __( 'Background Color', 'jetpack' ),
-							disableCustomColors: true,
-							colors: [
-								{
-									name: _x( 'WhatsApp Green', 'background color name', 'jetpack' ),
-									slug: 'whatsapp-green',
-									color: WHATSAPP_GREEN,
-								},
-								{
-									name: _x( 'WhatsApp Dark', 'background color name', 'jetpack' ),
-									slug: 'whatsapp-dark',
-									color: WHATSAPP_DARK,
-								},
-								{
-									name: _x( 'WhatsApp Light', 'background color name', 'jetpack' ),
-									slug: 'whatsapp-light',
-									color: WHATSAPP_LIGHT,
-								},
-								{
-									name: _x( 'White', 'background color name', 'jetpack' ),
-									slug: 'whatsapp-white',
-									color: '#FFFFFF',
-								},
-							],
-						},
-					] }
-				></PanelColorSettings>
+				<WhatsAppButtonSettings context="inspector" setAttributes={ setAttributes } attributes />
 			</InspectorControls>
 
 			<RichText
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/settings.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/settings.js
new file mode 100644
index 0000000000000..891541862dc0d
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/settings.js
@@ -0,0 +1,232 @@
+/**
+ * External dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { useEffect, useState, useCallback } from '@wordpress/element';
+import {
+	BaseControl,
+	TextControl,
+	TextareaControl,
+	SelectControl,
+	Path,
+	ToggleControl,
+	Button,
+	PanelBody,
+	ToolbarGroup,
+	Dropdown,
+} from '@wordpress/components';
+import { PanelColorSettings } from '@wordpress/block-editor';
+import { DOWN } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { countryCodes } from '../shared/countrycodes.js';
+import renderMaterialIcon from '../../../shared/render-material-icon';
+import HelpMessage from '../../../shared/help-message';
+
+const WHATSAPP_GREEN = '#25D366';
+const WHATSAPP_DARK = '#465B64';
+const WHATSAPP_LIGHT = '#F4F4F4';
+
+export default function WhatsAppButtonSettings( { attributes, setAttributes, context } ) {
+	const { countryCode, phoneNumber, firstMessage, openInNewTab, backgroundColor } = attributes;
+
+	const [ isValidPhoneNumber, setIsValidPhoneNumber ] = useState( true );
+
+	const getCountryCode = useCallback( async () => {
+		setAttributes( { countryCode: '1' } );
+
+		const geoFetch = await fetch( 'https://public-api.wordpress.com/geo/' )
+			.then( response => {
+				if ( ! response.ok ) {
+					return false;
+				}
+
+				return response;
+			} )
+			.catch( () => {
+				return false;
+			} );
+
+		if ( geoFetch ) {
+			const geo = await geoFetch.json();
+
+			countryCodes.forEach( item => {
+				if ( item.code === geo.country_short ) {
+					setAttributes( { countryCode: item.value } );
+				}
+			} );
+		}
+	}, [ setAttributes ] );
+
+	useEffect( () => {
+		if ( undefined === countryCode ) {
+			getCountryCode();
+		}
+	}, [ countryCode, getCountryCode ] );
+
+	const validatePhoneNumber = newPhoneNumber => {
+		// No alphabetical characters but allow dots, dashes, and brackets.
+		// These will be stripped for the WhatsApp API (only numbers), but retain
+		// them in the UI for a more readable number for the user.
+		const phoneNumberRegEx = RegExp( /^[+]?[\s./0-9]*[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/, 'g' );
+
+		if ( undefined === newPhoneNumber || newPhoneNumber.length < 1 ) {
+			return false;
+		}
+
+		return phoneNumberRegEx.test( countryCode.replace( /\D/g, '' ) + newPhoneNumber );
+	};
+
+	const setBackgroundColor = color => {
+		setAttributes( { backgroundColor: color } );
+
+		if ( color === undefined || color === WHATSAPP_GREEN || color === WHATSAPP_DARK ) {
+			return setAttributes( { colorClass: 'dark' } );
+		}
+
+		setAttributes( { colorClass: 'light' } );
+	};
+
+	const renderSettingsToggle = ( isOpen, onToggle ) => {
+		const openOnArrowDown = event => {
+			if ( ! isOpen && event.keyCode === DOWN ) {
+				event.preventDefault();
+				event.stopPropagation();
+				onToggle();
+			}
+		};
+
+		return (
+			<Button
+				className="components-toolbar__control jetpack-contact-form__toggle"
+				label={ __( 'WhatsApp Button Settings', 'jetpack' ) }
+				onClick={ onToggle }
+				onKeyDown={ openOnArrowDown }
+				icon={ renderMaterialIcon(
+					<Path d="M10.82 12.49c.02-.16.04-.32.04-.49 0-.17-.02-.33-.04-.49l1.08-.82c.1-.07.12-.21.06-.32l-1.03-1.73c-.06-.11-.2-.15-.31-.11l-1.28.5c-.27-.2-.56-.36-.87-.49l-.2-1.33c0-.12-.11-.21-.24-.21H5.98c-.13 0-.24.09-.26.21l-.2 1.32c-.31.12-.6.3-.87.49l-1.28-.5c-.12-.05-.25 0-.31.11l-1.03 1.73c-.06.12-.03.25.07.33l1.08.82c-.02.16-.03.33-.03.49 0 .17.02.33.04.49l-1.09.83c-.1.07-.12.21-.06.32l1.03 1.73c.06.11.2.15.31.11l1.28-.5c.27.2.56.36.87.49l.2 1.32c.01.12.12.21.25.21h2.06c.13 0 .24-.09.25-.21l.2-1.32c.31-.12.6-.3.87-.49l1.28.5c.12.05.25 0 .31-.11l1.03-1.73c.06-.11.04-.24-.06-.32l-1.1-.83zM7 13.75c-.99 0-1.8-.78-1.8-1.75s.81-1.75 1.8-1.75 1.8.78 1.8 1.75S8 13.75 7 13.75zM18 1.01L8 1c-1.1 0-2 .9-2 2v3h2V5h10v14H8v-1H6v3c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99z" />
+				) }
+			/>
+		);
+	};
+	const settings = () => (
+		<>
+			<BaseControl
+				label={ __( 'Phone Number', 'jetpack' ) }
+				help={ __(
+					'Enter the phone number you use for WhatsApp and would like to be contacted on.',
+					'jetpack'
+				) }
+				className="jetpack-whatsapp-button__phonenumber"
+			>
+				<SelectControl
+					label={ __( 'Country code', 'jetpack' ) }
+					value={ countryCode }
+					onChange={ value => setAttributes( { countryCode: value } ) }
+					options={ countryCodes }
+					hideLabelFromVision={ true }
+				/>
+
+				<TextControl
+					placeholder={ __( 'Your phone number…', 'jetpack' ) }
+					onChange={ newPhoneNumber => {
+						setAttributes( { phoneNumber: newPhoneNumber } );
+
+						if ( newPhoneNumber.length === 0 ) {
+							setIsValidPhoneNumber( true );
+						}
+
+						if ( newPhoneNumber.length > 2 ) {
+							setIsValidPhoneNumber( validatePhoneNumber( newPhoneNumber ) );
+						}
+					} }
+					value={ phoneNumber }
+				/>
+
+				{ ! isValidPhoneNumber && (
+					<HelpMessage isError className="jetpack-whatsapp-error">
+						{ __( 'Please enter a valid phone number.', 'jetpack' ) }
+					</HelpMessage>
+				) }
+			</BaseControl>
+
+			<TextareaControl
+				label={ __( 'Default First Message', 'jetpack' ) }
+				help={ __(
+					'The default first message that will be sent by visitors when using this button.',
+					'jetpack'
+				) }
+				value={ firstMessage }
+				onChange={ text => setAttributes( { firstMessage: text } ) }
+			/>
+
+			<ToggleControl
+				label={ __( 'Open in new tab', 'jetpack' ) }
+				checked={ openInNewTab }
+				onChange={ newValue => setAttributes( { openInNewTab: newValue } ) }
+				help={ __(
+					'When the button is tapped, should a new tab be opened if the visitor does not have WhatsApp installed?',
+					'jetpack'
+				) }
+			/>
+		</>
+	);
+
+	if ( context === 'toolbar' ) {
+		return (
+			<ToolbarGroup>
+				<Dropdown
+					position="bottom right"
+					className="jetpack-whatsapp-button-settings-selector"
+					contentClassName="jetpack-whatsapp-button__popover"
+					renderToggle={ ( { isOpen, onToggle } ) => renderSettingsToggle( isOpen, onToggle ) }
+					renderContent={ settings }
+				/>
+			</ToolbarGroup>
+		);
+	}
+
+	return (
+		<>
+			<PanelBody title={ __( 'WhatsApp Button Settings', 'jetpack' ) } initialOpen={ true }>
+				{ settings() }
+			</PanelBody>
+
+			<PanelColorSettings
+				title={ __( 'Color Settings', 'jetpack' ) }
+				initialOpen={ false }
+				colorSettings={ [
+					{
+						value: backgroundColor,
+						onChange: color => setBackgroundColor( color ),
+						label: __( 'Background Color', 'jetpack' ),
+						disableCustomColors: true,
+						colors: [
+							{
+								name: _x( 'WhatsApp Green', 'background color name', 'jetpack' ),
+								slug: 'whatsapp-green',
+								color: WHATSAPP_GREEN,
+							},
+							{
+								name: _x( 'WhatsApp Dark', 'background color name', 'jetpack' ),
+								slug: 'whatsapp-dark',
+								color: WHATSAPP_DARK,
+							},
+							{
+								name: _x( 'WhatsApp Light', 'background color name', 'jetpack' ),
+								slug: 'whatsapp-light',
+								color: WHATSAPP_LIGHT,
+							},
+							{
+								name: _x( 'White', 'background color name', 'jetpack' ),
+								slug: 'whatsapp-white',
+								color: '#FFFFFF',
+							},
+						],
+					},
+				] }
+			></PanelColorSettings>
+		</>
+	);
+}
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/edit.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/edit.js
new file mode 100644
index 0000000000000..c064cafc5e2e0
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/edit.js
@@ -0,0 +1,44 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import WhatsAppButtonEdit from '../edit';
+
+const defaultAttributes = {
+	countryCode: 'us',
+	phoneNumber: 12345,
+	buttonText: 'Chat on WhatsApp',
+	firstMessage: '',
+	colorClass: 'blue',
+	backgroundColor: 'red',
+	openInNewTab: false,
+};
+
+const defaultProps = {
+	attributes: defaultAttributes,
+	setAttributes: jest.fn(),
+	className: 'wp-block-jetpack-whatsapp-button',
+	clientId: 1,
+};
+
+test( 'loads and displays button with buttonText attribute assigned to button', () => {
+	render( <WhatsAppButtonEdit { ...defaultProps } /> );
+
+	expect( screen.getByText( 'Chat on WhatsApp' ) ).toBeDefined();
+} );
+
+test( 'displays button as multiline textbox for updating the buttonText attribute', () => {
+	render( <WhatsAppButtonEdit { ...defaultProps } /> );
+
+	expect( screen.getByRole( 'textbox' ) ).toHaveAttribute( 'aria-multiline' );
+	expect( screen.getByRole( 'textbox' ) ).toHaveAttribute( 'contenteditable' );
+} );
+
+test( 'assigns colorClass attribute to the block wrapper', () => {
+	const { container } = render( <WhatsAppButtonEdit { ...defaultProps } /> );
+
+	expect( container.firstChild ).toHaveClass( 'is-color-blue' );
+} );
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js
new file mode 100644
index 0000000000000..49002b2e1bc5b
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js
@@ -0,0 +1,45 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import WhatsAppButtonSettings from '../settings';
+
+const defaultAttributes = {
+	countryCode: 'us',
+	phoneNumber: 12345,
+	buttonText: 'Chat on WhatsApp',
+	firstMessage: '',
+	colorClass: 'blue',
+	backgroundColor: 'red',
+	openInNewTab: false,
+};
+
+const defaultProps = {
+	attributes: defaultAttributes,
+	setAttributes: jest.fn(),
+	className: 'wp-block-jetpack-whatsapp-button',
+	clientId: 1,
+	context: 'inspector',
+};
+
+test( 'loads and displays country code select list and phone number input box', () => {
+	render( <WhatsAppButtonSettings { ...defaultProps } /> );
+
+	expect( screen.getByLabelText( 'Country code' ) ).toBeDefined();
+	expect( screen.getByPlaceholderText( 'Your phone number…' ) ).toBeDefined();
+} );
+
+test( 'displays default first message box', () => {
+	render( <WhatsAppButtonSettings { ...defaultProps } /> );
+
+	expect( screen.getByLabelText( 'Default First Message' ) ).toBeDefined();
+} );
+
+test( 'displays open in new tab toggle', () => {
+	render( <WhatsAppButtonSettings { ...defaultProps } /> );
+
+	expect( screen.getByLabelText( 'Open in new tab' ) ).toBeDefined();
+} );
diff --git a/projects/plugins/jetpack/jest.config.js b/projects/plugins/jetpack/jest.config.js
index 1ffc91245a312..0ca5d5ca35ada 100644
--- a/projects/plugins/jetpack/jest.config.js
+++ b/projects/plugins/jetpack/jest.config.js
@@ -12,5 +12,6 @@ module.exports = {
 			'@automattic/calypso-build/jest/transform/asset'
 		),
 	},
-	coverageDirectory: "coverage/extensions"
+	coverageDirectory: 'coverage/extensions',
+	setupFiles: [ '<rootDir>/tests/jest-globals.js' ],
 };
diff --git a/projects/plugins/jetpack/package.json b/projects/plugins/jetpack/package.json
index 00bf9b457f43f..400633fcc1fce 100644
--- a/projects/plugins/jetpack/package.json
+++ b/projects/plugins/jetpack/package.json
@@ -39,6 +39,7 @@
 		"test-adminpage": "yarn test-client && yarn test-gui",
 		"test-client": "NODE_ENV=test NODE_PATH=tests:_inc/client tests/runner.js",
 		"test-extensions": "jest extensions",
+		"test-extensions-single": "jest",
 		"test-gui": "NODE_ENV=test NODE_PATH=tests:_inc/client tests/runner.js gui",
 		"test-lib": "NODE_ENV=test NODE_PATH=tests:_inc/client tests/runner.js lib",
 		"test-modules": "NODE_ENV=test NODE_PATH=tests:_inc/client tests/runner.js modules",
@@ -155,6 +156,7 @@
 		"@size-limit/preset-app": "4.9.1",
 		"@testing-library/jest-dom": "5.11.9",
 		"@testing-library/preact": "2.0.1",
+		"@testing-library/react": "11.2.3",
 		"@wordpress/components": "9.2.6",
 		"@wordpress/core-data": "2.12.3",
 		"@wordpress/dependency-extraction-webpack-plugin": "2.4.0",
diff --git a/projects/plugins/jetpack/tests/jest-globals.js b/projects/plugins/jetpack/tests/jest-globals.js
new file mode 100644
index 0000000000000..359fdfe457682
--- /dev/null
+++ b/projects/plugins/jetpack/tests/jest-globals.js
@@ -0,0 +1,9 @@
+Object.defineProperty( window, 'matchMedia', {
+	value: jest.fn( () => {
+		return {
+			matches: true,
+			addListener: jest.fn(),
+			removeListener: jest.fn(),
+		};
+	} ),
+} );
diff --git a/projects/plugins/jetpack/yarn.lock b/projects/plugins/jetpack/yarn.lock
index c646465e1d6dd..b9e8779325543 100644
--- a/projects/plugins/jetpack/yarn.lock
+++ b/projects/plugins/jetpack/yarn.lock
@@ -2104,6 +2104,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.8.4":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
+  integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.5":
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.4.tgz#cb7d1ad7c6d65676e66b47186577930465b5271b"
@@ -2125,13 +2132,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.8.4":
-  version "7.12.5"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
-  integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
@@ -2995,6 +2995,20 @@
     dom-accessibility-api "^0.4.5"
     pretty-format "^25.5.0"
 
+"@testing-library/dom@^7.28.1":
+  version "7.29.4"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.29.4.tgz#1647c2b478789621ead7a50614ad81ab5ae5b86c"
+  integrity sha512-CtrJRiSYEfbtNGtEsd78mk1n1v2TUbeABlNIcOCJdDfkN5/JTOwQEbbQpoSRxGqzcWPgStMvJ4mNolSuBRv1NA==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^4.2.2"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.4"
+    lz-string "^1.4.4"
+    pretty-format "^26.6.2"
+
 "@testing-library/jest-dom@5.11.9":
   version "5.11.9"
   resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.11.9.tgz#e6b3cd687021f89f261bd53cbe367041fbd3e975"
@@ -3016,6 +3030,14 @@
   dependencies:
     "@testing-library/dom" "^7.16.2"
 
+"@testing-library/react@11.2.3":
+  version "11.2.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.3.tgz#9971ede1c8465a231d7982eeca3c39fc362d5443"
+  integrity sha512-BirBUGPkTW28ULuCwIbYo0y2+0aavHczBT6N9r3LrsswEW3pg25l1wgoE7I8QBIy1upXWkwKpYdWY7NYYP0Bxw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@testing-library/dom" "^7.28.1"
+
 "@types/aria-query@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.0.tgz#14264692a9d6e2fa4db3df5e56e94b5e25647ac0"
@@ -7027,6 +7049,11 @@ dom-accessibility-api@^0.4.5:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.4.5.tgz#d9c1cefa89f509d8cf132ab5d250004d755e76e3"
   integrity sha512-HcPDilI95nKztbVikaN2vzwvmv0sE8Y2ZJFODy/m15n7mGXLeOKGiys9qWVbFbh+aq/KYj2lqMLybBOkYAEXqg==
 
+dom-accessibility-api@^0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz#b06d059cdd4a4ad9a79275f9d414a5c126241166"
+  integrity sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==
+
 dom-scroll-into-view@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz#e8f36732dd089b0201a88d7815dc3f88e6d66c7e"
@@ -11538,6 +11565,11 @@ lru@^3.1.0:
   dependencies:
     inherits "^2.0.1"
 
+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
+  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"

From 6c2e9ed637555b317e081473a493df9af2c29957 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Thu, 28 Jan 2021 17:27:56 +1300
Subject: [PATCH 02/10] fix broken attributes prop

---
 .../blocks/send-a-message/whatsapp-button/edit.js    | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
index 65664f111bafd..dbe5340decfe0 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -60,12 +60,20 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 		<div className={ getBlockClassNames() }>
 			{ ToolbarGroup && (
 				<BlockControls>
-					<WhatsAppButtonSettings context="toolbar" setAttributes={ setAttributes } attributes />
+					<WhatsAppButtonSettings
+						context="toolbar"
+						setAttributes={ setAttributes }
+						attributes={ attributes }
+					/>
 				</BlockControls>
 			) }
 
 			<InspectorControls>
-				<WhatsAppButtonSettings context="inspector" setAttributes={ setAttributes } attributes />
+				<WhatsAppButtonSettings
+					context="inspector"
+					setAttributes={ setAttributes }
+					attributes={ attributes }
+				/>
 			</InspectorControls>
 
 			<RichText

From 84f44ecaecf89af936a5a2e69eb3d81c53f6dda3 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Wed, 17 Feb 2021 15:17:59 +1300
Subject: [PATCH 03/10] Finish setup of initial tests

---
 .../whatsapp-button/settings.js               |  34 +--
 .../whatsapp-button/test/edit.js              |   8 +-
 .../whatsapp-button/test/settings.js          |  94 ++++++-
 projects/plugins/jetpack/package.json         |   5 +-
 .../plugins/jetpack/tests/jest-globals.js     |   7 +
 projects/plugins/jetpack/yarn.lock            | 241 ++----------------
 6 files changed, 122 insertions(+), 267 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/settings.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/settings.js
index 891541862dc0d..9b8ea09e148db 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/settings.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/settings.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { useEffect, useState, useCallback } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import {
 	BaseControl,
 	TextControl,
@@ -34,38 +34,6 @@ export default function WhatsAppButtonSettings( { attributes, setAttributes, con
 
 	const [ isValidPhoneNumber, setIsValidPhoneNumber ] = useState( true );
 
-	const getCountryCode = useCallback( async () => {
-		setAttributes( { countryCode: '1' } );
-
-		const geoFetch = await fetch( 'https://public-api.wordpress.com/geo/' )
-			.then( response => {
-				if ( ! response.ok ) {
-					return false;
-				}
-
-				return response;
-			} )
-			.catch( () => {
-				return false;
-			} );
-
-		if ( geoFetch ) {
-			const geo = await geoFetch.json();
-
-			countryCodes.forEach( item => {
-				if ( item.code === geo.country_short ) {
-					setAttributes( { countryCode: item.value } );
-				}
-			} );
-		}
-	}, [ setAttributes ] );
-
-	useEffect( () => {
-		if ( undefined === countryCode ) {
-			getCountryCode();
-		}
-	}, [ countryCode, getCountryCode ] );
-
 	const validatePhoneNumber = newPhoneNumber => {
 		// No alphabetical characters but allow dots, dashes, and brackets.
 		// These will be stripped for the WhatsApp API (only numbers), but retain
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/edit.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/edit.js
index c064cafc5e2e0..a81ed8c85c7b0 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/edit.js
@@ -2,9 +2,15 @@
  * @jest-environment jsdom
  */
 
+/**
+ * External dependencies
+ */
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
+/**
+ * Internal dependencies
+ */
 import WhatsAppButtonEdit from '../edit';
 
 const defaultAttributes = {
@@ -27,7 +33,7 @@ const defaultProps = {
 test( 'loads and displays button with buttonText attribute assigned to button', () => {
 	render( <WhatsAppButtonEdit { ...defaultProps } /> );
 
-	expect( screen.getByText( 'Chat on WhatsApp' ) ).toBeDefined();
+	expect( screen.getByText( 'Chat on WhatsApp' ) ).toBeInTheDocument();
 } );
 
 test( 'displays button as multiline textbox for updating the buttonText attribute', () => {
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js
index 49002b2e1bc5b..f6cf21c18593c 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js
@@ -2,9 +2,16 @@
  * @jest-environment jsdom
  */
 
-import { render, screen } from '@testing-library/react';
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
 
+/**
+ * Internal dependencies
+ */
 import WhatsAppButtonSettings from '../settings';
 
 const defaultAttributes = {
@@ -17,29 +24,90 @@ const defaultAttributes = {
 	openInNewTab: false,
 };
 
+const setAttributes = jest.fn();
+
 const defaultProps = {
 	attributes: defaultAttributes,
-	setAttributes: jest.fn(),
+	setAttributes,
 	className: 'wp-block-jetpack-whatsapp-button',
 	clientId: 1,
 	context: 'inspector',
 };
 
-test( 'loads and displays country code select list and phone number input box', () => {
-	render( <WhatsAppButtonSettings { ...defaultProps } /> );
-
-	expect( screen.getByLabelText( 'Country code' ) ).toBeDefined();
-	expect( screen.getByPlaceholderText( 'Your phone number…' ) ).toBeDefined();
+beforeEach( () => {
+	setAttributes.mockClear();
 } );
 
-test( 'displays default first message box', () => {
-	render( <WhatsAppButtonSettings { ...defaultProps } /> );
+describe( 'Inspector settings', () => {
+	test( 'loads and displays country code select list', () => {
+		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+
+		expect( screen.getByLabelText( 'Country code' ) ).toBeInTheDocument();
+	} );
+
+	test( 'sets country code attribute', () => {
+		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+		userEvent.selectOptions( screen.getByLabelText( 'Country code' ), [ '1US' ] );
+
+		expect( setAttributes ).toHaveBeenCalledWith( { countryCode: '1US' } );
+	} );
+
+	test( 'loads and displays phone number input box', () => {
+		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+
+		expect( screen.getByPlaceholderText( 'Your phone number…' ) ).toBeInTheDocument();
+	} );
+
+	test( 'sets phone number attribute', () => {
+		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+		userEvent.type( screen.getByPlaceholderText( 'Your phone number…' ), '6' );
 
-	expect( screen.getByLabelText( 'Default First Message' ) ).toBeDefined();
+		expect( setAttributes ).toHaveBeenCalledWith( { phoneNumber: '123456' } );
+	} );
+
+	test( 'displays default first message box', () => {
+		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+
+		expect( screen.getByLabelText( 'Default First Message' ) ).toBeInTheDocument();
+	} );
+
+	test( 'sets default first message attributes', () => {
+		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+		userEvent.type( screen.getByLabelText( 'Default First Message' ), 'A' );
+
+		expect( setAttributes ).toHaveBeenCalledWith( { firstMessage: 'A' } );
+	} );
+
+	test( 'displays open in new tab toggle', () => {
+		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+
+		expect( screen.getByLabelText( 'Open in new tab' ) ).toBeInTheDocument();
+	} );
+
+	test( 'sets openInNewTab attribute', () => {
+		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+		userEvent.click( screen.getByLabelText( 'Open in new tab' ) );
+
+		expect( setAttributes ).toHaveBeenCalledWith( { openInNewTab: true } );
+	} );
 } );
 
-test( 'displays open in new tab toggle', () => {
-	render( <WhatsAppButtonSettings { ...defaultProps } /> );
+describe( 'Toolabr settings', () => {
+	const props = { ...defaultProps, context: 'toolbar' };
+
+	test( 'loads and displays settings button in toolbar with settings not visible', () => {
+		render( <WhatsAppButtonSettings { ...props } /> );
+
+		expect( screen.getByLabelText( 'WhatsApp Button Settings' ) ).toBeInTheDocument();
+		expect( screen.queryByLabelText( 'Country code' ) ).not.toBeInTheDocument();
+	} );
+
+	test( 'loads settings when toolbar button clicked', async () => {
+		render( <WhatsAppButtonSettings { ...props } /> );
+		userEvent.click( screen.getByLabelText( 'WhatsApp Button Settings' ) );
+		await waitFor( () => screen.getByLabelText( 'Country code' ) );
 
-	expect( screen.getByLabelText( 'Open in new tab' ) ).toBeDefined();
+		expect( screen.getByLabelText( 'Default First Message' ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Open in new tab' ) ).toBeInTheDocument();
+	} );
 } );
diff --git a/projects/plugins/jetpack/package.json b/projects/plugins/jetpack/package.json
index 400633fcc1fce..a82f3e7d09bb8 100644
--- a/projects/plugins/jetpack/package.json
+++ b/projects/plugins/jetpack/package.json
@@ -60,7 +60,8 @@
 		"**/node-fetch": "^2.6.1",
 		"**/node-notifier": "^8.0.1",
 		"**/tar-stream/bl": "^4.0.0",
-		"**/terser-webpack-plugin/serialize-javascript": "^5.0.0"
+		"**/terser-webpack-plugin/serialize-javascript": "^5.0.0",
+		"jest-environment-jsdom": "^26.0.1"
 	},
 	"dependencies": {
 		"@automattic/calypso-build": "6.1.0",
@@ -153,10 +154,12 @@
 		"@babel/plugin-transform-runtime": "7.12.10",
 		"@babel/preset-react": "7.12.10",
 		"@babel/preset-typescript": "7.12.7",
+		"@sheerun/mutationobserver-shim": "0.3.3",
 		"@size-limit/preset-app": "4.9.1",
 		"@testing-library/jest-dom": "5.11.9",
 		"@testing-library/preact": "2.0.1",
 		"@testing-library/react": "11.2.3",
+		"@testing-library/user-event": "12.6.2",
 		"@wordpress/components": "9.2.6",
 		"@wordpress/core-data": "2.12.3",
 		"@wordpress/dependency-extraction-webpack-plugin": "2.4.0",
diff --git a/projects/plugins/jetpack/tests/jest-globals.js b/projects/plugins/jetpack/tests/jest-globals.js
index 359fdfe457682..02a785173018b 100644
--- a/projects/plugins/jetpack/tests/jest-globals.js
+++ b/projects/plugins/jetpack/tests/jest-globals.js
@@ -1,3 +1,10 @@
+/**
+ * External dependencies
+ */
+import MutationObserver from '@sheerun/mutationobserver-shim';
+
+window.MutationObserver = MutationObserver;
+
 Object.defineProperty( window, 'matchMedia', {
 	value: jest.fn( () => {
 		return {
diff --git a/projects/plugins/jetpack/yarn.lock b/projects/plugins/jetpack/yarn.lock
index b9e8779325543..14aa499d75776 100644
--- a/projects/plugins/jetpack/yarn.lock
+++ b/projects/plugins/jetpack/yarn.lock
@@ -2901,6 +2901,11 @@
     lodash.merge "^4.4.0"
     postcss "^5.0.21"
 
+"@sheerun/mutationobserver-shim@0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz#5405ee8e444ed212db44e79351f0c70a582aae25"
+  integrity sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw==
+
 "@sinonjs/commons@^1.6.0", "@sinonjs/commons@^1.7.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.0.tgz#c8d68821a854c555bba172f3b06959a0039b236d"
@@ -3038,6 +3043,13 @@
     "@babel/runtime" "^7.12.5"
     "@testing-library/dom" "^7.28.1"
 
+"@testing-library/user-event@12.6.2":
+  version "12.6.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-12.6.2.tgz#accce6be0353be38e07bce55b31232d89ae10bc2"
+  integrity sha512-4OsiTSo2vbQm+eOnm1un8b9i2Re4mn+D7d7ET6HXtzYKY7vPe3O01iYKRmSW9vS5mNrQcCLwvRhVq1gWs5YGKA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 "@types/aria-query@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.0.tgz#14264692a9d6e2fa4db3df5e56e94b5e25647ac0"
@@ -4187,11 +4199,6 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-abab@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.0.tgz#aba0ab4c5eee2d4c79d3487d85450fb2376ebb0f"
-  integrity sha512-sY5AXXVZv4Y1VACTtR11UJCPHHudgY5i26Qj5TypE6DKlIApbwb5uqhXcJ5UUGbvZNRh7EeIoW+LrJumBsKp7w==
-
 abab@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
@@ -4202,14 +4209,6 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
-acorn-globals@^4.1.0:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.2.tgz#4e2c2313a597fd589720395f6354b41cd5ec8006"
-  integrity sha512-BbzvZhVtZP+Bs1J1HcwrQe8ycfO0wStkSGxuul3He3GkHOIZ6eTqOkPuw9IP1X3+IkOo4wiJmwkobzXYz4wewQ==
-  dependencies:
-    acorn "^6.0.1"
-    acorn-walk "^6.0.1"
-
 acorn-globals@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
@@ -4228,22 +4227,12 @@ acorn-jsx@^5.3.1:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
   integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
 
-acorn-walk@^6.0.1:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
-  integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
-
 acorn-walk@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.1.1.tgz#345f0dffad5c735e7373d2fec9a1023e6a44b83e"
   integrity sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==
 
-acorn@^5.5.3:
-  version "5.7.4"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
-  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
-
-acorn@^6.0.1, acorn@^6.2.1, acorn@^6.4.1:
+acorn@^6.2.1, acorn@^6.4.1:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
   integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
@@ -4602,11 +4591,6 @@ array-each@^1.0.0, array-each@^1.0.1:
   resolved "https://registry.yarnpkg.com/array-each/-/array-each-1.0.1.tgz#a794af0c05ab1752846ee753a1f211a05ba0c44f"
   integrity sha1-p5SvDAWrF1KEbudTofIRoFugxE8=
 
-array-equal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
-  integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
-
 array-filter@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
@@ -4803,11 +4787,6 @@ async-foreach@^0.1.3:
   resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
   integrity sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=
 
-async-limiter@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
-  integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==
-
 async-settle@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/async-settle/-/async-settle-1.0.0.tgz#1d0a914bb02575bec8a8f3a74e5080f72b2c0c6b"
@@ -5216,11 +5195,6 @@ brorand@^1.0.1:
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
-browser-process-hrtime@^0.1.2:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz#616f00faef1df7ec1b5bf9cfe2bdc3170f26c7b4"
-  integrity sha512-bRFnI4NnjO6cnyLmOV/7PVoDEMJChlcfN0z4s1YMBY989/SvlfMI1lgCnkFUs53e9gQF+w7qu7XdllSTiSl8Aw==
-
 browser-process-hrtime@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
@@ -6657,22 +6631,15 @@ csso@^3.5.1:
   dependencies:
     css-tree "1.0.0-alpha.29"
 
-cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0", cssom@~0.3.6:
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
-  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
-
 cssom@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
   integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
 
-cssstyle@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.4.0.tgz#9d31328229d3c565c61e586b02041a28fccdccf1"
-  integrity sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA==
-  dependencies:
-    cssom "0.3.x"
+cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
 cssstyle@^2.2.0:
   version "2.2.0"
@@ -6723,15 +6690,6 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-data-urls@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.1.0.tgz#15ee0582baa5e22bb59c77140da8f9c76963bbfe"
-  integrity sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==
-  dependencies:
-    abab "^2.0.0"
-    whatwg-mimetype "^2.2.0"
-    whatwg-url "^7.0.0"
-
 data-urls@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
@@ -7084,13 +7042,6 @@ domelementtype@1, domelementtype@^1.3.0, domelementtype@^1.3.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
 
-domexception@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
-  integrity sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==
-  dependencies:
-    webidl-conversions "^4.0.2"
-
 domexception@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
@@ -7603,18 +7554,6 @@ escodegen@^1.14.1:
   optionalDependencies:
     source-map "~0.6.1"
 
-escodegen@^1.9.1:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.11.1.tgz#c485ff8d6b4cdb89e27f4a856e91f118401ca510"
-  integrity sha512-JwiqFD9KdGVVpeuRa68yU3zZnBEOcPs0nKW7wZzXky8Z7tffdYUHbe11bPCV5jYlK6DVdKLWLm0f5I/QlL0Kmw==
-  dependencies:
-    esprima "^3.1.3"
-    estraverse "^4.2.0"
-    esutils "^2.0.2"
-    optionator "^0.8.1"
-  optionalDependencies:
-    source-map "~0.6.1"
-
 eslint-config-prettier@7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-7.2.0.tgz#f4a4bd2832e810e8cc7c1411ec85b3e85c0c53f9"
@@ -7826,11 +7765,6 @@ espree@^7.3.1:
     acorn-jsx "^5.3.1"
     eslint-visitor-keys "^1.3.0"
 
-esprima@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
-  integrity sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=
-
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
@@ -9289,13 +9223,6 @@ html-element-map@^1.2.0:
   dependencies:
     array-filter "^1.0.0"
 
-html-encoding-sniffer@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
-  integrity sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==
-  dependencies:
-    whatwg-encoding "^1.0.1"
-
 html-encoding-sniffer@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
@@ -10331,19 +10258,7 @@ jest-environment-enzyme@^7.1.2:
   dependencies:
     jest-environment-jsdom "^24.0.0"
 
-jest-environment-jsdom@^24.0.0, jest-environment-jsdom@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
-  integrity sha512-Zv9FV9NBRzLuALXjvRijO2351DRQeLYXtpD4xNvfoVFw21IOKNhZAEUKcbiEtjTkm2GsJ3boMVgkaR7rN8qetA==
-  dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-util "^24.9.0"
-    jsdom "^11.5.1"
-
-jest-environment-jsdom@^26.6.2:
+jest-environment-jsdom@^24.0.0, jest-environment-jsdom@^24.9.0, jest-environment-jsdom@^26.0.1, jest-environment-jsdom@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-26.6.2.tgz#78d09fe9cf019a357009b9b7e1f101d23bd1da3e"
   integrity sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==
@@ -10951,38 +10866,6 @@ jsdom@16.4.0, jsdom@^16.4.0:
     ws "^7.2.3"
     xml-name-validator "^3.0.0"
 
-jsdom@^11.5.1:
-  version "11.12.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
-  integrity sha512-y8Px43oyiBM13Zc1z780FrfNLJCXTL40EWlty/LXUtcjykRBNgLlCjWXpfSPBl2iv+N7koQN+dvqszHZgT/Fjw==
-  dependencies:
-    abab "^2.0.0"
-    acorn "^5.5.3"
-    acorn-globals "^4.1.0"
-    array-equal "^1.0.0"
-    cssom ">= 0.3.2 < 0.4.0"
-    cssstyle "^1.0.0"
-    data-urls "^1.0.0"
-    domexception "^1.0.1"
-    escodegen "^1.9.1"
-    html-encoding-sniffer "^1.0.2"
-    left-pad "^1.3.0"
-    nwsapi "^2.0.7"
-    parse5 "4.0.0"
-    pn "^1.1.0"
-    request "^2.87.0"
-    request-promise-native "^1.0.5"
-    sax "^1.2.4"
-    symbol-tree "^3.2.2"
-    tough-cookie "^2.3.4"
-    w3c-hr-time "^1.0.1"
-    webidl-conversions "^4.0.2"
-    whatwg-encoding "^1.0.3"
-    whatwg-mimetype "^2.1.0"
-    whatwg-url "^6.4.1"
-    ws "^5.2.0"
-    xml-name-validator "^3.0.0"
-
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -11189,11 +11072,6 @@ lead@^1.0.0:
   dependencies:
     flush-write-stream "^1.0.2"
 
-left-pad@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
-  integrity sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==
-
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -12492,11 +12370,6 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
-nwsapi@^2.0.7:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.1.4.tgz#e006a878db23636f8e8a67d33ca0e4edf61a842f"
-  integrity sha512-iGfd9Y6SFdTNldEy2L0GUhcarIutFmk+MPWIn9dmj8NMIup03G08uUF2KGbbmv/Ux4RT0VZJoP/sVbWA6d/VIw==
-
 nwsapi@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
@@ -13029,11 +12902,6 @@ parse-passwd@^1.0.0:
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
   integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=
 
-parse5@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
-  integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
-
 parse5@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
@@ -13288,11 +13156,6 @@ plugin-error@^0.1.2:
     arr-union "^2.0.1"
     extend-shallow "^1.1.2"
 
-pn@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
-  integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
-
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -14811,13 +14674,6 @@ replace-homedir@^1.0.0:
     is-absolute "^1.0.0"
     remove-trailing-separator "^1.1.0"
 
-request-promise-core@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.2.tgz#339f6aababcafdb31c799ff158700336301d3346"
-  integrity sha512-UHYyq1MO8GsefGEt7EprS8UrXsm1TxEvFUX1IMTuSLU2Rh7fTIdFtl8xD7JiEYiWU2dl+NYAjCTksTehQUxPag==
-  dependencies:
-    lodash "^4.17.11"
-
 request-promise-core@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.3.tgz#e9a3c081b51380dfea677336061fea879a829ee9"
@@ -14825,15 +14681,6 @@ request-promise-core@1.1.3:
   dependencies:
     lodash "^4.17.15"
 
-request-promise-native@^1.0.5:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.7.tgz#a49868a624bdea5069f1251d0a836e0d89aa2c59"
-  integrity sha512-rIMnbBdgNViL37nZ1b3L/VfPOpSi0TqVDQPAvO6U14lMzOLrt5nilxCQqtDKhZeDiW0/hkCXGoQjhgJd/tCh6w==
-  dependencies:
-    request-promise-core "1.1.2"
-    stealthy-require "^1.1.1"
-    tough-cookie "^2.3.3"
-
 request-promise-native@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.8.tgz#a455b960b826e44e2bf8999af64dff2bfe58cb36"
@@ -16185,7 +16032,7 @@ symbol-observable@^1.2.0:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
-symbol-tree@^3.2.2, symbol-tree@^3.2.4:
+symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
@@ -16561,7 +16408,7 @@ to-through@^2.0.0:
   dependencies:
     through2 "^2.0.3"
 
-tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@~2.5.0:
+tough-cookie@^2.3.3, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
   integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
@@ -16586,13 +16433,6 @@ tough-cookie@~2.4.3:
     psl "^1.1.24"
     punycode "^1.4.1"
 
-tr46@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
-  integrity sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=
-  dependencies:
-    punycode "^2.1.0"
-
 tr46@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.2.tgz#03273586def1595ae08fedb38d7733cee91d2479"
@@ -17091,13 +16931,6 @@ vt-pbf@^3.1.1:
     "@mapbox/vector-tile" "^1.3.1"
     pbf "^3.0.5"
 
-w3c-hr-time@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
-  integrity sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=
-  dependencies:
-    browser-process-hrtime "^0.1.2"
-
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
@@ -17160,11 +16993,6 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
-webidl-conversions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
-  integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
-
 webidl-conversions@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
@@ -17350,7 +17178,7 @@ webpack@^4.8.3:
     watchpack "^1.6.0"
     webpack-sources "^1.4.1"
 
-whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
+whatwg-encoding@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
   integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==
@@ -17362,29 +17190,11 @@ whatwg-fetch@>=0.10.0:
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
   integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
 
-whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
+whatwg-mimetype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
   integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
-whatwg-url@^6.4.1:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.5.0.tgz#f2df02bff176fd65070df74ad5ccbb5a199965a8"
-  integrity sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==
-  dependencies:
-    lodash.sortby "^4.7.0"
-    tr46 "^1.0.1"
-    webidl-conversions "^4.0.2"
-
-whatwg-url@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.0.0.tgz#fde926fa54a599f3adf82dff25a9f7be02dc6edd"
-  integrity sha512-37GeVSIJ3kn1JgKyjiYNmSLP1yzbpb29jdmwBSgkD9h40/hyrR/OifpVUndji3tmwGgD8qpw7iQu3RSbCrBpsQ==
-  dependencies:
-    lodash.sortby "^4.7.0"
-    tr46 "^1.0.1"
-    webidl-conversions "^4.0.2"
-
 whatwg-url@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.0.0.tgz#37f256cb746398e19b107bd6ef820b4ae2d15871"
@@ -17502,13 +17312,6 @@ write-file-atomic@^3.0.0:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
-ws@^5.2.0:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.2.tgz#dffef14866b8e8dc9133582514d1befaf96e980f"
-  integrity sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==
-  dependencies:
-    async-limiter "~1.0.0"
-
 ws@^7.2.3:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.2.3.tgz#a5411e1fb04d5ed0efee76d26d5c46d830c39b46"

From 871e26d8ae14cc55292bf3efd8480faaaf6eab7d Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Wed, 17 Feb 2021 15:19:01 +1300
Subject: [PATCH 04/10] Fix settings to be compat with existing tests

---
 .../gathering-tweetstorms/test/editor.js      |  5 ---
 .../test/match-media.mock                     | 13 --------
 .../whatsapp-button/test/settings.js          |  4 ---
 projects/plugins/jetpack/jest.config.js       |  1 +
 projects/plugins/jetpack/package.json         |  1 -
 .../plugins/jetpack/tests/jest-globals.js     | 31 +++++++++----------
 projects/plugins/jetpack/yarn.lock            |  5 ---
 7 files changed, 16 insertions(+), 44 deletions(-)
 delete mode 100644 projects/plugins/jetpack/extensions/blocks/gathering-tweetstorms/test/match-media.mock

diff --git a/projects/plugins/jetpack/extensions/blocks/gathering-tweetstorms/test/editor.js b/projects/plugins/jetpack/extensions/blocks/gathering-tweetstorms/test/editor.js
index 46d5a36bbd8a3..505cc6c27ccf9 100644
--- a/projects/plugins/jetpack/extensions/blocks/gathering-tweetstorms/test/editor.js
+++ b/projects/plugins/jetpack/extensions/blocks/gathering-tweetstorms/test/editor.js
@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 /**
  * External dependencies
  */
@@ -10,7 +6,6 @@ import { mount } from 'enzyme';
 /**
  * Internal dependencies
  */
-import './match-media.mock';
 import addTweetstormToTweets from '../editor';
 
 describe( 'addTweetstormToTweets', () => {
diff --git a/projects/plugins/jetpack/extensions/blocks/gathering-tweetstorms/test/match-media.mock b/projects/plugins/jetpack/extensions/blocks/gathering-tweetstorms/test/match-media.mock
deleted file mode 100644
index 855fdd3342279..0000000000000
--- a/projects/plugins/jetpack/extensions/blocks/gathering-tweetstorms/test/match-media.mock
+++ /dev/null
@@ -1,13 +0,0 @@
-Object.defineProperty( window, 'matchMedia', {
-	writable: true,
-	value: jest.fn().mockImplementation( query => ( {
-		matches: false,
-		media: query,
-		onchange: null,
-		addListener: jest.fn(), // deprecated
-		removeListener: jest.fn(), // deprecated
-		addEventListener: jest.fn(),
-		removeEventListener: jest.fn(),
-		dispatchEvent: jest.fn(),
-	} ) ),
-} );
\ No newline at end of file
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js
index f6cf21c18593c..b1875459331d2 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js
@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 /**
  * External dependencies
  */
diff --git a/projects/plugins/jetpack/jest.config.js b/projects/plugins/jetpack/jest.config.js
index 0ca5d5ca35ada..6bc42b047808b 100644
--- a/projects/plugins/jetpack/jest.config.js
+++ b/projects/plugins/jetpack/jest.config.js
@@ -5,6 +5,7 @@ const path = require( 'path' );
 
 module.exports = {
 	preset: '@automattic/calypso-build',
+	testEnvironment: 'jsdom',
 	roots: [ '<rootDir>/extensions/', '<rootDir>/modules/search/instant-search' ],
 	transform: {
 		'\\.[jt]sx?$': path.join( __dirname, 'tests', 'jest-extensions-babel-transform' ),
diff --git a/projects/plugins/jetpack/package.json b/projects/plugins/jetpack/package.json
index a82f3e7d09bb8..93d94109a0cd4 100644
--- a/projects/plugins/jetpack/package.json
+++ b/projects/plugins/jetpack/package.json
@@ -154,7 +154,6 @@
 		"@babel/plugin-transform-runtime": "7.12.10",
 		"@babel/preset-react": "7.12.10",
 		"@babel/preset-typescript": "7.12.7",
-		"@sheerun/mutationobserver-shim": "0.3.3",
 		"@size-limit/preset-app": "4.9.1",
 		"@testing-library/jest-dom": "5.11.9",
 		"@testing-library/preact": "2.0.1",
diff --git a/projects/plugins/jetpack/tests/jest-globals.js b/projects/plugins/jetpack/tests/jest-globals.js
index 02a785173018b..d4d296c92c86f 100644
--- a/projects/plugins/jetpack/tests/jest-globals.js
+++ b/projects/plugins/jetpack/tests/jest-globals.js
@@ -1,16 +1,15 @@
-/**
- * External dependencies
- */
-import MutationObserver from '@sheerun/mutationobserver-shim';
-
-window.MutationObserver = MutationObserver;
-
-Object.defineProperty( window, 'matchMedia', {
-	value: jest.fn( () => {
-		return {
-			matches: true,
-			addListener: jest.fn(),
-			removeListener: jest.fn(),
-		};
-	} ),
-} );
+if ( ! window.matchMedia ) {
+	Object.defineProperty( window, 'matchMedia', {
+		writable: true,
+		value: jest.fn().mockImplementation( query => ( {
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: jest.fn(), // deprecated
+			removeListener: jest.fn(), // deprecated
+			addEventListener: jest.fn(),
+			removeEventListener: jest.fn(),
+			dispatchEvent: jest.fn(),
+		} ) ),
+	} );
+}
diff --git a/projects/plugins/jetpack/yarn.lock b/projects/plugins/jetpack/yarn.lock
index 14aa499d75776..dd773f9577c10 100644
--- a/projects/plugins/jetpack/yarn.lock
+++ b/projects/plugins/jetpack/yarn.lock
@@ -2901,11 +2901,6 @@
     lodash.merge "^4.4.0"
     postcss "^5.0.21"
 
-"@sheerun/mutationobserver-shim@0.3.3":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz#5405ee8e444ed212db44e79351f0c70a582aae25"
-  integrity sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw==
-
 "@sinonjs/commons@^1.6.0", "@sinonjs/commons@^1.7.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.0.tgz#c8d68821a854c555bba172f3b06959a0039b236d"

From 59fd0f06601f958a7b239bce1527036d137aa117 Mon Sep 17 00:00:00 2001
From: Glen Davies <glendaviesnz@users.noreply.github.com>
Date: Tue, 2 Feb 2021 11:34:47 +1300
Subject: [PATCH 05/10] fix typo

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
---
 .../blocks/send-a-message/whatsapp-button/test/settings.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js
index b1875459331d2..b62eb115b8433 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js
@@ -88,7 +88,7 @@ describe( 'Inspector settings', () => {
 	} );
 } );
 
-describe( 'Toolabr settings', () => {
+describe( 'Toolbar settings', () => {
 	const props = { ...defaultProps, context: 'toolbar' };
 
 	test( 'loads and displays settings button in toolbar with settings not visible', () => {

From 40fdd285a8bbad3f91fe590fdebd91f9df5e3bc7 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Wed, 3 Feb 2021 08:22:10 +1300
Subject: [PATCH 06/10] Change settings to configuration to avoid confusion
 with base block settings

---
 .../{settings.js => configuration.js}         |  2 +-
 .../send-a-message/whatsapp-button/edit.js    |  6 ++---
 .../test/{settings.js => configuration.js}    | 22 +++++++++----------
 3 files changed, 15 insertions(+), 15 deletions(-)
 rename projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/{settings.js => configuration.js} (98%)
 rename projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/{settings.js => configuration.js} (80%)

diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/settings.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/configuration.js
similarity index 98%
rename from projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/settings.js
rename to projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/configuration.js
index 9b8ea09e148db..9d3ed08731611 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/settings.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/configuration.js
@@ -29,7 +29,7 @@ const WHATSAPP_GREEN = '#25D366';
 const WHATSAPP_DARK = '#465B64';
 const WHATSAPP_LIGHT = '#F4F4F4';
 
-export default function WhatsAppButtonSettings( { attributes, setAttributes, context } ) {
+export default function WhatsAppButtonConfiguration( { attributes, setAttributes, context } ) {
 	const { countryCode, phoneNumber, firstMessage, openInNewTab, backgroundColor } = attributes;
 
 	const [ isValidPhoneNumber, setIsValidPhoneNumber ] = useState( true );
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
index dbe5340decfe0..324680ab40509 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -11,7 +11,7 @@ import { BlockControls, InspectorControls, RichText } from '@wordpress/block-edi
  * Internal dependencies
  */
 import { countryCodes } from '../shared/countrycodes.js';
-import WhatsAppButtonSettings from './settings';
+import WhatsAppButtonConfiguration from './configuration';
 import './view.scss';
 
 export default function WhatsAppButtonEdit( { attributes, setAttributes, className, clientId } ) {
@@ -60,7 +60,7 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 		<div className={ getBlockClassNames() }>
 			{ ToolbarGroup && (
 				<BlockControls>
-					<WhatsAppButtonSettings
+					<WhatsAppButtonConfiguration
 						context="toolbar"
 						setAttributes={ setAttributes }
 						attributes={ attributes }
@@ -69,7 +69,7 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 			) }
 
 			<InspectorControls>
-				<WhatsAppButtonSettings
+				<WhatsAppButtonConfiguration
 					context="inspector"
 					setAttributes={ setAttributes }
 					attributes={ attributes }
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/configuration.js
similarity index 80%
rename from projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js
rename to projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/configuration.js
index b62eb115b8433..6d7de4e487ed5 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/settings.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/configuration.js
@@ -8,7 +8,7 @@ import '@testing-library/jest-dom/extend-expect';
 /**
  * Internal dependencies
  */
-import WhatsAppButtonSettings from '../settings';
+import WhatsAppButtonConfiguration from '../configuration';
 
 const defaultAttributes = {
 	countryCode: 'us',
@@ -36,52 +36,52 @@ beforeEach( () => {
 
 describe( 'Inspector settings', () => {
 	test( 'loads and displays country code select list', () => {
-		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+		render( <WhatsAppButtonConfiguration { ...defaultProps } /> );
 
 		expect( screen.getByLabelText( 'Country code' ) ).toBeInTheDocument();
 	} );
 
 	test( 'sets country code attribute', () => {
-		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+		render( <WhatsAppButtonConfiguration { ...defaultProps } /> );
 		userEvent.selectOptions( screen.getByLabelText( 'Country code' ), [ '1US' ] );
 
 		expect( setAttributes ).toHaveBeenCalledWith( { countryCode: '1US' } );
 	} );
 
 	test( 'loads and displays phone number input box', () => {
-		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+		render( <WhatsAppButtonConfiguration { ...defaultProps } /> );
 
 		expect( screen.getByPlaceholderText( 'Your phone number…' ) ).toBeInTheDocument();
 	} );
 
 	test( 'sets phone number attribute', () => {
-		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+		render( <WhatsAppButtonConfiguration { ...defaultProps } /> );
 		userEvent.type( screen.getByPlaceholderText( 'Your phone number…' ), '6' );
 
 		expect( setAttributes ).toHaveBeenCalledWith( { phoneNumber: '123456' } );
 	} );
 
 	test( 'displays default first message box', () => {
-		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+		render( <WhatsAppButtonConfiguration { ...defaultProps } /> );
 
 		expect( screen.getByLabelText( 'Default First Message' ) ).toBeInTheDocument();
 	} );
 
 	test( 'sets default first message attributes', () => {
-		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+		render( <WhatsAppButtonConfiguration { ...defaultProps } /> );
 		userEvent.type( screen.getByLabelText( 'Default First Message' ), 'A' );
 
 		expect( setAttributes ).toHaveBeenCalledWith( { firstMessage: 'A' } );
 	} );
 
 	test( 'displays open in new tab toggle', () => {
-		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+		render( <WhatsAppButtonConfiguration { ...defaultProps } /> );
 
 		expect( screen.getByLabelText( 'Open in new tab' ) ).toBeInTheDocument();
 	} );
 
 	test( 'sets openInNewTab attribute', () => {
-		render( <WhatsAppButtonSettings { ...defaultProps } /> );
+		render( <WhatsAppButtonConfiguration { ...defaultProps } /> );
 		userEvent.click( screen.getByLabelText( 'Open in new tab' ) );
 
 		expect( setAttributes ).toHaveBeenCalledWith( { openInNewTab: true } );
@@ -92,14 +92,14 @@ describe( 'Toolbar settings', () => {
 	const props = { ...defaultProps, context: 'toolbar' };
 
 	test( 'loads and displays settings button in toolbar with settings not visible', () => {
-		render( <WhatsAppButtonSettings { ...props } /> );
+		render( <WhatsAppButtonConfiguration { ...props } /> );
 
 		expect( screen.getByLabelText( 'WhatsApp Button Settings' ) ).toBeInTheDocument();
 		expect( screen.queryByLabelText( 'Country code' ) ).not.toBeInTheDocument();
 	} );
 
 	test( 'loads settings when toolbar button clicked', async () => {
-		render( <WhatsAppButtonSettings { ...props } /> );
+		render( <WhatsAppButtonConfiguration { ...props } /> );
 		userEvent.click( screen.getByLabelText( 'WhatsApp Button Settings' ) );
 		await waitFor( () => screen.getByLabelText( 'Country code' ) );
 

From f075eeb93e144699904e2605179a3b255cd307d6 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Tue, 9 Feb 2021 10:21:56 +1300
Subject: [PATCH 07/10] remove pointless script setting

---
 projects/plugins/jetpack/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/projects/plugins/jetpack/package.json b/projects/plugins/jetpack/package.json
index 93d94109a0cd4..b36dfa14f3928 100644
--- a/projects/plugins/jetpack/package.json
+++ b/projects/plugins/jetpack/package.json
@@ -39,7 +39,6 @@
 		"test-adminpage": "yarn test-client && yarn test-gui",
 		"test-client": "NODE_ENV=test NODE_PATH=tests:_inc/client tests/runner.js",
 		"test-extensions": "jest extensions",
-		"test-extensions-single": "jest",
 		"test-gui": "NODE_ENV=test NODE_PATH=tests:_inc/client tests/runner.js gui",
 		"test-lib": "NODE_ENV=test NODE_PATH=tests:_inc/client tests/runner.js lib",
 		"test-modules": "NODE_ENV=test NODE_PATH=tests:_inc/client tests/runner.js modules",

From 01281ae0c4806c5ea2d12fb6e4587a48f4ebd273 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Thu, 11 Feb 2021 09:07:39 +1300
Subject: [PATCH 08/10] Change configuration to match changes in #18732

---
 .../whatsapp-button/configuration.js          | 43 ++++++++++---------
 .../whatsapp-button/test/configuration.js     |  3 +-
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/configuration.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/configuration.js
index 9d3ed08731611..c1d578349c56c 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/configuration.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/configuration.js
@@ -118,26 +118,29 @@ export default function WhatsAppButtonConfiguration( { attributes, setAttributes
 					</HelpMessage>
 				) }
 			</BaseControl>
-
-			<TextareaControl
-				label={ __( 'Default First Message', 'jetpack' ) }
-				help={ __(
-					'The default first message that will be sent by visitors when using this button.',
-					'jetpack'
-				) }
-				value={ firstMessage }
-				onChange={ text => setAttributes( { firstMessage: text } ) }
-			/>
-
-			<ToggleControl
-				label={ __( 'Open in new tab', 'jetpack' ) }
-				checked={ openInNewTab }
-				onChange={ newValue => setAttributes( { openInNewTab: newValue } ) }
-				help={ __(
-					'When the button is tapped, should a new tab be opened if the visitor does not have WhatsApp installed?',
-					'jetpack'
-				) }
-			/>
+			{ context === 'inspector' && (
+				<>
+					<TextareaControl
+						label={ __( 'Default First Message', 'jetpack' ) }
+						help={ __(
+							'The default first message that will be sent by visitors when using this button.',
+							'jetpack'
+						) }
+						value={ firstMessage }
+						onChange={ text => setAttributes( { firstMessage: text } ) }
+					/>
+
+					<ToggleControl
+						label={ __( 'Open in new tab', 'jetpack' ) }
+						checked={ openInNewTab }
+						onChange={ newValue => setAttributes( { openInNewTab: newValue } ) }
+						help={ __(
+							'When the button is tapped, should a new tab be opened if the visitor does not have WhatsApp installed?',
+							'jetpack'
+						) }
+					/>
+				</>
+			) }
 		</>
 	);
 
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/configuration.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/configuration.js
index 6d7de4e487ed5..20b4ec78aa517 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/configuration.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/configuration.js
@@ -103,7 +103,6 @@ describe( 'Toolbar settings', () => {
 		userEvent.click( screen.getByLabelText( 'WhatsApp Button Settings' ) );
 		await waitFor( () => screen.getByLabelText( 'Country code' ) );
 
-		expect( screen.getByLabelText( 'Default First Message' ) ).toBeInTheDocument();
-		expect( screen.getByLabelText( 'Open in new tab' ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Country code' ) ).toBeInTheDocument();
 	} );
 } );

From 3fa52d07d12a379d72bd23691e2a2ae15437907b Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Thu, 11 Feb 2021 09:11:09 +1300
Subject: [PATCH 09/10] Remove check for toolbar group

---
 .../send-a-message/whatsapp-button/edit.js      | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
index 324680ab40509..cb266478a76b0 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -4,7 +4,6 @@
 import classnames from 'classnames';
 import { useEffect, useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-import { ToolbarGroup } from '@wordpress/components';
 import { BlockControls, InspectorControls, RichText } from '@wordpress/block-editor';
 
 /**
@@ -58,15 +57,13 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 
 	return (
 		<div className={ getBlockClassNames() }>
-			{ ToolbarGroup && (
-				<BlockControls>
-					<WhatsAppButtonConfiguration
-						context="toolbar"
-						setAttributes={ setAttributes }
-						attributes={ attributes }
-					/>
-				</BlockControls>
-			) }
+			<BlockControls>
+				<WhatsAppButtonConfiguration
+					context="toolbar"
+					setAttributes={ setAttributes }
+					attributes={ attributes }
+				/>
+			</BlockControls>
 
 			<InspectorControls>
 				<WhatsAppButtonConfiguration

From 1ee629e371e066f950d52f8489489b997db1a2fe Mon Sep 17 00:00:00 2001
From: Glen Davies <glendaviesnz@users.noreply.github.com>
Date: Wed, 17 Feb 2021 15:11:40 +1300
Subject: [PATCH 10/10] Add a block fixtures framework to allow automated
 checking of block validation (#18643)

Co-authored-by: Glen Davies <glen.davies@a8c.com>
---
 .../fixtures/jetpack__whatsapp-button.html    |   5 +
 .../fixtures/jetpack__whatsapp-button.json    |  29 ++
 .../jetpack__whatsapp-button.parsed.json      |  36 +++
 .../jetpack__whatsapp-button.serialized.html  |   5 +
 ...etpack__whatsapp-button__deprecated-1.html |   5 +
 ...etpack__whatsapp-button__deprecated-1.json |  29 ++
 ..._whatsapp-button__deprecated-1.parsed.json |  36 +++
 ...tsapp-button__deprecated-1.serialized.html |   5 +
 .../whatsapp-button/test/validate.js          |  15 +
 .../extensions/shared/test/block-fixtures.js  | 283 ++++++++++++++++++
 .../extensions/shared/test/block-fixtures.md  | 111 +++++++
 projects/plugins/jetpack/jest.config.js       |   1 +
 projects/plugins/jetpack/package.json         |   3 +
 13 files changed, 563 insertions(+)
 create mode 100644 projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.html
 create mode 100644 projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.json
 create mode 100644 projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.parsed.json
 create mode 100644 projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.serialized.html
 create mode 100644 projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.html
 create mode 100644 projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.json
 create mode 100644 projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.parsed.json
 create mode 100644 projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.serialized.html
 create mode 100644 projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/validate.js
 create mode 100644 projects/plugins/jetpack/extensions/shared/test/block-fixtures.js
 create mode 100644 projects/plugins/jetpack/extensions/shared/test/block-fixtures.md

diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.html b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.html
new file mode 100644
index 0000000000000..9512e6b324d9b
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.html
@@ -0,0 +1,5 @@
+<!-- wp:jetpack/send-a-message -->
+<div class="wp-block-jetpack-send-a-message"><!-- wp:jetpack/whatsapp-button {"countryCode":"61CX","phoneNumber":"267 8888","firstMessage":"My Message"} -->
+	<div class="wp-block-jetpack-whatsapp-button is-color-dark"><a class="whatsapp-block__button" href="https://api.whatsapp.com/send?phone=612678888&amp;text=My%20Message" style="background-color:#25D366;color:#fff" target="_self" rel="noopener noreferrer">Chat on WhatsApp</a></div>
+	<!-- /wp:jetpack/whatsapp-button --></div>
+	<!-- /wp:jetpack/send-a-message -->
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.json b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.json
new file mode 100644
index 0000000000000..22d9e2281142a
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.json
@@ -0,0 +1,29 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "jetpack/send-a-message",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [
+            {
+                "clientId": "_clientId_0",
+                "name": "jetpack/whatsapp-button",
+                "isValid": true,
+                "attributes": {
+                    "countryCode": "61CX",
+                    "phoneNumber": "267 8888",
+                    "firstMessage": "My Message",
+                    "buttonText": [
+                        "Chat on WhatsApp"
+                    ],
+                    "backgroundColor": "#25D366",
+                    "colorClass": "dark",
+                    "openInNewTab": false
+                },
+                "innerBlocks": [],
+                "originalContent": "<div class=\"wp-block-jetpack-whatsapp-button is-color-dark\"><a class=\"whatsapp-block__button\" href=\"https://api.whatsapp.com/send?phone=612678888&amp;text=My%20Message\" style=\"background-color:#25D366;color:#fff\" target=\"_self\" rel=\"noopener noreferrer\">Chat on WhatsApp</a></div>"
+            }
+        ],
+        "originalContent": "<div class=\"wp-block-jetpack-send-a-message\"></div>"
+    }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.parsed.json b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.parsed.json
new file mode 100644
index 0000000000000..fb21a43da5950
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.parsed.json
@@ -0,0 +1,36 @@
+[
+    {
+        "blockName": "jetpack/send-a-message",
+        "attrs": {},
+        "innerBlocks": [
+            {
+                "blockName": "jetpack/whatsapp-button",
+                "attrs": {
+                    "countryCode": "61CX",
+                    "phoneNumber": "267 8888",
+                    "firstMessage": "My Message"
+                },
+                "innerBlocks": [],
+                "innerHTML": "\n\t<div class=\"wp-block-jetpack-whatsapp-button is-color-dark\"><a class=\"whatsapp-block__button\" href=\"https://api.whatsapp.com/send?phone=612678888&amp;text=My%20Message\" style=\"background-color:#25D366;color:#fff\" target=\"_self\" rel=\"noopener noreferrer\">Chat on WhatsApp</a></div>\n\t",
+                "innerContent": [
+                    "\n\t<div class=\"wp-block-jetpack-whatsapp-button is-color-dark\"><a class=\"whatsapp-block__button\" href=\"https://api.whatsapp.com/send?phone=612678888&amp;text=My%20Message\" style=\"background-color:#25D366;color:#fff\" target=\"_self\" rel=\"noopener noreferrer\">Chat on WhatsApp</a></div>\n\t"
+                ]
+            }
+        ],
+        "innerHTML": "\n<div class=\"wp-block-jetpack-send-a-message\"></div>\n\t",
+        "innerContent": [
+            "\n<div class=\"wp-block-jetpack-send-a-message\">",
+            null,
+            "</div>\n\t"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.serialized.html b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.serialized.html
new file mode 100644
index 0000000000000..4ac0fe88e4db9
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:jetpack/send-a-message -->
+<div class="wp-block-jetpack-send-a-message"><!-- wp:jetpack/whatsapp-button {"countryCode":"61CX","phoneNumber":"267 8888","firstMessage":"My Message"} -->
+<div class="wp-block-jetpack-whatsapp-button is-color-dark"><a class="whatsapp-block__button" href="https://api.whatsapp.com/send?phone=612678888&amp;text=My%20Message" style="background-color:#25D366;color:#fff" target="_self" rel="noopener noreferrer">Chat on WhatsApp</a></div>
+<!-- /wp:jetpack/whatsapp-button --></div>
+<!-- /wp:jetpack/send-a-message -->
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.html b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.html
new file mode 100644
index 0000000000000..9de6814f4c0da
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.html
@@ -0,0 +1,5 @@
+<!-- wp:jetpack/send-a-message -->
+<div class="wp-block-jetpack-send-a-message"><!-- wp:jetpack/whatsapp-button {"countryCode":"61CX","phoneNumber":"267 8888","firstMessage":"My Message"} -->
+	<div class="wp-block-jetpack-whatsapp-button is-color-dark"><a class="whatsapp-block__button" href="https://api.whatsapp.com/send?phone=612678888&amp;text=My%20Message" style="background-color:#25D366;" target="_self" rel="noopener noreferrer">Chat on WhatsApp</a></div>
+	<!-- /wp:jetpack/whatsapp-button --></div>
+	<!-- /wp:jetpack/send-a-message -->
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.json b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.json
new file mode 100644
index 0000000000000..cb8ccf16ef823
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.json
@@ -0,0 +1,29 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "jetpack/send-a-message",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [
+            {
+                "clientId": "_clientId_0",
+                "name": "jetpack/whatsapp-button",
+                "isValid": true,
+                "attributes": {
+                    "countryCode": "61CX",
+                    "phoneNumber": "267 8888",
+                    "firstMessage": "My Message",
+                    "buttonText": [
+                        "Chat on WhatsApp"
+                    ],
+                    "backgroundColor": "#25D366",
+                    "colorClass": "dark",
+                    "openInNewTab": false
+                },
+                "innerBlocks": [],
+                "originalContent": "<div class=\"wp-block-jetpack-whatsapp-button is-color-dark\"><a class=\"whatsapp-block__button\" href=\"https://api.whatsapp.com/send?phone=612678888&amp;text=My%20Message\" style=\"background-color:#25D366;\" target=\"_self\" rel=\"noopener noreferrer\">Chat on WhatsApp</a></div>"
+            }
+        ],
+        "originalContent": "<div class=\"wp-block-jetpack-send-a-message\"></div>"
+    }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.parsed.json b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.parsed.json
new file mode 100644
index 0000000000000..9617e8d3d912a
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.parsed.json
@@ -0,0 +1,36 @@
+[
+    {
+        "blockName": "jetpack/send-a-message",
+        "attrs": {},
+        "innerBlocks": [
+            {
+                "blockName": "jetpack/whatsapp-button",
+                "attrs": {
+                    "countryCode": "61CX",
+                    "phoneNumber": "267 8888",
+                    "firstMessage": "My Message"
+                },
+                "innerBlocks": [],
+                "innerHTML": "\n\t<div class=\"wp-block-jetpack-whatsapp-button is-color-dark\"><a class=\"whatsapp-block__button\" href=\"https://api.whatsapp.com/send?phone=612678888&amp;text=My%20Message\" style=\"background-color:#25D366;\" target=\"_self\" rel=\"noopener noreferrer\">Chat on WhatsApp</a></div>\n\t",
+                "innerContent": [
+                    "\n\t<div class=\"wp-block-jetpack-whatsapp-button is-color-dark\"><a class=\"whatsapp-block__button\" href=\"https://api.whatsapp.com/send?phone=612678888&amp;text=My%20Message\" style=\"background-color:#25D366;\" target=\"_self\" rel=\"noopener noreferrer\">Chat on WhatsApp</a></div>\n\t"
+                ]
+            }
+        ],
+        "innerHTML": "\n<div class=\"wp-block-jetpack-send-a-message\"></div>\n\t",
+        "innerContent": [
+            "\n<div class=\"wp-block-jetpack-send-a-message\">",
+            null,
+            "</div>\n\t"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.serialized.html b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.serialized.html
new file mode 100644
index 0000000000000..4ac0fe88e4db9
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/fixtures/jetpack__whatsapp-button__deprecated-1.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:jetpack/send-a-message -->
+<div class="wp-block-jetpack-send-a-message"><!-- wp:jetpack/whatsapp-button {"countryCode":"61CX","phoneNumber":"267 8888","firstMessage":"My Message"} -->
+<div class="wp-block-jetpack-whatsapp-button is-color-dark"><a class="whatsapp-block__button" href="https://api.whatsapp.com/send?phone=612678888&amp;text=My%20Message" style="background-color:#25D366;color:#fff" target="_self" rel="noopener noreferrer">Chat on WhatsApp</a></div>
+<!-- /wp:jetpack/whatsapp-button --></div>
+<!-- /wp:jetpack/send-a-message -->
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/validate.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/validate.js
new file mode 100644
index 0000000000000..b4f353496986d
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/test/validate.js
@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import { settings } from '../';
+import { settings as parentSettings } from '../../';
+import runBlockFixtureTests from '../../../../shared/test/block-fixtures';
+
+// Need to include all the blocks involved in rendering this block.
+// The main block should be the first in the array.
+const blocks = [
+	{ name: 'jetpack/whatsapp-button', settings },
+	{ name: 'jetpack/send-a-message', settings: parentSettings },
+];
+
+runBlockFixtureTests( 'jetpack/whatsapp-button', blocks, __dirname );
diff --git a/projects/plugins/jetpack/extensions/shared/test/block-fixtures.js b/projects/plugins/jetpack/extensions/shared/test/block-fixtures.js
new file mode 100644
index 0000000000000..0030cd0ecdb02
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/shared/test/block-fixtures.js
@@ -0,0 +1,283 @@
+/**
+ * External dependencies
+ */
+import { omit, uniq } from 'lodash';
+import { format } from 'util';
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * WordPress dependencies
+ */
+import { parse, serialize, registerBlockType, setCategories } from '@wordpress/blocks';
+import { parse as grammarParse } from '@wordpress/block-serialization-default-parser';
+
+/* eslint-disable no-console */
+console.warn = jest.fn();
+console.error = jest.fn();
+console.info = jest.fn();
+/* eslint-enable no-console */
+
+let FIXTURES_DIR;
+
+/* eslint-disable jest/no-export */
+export default function runBlockFixtureTests( blockName, blocks, fixturesPath ) {
+	registerBlocks( blocks );
+	setFixturesDir( fixturesPath );
+
+	const blockBasenames = getAvailableBlockFixturesBasenames();
+	const settings = blocks[ 0 ].settings;
+
+	if ( process.env.REGENERATE_FIXTURES ) {
+		const fullPath = `${ fixturesPath }/fixtures`;
+		const regex = /[.]json|serialized\.html$/;
+		fs.readdirSync( fullPath )
+			.filter( file => regex.test( file ) )
+			.forEach( file => fs.unlinkSync( `${ fullPath }/${ file }` ) );
+	}
+
+	describe( 'Test block content parsing', () => {
+		blockBasenames.forEach( basename => {
+			// eslint-disable-next-line jest/valid-title
+			test( `all content versions parse correctly for block ${ blockName }`, () => {
+				const { filename: htmlFixtureFileName, file: htmlFixtureContent } = getBlockFixtureHTML(
+					basename
+				);
+				if ( htmlFixtureContent === null ) {
+					throw new Error( `Missing fixture file: ${ htmlFixtureFileName }` );
+				}
+
+				const {
+					filename: parsedJSONFixtureFileName,
+					file: parsedJSONFixtureContent,
+				} = getBlockFixtureParsedJSON( basename );
+				const parserOutputActual = grammarParse( htmlFixtureContent );
+				let parserOutputExpectedString;
+				if ( parsedJSONFixtureContent ) {
+					parserOutputExpectedString = parsedJSONFixtureContent;
+				} else if ( process.env.GENERATE_MISSING_FIXTURES ) {
+					parserOutputExpectedString = JSON.stringify( parserOutputActual, null, 4 ) + '\n';
+					writeBlockFixtureParsedJSON( basename, parserOutputExpectedString );
+				} else {
+					throw new Error( `Missing fixture file: ${ parsedJSONFixtureFileName }` );
+				}
+
+				const parserOutputExpected = JSON.parse( parserOutputExpectedString );
+				try {
+					expect( parserOutputActual ).toEqual( parserOutputExpected );
+				} catch ( err ) {
+					throw new Error(
+						format(
+							"File '%s' does not match expected value:\n\n%s",
+							parsedJSONFixtureFileName,
+							err.message
+						)
+					);
+				}
+
+				const blocksActual = parse( htmlFixtureContent );
+
+				// Block validation may log errors during deprecation migration,
+				// unless explicitly handled from a valid block via isEligible.
+				// Match on basename for deprecated blocks fixtures to allow.
+				const isDeprecated = /__deprecated([-_]|$)/.test( basename );
+				if ( isDeprecated ) {
+					/* eslint-disable no-console */
+					console.warn.mockReset();
+					console.error.mockReset();
+					console.info.mockReset();
+					/* eslint-enable no-console */
+				}
+
+				const blocksActualNormalized = normalizeParsedBlocks( blocksActual );
+				const { filename: jsonFixtureFileName, file: jsonFixtureContent } = getBlockFixtureJSON(
+					basename
+				);
+
+				let blocksExpectedString;
+
+				if ( jsonFixtureContent ) {
+					blocksExpectedString = jsonFixtureContent;
+				} else if ( process.env.GENERATE_MISSING_FIXTURES ) {
+					blocksExpectedString = JSON.stringify( blocksActualNormalized, null, 4 ) + '\n';
+					writeBlockFixtureJSON( basename, blocksExpectedString );
+				} else {
+					throw new Error( `Missing fixture file: ${ jsonFixtureFileName }` );
+				}
+
+				const blocksExpected = JSON.parse( blocksExpectedString );
+				try {
+					expect( blocksActualNormalized ).toEqual( blocksExpected );
+				} catch ( err ) {
+					throw new Error(
+						format(
+							"File '%s' does not match expected value:\n\n%s",
+							jsonFixtureFileName,
+							err.message
+						)
+					);
+				}
+
+				// `serialize` doesn't have a trailing newline, but the fixture
+				// files should.
+				const serializedActual = serialize( blocksActual ) + '\n';
+				const {
+					filename: serializedHTMLFileName,
+					file: serializedHTMLFixtureContent,
+				} = getBlockFixtureSerializedHTML( basename );
+
+				let serializedExpected;
+				if ( serializedHTMLFixtureContent ) {
+					serializedExpected = serializedHTMLFixtureContent;
+				} else if ( process.env.GENERATE_MISSING_FIXTURES ) {
+					serializedExpected = serializedActual;
+					writeBlockFixtureSerializedHTML( basename, serializedExpected );
+				} else {
+					throw new Error( `Missing fixture file: ${ serializedHTMLFileName }` );
+				}
+
+				try {
+					expect( serializedActual ).toEqual( serializedExpected );
+				} catch ( err ) {
+					throw new Error(
+						format(
+							"File '%s' does not match expected value:\n\n%s",
+							serializedHTMLFileName,
+							err.message
+						)
+					);
+				}
+			} );
+		} );
+
+		if ( settings.deprecated?.length ) {
+			test( 'fixture is present for each block deprecation', () => {
+				const nameToFilename = blockNameToFixtureBasename( blockName );
+				const errors = [];
+				settings.deprecated.forEach( ( deprecation, index ) => {
+					if (
+						deprecation &&
+						! blockBasenames.includes( `${ nameToFilename }__deprecated-${ index + 1 }` )
+					) {
+						errors.push(
+							`Expected a fixture file called '${ nameToFilename }__deprecated-${ index + 1 }.html'`
+						);
+					}
+				} );
+				expect( errors.length ).toEqual( 0 );
+				if ( errors.length ) {
+					throw new Error( 'Problem(s) with fixture files:\n\n' + errors.join( '\n' ) );
+				}
+			} );
+		}
+	} );
+}
+/* eslint-disable jest/no-export */
+
+function registerBlocks( blocks ) {
+	// Need to add a valid category or block registration fails
+	setCategories( [
+		{
+			slug: 'test',
+			title: 'Test',
+		},
+	] );
+	blocks.forEach( block => {
+		registerBlockType( block.name, { ...block.settings, category: 'test' } );
+	} );
+}
+
+function normalizeParsedBlocks( blocks ) {
+	return blocks.map( ( block, index ) => {
+		// Clone and remove React-instance-specific stuff; also, attribute
+		// values that equal `undefined` will be removed. Validation issues
+		// add too much noise so they get removed as well.
+		block = JSON.parse( JSON.stringify( omit( block, 'validationIssues' ) ) );
+
+		// Change client IDs to a predictable value
+		block.clientId = '_clientId_' + index;
+
+		// Recurse to normalize inner blocks
+		block.innerBlocks = normalizeParsedBlocks( block.innerBlocks );
+
+		return block;
+	} );
+}
+
+function readFixtureFile( fixturesDir, filename ) {
+	try {
+		return fs.readFileSync( path.join( fixturesDir, filename ), 'utf8' );
+	} catch ( err ) {
+		return null;
+	}
+}
+
+function writeFixtureFile( fixturesDir, filename, content ) {
+	fs.writeFileSync( path.join( fixturesDir, filename ), content );
+}
+
+function setFixturesDir( fixturePath ) {
+	FIXTURES_DIR = path.join( fixturePath, 'fixtures' );
+}
+function blockNameToFixtureBasename( blockName ) {
+	return blockName.replace( /\//g, '__' );
+}
+
+function getAvailableBlockFixturesBasenames() {
+	// We expect 4 different types of files for each fixture:
+	//  - fixture.html            : original content
+	//  - fixture.parsed.json     : parser output
+	//  - fixture.json            : blocks structure
+	//  - fixture.serialized.html : re-serialized content
+	// Get the "base" name for each fixture first.
+	return uniq(
+		fs
+			.readdirSync( FIXTURES_DIR )
+			.filter( f => /(\.html|\.json)$/.test( f ) )
+			.map( f => f.replace( /\..+$/, '' ) )
+	);
+}
+
+function getBlockFixtureHTML( basename ) {
+	const filename = `${ basename }.html`;
+	return {
+		filename,
+		file: readFixtureFile( FIXTURES_DIR, filename ),
+	};
+}
+
+function getBlockFixtureJSON( basename ) {
+	const filename = `${ basename }.json`;
+	return {
+		filename,
+		file: readFixtureFile( FIXTURES_DIR, filename ),
+	};
+}
+
+function getBlockFixtureParsedJSON( basename ) {
+	const filename = `${ basename }.parsed.json`;
+	return {
+		filename,
+		file: readFixtureFile( FIXTURES_DIR, filename ),
+	};
+}
+
+function getBlockFixtureSerializedHTML( basename ) {
+	const filename = `${ basename }.serialized.html`;
+	return {
+		filename,
+		file: readFixtureFile( FIXTURES_DIR, filename ),
+	};
+}
+
+function writeBlockFixtureJSON( basename, fixture ) {
+	writeFixtureFile( FIXTURES_DIR, `${ basename }.json`, fixture );
+}
+
+function writeBlockFixtureParsedJSON( basename, fixture ) {
+	writeFixtureFile( FIXTURES_DIR, `${ basename }.parsed.json`, fixture );
+}
+
+function writeBlockFixtureSerializedHTML( basename, fixture ) {
+	writeFixtureFile( FIXTURES_DIR, `${ basename }.serialized.html`, fixture );
+}
diff --git a/projects/plugins/jetpack/extensions/shared/test/block-fixtures.md b/projects/plugins/jetpack/extensions/shared/test/block-fixtures.md
new file mode 100644
index 0000000000000..8ac2181f198e4
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/shared/test/block-fixtures.md
@@ -0,0 +1,111 @@
+# Block test fixtures
+
+## Introduction
+
+Block fixture are used to test the block parsing and serialization logic.
+
+Each test is made up of four fixture files:
+
+1. `fixture-name.html`: The initial post content.
+2. `fixture-name.parsed.json`: The **expected** output of the PEG parser for
+   this content (checked against the **actual** output of both the JS and PHP
+   versions of the parser).
+3. `fixture-name.json`: The **expected** representation of the block(s) inside
+   the post content, along with their attributes and any nested content. The
+   contents of this file are compared against the **actual** block object(s).
+4. `fixture-name.serialized.html`: The **expected** result of calling
+   `serialize` on the parsed block object(s). The contents of this file are
+   compared against the **actual** re-serialized post content. This final step
+   simulates opening and re-saving a post.
+
+Every block is required to have at least one such set of fixture files to test
+the parsing and serialization of that block. Additionally, each deprecation for
+a block should also have a fixture.
+
+These fixtures must be named like
+`jetpack__blockname{__*,}.{html,json,serialized.html}`. For example, for the
+`jetpack/whatsapp-button` block, the following four fixture files must exist:
+
+1. `jetpack__whatsapp-button.html` (or `jetpack__whatsapp-button__specific-test-name.html`). Must
+   contain a `<!-- wp:core/image -->` block.
+2. `jetpack__whatsapp-button__image.parsed.json` (or `core__image__specific-test-name.parsed.json`).
+3. `jetpack__whatsapp-button.json` (or `jetpack__whatsapp-button__specific-test-name.json`).
+4. `jetpack__whatsapp-button.serialized.html` (or
+   `jetpack__whatsapp-button.serialized.html`).
+
+For each deprecation a fixture should exist with the filename format
+`jetpack__whatsapp-button__deprecated-1.html`, with the number relating to the deprecation version.
+
+Ideally all important attributes and features of the block should be tested
+this way, for example with a gallery block where adding a  `linkTo` attribute may significantly change the saved content of the block there might be a fixture that has the image tag wrapped in a `<a>` and named `jetpack__tiled-gallery__link-to-attachment.html`.
+
+## Creating fixtures
+
+When adding a new fixtures, only the first file above (1, e.g. `core__image.html`) needs
+to be created manually, the other files are generated from this first file.
+
+To create the first file:
+
+1. Create a file with the correct name in this folder.
+2. Add the block to an new post in the editor.
+3. Toggle the block attributes to desired settings for the test.
+4. Switch to the code editor view and copy the block markup.
+5. Paste the markup into the file you created at step 1.
+
+Next, to generate files (2) through (4) run the following command from the root of the
+jetpack plugin project:
+
+For a single block:
+
+```sh
+yarn fixtures:generate `path\to\block\test\validate.js`
+```
+
+For all blocks:
+
+```sh
+yarn fixtures:generate
+```
+
+When using this command, please be sure to manually verify that the
+contents of the `.json` and `.serialized.html` files are as expected.
+
+In particular, check that the `isValid` property is `true`, and that
+the attributes are serialized correctly.
+
+## Add a deprecation fixture
+
+When adding a fixture for a block deprecation follow the same steps as above but name the new fixture file as `core__image__dreprecated-1.html`) where the number at the end represents the deprecation version. The content of this file should match the saved block content the deprecated version of the block
+
+In the case of deprecations the content of the `.json` and `.serialized.html` files should match the content of the produced by the latest version of the block save method, ie. they should mimic what would happen to a blocks content when a deprecated version is loaded in the editor and migrated to be compatible with the new save method.
+
+## Updating fixtures
+
+The process for updating fixtures for existing tests is similar to that for creating them:
+
+Run the command to regenerate the files:
+
+For a single block:
+
+```sh
+yarn fixtures:regenerate `path\to\block\test\validate.js`
+```
+
+For all blocks:
+
+```sh
+yarn fixtures:regenerate
+```
+
+After regenerating fixtures, check the diff (using git/github) to check that the changes were expected
+and the block is still valid (`isValid` is `true`).
+
+## Running the tests
+
+The fixture tests will be run as part of running the `fixtures:generate` and `fixtures:regenerate` scripts and also as part of the `yarn test-extensions` test run. They can also be run independently with `yarn fixtures:test`
+
+## Related
+
+See the
+[`validate.js`](../../blocks/send-a-message/whatsapp-button/test/validate.js)
+for an example of how to run these validations against a block.
diff --git a/projects/plugins/jetpack/jest.config.js b/projects/plugins/jetpack/jest.config.js
index 6bc42b047808b..c99f8ef60723b 100644
--- a/projects/plugins/jetpack/jest.config.js
+++ b/projects/plugins/jetpack/jest.config.js
@@ -15,4 +15,5 @@ module.exports = {
 	},
 	coverageDirectory: 'coverage/extensions',
 	setupFiles: [ '<rootDir>/tests/jest-globals.js' ],
+	testPathIgnorePatterns: [ 'node_modules', 'extensions/shared/test/block-fixtures.js' ],
 };
diff --git a/projects/plugins/jetpack/package.json b/projects/plugins/jetpack/package.json
index b36dfa14f3928..8ae8fecf60848 100644
--- a/projects/plugins/jetpack/package.json
+++ b/projects/plugins/jetpack/package.json
@@ -35,6 +35,9 @@
 		"clean-extensions": "rm -rf _inc/blocks/ ",
 		"clean-search": "rm -rf _inc/build/instant-search/* ",
 		"distclean": "rm -rf node_modules && yarn clean",
+		"fixtures:regenerate": "REGENERATE_FIXTURES=y GENERATE_MISSING_FIXTURES=y yarn jest",
+		"fixtures:generate": "GENERATE_MISSING_FIXTURES=y yarn jest",
+		"fixtures:test": "jest validate.js",
 		"install-if-deps-outdated": "yarn install --check-files --production=false --frozen-lockfile",
 		"test-adminpage": "yarn test-client && yarn test-gui",
 		"test-client": "NODE_ENV=test NODE_PATH=tests:_inc/client tests/runner.js",