frontPanel/cypress/e2e/quizPreview.cy.ts
2023-11-07 20:21:40 +03:00

407 lines
22 KiB
TypeScript

describe("Quiz preview", () => {
beforeEach(() => {
cy.fixture("image1.png", null, {}).as("image1");
cy.fixture("image2.png", null, {}).as("image2");
cy.fixture("image3.png", null, {}).as("image3");
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=question-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.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-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-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-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();
// TODO check for images
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.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-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-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-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=question-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=question-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");
});
});
});
describe("Text question", () => {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-text]").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=textfield]").type("Suggestion");
});
});
it("should contain title and textfield, that can be filled", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=question-title]").should("have.text", "Question Title");
cy.get("[data-cy=textfield] input").should("have.attr", "placeholder", "Suggestion");
cy.get("[data-cy=textfield] input").focus().type("Some text");
cy.get("[data-cy=textfield] input").should("have.prop", "value", "Some text");
});
});
});
describe("Select question", () => {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-select]").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 select, and be selected properly", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=question-title]").should("have.text", "Question Title");
cy.get("[data-cy=select]").click();
cy.get("[data-cy=select-option]", { withinSubject: null }).eq(0).click();
cy.get("[data-cy=select] #category-select").should("have.text", "Answer 1");
cy.get("[data-cy=select]").click();
cy.get("[data-cy=select-option]", { withinSubject: null }).eq(1).click();
cy.get("[data-cy=select] #category-select").should("have.text", "Answer 2");
cy.get("[data-cy=select]").click();
cy.get("[data-cy=select-option]", { withinSubject: null }).eq(2).click();
cy.get("[data-cy=select] #category-select").should("have.text", "Answer 3");
});
});
});
describe("Date question", () => {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-date]").click();
cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
cy.get("[data-cy=quiz-question-title]").type("Question Title");
});
});
it("should contain title and datepicker", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=question-title]").should("have.text", "Question Title");
cy.get("[data-cy=open-datepicker]").should("exist");
});
});
});
describe("Number question", () => {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-number]").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=textfield]").eq(0).type("{selectall}{backspace}10");
cy.get("[data-cy=textfield]").eq(1).type("{selectall}{backspace}90");
cy.get("[data-cy=textfield]").eq(2).type("{selectall}{backspace}50");
cy.get("[data-cy=textfield]").eq(3).type("{selectall}{backspace}5");
});
});
it("should contain title and slider", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=question-title]").should("have.text", "Question Title");
cy.get("[data-cy=slider]").should("exist");
});
});
});
describe("File question", () => {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-file]").click();
cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
cy.get("[data-cy=quiz-question-title]").type("Question Title");
});
});
it("should contain title and filepicker", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=question-title]").should("have.text", "Question Title");
cy.get("[data-cy=file-upload-input]").selectFile("@image1", { force: true });
cy.get("[data-cy=chosen-file-name]").should("contain.text", "Выбран файл:");
});
});
});
describe("Page question", () => {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-page]").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=textfield]").type("Some text");
cy.get("[data-cy=add-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();
});
});
it("should contain title and filepicker", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=question-title]").should("have.text", "Question Title");
cy.get("[data-cy=question-text]").should("have.text", "Some text");
cy.get("img").invoke("attr", "src").should("match", /^blob:.+/);
});
});
});
describe.only("Rating question", () => {
beforeEach(function setupQuestion() {
cy.get("[data-cy=select-questiontype-rating]").click();
cy.get("[data-cy=quiz-question-card]").eq(0).within(() => {
cy.get("[data-cy=quiz-question-title]").type("Question Title");
});
});
it("should contain title and filepicker", () => {
cy.get("[data-cy=quiz-preview-layout]").within(() => {
cy.get("[data-cy=question-title]").should("have.text", "Question Title");
cy.get("[data-cy=rating-button]").should("have.length", 5);
cy.get("[data-cy=rating-button]").eq(2).click();
cy.get("[data-cy=rating]").should("have.attr", "data-rating", 3);
cy.get("[data-cy=rating-button]").eq(4).click();
cy.get("[data-cy=rating]").should("have.attr", "data-rating", 5);
});
});
});
});