Test that the Confirm closes when pressing Escape

WordPress · Aug 27, 2021 · 12f0b18 · 12f0b18
1 parent 7d629b8
commit 12f0b18
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 10 deletions.
diff --git a/packages/components/src/confirm/component.tsx b/packages/components/src/confirm/component.tsx
@@ -28,12 +28,10 @@ function Confirm(
 	props: PolymorphicComponentProps< OwnProps, 'div', false >,
 	forwardedRef: Ref< any >
 ) {
-	const {
-		message,
-		onConfirm,
-		onCancel,
-		...otherProps
-	} = useContextSystem( props, 'Confirm' );
+	const { message, onConfirm, onCancel, ...otherProps } = useContextSystem(
+		props,
+		'Confirm'
+	);
 
 	const [ isOpen, setIsOpen ] = useState( true );
 

diff --git a/packages/components/src/confirm/test/__snapshots__/index.js.snap b/packages/components/src/confirm/test/__snapshots__/index.js.snap
@@ -256,6 +256,70 @@ Object {
 }
 `;
 
+exports[`Confirm Confirm component should not render if dialog is closed by pressing Escape 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body
+    class=""
+  >
+    <div />
+    <div />
+  </body>,
+  "container": <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],
+}
+`;
+
 exports[`Confirm Confirm component should render correctly 1`] = `
 Object {
   "asFragment": [Function],

diff --git a/packages/components/src/confirm/test/index.js b/packages/components/src/confirm/test/index.js
@@ -3,7 +3,11 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
+import {
+	render,
+	fireEvent,
+	waitForElementToBeRemoved,
+} from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -63,16 +67,31 @@ describe( 'Confirm', () => {
 				<Confirm onConfirm={ noop } onCancel={ noop } />
 			);
 
-			const frame = wrapper.baseElement.querySelector( '.components-modal__frame.components-confirm' );
+			const frame = wrapper.baseElement.querySelector(
+				'.components-modal__frame.components-confirm'
+			);
 			/**
 			 * The overlay click is handled by detecting an onBlur from the modal frame.
 			 * See the `handeFocusOutside` function in the `ModalFrame` component
 			 * and the `withFocusOutside` HOC for moret details.
 			 */
+			fireEvent.blur( frame );
+
+			await waitForElementToBeRemoved( frame );
+
+			expect( wrapper ).toMatchSnapshot();
+		} );
 
-			fireEvent.blur(frame);
+		it( 'should not render if dialog is closed by pressing Escape', async () => {
+			const wrapper = render(
+				<Confirm onConfirm={ noop } onCancel={ noop } />
+			);
+
+			const frame = wrapper.baseElement.querySelector(
+				'.components-modal__frame.components-confirm'
+			);
 
-			await waitForElementToBeRemoved(frame);
+			fireEvent.keyDown( frame, { keyCode: 27 } );
 
 			expect( wrapper ).toMatchSnapshot();
 		} );