Nux: Refactor DotTip tests to @testing-library/react (#43768)

packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap

@@ -1,38 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DotTip should render correctly 1`] = `
-<ForwardRef(Popover)
+<div
   aria-label="Editor tips"
-  className="nux-dot-tip"
-  focusOnMount="container"
-  onClick={[Function]}
-  onFocusOutside={[Function]}
-  position="middle right"
+  class="components-popover nux-dot-tip"
   role="dialog"
+  style="position: absolute; opacity: 0; transform: translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0;"
+  tabindex="-1"
 >
-  <p>
-    It looks like you’re writing a letter. Would you like help?
-  </p>
-  <p>
-    <ForwardRef(Button)
-      variant="link"
+  <div
+    class="components-popover__content"
+  >
+    <p>
+      It looks like you’re writing a letter. Would you like help?
+    </p>
+    <p>
+      <button
+        class="components-button is-link"
+        type="button"
+      >
+        Got it
+      </button>
+    </p>
+    <button
+      aria-label="Disable tips"
+      class="components-button nux-dot-tip__disable has-icon"
+      type="button"
     >
-      Got it
-    </ForwardRef(Button)>
-  </p>
-  <ForwardRef(Button)
-    className="nux-dot-tip__disable"
-    icon={
-      <SVG
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="24"
         viewBox="0 0 24 24"
+        width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <Path
+        <path
           d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"
         />
-      </SVG>
-    }
-    label="Disable tips"
-  />
-</ForwardRef(Popover)>
+      </svg>
+    </button>
+  </div>
+</div>
 `;

packages/nux/src/components/dot-tip/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -12,48 +13,58 @@ const noop = () => {};
 
 describe( 'DotTip', () => {
 	it( 'should not render anything if invisible', () => {
-		const wrapper = shallow(
+		render(
 			<DotTip>
 				It looks like you’re writing a letter. Would you like help?
 			</DotTip>
 		);
-		expect( wrapper.isEmptyRender() ).toBe( true );
+
+		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render correctly', () => {
-		const wrapper = shallow(
+		render(
 			<DotTip isVisible setTimeout={ noop }>
 				It looks like you’re writing a letter. Would you like help?
 			</DotTip>
 		);
-		expect( wrapper ).toMatchSnapshot();
+
+		expect( screen.getByRole( 'dialog' ) ).toMatchSnapshot();
 	} );
 
-	it( 'should call onDismiss when the dismiss button is clicked', () => {
+	it( 'should call onDismiss when the dismiss button is clicked', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onDismiss = jest.fn();
-		const wrapper = shallow(
+
+		render(
 			<DotTip isVisible onDismiss={ onDismiss } setTimeout={ noop }>
 				It looks like you’re writing a letter. Would you like help?
 			</DotTip>
 		);
-		wrapper
-			.find( 'ForwardRef(Button)[children="Got it"]' )
-			.first()
-			.simulate( 'click' );
+
+		await user.click( screen.getByRole( 'button', { name: 'Got it' } ) );
+
 		expect( onDismiss ).toHaveBeenCalled();
 	} );
 
-	it( 'should call onDisable when the X button is clicked', () => {
+	it( 'should call onDisable when the X button is clicked', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onDisable = jest.fn();
-		const wrapper = shallow(
+
+		render(
 			<DotTip isVisible onDisable={ onDisable } setTimeout={ noop }>
 				It looks like you’re writing a letter. Would you like help?
 			</DotTip>
 		);
-		wrapper
-			.find( 'ForwardRef(Button)[label="Disable tips"]' )
-			.first()
-			.simulate( 'click' );
+
+		await user.click(
+			screen.getByRole( 'button', { name: 'Disable tips' } )
+		);
+
 		expect( onDisable ).toHaveBeenCalled();
 	} );
 } );