import { createWrapper, axios } from 'app/test/vitest/helper';
import EditForm from 'components/EditTableCellValueForm.vue';
import { vi, afterEach, beforeAll, describe, expect, it } from 'vitest';

const fieldA = 'fieldA';
const fieldB = 'fieldB';

describe('EditForm', () => {
    let vm;
    const mockRows = [
        { id: 1, itemFk: 101 },
        { id: 2, itemFk: 102 },
    ];
    const mockFieldsOptions = [
        { label: 'Field A', field: fieldA, component: 'input', attrs: {} },
        { label: 'Field B', field: fieldB, component: 'date', attrs: {} },
    ];
    const editUrl = '/api/edit';

    beforeAll(() => {
        vi.spyOn(axios, 'post').mockResolvedValue({ status: 200 });
        vm = createWrapper(EditForm, {
            props: {
                rows: mockRows,
                fieldsOptions: mockFieldsOptions,
                editUrl,
            },
        }).vm;
    });

    afterEach(() => {
        vi.clearAllMocks();
    });

    describe('onSubmit()', () => {
        it('should call axios.post with the correct parameters in the payload', async () => {
            const selectedField = { field: fieldA, component: 'input', attrs: {} };
            const newValue = 'Test Value';

            vm.selectedField = selectedField;
            vm.newValue = newValue;

            await vm.onSubmit();

            const payload = axios.post.mock.calls[0][1];

            expect(axios.post).toHaveBeenCalledWith(editUrl, expect.any(Object));
            expect(payload.field).toEqual(fieldA);
            expect(payload.newValue).toEqual(newValue);

            expect(payload.lines).toEqual(expect.arrayContaining(mockRows));

            expect(vm.isLoading).toEqual(false);
        });
    });
});