import React from 'react'
import FormBuilder from "../FormBuilder";
import {fireEvent, render} from '@testing-library/react';
import '../../setupTests'

describe("FormBuilder Test Suite!", () => {
    const inputs = [
        {
            typeOf: "ConfigroInput",
            label: "User Email",
            type: "email",
            placeholder: "Email"
        },
        {
            typeOf: "ConfigroInput",
            label: "Password",
            type: "password",
            placeholder: "Password"
        },
        {
            typeOf: "ConfigroInput",
            label: "Address",
            type: "textarea",
            placeholder: "1234 Main St"
        },
        {
            typeOf: "ConfigroInput",
            label: "City",
            type: "text",
            placeholder: "City Name"
        },
        {
            typeOf: "ConfigroInput",
            label: "Style",
            type: "checkbox",
            placeholder: "Check Me Out"
        },
        {
            typeOf: "ConfigroButton",
            type: "button",
            text: "Sign In"
        },
    ]

    function renderPage(onSubmitFn: jest.Mock<any, any>) {
        // @ts-ignore
        return render(<FormBuilder data={inputs} onFormSubmit={onSubmitFn} />)
    }

    test("it should take array of inputs and render form", () => {
        let formBuilder = renderPage(jest.fn())
        let inputs = formBuilder.container.querySelectorAll("input")
        let button = formBuilder.container.querySelector("button")
        expect(inputs.length).toBe(5)
        expect(button).toBeInTheDocument()
    })

    test("it should invoke the callback function and pass the form data to it", async () => {
        let onSubmitFn = jest.fn().mockImplementation((formData: Map<string, string|number>) => {
            console.log(formData)
            expect(formData).toBeDefined()
            expect(formData.size).toBe(5)
            expect(formData.get("inputUserEmail")).toBe("vslala@gmail.com")
        })
        let formBuilder = renderPage(onSubmitFn)
        let emailInput = formBuilder.container.querySelectorAll("input")[0]
        let form = formBuilder.container.querySelector("form")

        await fireEvent.change(emailInput, {target: {value: "vslala@gmail.com"}})

        expect(form).toBeInTheDocument()

        await fireEvent.submit(form!)

        expect(onSubmitFn).toBeCalledTimes(1)
    })
})