test(switch): refactor use screen

Author: koca

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

@@ -1,71 +1,51 @@
 import CSwitch from '..'
-import { render, userEvent } from '@/tests/test-utils'
+import { render, userEvent, screen } from '@/tests/test-utils'
 
-const renderComponent = (props) => {
+const renderComponent = ({ inlineAttrs = '', ...props } = { }) => {
   const base = {
+    template: `<CSwitch data-testid="switch" ${inlineAttrs} />`,
     components: { CSwitch },
     ...props
   }
   return render(base)
 }
 it('should render correctly', () => {
-  const { asFragment } = renderComponent(
-    {
-      template: `
-    <CSwitch />
-    `
-    }
-  )
+  const { asFragment } = renderComponent()
   expect(asFragment()).toMatchSnapshot()
 })
 
 it('should switch', async () => {
-  const { getByTestId, getByRole } = renderComponent(
-    {
-      template: '<CSwitch data-testid="label" />'
-    }
-  )
-  const label = getByTestId('label')
-  const input = getByRole('checkbox')
-  await userEvent.click(label)
-  expect(input).toBeChecked()
+  renderComponent()
+
+  await userEvent.click(screen.getByTestId('switch'))
+  expect(screen.getByRole('checkbox')).toBeChecked()
 })
 
 it('should emit a change event', async () => {
-  const spy = jest.fn()
-  const { getByTestId } = renderComponent(
-    {
-      methods: {
-        handleChange: spy
-      },
-      template: '<CSwitch data-testid="label" @change="handleChange"  /> '
-    }
-  )
+  const onChange = jest.fn()
+  const inlineAttrs = '@change="handleChange"'
+  renderComponent({ inlineAttrs, methods: { handleChange: onChange } })
 
-  const label = getByTestId('label')
-  await userEvent.click(label)
+  await userEvent.click(screen.getByTestId('switch'))
 
-  expect(spy).toHaveBeenCalledTimes(1)
+  expect(onChange).toHaveBeenCalledTimes(1)
 })
 
 test('properly handles v-model', async () => {
-  const { getByTestId, getByText } = renderComponent(
-    {
-      data: () => ({
-        enable: false
-      }),
-      template: `
+  renderComponent({
+    data: () => ({
+      enable: false
+    }),
+    template: `
       <div>
         <span>{{enable ? 'enabled' : 'disabled'}}</span>
-        <CSwitch v-model="enable" data-testid="label" />
+        <CSwitch v-model="enable" data-testid="switch" />
       </div>`
-    }
-  )
-  const label = getByTestId('label')
+  })
 
-  expect(getByText('disabled')).toBeInTheDocument()
+  expect(screen.getByText('disabled')).toBeInTheDocument()
 
-  await userEvent.click(label)
+  await userEvent.click(screen.getByTestId('switch'))
 
-  expect(getByText('enabled')).toBeInTheDocument()
+  expect(screen.getByText('enabled')).toBeInTheDocument()
 })

packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap

@@ -5,6 +5,7 @@ exports[`should render correctly 1`] = `
   <label
     class="css-v7ibj3"
     data-chakra-component="CSwitch"
+    data-testid="switch"
   >
     <input
       class="css-f8n5zr"