@wordpress/components 22.0.0 → 23.0.0

package/src/button/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -76,20 +76,20 @@ describe( 'Button', () => {
 			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-pressed' );
 		} );
 
-		it( 'should render a button element with has-text when children are passed', async () => {
+		it( 'should render a button element with has-text when children are passed', () => {
 			render( <Button icon={ plusCircle }>Children</Button> );
-			await screen.getByRole( 'button' ).focus();
+			act( () => screen.getByRole( 'button' ).focus() );
 			expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' );
 		} );
 
-		it( 'should render a button element without has-text when children are not passed', async () => {
+		it( 'should render a button element without has-text when children are not passed', () => {
 			render( <Button icon={ plusCircle }></Button> );
 			expect( screen.getByRole( 'button' ) ).not.toHaveClass(
 				'has-text'
 			);
 		} );
 
-		it( 'should render a button element without has-text when children are empty fragment', async () => {
+		it( 'should render a button element without has-text when children are empty fragment', () => {
 			render(
 				<Button icon={ plusCircle }>
 					<></>
@@ -100,7 +100,7 @@ describe( 'Button', () => {
 			);
 		} );
 
-		it( 'should render a button element without has-text when a button wrapped in Tooltip', async () => {
+		it( 'should render a button element without has-text when a button wrapped in Tooltip', () => {
 			render(
 				<Tooltip text="Help text">
 					<Button icon={ plusCircle } />
@@ -184,10 +184,15 @@ describe( 'Button', () => {
 
 		it( 'should add an aria-label when the label property is used, with Tooltip wrapper', async () => {
 			render( <Button icon={ plusCircle } label="WordPress" /> );
+			// Wait for the `floating-ui` effects in `Tooltip`/`Popover` to finish running
+			// See also: https://floating-ui.com/docs/react-dom#testing
+			await act( () => Promise.resolve() );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			await act( () => {
+				screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			} );
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );
@@ -218,15 +223,18 @@ describe( 'Button', () => {
 					icon={ plusCircle }
 				/>
 			);
+			await act( () => Promise.resolve() );
 
 			expect( screen.queryByText( 'Label' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'Label' } ).focus();
+			await act( async () => {
+				screen.getByRole( 'button', { name: 'Label' } ).focus();
+			} );
 
 			expect( screen.getByText( 'Label' ) ).toBeVisible();
 		} );
 
-		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', () => {
+		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', async () => {
 			render(
 				<Button
 					label="Label"
@@ -237,6 +245,7 @@ describe( 'Button', () => {
 					Children
 				</Button>
 			);
+			await act( () => Promise.resolve() );
 
 			expect(
 				screen.getByRole( 'button', {
@@ -245,7 +254,7 @@ describe( 'Button', () => {
 			).toBeVisible();
 		} );
 
-		it( 'should allow tooltip disable', async () => {
+		it( 'should allow tooltip disable', () => {
 			render(
 				<Button
 					icon={ plusCircle }
@@ -259,7 +268,7 @@ describe( 'Button', () => {
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await button.focus();
+			act( () => button.focus() );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 		} );
@@ -268,15 +277,18 @@ describe( 'Button', () => {
 			render(
 				<Button icon={ plusCircle } label="WordPress" children={ [] } />
 			);
+			await act( () => Promise.resolve() );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			await act( async () => {
+				screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			} );
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );
 
-		it( 'should not show the tooltip when icon and children defined', async () => {
+		it( 'should not show the tooltip when icon and children defined', () => {
 			render(
 				<Button icon={ plusCircle } label="WordPress">
 					Children
@@ -285,7 +297,9 @@ describe( 'Button', () => {
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			act( () => {
+				screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			} );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 		} );
@@ -296,10 +310,13 @@ describe( 'Button', () => {
 					Children
 				</Button>
 			);
+			await act( () => Promise.resolve() );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			await act( async () => {
+				screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			} );
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );

package/src/card/test/__snapshots__/index.tsx.snap

@@ -209,9 +209,7 @@ Snapshot Diff:
 `;
 
 exports[`Card Card component should render correctly 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": .emotion-0 {
+.emotion-0 {
   background-color: #fff;
   color: #1e1e1e;
   position: relative;
@@ -383,384 +381,82 @@ Object {
   }
 }
 
-<body>
-    <div>
+<div>
+  <div
+    class="components-surface components-card emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Card"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    >
       <div
-        class="components-surface components-card emotion-0 emotion-1"
+        class="components-flex components-card__header components-card-header emotion-4 emotion-1"
         data-wp-c16t="true"
-        data-wp-component="Card"
+        data-wp-component="CardHeader"
       >
-        <div
-          class="emotion-2 emotion-1"
-        >
-          <div
-            class="components-flex components-card__header components-card-header emotion-4 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="CardHeader"
-          >
-            Card Header
-          </div>
-          <div
-            class="components-card__body components-card-body emotion-6 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="CardBody"
-          >
-            Card Body 1
-          </div>
-          <div
-            class="components-card__body components-card-body emotion-6 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="CardBody"
-          >
-            Card Body 2
-          </div>
-          <hr
-            aria-orientation="horizontal"
-            class="components-divider components-card__divider components-card-divider emotion-10 emotion-11"
-            data-wp-c16t="true"
-            data-wp-component="CardDivider"
-            role="separator"
-          />
-          <div
-            class="components-card__body components-card-body emotion-6 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="CardBody"
-          >
-            Card Body 3
-          </div>
-          <div
-            class="components-card__media components-card-media emotion-14 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="CardMedia"
-          >
-            <img
-              alt="Card Media"
-              src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
-            />
-          </div>
-          <div
-            class="components-flex components-card__footer components-card-footer emotion-16 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="CardFooter"
-          >
-            Card Footer
-          </div>
-        </div>
-        <div
-          aria-hidden="true"
-          class="components-elevation emotion-18 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="Elevation"
-        />
-        <div
-          aria-hidden="true"
-          class="components-elevation emotion-18 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="Elevation"
-        />
+        Card Header
       </div>
-    </div>
-  </body>,
-  "container": .emotion-0 {
-  background-color: #fff;
-  color: #1e1e1e;
-  position: relative;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-  outline: none;
-  border-radius: calc(2px - 1px);
-}
-
-.emotion-2 {
-  height: 100%;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-  border-bottom: 1px solid;
-  box-sizing: border-box;
-  border-color: rgba(0, 0, 0, 0.1);
-  padding: calc(4px * 4) calc(4px * 6);
-}
-
-.emotion-4>* {
-  min-width: 0;
-}
-
-.emotion-4:last-child {
-  border-bottom: none;
-}
-
-.emotion-4:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
-}
-
-.emotion-4:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
-}
-
-.emotion-6 {
-  box-sizing: border-box;
-  height: auto;
-  max-height: 100%;
-  padding: calc(4px * 4) calc(4px * 6);
-}
-
-.emotion-6:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
-}
-
-.emotion-6:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
-}
-
-.emotion-10 {
-  border: 0;
-  margin: 0;
-  border-bottom: 1px solid currentColor;
-  height: 0;
-  width: auto;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  border-color: rgba(0, 0, 0, 0.1);
-}
-
-.emotion-14 {
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.emotion-14>img,
-.emotion-14>iframe {
-  display: block;
-  height: auto;
-  max-width: 100%;
-  width: 100%;
-}
-
-.emotion-14:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
-}
-
-.emotion-14:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
-}
-
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-  border-top: 1px solid;
-  box-sizing: border-box;
-  border-color: rgba(0, 0, 0, 0.1);
-  padding: calc(4px * 4) calc(4px * 6);
-}
-
-.emotion-16>* {
-  min-width: 0;
-}
-
-.emotion-16:first-of-type {
-  border-top: none;
-}
-
-.emotion-16:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
-}
-
-.emotion-16:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
-}
-
-.emotion-18 {
-  background: transparent;
-  display: block;
-  margin: 0!important;
-  pointer-events: none;
-  position: absolute;
-  will-change: box-shadow;
-  border-radius: inherit;
-  bottom: 0;
-  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
-  opacity: 1;
-  left: 0;
-  right: 0;
-  top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  border-radius: 2px;
-}
-
-@media ( prefers-reduced-motion: reduce ) {
-  .emotion-18 {
-    transition-duration: 0ms;
-  }
-}
-
-<div>
-    <div
-      class="components-surface components-card emotion-0 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="Card"
-    >
       <div
-        class="emotion-2 emotion-1"
+        class="components-card__body components-card-body emotion-6 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="CardBody"
       >
-        <div
-          class="components-flex components-card__header components-card-header emotion-4 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="CardHeader"
-        >
-          Card Header
-        </div>
-        <div
-          class="components-card__body components-card-body emotion-6 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="CardBody"
-        >
-          Card Body 1
-        </div>
-        <div
-          class="components-card__body components-card-body emotion-6 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="CardBody"
-        >
-          Card Body 2
-        </div>
-        <hr
-          aria-orientation="horizontal"
-          class="components-divider components-card__divider components-card-divider emotion-10 emotion-11"
-          data-wp-c16t="true"
-          data-wp-component="CardDivider"
-          role="separator"
-        />
-        <div
-          class="components-card__body components-card-body emotion-6 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="CardBody"
-        >
-          Card Body 3
-        </div>
-        <div
-          class="components-card__media components-card-media emotion-14 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="CardMedia"
-        >
-          <img
-            alt="Card Media"
-            src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
-          />
-        </div>
-        <div
-          class="components-flex components-card__footer components-card-footer emotion-16 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="CardFooter"
-        >
-          Card Footer
-        </div>
+        Card Body 1
       </div>
       <div
-        aria-hidden="true"
-        class="components-elevation emotion-18 emotion-1"
+        class="components-card__body components-card-body emotion-6 emotion-1"
         data-wp-c16t="true"
-        data-wp-component="Elevation"
+        data-wp-component="CardBody"
+      >
+        Card Body 2
+      </div>
+      <hr
+        aria-orientation="horizontal"
+        class="components-divider components-card__divider components-card-divider emotion-10 emotion-11"
+        data-wp-c16t="true"
+        data-wp-component="CardDivider"
+        role="separator"
       />
       <div
-        aria-hidden="true"
-        class="components-elevation emotion-18 emotion-1"
+        class="components-card__body components-card-body emotion-6 emotion-1"
         data-wp-c16t="true"
-        data-wp-component="Elevation"
-      />
+        data-wp-component="CardBody"
+      >
+        Card Body 3
+      </div>
+      <div
+        class="components-card__media components-card-media emotion-14 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="CardMedia"
+      >
+        <img
+          alt="Card Media"
+          src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
+        />
+      </div>
+      <div
+        class="components-flex components-card__footer components-card-footer emotion-16 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="CardFooter"
+      >
+        Card Footer
+      </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+    <div
+      aria-hidden="true"
+      class="components-elevation emotion-18 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="Elevation"
+    />
+    <div
+      aria-hidden="true"
+      class="components-elevation emotion-18 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="Elevation"
+    />
+  </div>
+</div>
 `;
 
 exports[`Card Card component should show a box shadow when the elevation prop is greater than 0 1`] = `