From 0d974c8f18c98d0c80e265a36f3671e0be0541c9 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <aduthie7@gmail.com>
Date: Tue, 30 Jan 2018 17:27:38 +0100
Subject: [PATCH] Blocks: Update ToggleControl to pass boolean onChange (#4720)

* Blocks: Update ToggleControl to pass boolean onChange

* Blocks: Simply ToggleControl help describedby assignment
---
 .../toggle-control/index.js                   | 48 ++++++++++++++-----
 .../toggle-control/test/index.js              | 43 +++++++++++++++++
 2 files changed, 80 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 7cb76a834ad202..1410293584e5fa 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,44 @@ 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;
+
+		let describedBy;
+		if ( help ) {
+			describedBy = id + '__help';
+		}
+
+		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={ describedBy }
+				/>
+			</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 00000000000000..718e6ed68c1496
--- /dev/null
+++ b/blocks/inspector-controls/toggle-control/test/index.js
@@ -0,0 +1,43 @@
+/**
+ * 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 );
+	} );
+
+	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$/ );
+		} );
+	} );
+} );