import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
import React from 'react';
import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
import {useTranslations} from "next-intl";
import * as Yup from "yup";
import {Formik} from "formik";
import UserInfo from "../../UserInfo";

const CreateFormMock = ({Component}) => {
    const t = useTranslations();
    const validationSchema = Yup.object().shape({
        username: Yup.string().required(t("ExpertMangement.error_message_username")),
    });
    return (
        <Formik
            initialValues={{
                username: "",
            }}
            validationSchema={validationSchema}
            onSubmit={(values, {}) => {
            }}
        >
            {formikProps => (<Component formik={formikProps}></Component>)}
        </Formik>
    );
};

describe("UserInfo Component From Expert Management (update)", () => {
    describe("Rendering", () => {
        it("UserName TextField Rendered", async () => {
            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
            await waitFor(() => {
                const usernameTextField = screen.queryByLabelText('نام کاربری');
                expect(usernameTextField).toBeInTheDocument();
            });
        });
    });
    describe("Behavioral", () => {
        it("Username TextField Work Correctly", async () => {
            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
            const usernameTextField = screen.queryByLabelText('نام کاربری');
            fireEvent.change(usernameTextField, {target: {value: 'exampleUsername'}});
            await act(() => {
                expect(usernameTextField).toHaveValue('exampleUsername');
            })
        });
    });
    describe("validation", () => {
        it('Should See Error When Username Input Is Empty', async () => {
            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);

            const usernameInput = screen.queryByLabelText('نام کاربری');

            fireEvent.change(usernameInput, {target: {value: ''}});
            fireEvent.blur(usernameInput);

            await waitFor(() => {
                expect(screen.queryByText("نام کاربری خود را وارد کنید")).toBeInTheDocument()
            });
        });
    })
});