create quizResultsPage

cypress/e2e/quizResultsPage.cy.ts

@@ -0,0 +1,153 @@
+import "cypress-file-upload";
+
+describe("Тест на появление страницы Результатов", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3000");
+    cy.wait(1000);
+    cy.contains("Регистрация / Войти").click();
+    const login = "valid_user@exammple.com";
+    const password = "valid_password";
+
+    cy.get("#email").type(login);
+    cy.get("#password").type(password);
+    cy.get('button[type="submit"]').click();
+  });
+
+  it("Тест ", () => {
+    //создаём вопрос и выбираем стартовую страницу
+    cy.get('[data-cy="create-quiz"]').click();
+    cy.wait(1000);
+    cy.get('button[data-cy="create-quiz-card"]').eq(0).click();
+    cy.wait(1000);
+    cy.get('button[data-cy="select-quiz-layout-standard"]').click();
+    cy.get('input[type="checkbox"]').click();
+
+    cy.get('[data-cy="setup-questions"]').click();
+
+    cy.wait(500);
+
+    cy.get(`[data-cy="select-questiontype-images"]`).click();
+
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+
+    cy.get("#questionTitle").type("Вопрос");
+
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(0)
+      .type("1")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(1)
+      .should("have.value", "")
+      .type("2");
+
+    cy.get('[data-cy="next-step"]').click();
+
+    //проверяем все поля на пустоту страницы результата
+
+    cy.get(`[data-cy="expand-question"]`).eq(0).click();
+    cy.wait(200);
+    cy.get("#after-the-contact-form").click();
+
+    cy.get("#heading-result").should("have.value", "");
+    cy.get("#headline-is-bolder").should("have.value", "");
+    cy.get("#heading-description").should("have.value", "");
+
+    cy.get(`[data-cy="add-button"]`).click();
+    cy.wait(200);
+    cy.get("#button-text-result").should("have.value", "");
+    cy.get("#link-page-result").should("have.value", "");
+
+    //перемещаемся на странице тестового просмотра
+
+    cy.visit("http://localhost:3000/view");
+
+    cy.get(".MuiFormControlLabel-label").contains("1").click();
+    cy.get("#buttonFurther").click();
+    cy.wait(1000);
+
+    cy.get("#name-input").type("Name");
+    cy.get("#email-input").type("valid_user@exammple.com");
+    cy.get("#phone-input").type("+2682585");
+
+    cy.get('input[type="checkbox"]').click();
+    cy.wait(200);
+    cy.get("#get-results").click();
+
+    //проверяем что страница результатов не отобразилась
+
+    cy.wait(2000);
+    cy.get("#find-out-more-button").should("not.exist");
+
+    //поселе чего заполняем все поля в результате
+
+    cy.visit("http://localhost:3000/edit");
+
+    cy.get("#heading-result").type("Результат");
+    cy.get("#headline-is-bolder").type("Заголовок пожирнее");
+    cy.get("#heading-description").type("Описание обычного заголовка");
+    cy.get(`[data-cy="add-button"]`).click();
+    cy.wait(200);
+    cy.get("#button-text-result").type("Узнать подробнее");
+
+    //переходим на страницу тестового просмотра
+
+    cy.visit("http://localhost:3000/view");
+
+    cy.get(".MuiFormControlLabel-label").contains("1").click();
+    cy.get("#buttonFurther").click();
+    cy.wait(1000);
+
+    cy.get("#name-input").type("Name");
+    cy.get("#email-input").type("valid_user@exammple.com");
+    cy.get("#phone-input").type("+2682585");
+
+    cy.get('input[type="checkbox"]').click();
+    cy.wait(200);
+    cy.get("#get-results").click();
+    cy.wait(2000);
+    cy.contains("p", "Заголовок пожирнее").should("exist");
+
+    //Переключаем показывания результата до формы контактов
+    cy.visit("http://localhost:3000/edit");
+
+    cy.get(`[data-cy="expand-question"]`).eq(0).click();
+    cy.wait(200);
+    cy.get("#before-contact-form").click();
+    cy.wait(2000);
+
+    cy.visit("http://localhost:3000/view");
+    cy.get(".MuiFormControlLabel-label").contains("1").click();
+    cy.get("#buttonFurther").click();
+    cy.wait(2000);
+    cy.contains("p", "Заголовок пожирнее").should("exist");
+
+    //тоже самое тольок теперь очищаем поля формы результатов
+    cy.visit("http://localhost:3000/edit");
+    cy.get("#heading-result").clear();
+    cy.get("#headline-is-bolder").clear();
+    cy.get("#heading-description").clear();
+    cy.get("#button-text-result").clear();
+
+    cy.visit("http://localhost:3000/view");
+
+    cy.get(".MuiFormControlLabel-label").contains("1").click();
+    cy.get("#buttonFurther").click();
+    cy.wait(2000);
+    cy.get("#find-out-more-button").should("not.exist");
+
+    // let linkText;
+
+    // cy.get('[data-cy="link-test"]')
+    //   .invoke("text")
+    //   .then((text) => {
+    //     linkText = text;
+    //   });
+
+    // cy.wait(2000).then(() => {
+    //   cy.visit(linkText);
+    // });
+  });
+});

src/pages/Questions/QuestionsPage.tsx

@@ -121,6 +121,7 @@ export default function QuestionsPage({
             <ArrowLeft />
           </Button>
           <Button
+            data-cy="next-step"
             variant="contained"
             sx={{
               height: "44px",

src/pages/ResultPage/cards/ResultCard.tsx

@@ -281,6 +281,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                 }}
               >
                 <CustomTextField
+                  id="heading-result"
                   value={resultData.title}
                   placeholder={"Заголовок результата"}
                   onChange={({ target }: { target: HTMLInputElement }) =>
@@ -307,6 +308,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                 }}
               >
                 <CustomTextField
+                  id="headline-is-bolder"
                   value={resultData.description}
                   onChange={({ target }: { target: HTMLInputElement }) =>
                     updateQuestion(
@@ -324,6 +326,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
               </Box>
 
               <TextField
+                id="heading-description"
                 value={resultData.content.text}
                 onChange={({ target }: { target: HTMLInputElement }) =>
                   updateQuestion(
@@ -358,6 +361,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
 
               {buttonPlus ? (
                 <Button
+                  data-cy="add-button"
                   onClick={() => {
                     setButtonPlus(false);
                   }}
@@ -404,6 +408,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                     </IconButton>
                   </Box>
                   <CustomTextField
+                    id="button-text-result"
                     value={resultData.content.hint.text}
                     onChange={({ target }: { target: HTMLInputElement }) =>
                       updateQuestion(resultData.id, (question) => {
@@ -443,6 +448,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                         Cсылка для кнопки
                       </Typography>
                       <CustomTextField
+                        id="link-page-result"
                         value={resultData.content.redirect}
                         onChange={({ target }: { target: HTMLInputElement }) =>
                           updateQuestion<QuizQuestionResult>(

src/pages/ResultPage/cards/WhenCard.tsx

@@ -25,16 +25,19 @@ import ArrowCounterClockWise from "@icons/ArrowCounterClockWise.svg";
 type WhenVariants = {
   title: string;
   value: "before" | "after";
+  id: string;
 };
 
 const whenValues: WhenVariants[] = [
   {
     title: "До формы контактов",
     value: "before",
+    id: "before-contact-form",
   },
   {
     title: "После формы контактов",
     value: "after",
+    id: "after-the-contact-form",
   },
 ];
 
@@ -187,9 +190,10 @@ export const WhenCard = ({ quizExpand }: Props) => {
                 mb: "20px",
               }}
             >
-              {whenValues.map(({ title, value }, index) => (
+              {whenValues.map(({ title, value, id }, index) => (
                 <Box display="flex">
                   <Button
+                    id={id}
                     onClick={() => {
                       updateQuiz(quiz.id, (quiz) => {
                         quiz.config.resultInfo.showResultForm = value;

src/pages/ViewPublicationPage/ContactForm.tsx

@@ -188,6 +188,7 @@ export const ContactForm = ({
             // resultQuestion &&
             // quiz?.config.resultInfo.showResultForm === "after" &&
             <Button
+              id="get-results"
               disabled={!ready}
               variant="contained"
               onClick={() => {
@@ -271,9 +272,9 @@ const Inputs = (currentQuestion: any) => {
   const quiz = useCurrentQuiz();
   const { questions } = useQuestionsStore();
 
-  const [name, setName] = useState("");
+  const [name, setName] = useState("name-input");
-  const [email, setEmail] = useState("");
+  const [email, setEmail] = useState("email-input");
-  const [phone, setPhone] = useState("");
+  const [phone, setPhone] = useState("phone-input");
   const [text, setText] = useState("");
   const [adress, setAdress] = useState("");
 
@@ -353,7 +354,7 @@ const Inputs = (currentQuestion: any) => {
   }
 };
 
-const CustomInput = ({ title, desc, Icon }: any) => {
+const CustomInput = ({ title, desc, Icon, id }: any) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
   return (
@@ -362,6 +363,7 @@ const CustomInput = ({ title, desc, Icon }: any) => {
         {title}
       </Typography>
       <TextField
+        id={id}
         sx={{
           width: isMobile ? "300px" : "350px",
         }}

src/pages/ViewPublicationPage/ResultForm.tsx

@@ -195,6 +195,7 @@ export const ResultForm = ({
         >
           {quiz?.config.resultInfo.showResultForm === "before" && (
             <Button
+              id="find-out-more-button"
               onClick={followNextForm}
               variant="contained"
               sx={{