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

package/src/components/post-publish-panel/test/index.js

@@ -1,7 +1,14 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { select } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -9,39 +16,49 @@ import { shallow } from 'enzyme';
 import { PostPublishPanel } from '../index';
 
 describe( 'PostPublishPanel', () => {
+	jest.spyOn( select( coreStore ), 'getPostType' ).mockReturnValue( {
+		labels: {
+			singular_name: 'post',
+		},
+	} );
+
+	jest.spyOn( select( editorStore ), 'getCurrentPost' ).mockReturnValue( {
+		link: 'https://wordpress.local/sample-page/',
+	} );
+
 	it( 'should render the pre-publish panel if the post is not saving, published or scheduled', () => {
-		const wrapper = shallow(
+		const { container } = render(
 			<PostPublishPanel
 				isPublished={ false }
 				isScheduled={ false }
 				isSaving={ false }
 			/>
 		);
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should render the pre-publish panel if post status is scheduled but date is before now', () => {
-		const wrapper = shallow(
-			<PostPublishPanel isScheduled={ true } isBeingScheduled={ false } />
+		const { container } = render(
+			<PostPublishPanel isScheduled isBeingScheduled={ false } />
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should render the spinner if the post is being saved', () => {
-		const wrapper = shallow( <PostPublishPanel isSaving={ true } /> );
-		expect( wrapper ).toMatchSnapshot();
+		const { container } = render( <PostPublishPanel isSaving /> );
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should render the post-publish panel if the post is published', () => {
-		const wrapper = shallow( <PostPublishPanel isPublished={ true } /> );
-		expect( wrapper ).toMatchSnapshot();
+		const { container } = render( <PostPublishPanel isPublished /> );
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should render the post-publish panel if the post is scheduled', () => {
-		const wrapper = shallow(
-			<PostPublishPanel isScheduled={ true } isBeingScheduled={ true } />
+		const { container } = render(
+			<PostPublishPanel isScheduled isBeingScheduled />
 		);
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/components/post-saved-state/test/__snapshots__/index.js.snap

@@ -1,34 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PostSavedState returns a disabled button if the post is not saveable 1`] = `
-<ForwardRef(Button)
-  aria-disabled={true}
-  icon={
-    <SVG
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <Path
-        d="M17.3 10.1c0-2.5-2.1-4.4-4.8-4.4-2.2 0-4.1 1.4-4.6 3.3h-.2C5.7 9 4 10.7 4 12.8c0 2.1 1.7 3.8 3.7 3.8h9c1.8 0 3.2-1.5 3.2-3.3.1-1.6-1.1-2.9-2.6-3.2zm-.5 5.1h-4v-2.4L14 14l1-1-3-3-3 3 1 1 1.2-1.2v2.4H7.7c-1.2 0-2.2-1.1-2.2-2.3s1-2.4 2.2-2.4H9l.3-1.1c.4-1.3 1.7-2.2 3.2-2.2 1.8 0 3.3 1.3 3.3 2.9v1.3l1.3.2c.8.1 1.4.9 1.4 1.8 0 1-.8 1.8-1.7 1.8z"
-      />
-    </SVG>
-  }
-  label="Save draft"
-  shortcut="Ctrl+S"
-/>
+<button
+  aria-disabled="true"
+  aria-label="Save draft"
+  class="components-button has-text has-icon"
+  type="button"
+>
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M17.3 10.1c0-2.5-2.1-4.4-4.8-4.4-2.2 0-4.1 1.4-4.6 3.3h-.2C5.7 9 4 10.7 4 12.8c0 2.1 1.7 3.8 3.7 3.8h9c1.8 0 3.2-1.5 3.2-3.3.1-1.6-1.1-2.9-2.6-3.2zm-.5 5.1h-4v-2.4L14 14l1-1-3-3-3 3 1 1 1.2-1.2v2.4H7.7c-1.2 0-2.2-1.1-2.2-2.3s1-2.4 2.2-2.4H9l.3-1.1c.4-1.3 1.7-2.2 3.2-2.2 1.8 0 3.3 1.3 3.3 2.9v1.3l1.3.2c.8.1 1.4.9 1.4 1.8 0 1-.8 1.8-1.7 1.8z"
+    />
+  </svg>
+</button>
 `;
 
-exports[`PostSavedState returns a switch to draft link if the post is published 1`] = `<WithSelect(WithDispatch(PostSwitchToDraftButton)) />`;
+exports[`PostSavedState returns a switch to draft link if the post is published 1`] = `
+<button
+  class="components-button editor-post-switch-to-draft is-tertiary"
+  type="button"
+>
+  Switch to draft
+</button>
+`;
 
 exports[`PostSavedState should return Save button if edits to be saved 1`] = `
-<ForwardRef(Button)
-  aria-disabled={false}
-  className="editor-post-save-draft"
-  label="Save draft"
-  onClick={[Function]}
-  shortcut="Ctrl+S"
-  variant="tertiary"
+<button
+  aria-disabled="false"
+  aria-label="Save draft"
+  class="components-button editor-post-save-draft is-tertiary"
+  type="button"
 >
   Save draft
-</ForwardRef(Button)>
+</button>
 `;

package/src/components/post-saved-state/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { mount, shallow } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -19,6 +20,7 @@ const mockSavePost = jest.fn();
 jest.mock( '@wordpress/data/src/components/use-dispatch', () => {
 	return {
 		useDispatch: () => ( { savePost: mockSavePost } ),
+		useDispatchWithMap: jest.fn(),
 	};
 } );
 
@@ -34,6 +36,10 @@ jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => {
 	return mock;
 } );
 
+jest.mock( '@wordpress/icons/src/icon', () => () => (
+	<div data-testid="test-icon" />
+) );
+
 describe( 'PostSavedState', () => {
 	it( 'should display saving while save in progress, even if not saveable', () => {
 		useSelect.mockImplementation( () => ( {
@@ -43,9 +49,9 @@ describe( 'PostSavedState', () => {
 			isSaving: true,
 		} ) );
 
-		const wrapper = mount( <PostSavedState /> );
+		render( <PostSavedState /> );
 
-		expect( wrapper.text() ).toContain( 'Saving' );
+		expect( screen.getByText( 'Saving' ) ).toBeVisible();
 	} );
 
 	it( 'returns a disabled button if the post is not saveable', () => {
@@ -56,9 +62,9 @@ describe( 'PostSavedState', () => {
 			isSaving: false,
 		} ) );
 
-		const wrapper = shallow( <PostSavedState /> );
+		render( <PostSavedState /> );
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( screen.getByRole( 'button' ) ).toMatchSnapshot();
 	} );
 
 	it( 'returns a switch to draft link if the post is published', () => {
@@ -66,9 +72,9 @@ describe( 'PostSavedState', () => {
 			isPublished: true,
 		} ) );
 
-		const wrapper = shallow( <PostSavedState /> );
+		render( <PostSavedState /> );
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( screen.getByRole( 'button' ) ).toMatchSnapshot();
 	} );
 
 	it( 'should return Saved text if not new and not dirty', () => {
@@ -79,13 +85,19 @@ describe( 'PostSavedState', () => {
 			isSaving: false,
 		} ) );
 
-		const wrapper = shallow( <PostSavedState /> );
+		render( <PostSavedState /> );
+
+		const button = screen.getByRole( 'button' );
 
-		expect( wrapper.childAt( 0 ).name() ).toBe( 'Icon' );
-		expect( wrapper.childAt( 1 ).text() ).toBe( 'Saved' );
+		expect( within( button ).getByTestId( 'test-icon' ) ).toBeVisible();
+		expect( within( button ).getByText( 'Saved' ) ).toBeVisible();
 	} );
 
-	it( 'should return Save button if edits to be saved', () => {
+	it( 'should return Save button if edits to be saved', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		useSelect.mockImplementation( () => ( {
 			isDirty: true,
 			isNew: false,
@@ -96,11 +108,16 @@ describe( 'PostSavedState', () => {
 		// Simulate the viewport being considered large.
 		useViewportMatch.mockImplementation( () => true );
 
-		const wrapper = shallow( <PostSavedState /> );
+		render( <PostSavedState /> );
+
+		const button = screen.getByRole( 'button' );
+
+		expect( button ).toMatchSnapshot();
+
+		await user.click( button );
 
-		expect( wrapper ).toMatchSnapshot();
-		wrapper.simulate( 'click', {} );
 		expect( mockSavePost ).toHaveBeenCalled();
+
 		// Regression: Verify the event object is not passed to prop callback.
 		expect( mockSavePost.mock.calls[ 0 ] ).toEqual( [] );
 	} );

package/src/components/post-schedule/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalGetSettings } from '@wordpress/date';
+import { getSettings } from '@wordpress/date';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
 import { useState, useMemo } from '@wordpress/element';
@@ -61,7 +61,7 @@ export default function PostSchedule( { onClose } ) {
 		[ eventsByPostType ]
 	);
 
-	const settings = __experimentalGetSettings();
+	const settings = getSettings();
 
 	// To know if the current timezone is a 12 hour time with look for "a" in the time format
 	// We also make sure this a is not escaped by a "/"

package/src/components/post-schedule/label.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
-import { __experimentalGetSettings, getDate, dateI18n } from '@wordpress/date';
+import { getSettings, getDate, dateI18n } from '@wordpress/date';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -95,7 +95,7 @@ export function getPostScheduleLabel(
 }
 
 function getTimezoneAbbreviation() {
-	const { timezone } = __experimentalGetSettings();
+	const { timezone } = getSettings();
 
 	if ( timezone.abbr && isNaN( Number( timezone.abbr ) ) ) {
 		return timezone.abbr;
@@ -106,7 +106,7 @@ function getTimezoneAbbreviation() {
 }
 
 function isTimezoneSameAsSiteTimezone( date ) {
-	const { timezone } = __experimentalGetSettings();
+	const { timezone } = getSettings();
 
 	const siteOffset = Number( timezone.offset );
 	const dateOffset = -1 * ( date.getTimezoneOffset() / 60 );

package/src/components/post-schedule/test/label.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalGetSettings, setSettings } from '@wordpress/date';
+import { getSettings, setSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -15,7 +15,7 @@ describe( 'getFullPostScheduleLabel', () => {
 	} );
 
 	it( "should show site's timezone abbr", () => {
-		const settings = __experimentalGetSettings();
+		const settings = getSettings();
 
 		setSettings( {
 			...settings,
@@ -29,7 +29,7 @@ describe( 'getFullPostScheduleLabel', () => {
 	} );
 
 	it( "should show site's timezone offset", () => {
-		const settings = __experimentalGetSettings();
+		const settings = getSettings();
 
 		setSettings( {
 			...settings,
@@ -67,7 +67,7 @@ describe( 'getPostScheduleLabel', () => {
 	} );
 
 	it( "should show today if date is same day as now and user timezone equals site's timezone", () => {
-		const settings = __experimentalGetSettings();
+		const settings = getSettings();
 
 		setSettings( {
 			...settings,
@@ -86,7 +86,7 @@ describe( 'getPostScheduleLabel', () => {
 	} );
 
 	it( "should show tomorrow if date is same day as now + 1 day and user timezone equals site's timezone", () => {
-		const settings = __experimentalGetSettings();
+		const settings = getSettings();
 
 		setSettings( {
 			...settings,
@@ -105,7 +105,7 @@ describe( 'getPostScheduleLabel', () => {
 	} );
 
 	it( "should hide year if date is same year as now and user timezone equals site's timezone", () => {
-		const settings = __experimentalGetSettings();
+		const settings = getSettings();
 
 		setSettings( {
 			...settings,
@@ -124,7 +124,7 @@ describe( 'getPostScheduleLabel', () => {
 	} );
 
 	it( "should show year if date is not same year as now and user timezone equals site's timezone", () => {
-		const settings = __experimentalGetSettings();
+		const settings = getSettings();
 
 		setSettings( {
 			...settings,

package/src/components/post-slug/test/index.js

@@ -1,12 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-
-/**
- * WordPress dependencies
- */
-import { TextControl } from '@wordpress/components';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -14,28 +10,19 @@ import { TextControl } from '@wordpress/components';
 import { PostSlug } from '../';
 
 describe( 'PostSlug', () => {
-	describe( '#render()', () => {
-		it( 'should update internal slug', () => {
-			const wrapper = shallow( <PostSlug postSlug="index" /> );
-
-			wrapper.find( TextControl ).prop( 'onChange' )( 'single' );
-
-			expect( wrapper.state().editedSlug ).toEqual( 'single' );
+	it( 'should update slug with sanitized input', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const onUpdateSlug = jest.fn();
 
-		it( 'should update slug', () => {
-			const onUpdateSlug = jest.fn();
-			const wrapper = shallow(
-				<PostSlug postSlug="index" onUpdateSlug={ onUpdateSlug } />
-			);
+		render( <PostSlug postSlug="index" onUpdateSlug={ onUpdateSlug } /> );
 
-			wrapper.find( TextControl ).prop( 'onBlur' )( {
-				target: {
-					value: 'single',
-				},
-			} );
+		const input = screen.getByRole( 'textbox', { name: 'Slug' } );
+		await user.clear( input );
+		await user.type( input, 'Foo Bar-Baz 9!' );
+		input.blur();
 
-			expect( onUpdateSlug ).toHaveBeenCalledWith( 'single' );
-		} );
+		expect( onUpdateSlug ).toHaveBeenCalledWith( 'foo-bar-baz-9' );
 	} );
 } );

package/src/components/post-taxonomies/flat-term-selector.js

@@ -13,14 +13,13 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDebounce } from '@wordpress/compose';
 import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
 import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
-import { unescapeString, unescapeTerm, unescapeTerms } from '../../utils/terms';
+import { unescapeString, unescapeTerm } from '../../utils/terms';
 import MostUsedTerms from './most-used-terms';
 
 /**
@@ -64,24 +63,14 @@ function findOrCreateTerm( termName, restBase, namespace ) {
 		data: { name: escapedTermName },
 	} )
 		.catch( ( error ) => {
-			const errorCode = error.code;
-			if ( errorCode === 'term_exists' ) {
-				// If the terms exist, fetch it instead of creating a new one.
-				const addRequest = apiFetch( {
-					path: addQueryArgs( `/${ namespace }/${ restBase }`, {
-						...DEFAULT_QUERY,
-						search: escapedTermName,
-					} ),
-				} ).then( unescapeTerms );
-
-				return addRequest.then( ( searchResult ) => {
-					return find( searchResult, ( result ) =>
-						isSameTermName( result.name, termName )
-					);
-				} );
+			if ( error.code !== 'term_exists' ) {
+				return Promise.reject( error );
 			}
 
-			return Promise.reject( error );
+			return Promise.resolve( {
+				id: error.data.term_id,
+				name: termName,
+			} );
 		} )
 		.then( unescapeTerm );
 }

package/src/components/post-taxonomies/test/index.js

@@ -1,7 +1,14 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { select } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -9,49 +16,104 @@ import { shallow } from 'enzyme';
 import { PostTaxonomies } from '../';
 
 describe( 'PostTaxonomies', () => {
+	const genresTaxonomy = {
+		name: 'Genres',
+		slug: 'genre',
+		types: [ 'book' ],
+		hierarchical: true,
+		rest_base: 'genres',
+		visibility: {
+			show_ui: true,
+		},
+		labels: {
+			add_new_item: 'Add new genre',
+		},
+	};
+
+	const categoriesTaxonomy = {
+		name: 'Categories',
+		slug: 'category',
+		types: [ 'post', 'page' ],
+		hierarchical: true,
+		rest_base: 'categories',
+		visibility: {
+			show_ui: true,
+		},
+		labels: {
+			add_new_item: 'Add new category',
+		},
+	};
+
+	beforeEach( () => {
+		jest.spyOn( select( editorStore ), 'getCurrentPost' ).mockReturnValue( {
+			_links: {
+				'wp:action-create-categories': [
+					{
+						href: 'http://localhost:8889/index.php?rest_route=/wp/v2/foo/create-categories',
+					},
+				],
+				'wp:action-create-genres': [
+					{
+						href: 'http://localhost:8889/index.php?rest_route=/wp/v2/create-genres',
+					},
+				],
+				'wp:action-assign-categories': [
+					{
+						href: 'http://localhost:8889/index.php?rest_route=/wp/v2/foo/assign-categories',
+					},
+				],
+				'wp:action-assign-genres': [
+					{
+						href: 'http://localhost:8889/index.php?rest_route=/wp/v2/assign-genres',
+					},
+				],
+			},
+		} );
+
+		jest.spyOn( select( coreStore ), 'getTaxonomy' ).mockImplementation(
+			( slug ) => {
+				switch ( slug ) {
+					case 'category': {
+						return categoriesTaxonomy;
+					}
+					case 'genre': {
+						return genresTaxonomy;
+					}
+				}
+			}
+		);
+	} );
+
 	it( 'should render no children if taxonomy data not available', () => {
 		const taxonomies = {};
 
-		const wrapper = shallow(
+		const { container } = render(
 			<PostTaxonomies postType="page" taxonomies={ taxonomies } />
 		);
 
-		expect( wrapper.at( 0 ) ).toHaveLength( 0 );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should render taxonomy components for taxonomies assigned to post type', () => {
-		const genresTaxonomy = {
-			name: 'Genres',
-			slug: 'genre',
-			types: [ 'book' ],
-			hierarchical: true,
-			rest_base: 'genres',
-			visibility: {
-				show_ui: true,
-			},
-		};
-
-		const categoriesTaxonomy = {
-			name: 'Categories',
-			slug: 'category',
-			types: [ 'post', 'page' ],
-			hierarchical: true,
-			rest_base: 'categories',
-			visibility: {
-				show_ui: true,
-			},
-		};
-
-		const wrapperOne = shallow(
+		const { rerender } = render(
 			<PostTaxonomies
 				postType="book"
 				taxonomies={ [ genresTaxonomy, categoriesTaxonomy ] }
 			/>
 		);
 
-		expect( wrapperOne ).toHaveLength( 1 );
+		expect( screen.getByRole( 'group', { name: 'Genres' } ) ).toBeVisible();
+		expect(
+			screen.queryByRole( 'group', { name: 'Categories' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.getByRole( 'button', { name: 'Add new genre' } )
+		).toBeVisible();
+		expect(
+			screen.queryByRole( 'button', { name: 'Add new category' } )
+		).not.toBeInTheDocument();
 
-		const wrapperTwo = shallow(
+		rerender(
 			<PostTaxonomies
 				postType="book"
 				taxonomies={ [
@@ -64,28 +126,29 @@ describe( 'PostTaxonomies', () => {
 			/>
 		);
 
-		expect( wrapperTwo ).toHaveLength( 2 );
+		expect( screen.getByRole( 'group', { name: 'Genres' } ) ).toBeVisible();
+		expect(
+			screen.getByRole( 'group', { name: 'Categories' } )
+		).toBeVisible();
+		expect(
+			screen.getByRole( 'button', { name: 'Add new genre' } )
+		).toBeVisible();
+		expect(
+			screen.getByRole( 'button', { name: 'Add new category' } )
+		).toBeVisible();
 	} );
 
 	it( 'should not render taxonomy components that hide their ui', () => {
-		const genresTaxonomy = {
-			name: 'Genres',
-			slug: 'genre',
-			types: [ 'book' ],
-			hierarchical: true,
-			rest_base: 'genres',
-			visibility: {
-				show_ui: true,
-			},
-		};
-
-		const wrapperOne = shallow(
+		const { rerender } = render(
 			<PostTaxonomies postType="book" taxonomies={ [ genresTaxonomy ] } />
 		);
 
-		expect( wrapperOne.at( 0 ) ).toHaveLength( 1 );
+		expect( screen.getByRole( 'group', { name: 'Genres' } ) ).toBeVisible();
+		expect(
+			screen.getByRole( 'button', { name: 'Add new genre' } )
+		).toBeVisible();
 
-		const wrapperTwo = shallow(
+		rerender(
 			<PostTaxonomies
 				postType="book"
 				taxonomies={ [
@@ -97,6 +160,11 @@ describe( 'PostTaxonomies', () => {
 			/>
 		);
 
-		expect( wrapperTwo.at( 0 ) ).toHaveLength( 0 );
+		expect(
+			screen.queryByRole( 'group', { name: 'Genres' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'button', { name: 'Add new genre' } )
+		).not.toBeInTheDocument();
 	} );
 } );