test(modal): refactor use screen

Author: koca

packages/chakra-ui-core/src/CModal/tests/CModal.test.js

@@ -1,6 +1,5 @@
-import Vue from 'vue'
 import { CInput, CButton, CModal, CModalOverlay, CModalContent, CModalHeader, CModalFooter, CModalBody, CModalCloseButton } from '../..'
-import { render, userEvent, fireEvent, waitMs } from '@/tests/test-utils'
+import { render, userEvent, fireEvent, waitMs, screen, wait } from '@/tests/test-utils'
 import { useId, wrapEvent } from '@/packages/chakra-ui-core/src/utils'
 
 // mocks
@@ -53,84 +52,87 @@ it('should render correctly', async () => {
   const inlineAttrs = 'isOpen'
   const { asFragment } = renderComponent({ inlineAttrs })
 
-  await Vue.nextTick()
+  await waitMs() // render
 
   expect(asFragment(document.body.innerHTML)).toMatchSnapshot()
 })
 
 test('clicking the close button calls the onClose callback', async () => {
   const onClose = jest.fn()
   const inlineAttrs = 'isOpen :on-close="close"'
-  const { getByTestId } = renderComponent({ inlineAttrs, methods: { close: onClose } })
+  renderComponent({ inlineAttrs, methods: { close: onClose } })
 
-  await Vue.nextTick()
-  userEvent.click(getByTestId('close-btn'))
+  await wait(() => {
+    userEvent.click(screen.getByTestId('close-btn'))
+  })
 
   expect(onClose).toHaveBeenCalled()
 })
 
 test('pressing "esc" calls the onClose callback', async () => {
   const onClose = jest.fn()
   const inlineAttrs = ':isOpen="isOpen" :on-close="close"'
-  const { getByTestId } = renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
+  renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
 
-  await Vue.nextTick()
-  const inputInside = getByTestId('inputInsideModal')
-
-  fireEvent.keyDown(inputInside, { key: 'Escape' })
+  await wait(async () => {
+    const inputInside = screen.getByTestId('inputInsideModal')
+    await fireEvent.keyDown(inputInside, { key: 'Escape' })
+  })
 
   expect(onClose).toHaveBeenCalled()
 })
 
 test('clicking overlay calls the onClose callback', async () => {
   const onClose = jest.fn()
   const inlineAttrs = ':isOpen="isOpen" :on-close="close"'
-  const { getByTestId } = renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
-
-  await Vue.nextTick()
-  const overlay = getByTestId('overlay')
+  renderComponent({ inlineAttrs, data: () => ({ isOpen: true }), methods: { close: onClose } })
 
-  userEvent.click(overlay)
+  await wait(async () => {
+    const overlay = screen.getByTestId('overlay')
+    await fireEvent.click(overlay.parentElement)
+  })
 
   expect(onClose).toHaveBeenCalled()
 })
 
 test('focuses the initial focus ref when opened - initialFocusRef', async () => {
   const inlineAttrs = 'isOpen :on-close="close" :initialFocusRef="()=>$refs.inputInsideModal"'
-  const { getByTestId } = renderComponent({ inlineAttrs })
+  renderComponent({ inlineAttrs })
 
-  await Vue.nextTick()
-  const inputInside = getByTestId('inputInsideModal')
+  await waitMs() // render
 
-  await waitMs()
-  expect(inputInside).toHaveFocus()
+  await wait(() => {
+    expect(screen.getByTestId('inputInsideModal')).toHaveFocus()
+  })
 })
 
 test('returns focus when closed - finalFocusRef', async () => {
   const inlineAttrs = ':isOpen="isOpen" :on-close="close" :finalFocusRef="$refs.inputOutsideModal"'
-  const { getByTestId } = renderComponent({ inlineAttrs, data: () => ({ isOpen: true }) })
+  renderComponent({ inlineAttrs, data: () => ({ isOpen: true }) })
+
+  await waitMs() // render
 
-  await Vue.nextTick()
-  const inputOutside = getByTestId('inputOutsideModal')
-  const closeButton = getByTestId('close-btn')
+  const inputOutside = screen.getByTestId('inputOutsideModal')
+  const closeButton = screen.getByTestId('close-btn')
 
-  await userEvent.click(closeButton)
-  await waitMs()
+  await fireEvent.click(closeButton)
 
-  expect(inputOutside).toHaveFocus()
+  await wait(() => {
+    expect(inputOutside).toHaveFocus()
+  })
 })
 
 it('should have proper aria', async () => {
   useId.mockReturnValueOnce('1')
   const inlineAttrs = 'isOpen'
   renderComponent({ inlineAttrs })
 
-  await Vue.nextTick()
-  const dialog = document.querySelector('section')
-  await waitMs()
+  await wait(() => {
+    const dialog = screen.getByRole('dialog')
 
-  expect(dialog).toHaveAttribute('role', 'dialog')
-  expect(dialog).toHaveAttribute('aria-modal', 'true')
-  expect(dialog).toHaveAttribute('aria-labelledby', 'modal-1-header')
-  expect(dialog).toHaveAttribute('aria-describedby', 'modal-1-body')
+    expect(dialog).toHaveAttribute('role', 'dialog')
+    expect(dialog).toHaveAttribute('aria-modal', 'true')
+    expect(dialog).toHaveAttribute('aria-labelledby', 'modal-1-header')
+    expect(dialog).toHaveAttribute('aria-describedby', 'modal-1-body')
+  })
 })