test(InnerClickListener): update to RTL (#13117)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 9, 2023 · 84d1a95 · 84d1a95
1 parent 64d1c96
commit 84d1a95
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 73 deletions.
diff --git a/packages/react/src/internal/__tests__/InnerClickListener-test.js b/packages/react/src/internal/__tests__/InnerClickListener-test.js
@@ -7,7 +7,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { mount } from 'enzyme';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import InnerClickListener from '../InnerClickListener';
 
 describe('InnerClickListener', () => {
@@ -42,68 +43,74 @@ describe('InnerClickListener', () => {
     handleRefSpy.mockRestore();
   });
 
-  it('should render', () => {
-    const wrapper = mount(
-      <InnerClickListener refKey="innerRef" onClickOutside={onClickOutside}>
-        <InnerChild />
-      </InnerClickListener>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
+  describe('renders as expected - Component API', () => {
+    it('should render', () => {
+      const { container } = render(
+        <InnerClickListener refKey="innerRef" onClickOutside={onClickOutside}>
+          <InnerChild />
+        </InnerClickListener>
+      );
 
-  it('should call `handleRef` when mounting', () => {
-    mount(
-      <InnerClickListener refKey="innerRef" onClickOutside={onClickOutside}>
-        <InnerChild />
-      </InnerClickListener>
-    );
-    expect(handleRefSpy).toHaveBeenCalledTimes(1);
+      expect(container).toMatchSnapshot();
+    });
   });
 
-  it('should call `onClickOutside` when clicked outside the node that has the ref', () => {
-    const rootNode = document.createElement('div');
-    rootNode.setAttribute('id', 'root');
+  describe('behaves as expected', () => {
+    it('should call `handleRef` when render', () => {
+      render(
+        <InnerClickListener refKey="innerRef" onClickOutside={onClickOutside}>
+          <InnerChild />
+        </InnerClickListener>
+      );
 
-    document.body.appendChild(rootNode);
-
-    mount(
-      <InnerClickListener refKey="innerRef" onClickOutside={onClickOutside}>
-        <InnerChild />
-      </InnerClickListener>,
-      {
-        attachTo: rootNode,
-      }
-    );
+      expect(handleRefSpy).toHaveBeenCalledTimes(1);
+    });
 
-    document.getElementById('2').click();
-    expect(onClickOutside).not.toHaveBeenCalled();
+    it('should call `onClickOutside` when clicked outside the node that has the ref', () => {
+      const rootNode = document.createElement('div');
+      rootNode.setAttribute('id', 'root');
 
-    document.getElementById('1').click();
-    expect(onClickOutside).toHaveBeenCalledTimes(1);
+      document.body.appendChild(rootNode);
 
-    document.dispatchEvent(new MouseEvent('click'));
-    expect(onClickOutside).toHaveBeenCalledTimes(2);
-  });
+      render(
+        <InnerClickListener refKey="innerRef" onClickOutside={onClickOutside}>
+          <InnerChild />
+        </InnerClickListener>,
+        {
+          attachTo: rootNode,
+        }
+      );
 
-  it('should not call `onClickOutside` if click target disappears', () => {
-    const rootNode2 = document.createElement('div');
-    rootNode2.setAttribute('id', 'root2');
+      userEvent.click(screen.getByText('2'));
+      expect(onClickOutside).not.toHaveBeenCalled();
 
-    document.body.appendChild(rootNode2);
+      userEvent.click(screen.getByText('1'));
+      expect(onClickOutside).toHaveBeenCalledTimes(1);
 
-    mount(
-      <InnerClickListener refKey="innerRef" onClickOutside={onClickOutside}>
-        <InnerChild />
-      </InnerClickListener>,
-      {
-        attachTo: rootNode2,
-      }
-    );
+      userEvent.click(screen.getByText('1'));
+      expect(onClickOutside).toHaveBeenCalledTimes(2);
+    });
 
-    document.getElementById('1').addEventListener('click', function () {
-      this.parentNode.removeChild(this);
+    it('should not call `onClickOutside` if click target disappears', () => {
+      const rootNode2 = document.createElement('div');
+      rootNode2.setAttribute('id', 'root2');
+
+      document.body.appendChild(rootNode2);
+
+      render(
+        <InnerClickListener refKey="innerRef" onClickOutside={onClickOutside}>
+          <InnerChild />
+        </InnerClickListener>,
+        {
+          attachTo: rootNode2,
+        }
+      );
+
+      screen.getByText('1').addEventListener('click', function () {
+        this.parentNode.removeChild(this);
+      });
+      userEvent.click(screen.getByText('1'));
+      expect(onClickOutside).not.toHaveBeenCalled();
     });
-    document.getElementById('1').click();
-    expect(onClickOutside).not.toHaveBeenCalled();
   });
 });
diff --git a/packages/react/src/internal/__tests__/__snapshots__/InnerClickListener-test.js.snap b/packages/react/src/internal/__tests__/__snapshots__/InnerClickListener-test.js.snap
@@ -1,25 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InnerClickListener should render 1`] = `
-<InnerClickListener
-  onClickOutside={[MockFunction]}
-  refKey="innerRef"
->
-  <InnerChild
-    innerRef={[Function]}
-  >
-    <div>
-      <div
-        id="1"
-      >
-        1
-      </div>
-      <div
-        id="2"
-      >
-        2
-      </div>
+exports[`InnerClickListener renders as expected - Component API should render 1`] = `
+<div>
+  <div>
+    <div
+      id="1"
+    >
+      1
     </div>
-  </InnerChild>
-</InnerClickListener>
+    <div
+      id="2"
+    >
+      2
+    </div>
+  </div>
+</div>
 `;