@wordpress/components 21.3.0 → 22.1.0

package/src/truncate/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,34 +10,34 @@ import { Truncate } from '..';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {
-		const { container } = render( <Truncate>Lorem ipsum.</Truncate> );
-		expect( container.firstChild ).toHaveTextContent( 'Lorem ipsum.' );
+		render( <Truncate>Lorem ipsum.</Truncate> );
+		expect( screen.getByText( 'Lorem ipsum.' ) ).toBeVisible();
 	} );
 
 	test( 'should render limit', () => {
-		const { container } = render(
+		render(
 			<Truncate limit={ 1 } ellipsizeMode="tail">
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild ).toHaveTextContent( 'L…' );
+		expect( screen.getByText( 'L…' ) ).toBeVisible();
 	} );
 
 	test( 'should render custom ellipsis', () => {
-		const { container } = render(
+		render(
 			<Truncate ellipsis="!!!" limit={ 5 } ellipsizeMode="tail">
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild ).toHaveTextContent( 'Lorem!!!' );
+		expect( screen.getByText( 'Lorem!!!' ) ).toBeVisible();
 	} );
 
 	test( 'should render custom ellipsizeMode', () => {
-		const { container } = render(
+		render(
 			<Truncate ellipsis="!!!" ellipsizeMode="middle" limit={ 5 }>
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild ).toHaveTextContent( 'Lo!!!m.' );
+		expect( screen.getByText( 'Lo!!!m.' ) ).toBeVisible();
 	} );
 } );

package/src/ui/context/context-system-provider.js

@@ -10,34 +10,21 @@ import {
 	createContext,
 	useContext,
 	useRef,
-	useEffect,
 	useMemo,
 	memo,
 } from '@wordpress/element';
 import warn from '@wordpress/warning';
 
+/**
+ * Internal dependencies
+ */
+import { useUpdateEffect } from '../../utils';
+
 export const ComponentsContext = createContext(
 	/** @type {Record<string, any>} */ ( {} )
 );
 export const useComponentsContext = () => useContext( ComponentsContext );
 
-/**
- * Runs an effect only on update (i.e., ignores the first render)
- *
- * @param {import('react').EffectCallback} effect
- * @param {import('react').DependencyList} deps
- */
-function useUpdateEffect( effect, deps ) {
-	const mounted = useRef( false );
-	useEffect( () => {
-		if ( mounted.current ) {
-			return effect();
-		}
-		mounted.current = true;
-		return undefined;
-	}, deps );
-}
-
 /**
  * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.
  *

package/src/ui/context/test/__snapshots__/context-system-provider.js.snap

@@ -1,29 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`props should render _override props 1`] = `
-<div
-  class="components-component test-component emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Component"
->
-  Code is Poetry
+<div>
+  <div
+    class="components-component test-component emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Component"
+  >
+    Code is Poetry
+  </div>
 </div>
 `;
 
 exports[`props should render context props 1`] = `
-<div
-  class="components-component emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Component"
->
-  Code is Poetry
+<div>
+  <div
+    class="components-component emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Component"
+  >
+    Code is Poetry
+  </div>
 </div>
 `;
 
 exports[`props should render correctly 1`] = `
-<div
-  class="components-component emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Component"
-/>
+<div>
+  <div
+    class="components-component emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Component"
+  />
+</div>
 `;

package/src/ui/context/test/context-system-provider.js

@@ -30,7 +30,7 @@ describe( 'props', () => {
 			</ContextSystemProvider>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render context props', () => {
@@ -60,7 +60,7 @@ describe( 'props', () => {
 			</ContextSystemProvider>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 		expect( container.firstChild.innerHTML ).toContain( 'Code is Poetry' );
 	} );
 
@@ -98,7 +98,7 @@ describe( 'props', () => {
 			</>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 
 		const el = container.querySelector( '.test-component' );
 

package/src/ui/control-group/test/__snapshots__/index.js.snap

@@ -28,22 +28,24 @@ exports[`props should render correctly 1`] = `
   z-index: 1;
 }
 
-<div
-  class="components-flex components-control-group emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlGroup"
->
-  <button
-    class="components-button"
-    type="button"
+<div>
+  <div
+    class="components-flex components-control-group emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlGroup"
   >
-    Code is Poetry
-  </button>
-  <button
-    class="components-button"
-    type="button"
-  >
-    WordPress.org
-  </button>
+    <button
+      class="components-button"
+      type="button"
+    >
+      Code is Poetry
+    </button>
+    <button
+      class="components-button"
+      type="button"
+    >
+      WordPress.org
+    </button>
+  </div>
 </div>
 `;

package/src/ui/control-group/test/index.js

@@ -17,6 +17,6 @@ describe( 'props', () => {
 				<Button>WordPress.org</Button>
 			</ControlGroup>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/ui/control-label/test/__snapshots__/index.js.snap

@@ -37,13 +37,15 @@ exports[`props should render correctly 1`] = `
   }
 }
 
-<label
-  class="components-truncate components-text components-control-label emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlLabel"
->
-  Label
-</label>
+<div>
+  <label
+    class="components-truncate components-text components-control-label emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlLabel"
+  >
+    Label
+  </label>
+</div>
 `;
 
 exports[`props should render no truncate 1`] = `
@@ -79,13 +81,15 @@ exports[`props should render no truncate 1`] = `
   }
 }
 
-<label
-  class="components-truncate components-text components-control-label emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlLabel"
->
-  Label
-</label>
+<div>
+  <label
+    class="components-truncate components-text components-control-label emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlLabel"
+  >
+    Label
+  </label>
+</div>
 `;
 
 exports[`props should render size 1`] = `
@@ -125,11 +129,13 @@ exports[`props should render size 1`] = `
   }
 }
 
-<label
-  class="components-truncate components-text components-control-label emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlLabel"
->
-  Label
-</label>
+<div>
+  <label
+    class="components-truncate components-text components-control-label emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlLabel"
+  >
+    Label
+  </label>
+</div>
 `;

package/src/ui/control-label/test/index.js

@@ -12,7 +12,7 @@ describe( 'props', () => {
 	test( 'should render correctly', () => {
 		const { container } = render( <ControlLabel>Label</ControlLabel> );
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render htmlFor', () => {
@@ -28,7 +28,7 @@ describe( 'props', () => {
 			<ControlLabel size="small">Label</ControlLabel>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render no truncate', () => {
@@ -36,6 +36,6 @@ describe( 'props', () => {
 			<ControlLabel truncate={ false }>Label</ControlLabel>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/ui/form-group/test/__snapshots__/index.js.snap

@@ -38,23 +38,25 @@ exports[`props should render alignLabel 1`] = `
   }
 }
 
-<div
-  class="components-form-group emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="FormGroup"
->
-  <label
-    class="components-truncate components-text components-control-label emotion-2 emotion-1"
+<div>
+  <div
+    class="components-form-group emotion-0 emotion-1"
     data-wp-c16t="true"
-    data-wp-component="ControlLabel"
-    for="fname"
+    data-wp-component="FormGroup"
   >
-    First name
-  </label>
-  <input
-    id="fname"
-    type="text"
-  />
+    <label
+      class="components-truncate components-text components-control-label emotion-2 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ControlLabel"
+      for="fname"
+    >
+      First name
+    </label>
+    <input
+      id="fname"
+      type="text"
+    />
+  </div>
 </div>
 `;
 
@@ -96,22 +98,24 @@ exports[`props should render vertically 1`] = `
   }
 }
 
-<div
-  class="components-form-group emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="FormGroup"
->
-  <label
-    class="components-truncate components-text components-control-label emotion-2 emotion-1"
+<div>
+  <div
+    class="components-form-group emotion-0 emotion-1"
     data-wp-c16t="true"
-    data-wp-component="ControlLabel"
-    for="fname"
+    data-wp-component="FormGroup"
   >
-    First name
-  </label>
-  <input
-    id="fname"
-    type="text"
-  />
+    <label
+      class="components-truncate components-text components-control-label emotion-2 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ControlLabel"
+      for="fname"
+    >
+      First name
+    </label>
+    <input
+      id="fname"
+      type="text"
+    />
+  </div>
 </div>
 `;

package/src/ui/form-group/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -20,44 +20,43 @@ const TextInput = ( { id: idProp, ...props } ) => {
 /* eslint-disable no-restricted-syntax */
 describe( 'props', () => {
 	test( 'should render correctly', () => {
-		const { container } = render(
+		render(
 			<FormGroup id="fname" label="First name">
 				<TextInput />
 			</FormGroup>
 		);
 
-		const label = container.querySelector( 'label' );
-		expect( label ).toHaveAttribute( 'for', 'fname' );
-		expect( label ).toContainHTML( 'First name' );
-
-		const input = container.querySelector( 'input' );
-		expect( input ).toHaveAttribute( 'id', 'fname' );
+		expect(
+			screen.getByRole( 'textbox', { name: 'First name' } )
+		).toBeVisible();
 	} );
 
 	test( 'should render label without prop correctly', () => {
-		const { container } = render(
+		render(
 			<FormGroup id="fname">
 				<ControlLabel htmlFor="fname">First name</ControlLabel>
 				<TextInput />
 			</FormGroup>
 		);
 
-		const label = container.querySelector( 'label' );
-		expect( label ).toHaveAttribute( 'for', 'fname' );
-		expect( label ).toContainHTML( 'First name' );
+		expect(
+			screen.getByRole( 'textbox', { name: 'First name' } )
+		).toBeVisible();
 	} );
 
 	test( 'should render labelHidden', () => {
-		const { container } = render(
+		render(
 			<FormGroup labelHidden id="fname" label="First name">
 				<TextInput />
 			</FormGroup>
 		);
 
-		const label = container.querySelector( 'label' );
-		expect( label ).toContainHTML( 'First name' );
-		// @todo: Refactor this after adding next VisuallyHidden.
-		expect( label ).toHaveClass( 'components-visually-hidden' );
+		expect(
+			screen.getByRole( 'textbox', { name: 'First name' } )
+		).toBeVisible();
+		expect( screen.getByText( 'First name' ) ).toHaveClass(
+			'components-visually-hidden'
+		);
 	} );
 
 	test( 'should render alignLabel', () => {
@@ -67,7 +66,7 @@ describe( 'props', () => {
 			</FormGroup>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render vertically', () => {
@@ -77,7 +76,7 @@ describe( 'props', () => {
 			</FormGroup>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );
 /* eslint-enable no-restricted-syntax */

package/src/ui/shortcut/test/__snapshots__/index.js.snap

@@ -10,4 +10,4 @@ exports[`Shortcut should render a span with the shortcut text 1`] = `
 </span>
 `;
 
-exports[`Shortcut should render null when no shortcut is provided 1`] = `null`;
+exports[`Shortcut should render null when no shortcut is provided 1`] = `<div />`;

package/src/ui/shortcut/test/index.js

@@ -11,7 +11,7 @@ import { Shortcut } from '..';
 describe( 'Shortcut', () => {
 	it( 'should render null when no shortcut is provided', () => {
 		const { container } = render( <Shortcut /> );
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should render a span with the shortcut text', () => {