Editor: Refactor PostSlug tests to @testing-library/react (#43973)

packages/editor/src/components/post-slug/test/index.js

@@ -1,41 +1,28 @@
 /**
  * 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
  */
 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' );
 	} );
 } );