Tests: Refactor TabbableContainer tests to use React Testing Library

WordPress · Apr 7, 2020 · fe59e79 · fe59e79
1 parent db3ba2e
commit fe59e79
Showing 1 changed file with 21 additions and 22 deletions.
diff --git a/packages/components/src/navigable-container/test/tabbable.js b/packages/components/src/navigable-container/test/tabbable.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 { TAB, SPACE } from '@wordpress/keycodes';
  */
 import { TabbableContainer } from '../tabbable';
 
-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( 'TabbableContainer', () => {
 	it( 'should navigate by keypresses', () => {
 		let currentIndex = 0;
-		const wrapper = mount(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -71,13 +70,9 @@ describe( 'TabbableContainer', () => {
 			/* eslint-enable no-restricted-syntax */
 		);
 
-		simulateVisible( wrapper, '*' );
+		simulateVisible( container.querySelectorAll( '*' ) );
 
-		const container = wrapper.find( 'div.wrapper' );
-		wrapper
-			.getDOMNode()
-			.querySelector( '#section1' )
-			.focus();
+		container.querySelector( '#section1' ).focus();
 
 		// Navigate options
 		function assertKeyDown(
@@ -86,9 +81,13 @@ describe( 'TabbableContainer', () => {
 			expectedActiveIndex,
 			expectedStop
 		) {
-			const interaction = fireKeyDown( container, keyCode, shiftKey );
-			expect( currentIndex ).toBe( expectedActiveIndex );
+			const interaction = fireKeyDown(
+				container.querySelector( '.wrapper' ),
+				keyCode,
+				shiftKey
+			);
 			expect( interaction.stopped ).toBe( expectedStop );
+			expect( currentIndex ).toBe( expectedActiveIndex );
 		}
 
 		assertKeyDown( TAB, false, 1, true );
@@ -104,7 +103,7 @@ describe( 'TabbableContainer', () => {
 
 	it( 'should navigate by keypresses and stop at edges', () => {
 		let currentIndex = 0;
-		const wrapper = mount(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -128,13 +127,9 @@ describe( 'TabbableContainer', () => {
 			/* eslint-enable no-restricted-syntax */
 		);
 
-		simulateVisible( wrapper, '*' );
+		simulateVisible( container.querySelectorAll( '*' ) );
 
-		const container = wrapper.find( 'div.wrapper' );
-		wrapper
-			.getDOMNode()
-			.querySelector( '#section1' )
-			.focus();
+		container.querySelector( '#section1' ).focus();
 
 		// Navigate options
 		function assertKeyDown(
@@ -143,7 +138,11 @@ describe( 'TabbableContainer', () => {
 			expectedActiveIndex,
 			expectedStop
 		) {
-			const interaction = fireKeyDown( container, keyCode, shiftKey );
+			const interaction = fireKeyDown(
+				container.querySelector( '.wrapper' ),
+				keyCode,
+				shiftKey
+			);
 			expect( currentIndex ).toBe( expectedActiveIndex );
 			expect( interaction.stopped ).toBe( expectedStop );
 		}