From 98692da08a2a5291c9802e073c02e78a6b735557 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 27 Mar 2020 12:37:14 -0400
Subject: [PATCH] Add basic tests for keyboard movements

---
 .../alignment-matrix-control/test/index.js    | 103 ++++++++++++++++++
 1 file changed, 103 insertions(+)

diff --git a/packages/components/src/alignment-matrix-control/test/index.js b/packages/components/src/alignment-matrix-control/test/index.js
index 05be599d4897e2..a42a3a7e1053d3 100644
--- a/packages/components/src/alignment-matrix-control/test/index.js
+++ b/packages/components/src/alignment-matrix-control/test/index.js
@@ -4,6 +4,11 @@
 import { render, unmountComponentAtNode } from 'react-dom';
 import { act } from 'react-dom/test-utils';
 
+/**
+ * WordPress dependencies
+ */
+import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
+
 /**
  * Internal dependencies
  */
@@ -11,6 +16,14 @@ import AlignmentMatrixControl from '../';
 
 let container = null;
 
+function triggerKeyDown( el, { keyCode } ) {
+	// modern browsers, IE9+
+	const e = document.createEvent( 'HTMLEvents' );
+	e.keyCode = keyCode;
+	e.initEvent( 'keydown', false, true );
+	el.dispatchEvent( e );
+}
+
 beforeEach( () => {
 	container = document.createElement( 'div' );
 	document.body.appendChild( container );
@@ -37,4 +50,94 @@ describe( 'AlignmentMatrixControl', () => {
 			expect( control ).toBeTruthy();
 		} );
 	} );
+
+	describe( 'Keyboard movement', () => {
+		it( 'should move the next value up on UP press', () => {
+			const spy = jest.fn();
+
+			act( () => {
+				render(
+					<AlignmentMatrixControl
+						value={ 'center' }
+						onChange={ spy }
+					/>,
+					container
+				);
+			} );
+
+			const control = getControl();
+
+			act( () => {
+				triggerKeyDown( control, { keyCode: UP } );
+			} );
+
+			expect( spy.mock.calls[ 0 ][ 0 ] ).toBe( 'center top' );
+		} );
+
+		it( 'should move the next value down on DOWN press', () => {
+			const spy = jest.fn();
+
+			act( () => {
+				render(
+					<AlignmentMatrixControl
+						value={ 'center' }
+						onChange={ spy }
+					/>,
+					container
+				);
+			} );
+
+			const control = getControl();
+
+			act( () => {
+				triggerKeyDown( control, { keyCode: DOWN } );
+			} );
+
+			expect( spy.mock.calls[ 0 ][ 0 ] ).toBe( 'bottom center' );
+		} );
+
+		it( 'should move the next value left on LEFT press', () => {
+			const spy = jest.fn();
+
+			act( () => {
+				render(
+					<AlignmentMatrixControl
+						value={ 'center' }
+						onChange={ spy }
+					/>,
+					container
+				);
+			} );
+
+			const control = getControl();
+
+			act( () => {
+				triggerKeyDown( control, { keyCode: LEFT } );
+			} );
+
+			expect( spy.mock.calls[ 0 ][ 0 ] ).toBe( 'center left' );
+		} );
+
+		it( 'should move the next value right on RIGHT press', () => {
+			const spy = jest.fn();
+
+			act( () => {
+				render(
+					<AlignmentMatrixControl
+						value={ 'center' }
+						onChange={ spy }
+					/>,
+					container
+				);
+			} );
+
+			const control = getControl();
+
+			act( () => {
+				triggerKeyDown( control, { keyCode: RIGHT } );
+			} );
+
+			expect( spy.mock.calls[ 0 ][ 0 ] ).toBe( 'center right' );
+		} );
+	} );
 } );