test(radio): refactor use screen

Author: koca

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()
 })