Small fixes in the tests

react/__tests__/Backdrop.test.tsx

@@ -1,13 +1,22 @@
 import React from 'react'
-import { render, fireEvent, act } from '@vtex/test-tools/react'
+import { render, fireEvent } from '@vtex/test-tools/react'
 
-import Backdrop from '../components/Backdrop'
+// eslint-disable-next-line jest/no-mocks-import
+import { findCSSHandles } from '../__mocks__/testUtils'
+import Backdrop, { CSS_HANDLES } from '../components/Backdrop'
 
 describe('<Backdrop />', () => {
-  it('should match snapshot', () => {
-    const { asFragment } = render(<Backdrop open />)
+  it('should render', () => {
+    const { baseElement } = render(<Backdrop open />)
 
-    expect(asFragment).toMatchSnapshot()
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('should find all declared handles', () => {
+    const { container } = render(<Backdrop open />)
+
+    const foundHandles = findCSSHandles(container, CSS_HANDLES)
+    expect(foundHandles).toEqual(CSS_HANDLES)
   })
 
   it('should have visibility hidden and opacity 0 if open === false', () => {
@@ -21,14 +30,11 @@ describe('<Backdrop />', () => {
 
   it('should call onClick when backdrop is clicked', () => {
     const spy = jest.fn()
-    const { getByTestId } = render(<Backdrop open onClick={spy} />)
-
-    const backdropElement = getByTestId('modal-backdrop-container').firstChild
-    act(() => {
-      if (backdropElement) {
-        fireEvent.click(backdropElement, { bubbles: true, cancelable: true })
-      }
-    })
+    const { getByRole } = render(<Backdrop open onClick={spy} />)
+
+    const backdropElement = getByRole('presentation')
+    fireEvent.click(backdropElement, { bubbles: true, cancelable: true })
+
     expect(spy).toBeCalledTimes(1)
   })
 

react/__tests__/BaseModal.test.tsx

@@ -1,55 +1,51 @@
 import React from 'react'
-import { render, fireEvent, act } from '@vtex/test-tools/react'
+import { render, fireEvent } from '@vtex/test-tools/react'
 
 import BaseModal from '../BaseModal'
+import Fade from '../components/Animations/Fade'
 import { BackdropMode } from '../components/Backdrop'
 
 describe('<BaseModal />', () => {
-  it('should match snapshot', () => {
-    const onClose = jest.fn()
-    const { asFragment } = render(
-      <BaseModal open onClose={onClose}>
-        <div>Hello VTEX</div>
-      </BaseModal>
-    )
-
-    expect(asFragment).toMatchSnapshot()
-  })
-
   it('should render the modal with the children', () => {
     const onClose = jest.fn()
-    const { queryByTestId } = render(
-      <BaseModal open onClose={onClose}>
-        <div data-testid="base-modal-child">Hello VTEX</div>
+    const { queryByText, queryByRole } = render(
+      <BaseModal open onClose={onClose} backdrop={BackdropMode.none}>
+        <Fade in>
+          <div>Hello VTEX</div>
+        </Fade>
       </BaseModal>
     )
 
-    expect(queryByTestId('base-modal-child')).toBeTruthy()
+    expect(queryByText('Hello VTEX')).toBeTruthy()
+    expect(queryByRole('presentation')).toBeTruthy()
   })
 
-  it('should not render its children if a prop open is false', () => {
-    const { queryByTestId } = render(
+  it("shouldn't render anything if open is false", () => {
+    const { queryByText, queryByRole } = render(
       <BaseModal open={false} onClose={() => {}}>
-        <div data-testid="base-modal-child">Hello VTEX</div>
+        <Fade in>
+          <div>Hello VTEX</div>
+        </Fade>
       </BaseModal>
     )
 
-    expect(queryByTestId('base-modal-child')).toBeNull()
+    expect(queryByText('Hello VTEX')).toBeNull()
+    expect(queryByRole('presentation')).toBeNull()
   })
 
   it('should call onClose if Esc is pressed', () => {
     const onClose = jest.fn()
-    const { getByTestId } = render(
-      <BaseModal open onClose={onClose}>
-        <div data-testid="base-modal-child">Hello VTEX</div>
+    const { getByRole } = render(
+      <BaseModal open onClose={onClose} backdrop={BackdropMode.none}>
+        <Fade in>
+          <div>Hello VTEX</div>
+        </Fade>
       </BaseModal>
     )
 
-    act(() => {
-      fireEvent.keyDown(getByTestId('base-modal-child'), {
-        key: 'Escape',
-        code: 27,
-      })
+    fireEvent.keyDown(getByRole('presentation'), {
+      key: 'Escape',
+      code: 27,
     })
 
     expect(onClose).toBeCalledTimes(1)
@@ -59,15 +55,15 @@ describe('<BaseModal />', () => {
     const onClose = jest.fn()
     const { getByTestId } = render(
       <BaseModal open onClose={onClose} disableEscapeKeyDown>
-        <div data-testid="base-modal-child">Hello VTEX</div>
+        <Fade in>
+          <div data-testid="base-modal-child">Hello VTEX</div>
+        </Fade>
       </BaseModal>
     )
 
-    act(() => {
-      fireEvent.keyDown(getByTestId('base-modal-child'), {
-        key: 'Escape',
-        code: 27,
-      })
+    fireEvent.keyDown(getByTestId('base-modal-child'), {
+      key: 'Escape',
+      code: 27,
     })
 
     expect(onClose).not.toBeCalled()
@@ -77,7 +73,9 @@ describe('<BaseModal />', () => {
     const onClose = jest.fn()
     const { queryByRole } = render(
       <BaseModal open onClose={onClose} backdrop={BackdropMode.none}>
-        <div>Hello VTEX</div>
+        <Fade in>
+          <div>Hello VTEX</div>
+        </Fade>
       </BaseModal>
     )
 
@@ -93,18 +91,18 @@ describe('<BaseModal />', () => {
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
       <div onClick={outsideClick}>
         <BaseModal open onClick={onClick} onClose={onClose}>
-          <div>Hello VTEX</div>
+          <Fade in>
+            <div>Hello VTEX</div>
+          </Fade>
         </BaseModal>
       </div>
     )
 
     const baseModal = getByTestId('base-modal')
 
-    act(() => {
-      fireEvent.click(baseModal, {
-        bubbles: true,
-        cancelable: true,
-      })
+    fireEvent.click(baseModal, {
+      bubbles: true,
+      cancelable: true,
     })
 
     expect(onClick).toBeCalledTimes(1)

react/components/Backdrop.tsx

@@ -16,7 +16,7 @@ interface Props {
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
 }
 
-const CSS_HANDLES = ['backdropContainer', 'backdrop'] as const
+export const CSS_HANDLES = ['backdropContainer', 'backdrop'] as const
 
 const Backdrop: React.FC<Props> = props => {
   const { children, open, onClick, transitionDuration } = props