Merge branch 'chore/merge-tests' of https://github.com/chakra-ui/chakra-ui-vue into chore/merge-tests

Author: codebender828

packages/chakra-ui-core/src/CBox/index.js

@@ -1,3 +1,2 @@
 import CBox from './CBox'
 export default CBox
-export * from './CBox'

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

@@ -1,5 +1,5 @@
 import { CButton, CButtonGroup } from '../..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
@@ -23,21 +23,21 @@ it('should render correctly', () => {
 })
 
 it('should attach buttons when `is-attached` is passed', () => {
-  const { asFragment, getByText } = renderComponent({
+  const { asFragment } = renderComponent({
     template: `
     <CButtonGroup isAttached>
       <CButton>Button1</CButton>
       <CButton>Button2</CButton>
     </CButtonGroup>`
   })
 
-  const button = getByText('Button1')
+  const button = screen.getByText('Button1')
   expect(button).toHaveStyle('border-top-right-radius: 0; border-bottom-right-radius: 0;')
   expect(asFragment()).toMatchSnapshot()
 })
 
 it('should display children', () => {
-  const { getByText } = renderComponent()
-  expect(getByText('Button1')).toBeInTheDocument()
-  expect(getByText('Button2')).toBeInTheDocument()
+  renderComponent()
+  expect(screen.getByText('Button1')).toBeInTheDocument()
+  expect(screen.getByText('Button2')).toBeInTheDocument()
 })

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

@@ -1,5 +1,5 @@
 import CDivider from '..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -26,9 +26,9 @@ it('should change orientation', () => {
 
 it('should have corresponding aria-orientation attribute', () => {
   const inlineAttrs = 'orientation="horizontal"'
-  const { asFragment, getByTestId } = renderComponent({ inlineAttrs })
+  const { asFragment } = renderComponent({ inlineAttrs })
 
-  const divider = getByTestId('divider')
+  const divider = screen.getByTestId('divider')
   expect(divider).toHaveAttribute('aria-orientation', 'horizontal')
   expect(asFragment()).toMatchSnapshot()
 })

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

@@ -1,5 +1,5 @@
 import { CFormControl, CInput, CFormLabel } from '../..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -22,7 +22,7 @@ it('should render correctly', () => {
 })
 
 it('should provide formcontrol state via scoped slot', () => {
-  const { getByTestId } = renderComponent({
+  renderComponent({
     template: `
     <CFormControl isRequired isReadOnly #default="props">
       <pre data-testid="pre">
@@ -31,7 +31,7 @@ it('should provide formcontrol state via scoped slot', () => {
     </CFormControl>`
   })
 
-  const pre = getByTestId('pre')
+  const pre = screen.getByTestId('pre')
   expect(JSON.parse(pre.textContent, null, 2)).toEqual({
     isInvalid: false,
     isRequired: true,

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')
+  })
 })

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

@@ -1,5 +1,5 @@
 import { CProgress, CProgressLabel } from '../..'
-import { render } from '@/tests/test-utils'
+import { render, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const base = {
@@ -19,31 +19,31 @@ it('should render correctly', () => {
 })
 
 it('should have the correct width', () => {
-  const { queryByRole } = renderComponent()
+  renderComponent()
 
-  expect(queryByRole('progressbar')).toHaveStyle('width: 40%')
+  expect(screen.queryByRole('progressbar')).toHaveStyle('width: 40%')
 })
 
 it('should display a label', () => {
-  const { queryByText } = renderComponent({
+  renderComponent({
     template: `
   <CProgress :value="40">
     <CProgressLabel>Label</CProgressLabel>
   </CProgress>`
   })
 
-  expect(queryByText('Label')).toBeInTheDocument()
+  expect(screen.queryByText('Label')).toBeInTheDocument()
 })
 
 test('a11y - progress has a "role" set to "progressbar"', () => {
-  const { queryByRole } = renderComponent()
-  expect(queryByRole('progressbar')).toBeInTheDocument()
+  renderComponent()
+  expect(screen.queryByRole('progressbar')).toBeInTheDocument()
 })
 
 test('a11y - progress has a "aria-valuenow" set to the percentage completion value', () => {
-  const { queryByRole } = renderComponent()
+  renderComponent()
 
-  expect(queryByRole('progressbar')).toHaveAttribute(
+  expect(screen.queryByRole('progressbar')).toHaveAttribute(
     'aria-valuenow',
     '40'
   )

packages/chakra-ui-core/src/CPseudoBox/index.js

@@ -1,3 +1,2 @@
 import CPseudoBox from './CPseudoBox'
 export default CPseudoBox
-export * from './CPseudoBox'

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

@@ -1,5 +1,5 @@
 import CPseudoBox from '../'
-import { render, getTagName } from '@/tests/test-utils'
+import { render, getTagName, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -21,9 +21,9 @@ it('should change the style', () => {
   d="flex" :w="['auto']" px="5" py="5" shadow="lg"
   my="5" mb="5" rounded="sm" font-family="body"
   background-color="blue.200" color="blue.700"`
-  const { asFragment, getByTestId } = renderComponent({ inlineAttrs })
+  const { asFragment } = renderComponent({ inlineAttrs })
 
-  const pseudobox = getByTestId('pseudobox')
+  const pseudobox = screen.getByTestId('pseudobox')
 
   expect(asFragment()).toMatchSnapshot()
   expect(pseudobox).toHaveStyle('display: flex')
@@ -46,8 +46,8 @@ it.each`
   'should display Box with type as $as',
   ({ as }) => {
     const inlineAttrs = `as=${as}`
-    const { asFragment, getByTestId } = renderComponent({ inlineAttrs })
-    expect(getTagName(getByTestId('pseudobox'))).toEqual(as)
+    const { asFragment } = renderComponent({ inlineAttrs })
+    expect(getTagName(screen.getByTestId('pseudobox'))).toEqual(as)
     expect(asFragment()).toMatchSnapshot()
   }
 )

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

@@ -1,5 +1,5 @@
 import CRadio from '..'
-import { render, userEvent } from '@/tests/test-utils'
+import { render, userEvent, screen } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
@@ -18,52 +18,50 @@ it('should render correctly', () => {
 
 it('should display a disabled radio', () => {
   const inlineAttrs = 'isDisabled'
-  const { getByText, container } = renderComponent({ inlineAttrs })
-  const input = container.querySelector('input')
+  renderComponent({ inlineAttrs })
+  const input = screen.getByLabelText('radio')
 
   expect(input).toHaveAttribute('disabled')
-  expect(getByText('radio').parentNode).toHaveStyle('cursor: not-allowed;')
+  expect(input.parentNode).toHaveStyle('cursor: not-allowed;')
 })
 
 it('should display a radio with a checked state', () => {
   const inlineAttrs = 'isChecked'
-  const { container } = renderComponent({ inlineAttrs })
-  const input = container.querySelector('input')
+  renderComponent({ inlineAttrs })
+  const input = screen.getByLabelText('radio')
 
   expect(input).toBeChecked()
 })
 
 it('should display a radio with an unchecked state', () => {
   const inlineAttrs = ':isChecked="false"'
-  const { container } = renderComponent({ inlineAttrs })
-  const input = container.querySelector('input')
+  renderComponent({ inlineAttrs })
+  const input = screen.getByLabelText('radio')
 
   expect(input).not.toBeChecked()
 })
 
 test('Uncontrolled - should not check if disabled', async () => {
   const inlineAttrs = 'isDisabled'
-  const { container, getByText } = renderComponent({ inlineAttrs })
-  const input = container.querySelector('input')
-  const radio = getByText('radio')
+  renderComponent({ inlineAttrs })
+  const input = screen.getByLabelText('radio')
 
   expect(input).toBeDisabled()
 
-  await userEvent.click(radio)
+  await userEvent.click(input)
 
   expect(input).not.toBeChecked()
 })
 
 test('Uncontrolled - should be checked always', async () => {
-  const { container, getByText } = renderComponent()
-  const input = container.querySelector('input')
-  const radio = getByText('radio')
+  renderComponent()
+  const input = screen.getByLabelText('radio')
 
   // click the first time, it's checked
-  await userEvent.click(radio)
+  await userEvent.click(input)
   expect(input).toBeChecked()
 
   // click the second time, it should be still checked
-  await userEvent.click(radio)
+  await userEvent.click(input)
   expect(input).toBeChecked()
 })