console.log("Spec.js is loading");

describe("GameArray JavaScript", () => {
    const inputId= "id_text";
    const errorClass = "invalid-feedback";
    const inputSelector = `#${inputId}`;
    const errorSelector = `.${errorClass}`;
    let testDiv;
    let textInput;
    let errorMsg;

    beforeEach(() => {
        console.log("beforeEach");
        testDiv = document.createElement("div");
        testDiv.innerHTML = `
            <form>
                <input
                    id="${inputId}"
                    name="text"
                    class="form-control form-control-lg is-invalid"
                    placeholder="Enter a to-do item"
                    value="Value as submitted"
                    aria-describedby="id_text_feedback"
                    required
                />
                <div id="id_text_feedback" class="${errorClass}">An error message</div>
            </form>
        `;
        document.body.appendChild(testDiv);
        textInput = document.querySelector(inputSelector);
        errorMsg = document.querySelector(errorSelector);
    });

    afterEach(() => {
        testDiv.remove();
    });

    it("should have a useful html fixture", () => {
        console.log("in test 1");
        expect(errorMsg.checkVisibility()).toBe(true);
    });

    it("should hide error message on input", () => {
        console.log("in test 2");
        initialize(inputSelector);
        textInput.dispatchEvent(new InputEvent("input"));

        expect(errorMsg.checkVisibility()).toBe(false);
    });

    it("should not hide error message before event is fired", () => {
        console.log("in test 3");
        initialize(inputSelector);

        expect(errorMsg.checkVisibility()).toBe(true);
    });
});