Add some tests for TreeGrid. Update README to reflect latest functionality.

packages/components/src/tree-grid/README.md

@@ -114,7 +114,7 @@ Aside from the documented callback functions, any props specified will be passed
 
 ###### onFocusRow( event: Event, startRow: HTMLElement, destinationRow: HTMLElement )
 
-Callback that fires when focus is shifted from one row to another via the UP and DOWN keys.
+Callback that fires when focus is shifted from one row to another via the Up and Down keys. Callback is also fired on Home and End keys which move focus from the beginning row to the end row.
 The callback is passed the event, the start row element that the focus was on originally, and
 the destination row element after the focus has moved.
 

packages/components/src/tree-grid/index.js

@@ -275,6 +275,10 @@ function TreeGrid(
 				);
 				focusablesInNextRow[ nextIndex ].focus();
 
+				// Let consumers know the row that was originally focused,
+				// and the row that is now in focus.
+				onFocusRow( event, activeRow, rows[ nextRowIndex ] );
+
 				// Prevent key use for anything else. This ensures Voiceover
 				// doesn't try to handle key navigation.
 				event.preventDefault();

packages/components/src/tree-grid/test/index.js

@@ -6,7 +6,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 /**
  * WordPress dependencies
  */
-import { LEFT, RIGHT, UP, DOWN } from '@wordpress/keycodes';
+import { LEFT, RIGHT, UP, DOWN, HOME, END } from '@wordpress/keycodes';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -68,10 +68,10 @@ describe( 'TreeGrid', () => {
 						level={ 1 }
 						positionInSet={ 1 }
 						setSize={ 3 }
-						isExpanded={ true }
+						isExpanded={ false }
 					>
 						<TreeGridCell withoutGridItem>
-							<TestButton>Row 1</TestButton>
+							<TestButton aria-expanded="false">Row 1</TestButton>
 						</TreeGridCell>
 					</TreeGridRow>
 					<TreeGridRow
@@ -88,7 +88,7 @@ describe( 'TreeGrid', () => {
 						level={ 1 }
 						positionInSet={ 3 }
 						setSize={ 3 }
-						isExpanded={ true }
+						isExpanded={ false }
 					>
 						<TreeGridCell withoutGridItem>
 							<TestButton>Row 3</TestButton>
@@ -97,16 +97,16 @@ describe( 'TreeGrid', () => {
 				</TreeGrid>
 			);
 
-			screen.getByText( 'Row 2' ).focus();
-			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
+			screen.getByText( 'Row 1' ).focus();
+			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
 
-			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
+			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
 				key: 'ArrowRight',
 				keyCode: RIGHT,
-				currentTarget: row2Element,
+				currentTarget: row1Element,
 			} );
 
-			expect( onExpandRow ).toHaveBeenCalledWith( row2Element );
+			expect( onExpandRow ).toHaveBeenCalledWith( row1Element );
 		} );
 	} );
 
@@ -120,17 +120,17 @@ describe( 'TreeGrid', () => {
 						level={ 1 }
 						positionInSet={ 1 }
 						setSize={ 3 }
-						isExpanded={ false }
+						isExpanded={ true }
 					>
 						<TreeGridCell withoutGridItem>
-							<TestButton>Row 1</TestButton>
+							<TestButton aria-expanded="true">Row 1</TestButton>
 						</TreeGridCell>
 					</TreeGridRow>
 					<TreeGridRow
 						level={ 1 }
 						positionInSet={ 2 }
 						setSize={ 3 }
-						isExpanded={ true }
+						isExpanded={ false }
 					>
 						<TreeGridCell withoutGridItem>
 							<TestButton>Row 2</TestButton>
@@ -149,16 +149,16 @@ describe( 'TreeGrid', () => {
 				</TreeGrid>
 			);
 
-			screen.getByText( 'Row 2' ).focus();
-			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
+			screen.getByText( 'Row 1' ).focus();
+			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
 
-			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
+			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
 				key: 'ArrowLeft',
 				keyCode: LEFT,
-				currentTarget: row2Element,
+				currentTarget: row1Element,
 			} );
 
-			expect( onCollapseRow ).toHaveBeenCalledWith( row2Element );
+			expect( onCollapseRow ).toHaveBeenCalledWith( row1Element );
 		} );
 	} );
 
@@ -205,6 +205,28 @@ describe( 'TreeGrid', () => {
 			);
 		} );
 
+		it( 'should call onFocusRow with event, start and end nodes when pressing End', () => {
+			const onFocusRow = jest.fn();
+			render( <TestTree onFocusRow={ onFocusRow } /> );
+
+			screen.getByText( 'Row 1' ).focus();
+
+			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row3Element = screen.getByText( 'Row 3' ).closest( 'tr' );
+
+			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
+				key: 'End',
+				keyCode: END,
+				currentTarget: row1Element,
+			} );
+
+			expect( onFocusRow ).toHaveBeenCalledWith(
+				expect.objectContaining( { key: 'End', keyCode: END } ),
+				row1Element,
+				row3Element
+			);
+		} );
+
 		it( 'should call onFocusRow with event, start and end nodes when pressing Up Arrow', () => {
 			const onFocusRow = jest.fn();
 			render( <TestTree onFocusRow={ onFocusRow } /> );
@@ -227,6 +249,28 @@ describe( 'TreeGrid', () => {
 			);
 		} );
 
+		it( 'should call onFocusRow with event, start and end nodes when pressing Home', () => {
+			const onFocusRow = jest.fn();
+			render( <TestTree onFocusRow={ onFocusRow } /> );
+
+			screen.getByText( 'Row 3' ).focus();
+
+			const row3Element = screen.getByText( 'Row 3' ).closest( 'tr' );
+			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+
+			fireEvent.keyDown( screen.getByText( 'Row 3' ), {
+				key: 'Home',
+				keyCode: HOME,
+				currentTarget: row3Element,
+			} );
+
+			expect( onFocusRow ).toHaveBeenCalledWith(
+				expect.objectContaining( { key: 'Home', keyCode: HOME } ),
+				row3Element,
+				row1Element
+			);
+		} );
+
 		it( 'should call onFocusRow when shift key is held', () => {
 			const onFocusRow = jest.fn();
 			render( <TestTree onFocusRow={ onFocusRow } /> );