@wordpress/edit-post 6.16.0 → 6.17.0

package/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap

@@ -41,58 +41,55 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
   min-width: 0;
 }
 
-<div
-  className="interface-preferences-modal__option"
->
+<div>
   <div
-    className="components-base-control components-toggle-control emotion-0 emotion-1"
+    class="interface-preferences-modal__option"
   >
     <div
-      className="components-base-control__field emotion-2 emotion-3"
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
     >
       <div
-        className="components-flex components-h-stack emotion-4 emotion-5"
-        data-wp-c16t={true}
-        data-wp-component="HStack"
+        class="components-base-control__field emotion-2 emotion-3"
       >
-        <span
-          className="components-form-toggle is-checked"
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
         >
-          <input
-            checked={true}
-            className="components-form-toggle__input"
-            id="inspector-toggle-control-3"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="components-form-toggle__track"
-          />
           <span
-            className="components-form-toggle__thumb"
+            class="components-form-toggle is-checked"
+          >
+            <input
+              class="components-form-toggle__input"
+              id="inspector-toggle-control-3"
+              type="checkbox"
+            />
+            <span
+              class="components-form-toggle__track"
+            />
+            <span
+              class="components-form-toggle__thumb"
+            />
+          </span>
+          <label
+            class="components-toggle-control__label"
+            for="inspector-toggle-control-3"
           />
-        </span>
-        <label
-          className="components-toggle-control__label"
-          htmlFor="inspector-toggle-control-3"
-        />
+        </div>
       </div>
     </div>
+    <p
+      class="edit-post-preferences-modal__custom-fields-confirmation-message"
+    >
+      A page reload is required for this change. Make sure your content is saved before reloading.
+    </p>
+    <button
+      class="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
+      type="button"
+    >
+      Enable & Reload
+    </button>
   </div>
-  <p
-    className="edit-post-preferences-modal__custom-fields-confirmation-message"
-  >
-    A page reload is required for this change. Make sure your content is saved before reloading.
-  </p>
-  <button
-    aria-describedby={null}
-    className="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
-    disabled={false}
-    onClick={[Function]}
-    type="button"
-  >
-    Enable & Reload
-  </button>
 </div>
 `;
 
@@ -137,41 +134,42 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
   min-width: 0;
 }
 
-<div
-  className="interface-preferences-modal__option"
->
+<div>
   <div
-    className="components-base-control components-toggle-control emotion-0 emotion-1"
+    class="interface-preferences-modal__option"
   >
     <div
-      className="components-base-control__field emotion-2 emotion-3"
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
     >
       <div
-        className="components-flex components-h-stack emotion-4 emotion-5"
-        data-wp-c16t={true}
-        data-wp-component="HStack"
+        class="components-base-control__field emotion-2 emotion-3"
       >
-        <span
-          className="components-form-toggle is-checked"
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
         >
-          <input
-            checked={true}
-            className="components-form-toggle__input"
-            id="inspector-toggle-control-0"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="components-form-toggle__track"
-          />
           <span
-            className="components-form-toggle__thumb"
+            class="components-form-toggle is-checked"
+          >
+            <input
+              checked=""
+              class="components-form-toggle__input"
+              id="inspector-toggle-control-0"
+              type="checkbox"
+            />
+            <span
+              class="components-form-toggle__track"
+            />
+            <span
+              class="components-form-toggle__thumb"
+            />
+          </span>
+          <label
+            class="components-toggle-control__label"
+            for="inspector-toggle-control-0"
           />
-        </span>
-        <label
-          className="components-toggle-control__label"
-          htmlFor="inspector-toggle-control-0"
-        />
+        </div>
       </div>
     </div>
   </div>
@@ -219,58 +217,56 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
   min-width: 0;
 }
 
-<div
-  className="interface-preferences-modal__option"
->
+<div>
   <div
-    className="components-base-control components-toggle-control emotion-0 emotion-1"
+    class="interface-preferences-modal__option"
   >
     <div
-      className="components-base-control__field emotion-2 emotion-3"
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
     >
       <div
-        className="components-flex components-h-stack emotion-4 emotion-5"
-        data-wp-c16t={true}
-        data-wp-component="HStack"
+        class="components-base-control__field emotion-2 emotion-3"
       >
-        <span
-          className="components-form-toggle"
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
         >
-          <input
-            checked={false}
-            className="components-form-toggle__input"
-            id="inspector-toggle-control-2"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="components-form-toggle__track"
-          />
           <span
-            className="components-form-toggle__thumb"
+            class="components-form-toggle"
+          >
+            <input
+              checked=""
+              class="components-form-toggle__input"
+              id="inspector-toggle-control-2"
+              type="checkbox"
+            />
+            <span
+              class="components-form-toggle__track"
+            />
+            <span
+              class="components-form-toggle__thumb"
+            />
+          </span>
+          <label
+            class="components-toggle-control__label"
+            for="inspector-toggle-control-2"
           />
-        </span>
-        <label
-          className="components-toggle-control__label"
-          htmlFor="inspector-toggle-control-2"
-        />
+        </div>
       </div>
     </div>
+    <p
+      class="edit-post-preferences-modal__custom-fields-confirmation-message"
+    >
+      A page reload is required for this change. Make sure your content is saved before reloading.
+    </p>
+    <button
+      class="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
+      type="button"
+    >
+      Disable & Reload
+    </button>
   </div>
-  <p
-    className="edit-post-preferences-modal__custom-fields-confirmation-message"
-  >
-    A page reload is required for this change. Make sure your content is saved before reloading.
-  </p>
-  <button
-    aria-describedby={null}
-    className="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
-    disabled={false}
-    onClick={[Function]}
-    type="button"
-  >
-    Disable & Reload
-  </button>
 </div>
 `;
 
@@ -315,41 +311,41 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
   min-width: 0;
 }
 
-<div
-  className="interface-preferences-modal__option"
->
+<div>
   <div
-    className="components-base-control components-toggle-control emotion-0 emotion-1"
+    class="interface-preferences-modal__option"
   >
     <div
-      className="components-base-control__field emotion-2 emotion-3"
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
     >
       <div
-        className="components-flex components-h-stack emotion-4 emotion-5"
-        data-wp-c16t={true}
-        data-wp-component="HStack"
+        class="components-base-control__field emotion-2 emotion-3"
       >
-        <span
-          className="components-form-toggle"
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
         >
-          <input
-            checked={false}
-            className="components-form-toggle__input"
-            id="inspector-toggle-control-1"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="components-form-toggle__track"
-          />
           <span
-            className="components-form-toggle__thumb"
+            class="components-form-toggle"
+          >
+            <input
+              class="components-form-toggle__input"
+              id="inspector-toggle-control-1"
+              type="checkbox"
+            />
+            <span
+              class="components-form-toggle__track"
+            />
+            <span
+              class="components-form-toggle__thumb"
+            />
+          </span>
+          <label
+            class="components-toggle-control__label"
+            for="inspector-toggle-control-1"
           />
-        </span>
-        <label
-          className="components-toggle-control__label"
-          htmlFor="inspector-toggle-control-1"
-        />
+        </div>
       </div>
     </div>
   </div>

package/src/components/preferences-modal/options/test/enable-custom-fields.js

@@ -1,13 +1,8 @@
 /**
  * External dependencies
  */
-import { default as TestRenderer, act } from 'react-test-renderer';
-
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
-import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -19,42 +14,55 @@ import {
 
 describe( 'EnableCustomFieldsOption', () => {
 	it( 'renders a checked checkbox when custom fields are enabled', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<EnableCustomFieldsOption areCustomFieldsEnabled />
 		);
-		expect( renderer ).toMatchSnapshot();
+
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'renders an unchecked checkbox when custom fields are disabled', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<EnableCustomFieldsOption areCustomFieldsEnabled={ false } />
 		);
-		expect( renderer ).toMatchSnapshot();
+
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'renders an unchecked checkbox and a confirmation message when toggled off', () => {
-		const renderer = new TestRenderer.create(
+	it( 'renders an unchecked checkbox and a confirmation message when toggled off', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		const { container } = render(
 			<EnableCustomFieldsOption areCustomFieldsEnabled />
 		);
-		act( () => {
-			renderer.root.findByType( BaseOption ).props.onChange( false );
-		} );
-		expect( renderer ).toMatchSnapshot();
+
+		await user.click( screen.getByRole( 'checkbox' ) );
+
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'renders a checked checkbox and a confirmation message when toggled on', () => {
-		const renderer = new TestRenderer.create(
+	it( 'renders a checked checkbox and a confirmation message when toggled on', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		const { container } = render(
 			<EnableCustomFieldsOption areCustomFieldsEnabled={ false } />
 		);
-		act( () => {
-			renderer.root.findByType( BaseOption ).props.onChange( true );
-		} );
-		expect( renderer ).toMatchSnapshot();
+
+		await user.click( screen.getByRole( 'checkbox' ) );
+
+		expect( container ).toMatchSnapshot();
 	} );
 } );
 
 describe( 'CustomFieldsConfirmation', () => {
-	it( 'submits the toggle-custom-fields-form', () => {
+	it( 'submits the toggle-custom-fields-form', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const submit = jest.fn();
 		const getElementById = jest
 			.spyOn( document, 'getElementById' )
@@ -62,12 +70,9 @@ describe( 'CustomFieldsConfirmation', () => {
 				submit,
 			} ) );
 
-		const renderer = new TestRenderer.create(
-			<CustomFieldsConfirmation />
-		);
-		act( () => {
-			renderer.root.findByType( Button ).props.onClick();
-		} );
+		render( <CustomFieldsConfirmation /> );
+
+		await user.click( screen.getByRole( 'button' ) );
 
 		expect( getElementById ).toHaveBeenCalledWith(
 			'toggle-custom-fields-form'