@wordpress/editor 12.14.1-next.d6164808d3.0 → 12.16.0

package/src/components/document-outline/test/__snapshots__/index.js.snap

@@ -1,67 +1,111 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DocumentOutline header blocks present should match snapshot 1`] = `
-<div
-  className="document-outline"
->
-  <ul>
-    <TableOfContentsItem
+<ul>
+  <li
+    class="document-outline__item is-h2"
+  >
+    <a
+      class="document-outline__button"
       href="#block-clientId_0"
-      isValid={true}
-      key="0"
-      level="H2"
     >
-      Heading 2
-    </TableOfContentsItem>
-    <TableOfContentsItem
+      <span
+        aria-hidden="true"
+        class="document-outline__emdash"
+      />
+      <strong
+        class="document-outline__level"
+      >
+        H2
+      </strong>
+      <span
+        class="document-outline__item-content"
+      >
+        Heading 2
+      </span>
+    </a>
+  </li>
+  <li
+    class="document-outline__item is-h3"
+  >
+    <a
+      class="document-outline__button"
       href="#block-clientId_1"
-      isValid={true}
-      key="1"
-      level="H3"
     >
-      Heading 3
-    </TableOfContentsItem>
-  </ul>
-</div>
+      <span
+        aria-hidden="true"
+        class="document-outline__emdash"
+      />
+      <strong
+        class="document-outline__level"
+      >
+        H3
+      </strong>
+      <span
+        class="document-outline__item-content"
+      >
+        Heading 3
+      </span>
+    </a>
+  </li>
+</ul>
 `;
 
 exports[`DocumentOutline header blocks present should render warnings for multiple h1 headings 1`] = `
-<div
-  className="document-outline"
->
-  <ul>
-    <TableOfContentsItem
+<ul>
+  <li
+    class="document-outline__item is-h1 is-invalid"
+  >
+    <a
+      class="document-outline__button"
       href="#block-clientId_0"
-      isValid={false}
-      key="0"
-      level="H1"
     >
-      Heading 1
-      <br
-        key="incorrect-break-multiple-h1"
+      <span
+        aria-hidden="true"
+        class="document-outline__emdash"
       />
-      <em
-        key="incorrect-message-multiple-h1"
+      <strong
+        class="document-outline__level"
       >
-        (Multiple H1 headings are not recommended)
-      </em>
-    </TableOfContentsItem>
-    <TableOfContentsItem
+        H1
+      </strong>
+      <span
+        class="document-outline__item-content"
+      >
+        Heading 1
+        <br />
+        <em>
+          (Multiple H1 headings are not recommended)
+        </em>
+      </span>
+    </a>
+  </li>
+  <li
+    class="document-outline__item is-h1 is-invalid"
+  >
+    <a
+      class="document-outline__button"
       href="#block-clientId_2"
-      isValid={false}
-      key="1"
-      level="H1"
     >
-      Heading 1
-      <br
-        key="incorrect-break-multiple-h1"
+      <span
+        aria-hidden="true"
+        class="document-outline__emdash"
       />
-      <em
-        key="incorrect-message-multiple-h1"
+      <strong
+        class="document-outline__level"
+      >
+        H1
+      </strong>
+      <span
+        class="document-outline__item-content"
       >
-        (Multiple H1 headings are not recommended)
-      </em>
-    </TableOfContentsItem>
-  </ul>
-</div>
+        Heading 1
+        <br />
+        <em>
+          (Multiple H1 headings are not recommended)
+        </em>
+      </span>
+    </a>
+  </li>
+</ul>
 `;

package/src/components/document-outline/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mount, shallow } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -77,9 +77,9 @@ describe( 'DocumentOutline', () => {
 
 	describe( 'no header blocks present', () => {
 		it( 'should not render when no blocks provided', () => {
-			const wrapper = shallow( <DocumentOutline /> );
+			render( <DocumentOutline /> );
 
-			expect( wrapper.html() ).toBe( null );
+			expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument();
 		} );
 
 		it( 'should not render when no heading blocks provided', () => {
@@ -87,9 +87,9 @@ describe( 'DocumentOutline', () => {
 				// Set client IDs to a predictable value.
 				return { ...block, clientId: `clientId_${ index }` };
 			} );
-			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+			render( <DocumentOutline blocks={ blocks } /> );
 
-			expect( wrapper.html() ).toBe( null );
+			expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument();
 		} );
 	} );
 
@@ -99,16 +99,20 @@ describe( 'DocumentOutline', () => {
 				// Set client IDs to a predictable value.
 				return { ...block, clientId: `clientId_${ index }` };
 			} );
-			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+			render( <DocumentOutline blocks={ blocks } /> );
 
-			expect( wrapper ).toMatchSnapshot();
+			expect( screen.getByRole( 'list' ) ).toMatchSnapshot();
 		} );
 
 		it( 'should render an item when only one heading provided', () => {
 			const blocks = [ headingH2 ];
-			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+			render( <DocumentOutline blocks={ blocks } /> );
 
-			expect( wrapper.find( 'TableOfContentsItem' ) ).toHaveLength( 1 );
+			const tableOfContentItems = within(
+				screen.getByRole( 'list' )
+			).getAllByRole( 'listitem' );
+			expect( tableOfContentItems ).toHaveLength( 1 );
+			expect( tableOfContentItems[ 0 ] ).toHaveTextContent( 'Heading 2' );
 		} );
 
 		it( 'should render two items when two headings and some paragraphs provided', () => {
@@ -119,9 +123,11 @@ describe( 'DocumentOutline', () => {
 				headingH3,
 				paragraph,
 			];
-			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+			render( <DocumentOutline blocks={ blocks } /> );
 
-			expect( wrapper.find( 'TableOfContentsItem' ) ).toHaveLength( 2 );
+			expect(
+				within( screen.getByRole( 'list' ) ).getAllByRole( 'listitem' )
+			).toHaveLength( 2 );
 		} );
 
 		it( 'should render warnings for multiple h1 headings', () => {
@@ -131,53 +137,30 @@ describe( 'DocumentOutline', () => {
 					return { ...block, clientId: `clientId_${ index }` };
 				}
 			);
-			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+			render( <DocumentOutline blocks={ blocks } /> );
 
-			expect( wrapper ).toMatchSnapshot();
+			expect( screen.getByRole( 'list' ) ).toMatchSnapshot();
 		} );
 	} );
 
 	describe( 'nested headings', () => {
 		it( 'should render even if the heading is nested', () => {
-			const tableOfContentItemsSelector = 'TableOfContentsItem';
-			const outlineLevelsSelector = '.document-outline__level';
-			const outlineItemContentSelector =
-				'.document-outline__item-content';
-
 			const blocks = [ headingH2, nestedHeading ];
-			const wrapper = mount( <DocumentOutline blocks={ blocks } /> );
+			render( <DocumentOutline blocks={ blocks } /> );
 
 			// Unnested heading and nested heading should appear as items.
-			const tableOfContentItems = wrapper.find(
-				tableOfContentItemsSelector
-			);
+			const tableOfContentItems = within(
+				screen.getByRole( 'list' )
+			).getAllByRole( 'listitem' );
 			expect( tableOfContentItems ).toHaveLength( 2 );
 
 			// Unnested heading test.
-			const firstItemLevels = tableOfContentItems
-				.at( 0 )
-				.find( outlineLevelsSelector );
-			expect( firstItemLevels ).toHaveLength( 1 );
-			expect( firstItemLevels.at( 0 ).text() ).toEqual( 'H2' );
-			expect(
-				tableOfContentItems
-					.at( 0 )
-					.find( outlineItemContentSelector )
-					.text()
-			).toEqual( 'Heading 2' );
+			expect( tableOfContentItems[ 0 ] ).toHaveTextContent( 'H2' );
+			expect( tableOfContentItems[ 0 ] ).toHaveTextContent( 'Heading 2' );
 
 			// Nested heading test.
-			const secondItemLevels = tableOfContentItems
-				.at( 1 )
-				.find( outlineLevelsSelector );
-			expect( secondItemLevels ).toHaveLength( 1 );
-			expect( secondItemLevels.at( 0 ).text() ).toEqual( 'H3' );
-			expect(
-				tableOfContentItems
-					.at( 1 )
-					.find( outlineItemContentSelector )
-					.text()
-			).toEqual( 'Heading 3' );
+			expect( tableOfContentItems[ 1 ] ).toHaveTextContent( 'H3' );
+			expect( tableOfContentItems[ 1 ] ).toHaveTextContent( 'Heading 3' );
 		} );
 	} );
 } );

package/src/components/page-attributes/test/order.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -9,92 +10,84 @@ import { mount } from 'enzyme';
 import { PageAttributesOrder } from '../order';
 
 describe( 'PageAttributesOrder', () => {
-	it( 'should reject invalid input', () => {
-		const onUpdateOrder = jest.fn();
-		const wrapper = mount(
-			<PageAttributesOrder onUpdateOrder={ onUpdateOrder } />
-		);
-
-		wrapper.find( 'input' ).simulate( 'change', {
-			target: {
-				value: 'bad',
-			},
-		} );
-
-		wrapper.find( 'input' ).simulate( 'change', {
-			target: {
-				value: '----+++',
-			},
-		} );
-
-		wrapper.find( 'input' ).simulate( 'change', {
-			target: {
-				value: '-',
-			},
+	/**
+	 * When starting to type inside the spinbutton, select the current value
+	 * in order to override it with the new value afterwards.
+	 */
+	const typeOptions = {
+		initialSelectionStart: 0,
+		initialSelectionEnd: 1,
+	};
+
+	it( 'should reject invalid input', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
 		} );
 
-		wrapper.find( 'input' ).simulate( 'change', {
-			target: {
-				value: '+',
-			},
-		} );
+		const onUpdateOrder = jest.fn();
 
-		wrapper.find( 'input' ).simulate( 'change', {
-			target: {
-				value: '',
-			},
-		} );
+		render( <PageAttributesOrder onUpdateOrder={ onUpdateOrder } /> );
 
-		wrapper.find( 'input' ).simulate( 'change', {
-			target: {
-				value: ' ',
-			},
-		} );
+		const input = screen.getByRole( 'spinbutton', { name: 'Order' } );
+		await user.type( input, 'bad', typeOptions );
+		await user.type( input, '----+++', typeOptions );
+		await user.type( input, '-', typeOptions );
+		await user.type( input, '+', typeOptions );
+		await user.type( input, ' ', typeOptions );
 
 		expect( onUpdateOrder ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should update with zero input', () => {
+	it( 'should update with zero input', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onUpdateOrder = jest.fn();
-		const wrapper = mount(
-			<PageAttributesOrder onUpdateOrder={ onUpdateOrder } />
+
+		render(
+			<PageAttributesOrder order={ 4 } onUpdateOrder={ onUpdateOrder } />
 		);
 
-		wrapper.find( 'input' ).simulate( 'change', {
-			target: {
-				value: 0,
-			},
-		} );
+		const input = screen.getByRole( 'spinbutton', { name: 'Order' } );
+
+		await user.type( input, '0', typeOptions );
 
 		expect( onUpdateOrder ).toHaveBeenCalledWith( 0 );
 	} );
 
-	it( 'should update with valid positive input', () => {
+	it( 'should update with valid positive input', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onUpdateOrder = jest.fn();
-		const wrapper = mount(
-			<PageAttributesOrder onUpdateOrder={ onUpdateOrder } />
-		);
 
-		wrapper.find( 'input' ).simulate( 'change', {
-			target: {
-				value: '4',
-			},
-		} );
+		render( <PageAttributesOrder onUpdateOrder={ onUpdateOrder } /> );
+
+		await user.type(
+			screen.getByRole( 'spinbutton', { name: 'Order' } ),
+			'4',
+			typeOptions
+		);
 
 		expect( onUpdateOrder ).toHaveBeenCalledWith( 4 );
 	} );
 
-	it( 'should update with valid negative input', () => {
+	it( 'should update with valid negative input', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onUpdateOrder = jest.fn();
-		const wrapper = mount(
-			<PageAttributesOrder onUpdateOrder={ onUpdateOrder } />
-		);
 
-		wrapper.find( 'input' ).simulate( 'change', {
-			target: {
-				value: '-1',
-			},
-		} );
+		render( <PageAttributesOrder onUpdateOrder={ onUpdateOrder } /> );
+
+		await user.type(
+			screen.getByRole( 'spinbutton', { name: 'Order' } ),
+			'-1',
+			typeOptions
+		);
 
 		expect( onUpdateOrder ).toHaveBeenCalledWith( -1 );
 	} );

package/src/components/post-featured-image/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { has, get } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -59,7 +59,7 @@ function getMediaDetails( media, postId ) {
 		media.id,
 		postId
 	);
-	if ( has( media, [ 'media_details', 'sizes', defaultSize ] ) ) {
+	if ( defaultSize in ( media?.media_details?.sizes ?? {} ) ) {
 		return {
 			mediaWidth: media.media_details.sizes[ defaultSize ].width,
 			mediaHeight: media.media_details.sizes[ defaultSize ].height,
@@ -74,7 +74,7 @@ function getMediaDetails( media, postId ) {
 		media.id,
 		postId
 	);
-	if ( has( media, [ 'media_details', 'sizes', fallbackSize ] ) ) {
+	if ( fallbackSize in ( media?.media_details?.sizes ?? {} ) ) {
 		return {
 			mediaWidth: media.media_details.sizes[ fallbackSize ].width,
 			mediaHeight: media.media_details.sizes[ fallbackSize ].height,