add remaining question preview tests

cypress/e2e/quizPreview.cy.ts

@@ -1,5 +1,9 @@
 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();
@@ -53,26 +57,22 @@ 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=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-variant-image-button]").eq(1).click();
+                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-variant-image-button]").eq(2).click();
+                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();
             });
@@ -85,6 +85,7 @@ describe("Quiz preview", () => {
                 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");
@@ -132,26 +133,22 @@ describe("Quiz preview", () => {
 
     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=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-variant-image-button]").eq(1).click();
+                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-variant-image-button]").eq(2).click();
+                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();
             });
@@ -288,14 +285,17 @@ describe("Quiz preview", () => {
     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");
@@ -308,4 +308,99 @@ describe("Quiz preview", () => {
             });
         });
     });
+
+    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);
+            });
+        });
+    });
 });

src/ui_kit/AddOrEditImageButton.tsx

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

src/ui_kit/CustomSlider.tsx

@@ -33,6 +33,7 @@ export const CustomSlider = ({
             step={step}
             onChange={handleChange}
             valueLabelDisplay="auto"
+            data-cy="slider"
             sx={{
                 color: "#7E2AEA",
                 height: "12px",

src/ui_kit/LabeledDatePicker.tsx

@@ -45,6 +45,7 @@ export default function LabeledDatePicker({ label, value, onChange, sx }: Props)
             sx: {
               p: 0,
             },
+            "data-cy": "open-datepicker",
           },
         }}
         sx={{

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Date.tsx

@@ -16,7 +16,7 @@ export default function Date({ question }: Props) {
         gap: 1,
       }}
     >
-      <Typography variant="h6">{question.title}</Typography>
+      <Typography variant="h6" data-cy="question-title">{question.title}</Typography>
       <LabeledDatePicker />
     </Box>
   );

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx

@@ -44,7 +44,7 @@ export default function File({ question }: Props) {
         gap: 1,
       }}
     >
-      <Typography variant="h6">{question.title}</Typography>
+      <Typography variant="h6" data-cy="question-title">{question.title}</Typography>
       <Button variant="contained" onClick={() => fileInputRef.current?.click()}>
         Загрузить файл
         <input
@@ -52,12 +52,13 @@ export default function File({ question }: Props) {
           onChange={handleFileChange}
           type="file"
           accept={acceptedType}
+          data-cy="file-upload-input"
           style={{
             display: "none",
           }}
         />
       </Button>
-      {file && <Typography>Выбран файл: {file.name}</Typography>}
+      {file && <Typography data-cy="chosen-file-name">Выбран файл: {file.name}</Typography>}
     </Box>
   );
 }

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx

@@ -32,7 +32,7 @@ export default function Number({ question }: Props) {
         gap: 1,
       }}
     >
-      <Typography variant="h6">{question.title}</Typography>
+      <Typography variant="h6" data-cy="question-title">{question.title}</Typography>
       <Box
         sx={{
           px: 2,

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx

@@ -16,8 +16,8 @@ export default function Page({ question }: Props) {
         gap: 1,
       }}
     >
-      <Typography variant="h6">{question.title}</Typography>
+      <Typography variant="h6" data-cy="question-title">{question.title}</Typography>
-      <Typography>{question.content.text}</Typography>
+      <Typography data-cy="question-text">{question.content.text}</Typography>
       {question.content.picture && (
         <img
           src={question.content.picture}

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx

@@ -55,7 +55,7 @@ export default function Rating({ question }: Props) {
         gap: 1,
       }}
     >
-      <Typography variant="h6">{question.title}</Typography>
+      <Typography variant="h6" data-cy="question-title">{question.title}</Typography>
       <Box
         sx={{
           display: "flex",
@@ -65,6 +65,8 @@ export default function Rating({ question }: Props) {
         }}
       >
         <Box
+          data-cy="rating"
+          data-rating={selectedRating}
           sx={{
             display: "flex",
             gap: isMobile ? "10px" : "15px",
@@ -78,6 +80,7 @@ export default function Rating({ question }: Props) {
             <Box
               key={itemNumber}
               onClick={() => setSelectedRating(itemNumber + 1)}
+              data-cy="rating-button"
               sx={{
                 cursor: "pointer",
                 transform: "scale(1.5)",

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx

@@ -32,7 +32,7 @@ export default function Text({ question }: Props) {
         gap: 1,
       }}
     >
-      <Typography variant="h6">{question.title}</Typography>
+      <Typography variant="h6" data-cy="question-title">{question.title}</Typography>
       <FormControl
         fullWidth
         size="small"