add images and varimg preview tests

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);
+                    });
+            });
+        });
+    });
 });

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 { ImageQuestionVariant, QuestionVariant } from "../../../model/questionTypes/shared";
-import type { QuestionVariant } from "../../../model/questionTypes/shared";
 
 type AnswerItemProps = {
   index: number;
   totalIndex: number;
-  variants: QuestionVariant[];
+  variants: (QuestionVariant | ImageQuestionVariant)[];
-  variant: QuestionVariant;
+  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<QuizQuestionVariant>(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<HTMLButtonElement | null>(null);
 
@@ -77,9 +75,14 @@ console.log(provided)
 
   const addNewAnswer = () => {
     const answerNew = variants.slice();
-    answerNew.push({ answer: "", extendedText: "", hints: "" });
     
-    updateQuestionsList<QuizQuestionVariant>(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<QuizQuestionVariant>(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<QuizQuestionVariant>(quizId, totalIndex, {
+    updateQuestionsList(quizId, totalIndex, {
       content: { ...question.content, variants: answerNew },
     });
   };
 
+  const largeCheck = ("largeCheck" in question.content) ? question.content.largeCheck : false
 
   return (
     <Draggable draggableId={String(index)} index={index}>
@@ -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<HTMLInputElement>) => {
-              if (event.code === "Enter" && !question.content.largeCheck) {
+              if (event.code === "Enter" && !largeCheck) {
                 addNewAnswer();
               }
             }}

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 (
       <Draggable draggableId={String(index)} index={index}>

src/pages/Questions/DropDown/settingDropDown.tsx

@@ -78,6 +78,7 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
           <CustomCheckbox
             label={"Можно несколько"}
             checked={question.content.multi}
+            dataCy="multiple-answers-checkbox"
             handleChange={({ target }) =>
               updateQuestionsList<QuizQuestionSelect>(quizId, totalIndex, {
                 content: { ...question.content, multi: target.checked },

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<QuizQuestionEmoji>(quizId, totalIndex, {
               content: { ...question.content, multi: target.checked },

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 (
       <Draggable draggableId={String(index)} index={index}>

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<QuizQuestionImages>(quizId, totalIndex, {
                 content: { ...question.content, multi: target.checked },

src/pages/Questions/UploadImage/UploadImageModal.tsx

@@ -84,6 +84,7 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
               accept="image/*"
               multiple
               type="file"
+              data-cy="upload-image-input"
             />
             <Box
               onDragOver={(event: DragEvent<HTMLDivElement>) =>

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<QuizQuestionVariant>(quizId, totalIndex, {
               content: { ...question.content, multi: target.checked },

src/ui_kit/AddOrEditImageButton.tsx

@@ -50,6 +50,7 @@ export default function AddOrEditImageButton({ onImageClick, onPlusClick, sx, im
             </Button>
             <Button
                 onClick={onPlusClick}
+                data-cy="add-variant-image-button"
                 sx={{
                     p: 0,
                     minWidth: "20px",

src/ui_kit/CustomCheckbox.tsx

@@ -8,9 +8,10 @@ interface Props {
   handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   checked?: boolean;
   sx?: SxProps;
+  dataCy?: string;
 }
 
-export default function CustomCheckbox({ label, handleChange, checked, sx }: Props) {
+export default function CustomCheckbox({ label, handleChange, checked, sx, dataCy }: Props) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
 
@@ -24,6 +25,7 @@ export default function CustomCheckbox({ label, handleChange, checked, sx }: Pro
           checkedIcon={<CheckedIcon />}
           onChange={handleChange}
           checked={checked}
+          data-cy={dataCy}
         />
       }
       label={label}

src/ui_kit/Modal/CropModal.tsx

@@ -244,6 +244,7 @@ export const CropModal: FC<Props> = ({ onSaveImageClick }) => {
                     <Button
                         onClick={handleSaveClick}
                         disableRipple
+                        data-cy="crop-modal-save-button"
                         sx={{
                             height: "48px",
                             color: "#7E2AEA",

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx

@@ -61,6 +61,8 @@ export default function Images({ question }: Props) {
             <ButtonBase
               key={index}
               onClick={() => handleVariantClick(index)}
+              data-cy="variant-button"
+              data-checked={selectedVariants.includes(index)}
               sx={{
                 display: "flex",
                 flexDirection: "column",

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx

@@ -41,6 +41,7 @@ export default function Variant({ question }: Props) {
             <FormControlLabel
               key={index}
               value={variant.answer}
+              data-cy="variant-answer"
               control={
                 <Radio
                   inputProps={{
@@ -50,7 +51,7 @@ export default function Variant({ question }: Props) {
               }
               label={
                 <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
-                  <Typography data-cy="variant-answer">
+                  <Typography>
                     {variant.answer}
                   </Typography>
                   {variant.hints && (

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx

@@ -42,7 +42,12 @@ export default function Varimg({ question }: Props) {
       }}
     >
       <FormControl>
-        <FormLabel id="quiz-question-radio-group">{question.title}</FormLabel>
+        <FormLabel 
+            id="quiz-question-radio-group"
+            data-cy="variant-title"
+        >
+            {question.title}
+        </FormLabel>
         <RadioGroup
           aria-labelledby="quiz-question-radio-group"
           value={currentVariant?.answer ?? ""}
@@ -54,7 +59,14 @@ export default function Varimg({ question }: Props) {
               <FormControlLabel
                 key={index}
                 value={variant.answer}
-                control={<Radio />}
+                data-cy="variant-answer"
+                control={
+                    <Radio 
+                        inputProps={{
+                            "data-cy": "variant-radio",
+                        }}
+                    />
+                }
                 label={
                   <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
                     <Typography>{variant.answer}</Typography>
@@ -84,6 +96,7 @@ export default function Varimg({ question }: Props) {
         {currentVariant?.extendedText ? (
           <img
             src={currentVariant.extendedText}
+            data-cy="variant-image"
             alt="question variant"
             style={{
               width: "100%",