@wordpress/compose 5.19.0 → 5.20.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.20.0 (2022-11-16)
+
 ## 5.19.0 (2022-11-02)
 
 ### Internal

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "5.19.0",
+	"version": "5.20.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,12 +31,12 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^3.21.0",
-		"@wordpress/dom": "^3.21.0",
-		"@wordpress/element": "^4.19.0",
-		"@wordpress/is-shallow-equal": "^4.21.0",
-		"@wordpress/keycodes": "^3.21.0",
-		"@wordpress/priority-queue": "^2.21.0",
+		"@wordpress/deprecated": "^3.22.0",
+		"@wordpress/dom": "^3.22.0",
+		"@wordpress/element": "^4.20.0",
+		"@wordpress/is-shallow-equal": "^4.22.0",
+		"@wordpress/keycodes": "^3.22.0",
+		"@wordpress/priority-queue": "^2.22.0",
 		"change-case": "^4.1.2",
 		"clipboard": "^2.0.8",
 		"mousetrap": "^1.6.5",
@@ -48,5 +48,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
+	"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
 }

package/src/hooks/use-merge-refs/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import ReactDOM from 'react-dom';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ describe( 'useMergeRefs', () => {
 
 	function MergedRefs( {
 		count,
-		tagName: TagName = 'div',
+		tagName: TagName = 'ul',
 		disable1,
 		disable2,
 		unused,
@@ -71,31 +71,22 @@ describe( 'useMergeRefs', () => {
 		return <TagName ref={ mergedRefs } />;
 	}
 
-	beforeEach( () => {
-		const rootElement = document.createElement( 'div' );
-		rootElement.id = 'root';
-		document.body.appendChild( rootElement );
-	} );
-
 	afterEach( () => {
-		// Reset all history and DOM.
+		// Reset all history.
 		renderCallback.history = [];
-		document.body.innerHTML = '';
 	} );
 
 	it( 'should work', () => {
-		const rootElement = document.getElementById( 'root' );
-
-		ReactDOM.render( <MergedRefs />, rootElement );
+		const { rerender, unmount } = render( <MergedRefs /> );
 
-		const originalElement = rootElement.firstElementChild;
+		const originalElement = screen.getByRole( 'list' );
 
 		// Render 1: both initial callback functions should be called with node.
 		expect( renderCallback.history ).toEqual( [
 			[ [ originalElement ], [ originalElement ] ],
 		] );
 
-		ReactDOM.render( <MergedRefs />, rootElement );
+		rerender( <MergedRefs /> );
 
 		// Render 2: the new callback functions should not be called! There has
 		// been no dependency change.
@@ -104,7 +95,7 @@ describe( 'useMergeRefs', () => {
 			[ [], [] ],
 		] );
 
-		ReactDOM.render( null, rootElement );
+		unmount();
 
 		// Unmount: the initial callback functions should receive null.
 		expect( renderCallback.history ).toEqual( [
@@ -117,15 +108,13 @@ describe( 'useMergeRefs', () => {
 	} );
 
 	it( 'should work for node change', () => {
-		const rootElement = document.getElementById( 'root' );
+		const { rerender, unmount } = render( <MergedRefs /> );
 
-		ReactDOM.render( <MergedRefs />, rootElement );
+		const originalElement = screen.getByRole( 'list' );
 
-		const originalElement = rootElement.firstElementChild;
+		rerender( <MergedRefs tagName="button" /> );
 
-		ReactDOM.render( <MergedRefs tagName="button" />, rootElement );
-
-		const newElement = rootElement.firstElementChild;
+		const newElement = screen.getByRole( 'button' );
 
 		// After a render with the original element and a second render with the
 		// new element, expect the initial callback functions to be called with
@@ -140,7 +129,7 @@ describe( 'useMergeRefs', () => {
 			[ [], [] ],
 		] );
 
-		ReactDOM.render( null, rootElement );
+		unmount();
 
 		// Unmount: the initial callback functions should receive null.
 		expect( renderCallback.history ).toEqual( [
@@ -153,17 +142,15 @@ describe( 'useMergeRefs', () => {
 	} );
 
 	it( 'should work with dependencies', () => {
-		const rootElement = document.getElementById( 'root' );
-
-		ReactDOM.render( <MergedRefs count={ 1 } />, rootElement );
+		const { rerender, unmount } = render( <MergedRefs count={ 1 } /> );
 
-		const originalElement = rootElement.firstElementChild;
+		const originalElement = screen.getByRole( 'list' );
 
 		expect( renderCallback.history ).toEqual( [
 			[ [ originalElement ], [ originalElement ] ],
 		] );
 
-		ReactDOM.render( <MergedRefs count={ 2 } />, rootElement );
+		rerender( <MergedRefs count={ 2 } /> );
 
 		// After a second render with a dependency change, expect the inital
 		// callback function to be called with null and the new callback
@@ -174,7 +161,7 @@ describe( 'useMergeRefs', () => {
 			[ [], [ originalElement ] ],
 		] );
 
-		ReactDOM.render( null, rootElement );
+		unmount();
 
 		// Unmount: current callback functions should be called with null.
 		expect( renderCallback.history ).toEqual( [
@@ -187,22 +174,17 @@ describe( 'useMergeRefs', () => {
 	} );
 
 	it( 'should simultaneously update node and dependencies', () => {
-		const rootElement = document.getElementById( 'root' );
+		const { rerender, unmount } = render( <MergedRefs count={ 1 } /> );
 
-		ReactDOM.render( <MergedRefs count={ 1 } />, rootElement );
-
-		const originalElement = rootElement.firstElementChild;
+		const originalElement = screen.getByRole( 'list' );
 
 		expect( renderCallback.history ).toEqual( [
 			[ [ originalElement ], [ originalElement ] ],
 		] );
 
-		ReactDOM.render(
-			<MergedRefs count={ 2 } tagName="button" />,
-			rootElement
-		);
+		rerender( <MergedRefs count={ 2 } tagName="button" /> );
 
-		const newElement = rootElement.firstElementChild;
+		const newElement = screen.getByRole( 'button' );
 
 		// Both the node changes and the dependencies update for the second
 		// callback, so expect the old callback function to be called with null
@@ -217,7 +199,7 @@ describe( 'useMergeRefs', () => {
 			[ [], [ newElement ] ],
 		] );
 
-		ReactDOM.render( null, rootElement );
+		unmount();
 
 		// Unmount: current callback functions should be called with null.
 		expect( renderCallback.history ).toEqual( [
@@ -230,15 +212,13 @@ describe( 'useMergeRefs', () => {
 	} );
 
 	it( 'should work for dependency change after node change', () => {
-		const rootElement = document.getElementById( 'root' );
-
-		ReactDOM.render( <MergedRefs />, rootElement );
+		const { rerender, unmount } = render( <MergedRefs /> );
 
-		const originalElement = rootElement.firstElementChild;
+		const originalElement = screen.getByRole( 'list' );
 
-		ReactDOM.render( <MergedRefs tagName="button" />, rootElement );
+		rerender( <MergedRefs tagName="button" /> );
 
-		const newElement = rootElement.firstElementChild;
+		const newElement = screen.getByRole( 'button' );
 
 		// After a render with the original element and a second render with the
 		// new element, expect the initial callback functions to be called with
@@ -253,10 +233,7 @@ describe( 'useMergeRefs', () => {
 			[ [], [] ],
 		] );
 
-		ReactDOM.render(
-			<MergedRefs tagName="button" count={ 1 } />,
-			rootElement
-		);
+		rerender( <MergedRefs tagName="button" count={ 1 } /> );
 
 		// After a third render with a dependency change, expect the inital
 		// callback function to be called with null and the new callback
@@ -271,7 +248,7 @@ describe( 'useMergeRefs', () => {
 			[ [], [ newElement ] ],
 		] );
 
-		ReactDOM.render( null, rootElement );
+		unmount();
 
 		// Unmount: current callback functions should be called with null.
 		expect( renderCallback.history ).toEqual( [
@@ -285,18 +262,16 @@ describe( 'useMergeRefs', () => {
 	} );
 
 	it( 'should allow disabling a ref', () => {
-		const rootElement = document.getElementById( 'root' );
+		const { rerender, unmount } = render( <MergedRefs disable1 /> );
 
-		ReactDOM.render( <MergedRefs disable1 />, rootElement );
-
-		const originalElement = rootElement.firstElementChild;
+		const originalElement = screen.getByRole( 'list' );
 
 		// Render 1: ref 1 should be disabled.
 		expect( renderCallback.history ).toEqual( [
 			[ [], [ originalElement ] ],
 		] );
 
-		ReactDOM.render( <MergedRefs disable2 />, rootElement );
+		rerender( <MergedRefs disable2 /> );
 
 		// Render 2: ref 1 should be enabled and receive the ref. Note that the
 		// callback hasn't changed, so the original callback function will be
@@ -306,7 +281,7 @@ describe( 'useMergeRefs', () => {
 			[ [], [] ],
 		] );
 
-		ReactDOM.render( <MergedRefs disable1 count={ 1 } />, rootElement );
+		rerender( <MergedRefs disable1 count={ 1 } /> );
 
 		// Render 3: ref 1 should again be disabled. Ref 2 to should receive a
 		// ref with the new callback function because the count has been
@@ -320,7 +295,7 @@ describe( 'useMergeRefs', () => {
 			[ [], [ originalElement ] ],
 		] );
 
-		ReactDOM.render( null, rootElement );
+		unmount();
 
 		// Unmount: current callback functions should receive null.
 		expect( renderCallback.history ).toEqual( [
@@ -334,18 +309,16 @@ describe( 'useMergeRefs', () => {
 	} );
 
 	it( 'should allow the hook being unused', () => {
-		const rootElement = document.getElementById( 'root' );
-
-		ReactDOM.render( <MergedRefs unused />, rootElement );
+		const { rerender } = render( <MergedRefs unused /> );
 
-		const originalElement = rootElement.firstElementChild;
+		const originalElement = screen.getByRole( 'list' );
 
 		// Render 1: ref 1 should updated, ref 2 should not.
 		expect( renderCallback.history ).toEqual( [
 			[ [ originalElement ], [] ],
 		] );
 
-		ReactDOM.render( <MergedRefs />, rootElement );
+		rerender( <MergedRefs /> );
 
 		// Render 2: ref 2 should be updated as well.
 		expect( renderCallback.history ).toEqual( [
@@ -353,7 +326,7 @@ describe( 'useMergeRefs', () => {
 			[ [], [] ],
 		] );
 
-		ReactDOM.render( <MergedRefs unused />, rootElement );
+		rerender( <MergedRefs unused /> );
 
 		// Render 3: ref 2 should be updated with null
 		expect( renderCallback.history ).toEqual( [