message: refactor: tests
diff: -import { render, fireEvent } from '@testing-library/vue'
  -import '@testing-library/jest-dom'
  import { mount } from '@vue/test-utils'
  import Checkbox from './Checkbox.vue'
  @@ -14,67 +12,73 @@ const PROPS = {
  const ATTRS = { id: 'id' }
  const ATTRS_WITH_DISABLED = { disabled: 'disabled', id: 'id' }
  const ID_SELECTOR = '#id'
  +const ERRO_SELECTOR = '.error'
  +const LABEL_SELECTOR = '.label'
  const FEED_BACK_ERROR = 'Errors will be displayed here'
  describe('<Checkbox />', () => {
  it('Should display the base input', () => {
  - const { container, queryByText } = render(Checkbox)
  - const errorDOM = container.querySelector(`.error`)
  - expect(errorDOM).toBeNull()
  + // given
  + const container = mount(Checkbox)
  + const errorDOM = container.find(ERRO_SELECTOR)
  +
  + // then
  + expect(errorDOM.element).toBeUndefined()
  })
  it('Should display errors in the input', () => {
  - const { container, queryByText } = render(Checkbox, {
  - props: {
  + // given
  + const container = mount(Checkbox, {
  + propsData: {
  error: FEED_BACK_ERROR,
  },
  })
  + const errorDOM = container.find(ERRO_SELECTOR)
  - const errorDOM = container.querySelector(`.error`)
  -
  - expect(errorDOM).toBeInTheDocument()
  - expect(queryByText(FEED_BACK_ERROR)).toBeInTheDocument()
  + // then
  + expect(errorDOM.exists()).toBeTruthy()
  })
  - it('Should change value of checkbox', () => {
  - const { getByLabelText, container } = render(Checkbox, {
  + it('Should change value of checkbox by clicking label', async () => {
  + // given
  + const container = mount(Checkbox, {
  + propsData: PROPS,
  attrs: ATTRS,
  })
  - const checkbox = container.querySelector(`#id`) as HTMLInputElement
  + const label = container.find(LABEL_SELECTOR)
  - fireEvent.click(checkbox)
  - expect(checkbox.checked).toBeTruthy()
  - })
  -
  - it('Should change value of checkbox by clicking label', () => {
  - const { getByLabelText } = render(Checkbox, {
  - props: PROPS,
  - })
  - const checkbox = getByLabelText(PROPS.label) as HTMLInputElement
  + //when
  + await label.trigger('click')
  + const input = container.find(ID_SELECTOR)
  - fireEvent.click(checkbox)
  - expect(checkbox.checked).toBeTruthy()
  + // then
  + expect((input.element as HTMLInputElement).checked).toBeTruthy()
  })
  it('Should pass attributes to child only', async () => {
  + // given
  const container = mount(Checkbox, {
  attrs: ATTRS_WITH_DISABLED,
  propsData: PROPS,
  })
  -
  const checkbox = container.findAll(ID_SELECTOR)
  + // then
  expect(checkbox.length).toBe(1)
  expect(checkbox.at(0).attributes().disabled).toBeTruthy()
  })
  - it('Should emit value to parent by clicking', async () => {
  + it('Should change checkbox value and emit it to parent by clicking', async () => {
  + // given
  const container = mount(Checkbox, {
  attrs: ATTRS,
  })
  const checkbox = container.find(ID_SELECTOR)
  + // when
  await checkbox.setChecked()
  +
  + // then
  expect(container.emitted().input).toBeTruthy()
  })
  })
  