From 930386b9c8b5c4db9f28978201c960ef8ef6e7f9 Mon Sep 17 00:00:00 2001
From: nflnkr <molohov.eugeny@yandex.ru>
Date: Mon, 6 Nov 2023 17:41:50 +0300
Subject: [PATCH] add text question preview test

---
 cypress/e2e/quizPreview.cy.ts                 | 25 ++++++++++++++++---
 src/ui_kit/CustomTextField.tsx                |  1 +
 .../QuizPreviewQuestionTypes/Emoji.tsx        |  2 +-
 .../QuizPreviewQuestionTypes/Text.tsx         |  2 +-
 .../QuizPreviewQuestionTypes/Variant.tsx      |  2 +-
 .../QuizPreviewQuestionTypes/Varimg.tsx       |  2 +-
 6 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/cypress/e2e/quizPreview.cy.ts b/cypress/e2e/quizPreview.cy.ts
index 03133206..1f8803d6 100644
--- a/cypress/e2e/quizPreview.cy.ts
+++ b/cypress/e2e/quizPreview.cy.ts
@@ -28,7 +28,7 @@ describe("Quiz preview", () => {
 
         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=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");
@@ -159,7 +159,7 @@ describe("Quiz preview", () => {
 
         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=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");
@@ -237,7 +237,7 @@ describe("Quiz preview", () => {
             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=question-title]").should("have.text", "Question Title");
                 cy.get("[data-cy=variant-answer]").eq(0).invoke("text").should("match",
                     new RegExp(`${emojiRegex} Answer 1`)
                 );
@@ -265,4 +265,23 @@ describe("Quiz preview", () => {
             });
         });
     });
+
+    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");
+            });
+        });
+    });
 });
diff --git a/src/ui_kit/CustomTextField.tsx b/src/ui_kit/CustomTextField.tsx
index f4210325..dc093c3c 100755
--- a/src/ui_kit/CustomTextField.tsx
+++ b/src/ui_kit/CustomTextField.tsx
@@ -67,6 +67,7 @@ export default function CustomTextField({
             py: 0,
           },
         }}
+        data-cy="textfield"
       />
     </FormControl>
   );
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
index 2db7c025..547c1d10 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
@@ -27,7 +27,7 @@ export default function Emoji({ question }: Props) {
 
   return (
     <FormControl fullWidth>
-      <FormLabel id="quiz-question-radio-group" data-cy="variant-title">{question.title}</FormLabel>
+      <FormLabel id="quiz-question-radio-group" data-cy="question-title">{question.title}</FormLabel>
       <RadioGroup
         aria-labelledby="quiz-question-radio-group"
         value={value}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx
index d6028123..a0649676 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx
@@ -17,7 +17,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>
       <CustomTextField placeholder={question.content.placeholder} />
     </Box>
   );
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
index 44e1c864..3b975186 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
@@ -27,7 +27,7 @@ export default function Variant({ question }: Props) {
 
   return (
     <FormControl fullWidth>
-      <FormLabel id="quiz-question-radio-group" data-cy="variant-title">
+      <FormLabel id="quiz-question-radio-group" data-cy="question-title">
         {question.title}
       </FormLabel>
       <RadioGroup
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
index 89efc852..fdfa6b50 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
@@ -44,7 +44,7 @@ export default function Varimg({ question }: Props) {
       <FormControl>
         <FormLabel 
             id="quiz-question-radio-group"
-            data-cy="variant-title"
+            data-cy="question-title"
         >
             {question.title}
         </FormLabel>