From 5f2ba6419956ab4bdc2a21e8c9d6f6acfaa7142b Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Sun, 28 Jan 2018 15:36:45 +0000
Subject: [PATCH 1/2] Blocks: Update ToggleControl to pass boolean onChange

---
 .../toggle-control/index.js                   | 43 ++++++++++++++-----
 .../toggle-control/test/index.js              | 21 +++++++++
 2 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 blocks/inspector-controls/toggle-control/test/index.js

diff --git a/blocks/inspector-controls/toggle-control/index.js b/blocks/inspector-controls/toggle-control/index.js
index 7cb76a834ad20..d9ab618ad1373 100644
--- a/blocks/inspector-controls/toggle-control/index.js
+++ b/blocks/inspector-controls/toggle-control/index.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { Component } from '@wordpress/element';
 import { withInstanceId, FormToggle } from '@wordpress/components';
 
 /**
@@ -9,19 +10,39 @@ import { withInstanceId, FormToggle } from '@wordpress/components';
 import BaseControl from './../base-control';
 import './style.scss';
 
-function ToggleControl( { label, checked, help, instanceId, onChange } ) {
-	const id = 'inspector-toggle-control-' + instanceId;
+class ToggleControl extends Component {
+	constructor() {
+		super( ...arguments );
 
-	return (
-		<BaseControl label={ label } id={ id } help={ help } className="blocks-toggle-control">
-			<FormToggle
+		this.onChange = this.onChange.bind( this );
+	}
+
+	onChange( event ) {
+		if ( this.props.onChange ) {
+			this.props.onChange( event.target.checked );
+		}
+	}
+
+	render() {
+		const { label, checked, help, instanceId } = this.props;
+		const id = 'inspector-toggle-control-' + instanceId;
+
+		return (
+			<BaseControl
+				label={ label }
 				id={ id }
-				checked={ checked }
-				onChange={ onChange }
-				aria-describedby={ !! help ? id + '__help' : undefined }
-			/>
-		</BaseControl>
-	);
+				help={ help }
+				className="blocks-toggle-control"
+			>
+				<FormToggle
+					id={ id }
+					checked={ checked }
+					onChange={ this.onChange }
+					aria-describedby={ !! help ? id + '__help' : undefined }
+				/>
+			</BaseControl>
+		);
+	}
 }
 
 export default withInstanceId( ToggleControl );
diff --git a/blocks/inspector-controls/toggle-control/test/index.js b/blocks/inspector-controls/toggle-control/test/index.js
new file mode 100644
index 0000000000000..2360a95b0c528
--- /dev/null
+++ b/blocks/inspector-controls/toggle-control/test/index.js
@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { mount } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import ToggleControl from '../';
+
+describe( 'ToggleControl', () => {
+	it( 'triggers change callback with numeric value', () => {
+		// Mount: With shallow, cannot find input child of BaseControl
+		const onChange = jest.fn();
+		const wrapper = mount( <ToggleControl onChange={ onChange } /> );
+
+		wrapper.find( 'input' ).simulate( 'change', { target: { checked: true } } );
+
+		expect( onChange ).toHaveBeenCalledWith( true );
+	} );
+} );

From a721c08f9fc26dfcf5e061a5b6d9e97206fe1605 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Tue, 30 Jan 2018 11:17:18 -0500
Subject: [PATCH 2/2] Blocks: Simply ToggleControl help describedby assignment

---
 .../toggle-control/index.js                   |  7 +++++-
 .../toggle-control/test/index.js              | 22 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/blocks/inspector-controls/toggle-control/index.js b/blocks/inspector-controls/toggle-control/index.js
index d9ab618ad1373..1410293584e5f 100644
--- a/blocks/inspector-controls/toggle-control/index.js
+++ b/blocks/inspector-controls/toggle-control/index.js
@@ -27,6 +27,11 @@ class ToggleControl extends Component {
 		const { label, checked, help, instanceId } = this.props;
 		const id = 'inspector-toggle-control-' + instanceId;
 
+		let describedBy;
+		if ( help ) {
+			describedBy = id + '__help';
+		}
+
 		return (
 			<BaseControl
 				label={ label }
@@ -38,7 +43,7 @@ class ToggleControl extends Component {
 					id={ id }
 					checked={ checked }
 					onChange={ this.onChange }
-					aria-describedby={ !! help ? id + '__help' : undefined }
+					aria-describedby={ describedBy }
 				/>
 			</BaseControl>
 		);
diff --git a/blocks/inspector-controls/toggle-control/test/index.js b/blocks/inspector-controls/toggle-control/test/index.js
index 2360a95b0c528..718e6ed68c149 100644
--- a/blocks/inspector-controls/toggle-control/test/index.js
+++ b/blocks/inspector-controls/toggle-control/test/index.js
@@ -18,4 +18,26 @@ describe( 'ToggleControl', () => {
 
 		expect( onChange ).toHaveBeenCalledWith( true );
 	} );
+
+	describe( 'help', () => {
+		it( 'does not render input with describedby if no help prop', () => {
+			// Mount: With shallow, cannot find input child of BaseControl
+			const onChange = jest.fn();
+			const wrapper = mount( <ToggleControl onChange={ onChange } /> );
+
+			const input = wrapper.find( 'input' );
+
+			expect( input.prop( 'aria-describedby' ) ).toBeUndefined();
+		} );
+
+		it( 'renders input with describedby if help prop', () => {
+			// Mount: With shallow, cannot find input child of BaseControl
+			const onChange = jest.fn();
+			const wrapper = mount( <ToggleControl help onChange={ onChange } /> );
+
+			const input = wrapper.find( 'input' );
+
+			expect( input.prop( 'aria-describedby' ) ).toMatch( /^inspector-toggle-control-.*__help$/ );
+		} );
+	} );
 } );