/**
 * @jest-environment jsdom
 */

import { formToObj } from '../../src/ts/mmui-form/form';

describe('Testing formToObj', () => {
    test('Checkboxes', () => {
        const formParent = document.createElement('div');
        formParent.innerHTML = `
            <form id="a_form">
                <input name="checkboxes" type="checkbox" checked value="0"/>
            </form>
            `;
        document.body.appendChild(formParent);
        const formAsObject = formToObj('#a_form');
        expect(formAsObject.checkboxes[0].value).toEqual('0');
    });

    test('Radio buttons', () => {
        const formParent = document.createElement('div');
        formParent.innerHTML = `
            <form id="a_form">
                <input name="radio_buttons" type="radio" checked value= "0"/>
            </form>
            `;
        document.body.appendChild(formParent);
        const formAsObject = formToObj('#a_form');
        expect(formAsObject.radio_buttons.value).toEqual('0');
    });

    test('Other', () => {
        const formParent = document.createElement('div');
        formParent.innerHTML = `
            <form id="a_form">
                <input name="number" type="number" value= "0"/>
                <input name="number" type="number" value= "0"/>
            </form>
            `;
        document.body.appendChild(formParent);
        const formAsObject = formToObj('#a_form');
        expect(formAsObject.number[0].value).toEqual('0');
    });

    test('Single Select', () => {
        const formParent = document.createElement('div');
        formParent.innerHTML = `
            <form id="a_form">
                <select name="selection">
                    <option value="0" selected>0</option>
                </select>
            </form>
            `;
        document.body.appendChild(formParent);
        const formAsObject = formToObj('#a_form');
        expect(formAsObject.selection.value).toEqual('0');
    });

    test('Multiselect', () => {
        const formParent = document.createElement('div');
        formParent.innerHTML = `
            <form id="a_form">
                <select name="multiple_selection" multiple>
                    <option value="0" selected>0</option>
                    <option value="1" selected>1</option>
                </select>
            </form>
            `;
        document.body.appendChild(formParent);
        const formAsObject = formToObj('#a_form');
        expect(formAsObject.multiple_selection[0].value).toEqual('0');
    });

    test('Textarea', () => {
        const formParent = document.createElement('div');
        formParent.innerHTML = `
            <form id="a_form">
                <textarea name="text_area">Yada</textarea>
            </form>
            `;
        document.body.appendChild(formParent);
        const formAsObject = formToObj('#a_form');
        expect(formAsObject.text_area.value).toEqual('Yada');
    });
});