diff --git a/cypress/e2e/quizPreview.cy.ts b/cypress/e2e/quizPreview.cy.ts index 4fbc3499..668752c2 100644 --- a/cypress/e2e/quizPreview.cy.ts +++ b/cypress/e2e/quizPreview.cy.ts @@ -15,10 +15,11 @@ describe("Quiz preview", () => { }); describe("Variant question", () => { - beforeEach(function fillTitleAndOptions() { + 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"); @@ -49,4 +50,153 @@ describe("Quiz preview", () => { }); }); }); + + 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.only("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", function () { + cy.get("[data-cy=quiz-preview-layout]").within(() => { + cy.get("[data-cy=variant-title]").should("have.text", "Question Title"); + + 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); + }); + }); + }); + }); }); diff --git a/cypress/fixtures/image1.png b/cypress/fixtures/image1.png new file mode 100644 index 00000000..8bb8e8c3 Binary files /dev/null and b/cypress/fixtures/image1.png differ diff --git a/cypress/fixtures/image2.png b/cypress/fixtures/image2.png new file mode 100644 index 00000000..11ecf89f Binary files /dev/null and b/cypress/fixtures/image2.png differ diff --git a/cypress/fixtures/image3.png b/cypress/fixtures/image3.png new file mode 100644 index 00000000..4cbde4e2 Binary files /dev/null and b/cypress/fixtures/image3.png differ diff --git a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx index b641c541..407bc66e 100644 --- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx +++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx @@ -23,14 +23,13 @@ import type { ChangeEvent, KeyboardEvent, ReactNode } from "react"; import type { DroppableProvided } from "react-beautiful-dnd"; -import type { QuizQuestionVariant } from "../../../model/questionTypes/variant"; -import type { QuestionVariant } from "../../../model/questionTypes/shared"; +import type { ImageQuestionVariant, QuestionVariant } from "../../../model/questionTypes/shared"; type AnswerItemProps = { index: number; totalIndex: number; - variants: QuestionVariant[]; - variant: QuestionVariant; + variants: (QuestionVariant | ImageQuestionVariant)[]; + variant: QuestionVariant | ImageQuestionVariant; provided: DroppableProvided; additionalContent?: ReactNode; additionalMobile?: ReactNode; @@ -48,12 +47,12 @@ export const AnswerItem = ({ const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); const theme = useTheme(); - const question = listQuestions[quizId][totalIndex] as QuizQuestionVariant; + const question = listQuestions[quizId][totalIndex]; const isTablet = useMediaQuery(theme.breakpoints.down(790)); const debounced = useDebouncedCallback((value) => { const answerNew = variants.slice(); answerNew[index].answer = value; - updateQuestionsList(quizId, totalIndex, { + updateQuestionsList(quizId, totalIndex, { content: { ...question.content, variants: answerNew, @@ -61,7 +60,6 @@ export const AnswerItem = ({ }); }, 1000); -console.log(provided) const [isOpen, setIsOpen] = useState(false); const [anchorEl, setAnchorEl] = useState(null); @@ -77,9 +75,14 @@ console.log(provided) const addNewAnswer = () => { const answerNew = variants.slice(); - answerNew.push({ answer: "", extendedText: "", hints: "" }); - - updateQuestionsList(quizId, totalIndex, { + + if (["images", "varimg"].includes(question.type)) { + answerNew.push({ answer: "", hints: "", extendedText: "", originalImageUrl: "" }); + } else { + answerNew.push({ answer: "", extendedText: "", hints: "" }); + } + + updateQuestionsList(quizId, totalIndex, { content: { ...question.content, variants: answerNew }, }); }; @@ -88,7 +91,7 @@ console.log(provided) const answerNew = variants.slice(); answerNew.splice(index, 1); - updateQuestionsList(quizId, totalIndex, { + updateQuestionsList(quizId, totalIndex, { content: { ...question.content, variants: answerNew }, }); }; @@ -97,11 +100,12 @@ console.log(provided) const answerNew = variants.slice(); answerNew[index].hints = event.target.value; - updateQuestionsList(quizId, totalIndex, { + updateQuestionsList(quizId, totalIndex, { content: { ...question.content, variants: answerNew }, }); }; + const largeCheck = ("largeCheck" in question.content) ? question.content.largeCheck : false return ( @@ -123,10 +127,10 @@ console.log(provided) fullWidth focused={false} placeholder={"Добавьте ответ"} - multiline={question.content.largeCheck} + multiline={largeCheck} onChange={({ target }) => debounced(target.value)} onKeyDown={(event: KeyboardEvent) => { - if (event.code === "Enter" && !question.content.largeCheck) { + if (event.code === "Enter" && !largeCheck) { addNewAnswer(); } }} diff --git a/src/pages/Questions/DraggableList/DraggableListItem.tsx b/src/pages/Questions/DraggableList/DraggableListItem.tsx index 750621c0..462a3db3 100644 --- a/src/pages/Questions/DraggableList/DraggableListItem.tsx +++ b/src/pages/Questions/DraggableList/DraggableListItem.tsx @@ -19,8 +19,6 @@ export default memo( ({ index, isDragging, questionData }: DraggableListItemProps) => { const quizId = Number(useParams().quizId); const theme = useTheme(); - console.log("Мой индекс " + index); - console.log(questionData); return ( diff --git a/src/pages/Questions/DropDown/settingDropDown.tsx b/src/pages/Questions/DropDown/settingDropDown.tsx index cb6364fb..a1d30251 100644 --- a/src/pages/Questions/DropDown/settingDropDown.tsx +++ b/src/pages/Questions/DropDown/settingDropDown.tsx @@ -78,6 +78,7 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) { updateQuestionsList(quizId, totalIndex, { content: { ...question.content, multi: target.checked }, diff --git a/src/pages/Questions/Emoji/settingEmoji.tsx b/src/pages/Questions/Emoji/settingEmoji.tsx index 5a14bc01..db92a202 100644 --- a/src/pages/Questions/Emoji/settingEmoji.tsx +++ b/src/pages/Questions/Emoji/settingEmoji.tsx @@ -55,6 +55,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) { sx={{ display: "block", mr: isMobile ? "0px" : "16px" }} label={"Можно несколько"} checked={question.content.multi} + dataCy="multiple-answers-checkbox" handleChange={({ target }) => { updateQuestionsList(quizId, totalIndex, { content: { ...question.content, multi: target.checked }, diff --git a/src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx b/src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx index 4a7d2066..da5a51bd 100644 --- a/src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx +++ b/src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx @@ -19,8 +19,6 @@ export default memo( ({ index, isDragging, questionData }: FormDraggableListItemProps) => { const quizId = Number(useParams().quizId); const theme = useTheme(); - console.log("Мой индекс " + index); - console.log(questionData); return ( diff --git a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx index 8ecf2380..a7ce9727 100644 --- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx +++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx @@ -179,6 +179,7 @@ export default function SettingOpytionsPict({ sx={{ display: "block", mr: isMobile ? "0px" : "16px" }} label={"Можно несколько"} checked={question.content.multi} + dataCy="multiple-answers-checkbox" handleChange={({ target }) => updateQuestionsList(quizId, totalIndex, { content: { ...question.content, multi: target.checked }, diff --git a/src/pages/Questions/UploadImage/UploadImageModal.tsx b/src/pages/Questions/UploadImage/UploadImageModal.tsx index be29defb..730026ea 100644 --- a/src/pages/Questions/UploadImage/UploadImageModal.tsx +++ b/src/pages/Questions/UploadImage/UploadImageModal.tsx @@ -84,6 +84,7 @@ export const UploadImageModal: React.FC = ({ accept="image/*" multiple type="file" + data-cy="upload-image-input" /> ) => diff --git a/src/pages/Questions/answerOptions/responseSettings.tsx b/src/pages/Questions/answerOptions/responseSettings.tsx index 00550e65..12d679c8 100644 --- a/src/pages/Questions/answerOptions/responseSettings.tsx +++ b/src/pages/Questions/answerOptions/responseSettings.tsx @@ -80,6 +80,7 @@ export default function ResponseSettings({ totalIndex }: Props) { sx={{ mr: isMobile ? "0px" : "16px" }} label={"Можно несколько"} checked={question.content.multi} + dataCy="multiple-answers-checkbox" handleChange={({ target }) => { updateQuestionsList(quizId, totalIndex, { content: { ...question.content, multi: target.checked }, diff --git a/src/ui_kit/AddOrEditImageButton.tsx b/src/ui_kit/AddOrEditImageButton.tsx index f007fb74..35c35b2e 100644 --- a/src/ui_kit/AddOrEditImageButton.tsx +++ b/src/ui_kit/AddOrEditImageButton.tsx @@ -50,6 +50,7 @@ export default function AddOrEditImageButton({ onImageClick, onPlusClick, sx, im