frontPanel/cypress/e2e/quizPreview.cy.ts

describe("Quiz preview", () => {
    beforeEach(() => {
        cy.visit("/list");

        cy.get("[data-cy=create-quiz]").click();
        cy.get("[data-cy=create-quiz-card]").click();
        cy.get("[data-cy=select-quiz-layout-standard]").click();
        cy.get("[data-cy=setup-questions]").click();
        cy.get("[data-cy=toggle-quiz-preview]").click();
    });

    it("container and layout elements should exist", () => {
        cy.get("[data-cy=quiz-preview-container]").should("exist");
        cy.get("[data-cy=quiz-preview-layout]").should("exist");
    });

    describe("Variant question", () => {
        beforeEach(function setupQuestion() {
            cy.get("[data-cy=select-questiontype-variant]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");

                cy.get("[data-cy=quiz-variant-question-answer]").eq(0).type("Answer 1{enter}");
                cy.get("[data-cy=quiz-variant-question-answer]").eq(1).type("Answer 2{enter}");
                cy.get("[data-cy=quiz-variant-question-answer]").eq(2).type("Answer 3");
            });
        });

        it("should contain title and options, and be selected properly", () => {
            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=variant-title]").should("have.text", "Question Title");
                cy.get("[data-cy=variant-answer]").eq(0).should("have.text", "Answer 1");
                cy.get("[data-cy=variant-answer]").eq(1).should("have.text", "Answer 2");
                cy.get("[data-cy=variant-answer]").eq(2).should("have.text", "Answer 3");

                cy.get("[data-cy=variant-answer]").eq(0).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");

                cy.get("[data-cy=variant-answer]").eq(1).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");

                cy.get("[data-cy=variant-answer]").eq(2).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("be.checked");
            });
        });
    });

    describe("Image question", () => {
        beforeEach(function setupQuestion() {
            cy.fixture("image1.png", null).as("image1");
            cy.fixture("image2.png", null).as("image2");
            cy.fixture("image3.png", null).as("image3");

            cy.get("[data-cy=select-questiontype-images]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");

                cy.get("[data-cy=quiz-variant-question-answer]").eq(0).type("Answer 1{enter}");
                cy.get("[data-cy=add-variant-image-button]").eq(0).click();
                cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image1", { force: true });
                cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();

                cy.get("[data-cy=quiz-variant-question-answer]").eq(1).type("Answer 2{enter}");
                cy.get("[data-cy=add-variant-image-button]").eq(1).click();
                cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image2", { force: true });
                cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();

                cy.get("[data-cy=quiz-variant-question-answer]").eq(2).type("Answer 3");
                cy.get("[data-cy=add-variant-image-button]").eq(2).click();
                cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image3", { force: true });
                cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();
            });
        });

        it("should contain title and options, and be selected properly", () => {
            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=variant-button] > img").eq(0).should("have.attr", "src").and("match", /^blob:.+/);
                cy.get("[data-cy=variant-button] > img").eq(1).should("have.attr", "src").and("match", /^blob:.+/);
                cy.get("[data-cy=variant-button] > img").eq(2).should("have.attr", "src").and("match", /^blob:.+/);

                cy.get("[data-cy=variant-button]").eq(0).click();
                cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "false");
                cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "false");

                cy.get("[data-cy=variant-button]").eq(1).click();
                cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "false");
                cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "false");

                cy.get("[data-cy=variant-button]").eq(2).click();
                cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "false");
                cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "false");
                cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "true");
            });
        });

        it("should work with multiple selection mode", () => {
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=multiple-answers-checkbox]").click();
            });

            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=variant-button]").eq(0).click();
                cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "false");
                cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "false");

                cy.get("[data-cy=variant-button]").eq(1).click();
                cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "false");

                cy.get("[data-cy=variant-button]").eq(2).click();
                cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "true");

                cy.get("[data-cy=variant-button]").eq(0).click();
                cy.get("[data-cy=variant-button]").eq(0).should("have.attr", "data-checked", "false");
                cy.get("[data-cy=variant-button]").eq(1).should("have.attr", "data-checked", "true");
                cy.get("[data-cy=variant-button]").eq(2).should("have.attr", "data-checked", "true");
            });
        });
    });

    describe("Varimg question", () => {
        beforeEach(function setupQuestion() {
            cy.fixture("image1.png", null).as("image1");
            cy.fixture("image2.png", null).as("image2");
            cy.fixture("image3.png", null).as("image3");

            cy.get("[data-cy=select-questiontype-varimg]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");

                cy.get("[data-cy=quiz-variant-question-answer]").eq(0).type("Answer 1{enter}");
                cy.get("[data-cy=add-variant-image-button]").eq(0).click();
                cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image1", { force: true });
                cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();

                cy.get("[data-cy=quiz-variant-question-answer]").eq(1).type("Answer 2{enter}");
                cy.get("[data-cy=add-variant-image-button]").eq(1).click();
                cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image2", { force: true });
                cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();

                cy.get("[data-cy=quiz-variant-question-answer]").eq(2).type("Answer 3");
                cy.get("[data-cy=add-variant-image-button]").eq(2).click();
                cy.get("[data-cy=upload-image-input]", { withinSubject: null }).selectFile("@image3", { force: true });
                cy.get("[data-cy=crop-modal-save-button]", { withinSubject: null }).click();
            });
        });

        it("should contain title and options, and be selected properly", () => {
            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=variant-title]").should("have.text", "Question Title");
                cy.get("[data-cy=variant-answer]").eq(0).should("have.text", "Answer 1");
                cy.get("[data-cy=variant-answer]").eq(1).should("have.text", "Answer 2");
                cy.get("[data-cy=variant-answer]").eq(2).should("have.text", "Answer 3");

                cy.get("[data-cy=variant-answer]").eq(0).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");
                cy.get("[data-cy=variant-image]")
                    .invoke("attr", "src")
                    .should("match", /^blob:.+/)
                    .as("src1", { type: "static" });

                cy.get("[data-cy=variant-answer]").eq(1).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");
                cy.get("[data-cy=variant-image]")
                    .invoke("attr", "src")
                    .should("match", /^blob:.+/)
                    .then(src2 => {
                        cy.get("@src1").should("not.equal", src2);
                    });

                cy.get("[data-cy=variant-answer]").eq(2).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("be.checked");
                cy.get("[data-cy=variant-image]")
                    .invoke("attr", "src")
                    .should("match", /^blob:.+/)
                    .then(src3 => {
                        cy.get("@src1").should("not.equal", src3);
                    });
            });
        });
    });

    describe("Emoji question", () => {
        beforeEach(function setupQuestion() {
            cy.get("[data-cy=select-questiontype-emoji]").click();
            cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
                cy.get("[data-cy=quiz-question-title]").type("Question Title");

                cy.get("[data-cy=quiz-variant-question-answer]").eq(0).type("Answer 1{enter}");
                cy.get("[data-cy=choose-emoji-button]").eq(0).click();
                cy.get("em-emoji-picker", { withinSubject: null }).within(() => {
                    cy.get(".emoji-mart-emoji", {
                        withinSubject: null,
                        includeShadowDom: true,
                    }).eq(0).click();
                });

                cy.get("[data-cy=quiz-variant-question-answer]").eq(1).type("Answer 2{enter}");
                cy.get("[data-cy=choose-emoji-button]").eq(1).click();
                cy.get("em-emoji-picker", { withinSubject: null }).within(() => {
                    cy.get(".emoji-mart-emoji", {
                        withinSubject: null,
                        includeShadowDom: true,
                    }).eq(1).click();
                });

                cy.get("[data-cy=quiz-variant-question-answer]").eq(2).type("Answer 3");
                cy.get("[data-cy=choose-emoji-button]").eq(2).click();
                cy.get("em-emoji-picker", { withinSubject: null }).within(() => {
                    cy.get(".emoji-mart-emoji", {
                        withinSubject: null,
                        includeShadowDom: true,
                    }).eq(2).click();
                });
            });
        });

        it("should contain title and options, and be selected properly", () => {
            const emojiRegex = "(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])";

            cy.get("[data-cy=quiz-preview-layout]").within(() => {
                cy.get("[data-cy=variant-title]").should("have.text", "Question Title");
                cy.get("[data-cy=variant-answer]").eq(0).invoke("text").should("match",
                    new RegExp(`${emojiRegex} Answer 1`)
                );
                cy.get("[data-cy=variant-answer]").eq(1).invoke("text").should("match",
                    new RegExp(`${emojiRegex} Answer 2`)
                );
                cy.get("[data-cy=variant-answer]").eq(2).invoke("text").should("match",
                    new RegExp(`${emojiRegex} Answer 3`)
                );

                cy.get("[data-cy=variant-answer]").eq(0).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");

                cy.get("[data-cy=variant-answer]").eq(1).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");

                cy.get("[data-cy=variant-answer]").eq(2).click();
                cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
                cy.get("[data-cy=variant-radio]").eq(2).should("be.checked");
            });
        });
    });
});