import { render, fireEvent } from '@@/test/kalimotxo-test-utils'
import KaForm from './KaForm.vue'

describe('KaForm should', () => {
  test('Send form if sumbit is pressed and fields are correct', async () => {
    const { button, emitted } = renderForm()
    await fireEvent.click(button)
    expect(emitted()).toHaveProperty('submit')
  })
  test('Not submit form if submit is pressed and fields are incorrect', async () => {
    window.HTMLElement.prototype.scrollIntoView = jest.fn()
    const { button, emitted } = renderForm({ hasError: true })
    await fireEvent.click(button)
    expect(emitted()).not.toHaveProperty('submit')
    expect(window.HTMLElement.prototype.scrollIntoView).toHaveBeenCalledTimes(1)
  })
  test('Send form if enter key is pressed', async () => {
    const { input, emitted } = renderForm()
    await fireEvent.submit(input)
    expect(emitted()).toHaveProperty('submit')
  })
})

function renderForm({ hasError = false } = {}) {
  const view = render(
    KaForm,
    {
      slots: {
        default: [
          `<ka-form-field />`,
          `<ma-button type="submit" text="Submit"/>`,
        ],
      },
    },
    (vue) => {
      vue.component('KaFormField', {
        name: 'KaFormField',
        props: { hasError: { type: Boolean, default: hasError } },
        render() {
          const h = this.$createElement
          return h('input', { attrs: { 'data-testid': 'test-input' } })
        },
      })
    },
  )
  const input = view.getByTestId('test-input')
  const button = view.getByText('Submit')
  return { ...view, button, input }
}