Tests: Refactor NavigableMenu tests to use React Testing Library

WordPress · Apr 8, 2020 · 2b683cf · 2b683cf
1 parent 25fd85b
commit 2b683cf
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 46 deletions.
diff --git a/packages/components/src/navigable-container/test/menu.js b/packages/components/src/navigable-container/test/menu.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import { each } from 'lodash';
 
 /**
@@ -14,16 +14,15 @@ import { UP, DOWN, LEFT, RIGHT, SPACE } from '@wordpress/keycodes';
  */
 import { NavigableMenu } from '../menu';
 
-function simulateVisible( wrapper, selector ) {
-	const elements = wrapper.getDOMNode().querySelectorAll( selector );
+function simulateVisible( elements ) {
 	each( elements, ( elem ) => {
 		elem.getClientRects = () => [
 			'trick-jsdom-into-having-size-for-element-rect',
 		];
 	} );
 }
 
-function fireKeyDown( container, keyCode, shiftKey ) {
+function fireKeyDown( node, keyCode, shiftKey ) {
 	const interaction = {
 		stopped: false,
 	};
@@ -35,15 +34,15 @@ function fireKeyDown( container, keyCode, shiftKey ) {
 	event.stopImmediatePropagation = () => {
 		interaction.stopped = true;
 	};
-	container.getDOMNode().dispatchEvent( event );
+	fireEvent( node, event );
 
 	return interaction;
 }
 
 describe( 'NavigableMenu', () => {
 	it( 'vertical: should navigate by up and down', () => {
 		let currentIndex = 0;
-		const wrapper = mount(
+		const { container, getByRole } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -71,17 +70,17 @@ describe( 'NavigableMenu', () => {
 			/* eslint-enable no-restricted-syntax */
 		);
 
-		simulateVisible( wrapper, '*' );
+		simulateVisible( container.querySelectorAll( '*' ) );
 
-		const container = wrapper.find( 'div' );
-		wrapper
-			.getDOMNode()
-			.querySelector( '#btn1' )
-			.focus();
+		container.querySelector( '#btn1' ).focus();
 
 		// Navigate options
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
-			const interaction = fireKeyDown( container, keyCode, false );
+			const interaction = fireKeyDown(
+				getByRole( 'menu' ),
+				keyCode,
+				false
+			);
 			expect( currentIndex ).toBe( expectedActiveIndex );
 			expect( interaction.stopped ).toBe( expectedStop );
 		}
@@ -101,7 +100,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'vertical: should navigate by up and down, and stop at edges', () => {
 		let currentIndex = 0;
-		const wrapper = mount(
+		const { container, getByRole } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -125,17 +124,17 @@ describe( 'NavigableMenu', () => {
 			/* eslint-enable no-restricted-syntax */
 		);
 
-		simulateVisible( wrapper, '*' );
+		simulateVisible( container.querySelectorAll( '*' ) );
 
-		const container = wrapper.find( 'div' );
-		wrapper
-			.getDOMNode()
-			.querySelector( '#btn1' )
-			.focus();
+		container.querySelector( '#btn1' ).focus();
 
 		// Navigate options
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
-			const interaction = fireKeyDown( container, keyCode, false );
+			const interaction = fireKeyDown(
+				getByRole( 'menu' ),
+				keyCode,
+				false
+			);
 			expect( currentIndex ).toBe( expectedActiveIndex );
 			expect( interaction.stopped ).toBe( expectedStop );
 		}
@@ -153,7 +152,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'horizontal: should navigate by left and right', () => {
 		let currentIndex = 0;
-		const wrapper = mount(
+		const { container, getByRole } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -181,17 +180,17 @@ describe( 'NavigableMenu', () => {
 			/* eslint-enable no-restricted-syntax */
 		);
 
-		simulateVisible( wrapper, '*' );
+		simulateVisible( container.querySelectorAll( '*' ) );
 
-		const container = wrapper.find( 'div' );
-		wrapper
-			.getDOMNode()
-			.querySelector( '#btn1' )
-			.focus();
+		container.querySelector( '#btn1' ).focus();
 
 		// Navigate options
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
-			const interaction = fireKeyDown( container, keyCode, false );
+			const interaction = fireKeyDown(
+				getByRole( 'menu' ),
+				keyCode,
+				false
+			);
 			expect( currentIndex ).toBe( expectedActiveIndex );
 			expect( interaction.stopped ).toBe( expectedStop );
 		}
@@ -211,7 +210,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'horizontal: should navigate by left and right, and stop at edges', () => {
 		let currentIndex = 0;
-		const wrapper = mount(
+		const { container, getByRole } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -235,17 +234,17 @@ describe( 'NavigableMenu', () => {
 			/* eslint-enable no-restricted-syntax */
 		);
 
-		simulateVisible( wrapper, '*' );
+		simulateVisible( container.querySelectorAll( '*' ) );
 
-		const container = wrapper.find( 'div' );
-		wrapper
-			.getDOMNode()
-			.querySelector( '#btn1' )
-			.focus();
+		container.querySelector( '#btn1' ).focus();
 
 		// Navigate options
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
-			const interaction = fireKeyDown( container, keyCode, false );
+			const interaction = fireKeyDown(
+				getByRole( 'menu' ),
+				keyCode,
+				false
+			);
 			expect( currentIndex ).toBe( expectedActiveIndex );
 			expect( interaction.stopped ).toBe( expectedStop );
 		}
@@ -263,7 +262,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'both: should navigate by up/down and left/right', () => {
 		let currentIndex = 0;
-		const wrapper = mount(
+		const { container, getByRole } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -280,17 +279,13 @@ describe( 'NavigableMenu', () => {
 			/* eslint-enable no-restricted-syntax */
 		);
 
-		simulateVisible( wrapper, '*' );
+		simulateVisible( container.querySelectorAll( '*' ) );
 
-		const container = wrapper.find( 'div' );
-		wrapper
-			.getDOMNode()
-			.querySelector( '#btn1' )
-			.focus();
+		container.querySelector( '#btn1' ).focus();
 
 		// Navigate options
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
-			const interaction = fireKeyDown( container, keyCode );
+			const interaction = fireKeyDown( getByRole( 'menu' ), keyCode );
 			expect( currentIndex ).toBe( expectedActiveIndex );
 			expect( interaction.stopped ).toBe( expectedStop );
 		}

diff --git a/packages/components/src/navigable-container/test/tabbable.js b/packages/components/src/navigable-container/test/tabbable.js
@@ -86,8 +86,8 @@ describe( 'TabbableContainer', () => {
 				keyCode,
 				shiftKey
 			);
-			expect( interaction.stopped ).toBe( expectedStop );
 			expect( currentIndex ).toBe( expectedActiveIndex );
+			expect( interaction.stopped ).toBe( expectedStop );
 		}
 
 		assertKeyDown( TAB, false, 1, true );