test(editable): refactor use screen

Author: koca

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

@@ -1,6 +1,6 @@
 import { CEditable, CEditableInput, CEditablePreview } from '../..'
 import { useId } from '../../utils'
-import { render, userEvent, fireEvent } from '@/tests/test-utils'
+import { render, userEvent, fireEvent, screen } from '@/tests/test-utils'
 
 // mocks
 jest.mock('@/packages/chakra-ui-core/src/utils/generators.js')
@@ -29,9 +29,9 @@ it('should render correctly', () => {
 it('should render correctly - input', async () => {
   useId.mockReturnValueOnce('1')
   const inlineAttrs = 'defaultValue="testing" '
-  const { asFragment, getByTestId } = renderComponent({ inlineAttrs })
+  const { asFragment } = renderComponent({ inlineAttrs })
 
-  const preview = getByTestId('preview')
+  const preview = screen.getByTestId('preview')
   await userEvent.click(preview)
 
   expect(asFragment(document.body.innerHTML)).toMatchSnapshot()
@@ -44,82 +44,87 @@ it('uncontrolled: handles callbacks correctly', async () => {
   const onEdit = jest.fn()
 
   const inlineAttrs = '@edit="onEdit" @change="onChange" @cancel="onCancel" @submit="onSubmit" defaultValue="Hello "'
-  const { getByTestId } = renderComponent({ inlineAttrs, methods: { onChange, onCancel, onSubmit, onEdit } })
+  renderComponent({ inlineAttrs, methods: { onChange, onCancel, onSubmit, onEdit } })
 
-  const preview = getByTestId('preview')
+  const preview = screen.getByTestId('preview')
   await userEvent.click(preview)
 
-  const input = getByTestId('input')
+  const input = screen.getByTestId('input')
 
   // calls `onEdit` when preview is focused
-  fireEvent.focus(preview)
+  await fireEvent.focus(preview)
   expect(onEdit).toHaveBeenCalled()
 
   // calls `onChange` with input on change
-  userEvent.type(input, 'World')
+  await userEvent.type(input, 'World')
   expect(onChange).toHaveBeenCalledWith('Hello World')
 
   // calls `onCancel` with previous value when "esc" pressed
-  fireEvent.keyDown(input, { key: 'Escape' })
+  await fireEvent.keyDown(input, { key: 'Escape' })
   expect(onCancel).toHaveBeenCalledWith('Hello ')
 
   // calls `onSubmit` with previous value when "enter" pressed after cancelling
-  fireEvent.keyDown(input, { key: 'Enter' })
+  await fireEvent.keyDown(input, { key: 'Enter' })
   expect(onSubmit).toHaveBeenCalledWith('Hello ')
 
   // TODO: ⚠️ we should make controlledInput for vue
+  // we didn't change the v-model but input.value changes
   // remove this line, previous input value stays and next 2 expect fails
   input.value = 'Hello '
 
   // returns new value when submitting without cancelling
-  userEvent.type(input, 'World')
-  fireEvent.keyDown(input, { key: 'Enter' })
+  await userEvent.type(input, 'World')
+  await fireEvent.keyDown(input, { key: 'Enter' })
   expect(onSubmit).toHaveBeenCalledWith('Hello World')
 
   // cancelling now returns new value
-  fireEvent.keyDown(input, { key: 'Escape' })
+  await fireEvent.keyDown(input, { key: 'Escape' })
   expect(onCancel).toHaveBeenCalledWith('Hello ')
 })
 
 it('controlled: handles callbacks correctly', async () => {
+  useId.mockReturnValueOnce('1')
   const onChange = jest.fn()
   const onCancel = jest.fn()
   const onSubmit = jest.fn()
   const onEdit = jest.fn()
 
   const inlineAttrs = '@edit="onEdit" @change="onChange" @cancel="onCancel" @submit="onSubmit" defaultValue="Hello "'
-  const { getByTestId } = renderComponent({ inlineAttrs, methods: { onChange, onCancel, onSubmit, onEdit } })
+  renderComponent({ inlineAttrs, methods: { onChange, onCancel, onSubmit, onEdit } })
 
-  const preview = getByTestId('preview')
+  const preview = screen.getByTestId('preview')
 
-  await userEvent.click(preview)
-  const input = getByTestId('input')
+  await fireEvent.touch(preview)
+  const input = screen.getByTestId('input')
 
   // calls `onEdit` when preview is focused
-  fireEvent.focus(preview)
+  await fireEvent.focus(preview)
   expect(onEdit).toHaveBeenCalled()
 
   // calls `onSubmit` with `value`
-  fireEvent.keyDown(input, { key: 'Enter' })
+  await fireEvent.keyDown(input, { key: 'Enter' })
   expect(onSubmit).toHaveBeenCalledWith('Hello ')
 
   // calls `onCancel` with `value`
-  fireEvent.keyDown(input, { key: 'Escape' })
+  await fireEvent.keyDown(input, { key: 'Escape' })
   expect(onSubmit).toHaveBeenCalledWith('Hello ')
 
   // calls `onChange` with new input on change
-  userEvent.type(input, 'World')
+  // await fireEvent.update(input, 'Hello World') // changes all value
+  await userEvent.type(input, 'World') // continues typing with previous value
+
+  await fireEvent.keyDown(input, { key: 'Escape' })
   expect(onChange).toHaveBeenCalledWith('Hello World')
 })
 
 test('has the proper aria attributes', async () => {
   const inlineAttrs = 'defaultValue=""'
-  const { getByTestId } = renderComponent({ inlineAttrs })
+  renderComponent({ inlineAttrs })
 
-  const preview = getByTestId('preview')
+  const preview = screen.getByTestId('preview')
 
   await userEvent.click(preview)
-  const input = getByTestId('input')
+  const input = screen.getByTestId('input')
 
   // preview and input do not have aria-disabled when `CEditable` is not disabled
   expect(preview).not.toHaveAttribute('aria-disabled')
@@ -128,9 +133,9 @@ test('has the proper aria attributes', async () => {
 
 test('has the proper aria attributes when disabled', () => {
   const inlineAttrs = 'isDisabled defaultValue=""'
-  const { getByTestId } = renderComponent({ inlineAttrs })
+  renderComponent({ inlineAttrs })
 
-  const preview = getByTestId('preview')
+  const preview = screen.getByTestId('preview')
 
   // preview does not have aria-disabled when `CEditable` is not disabled
   expect(preview).toHaveAttribute('aria-disabled', 'true')