e2e tetst quiz Publish

cypress/e2e/quizPublish.cy.ts

@@ -0,0 +1,286 @@
+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.contains("button", "Варианты с картинками").click();
+
+    cy.contains("label", "Необязательный вопрос").click();
+
+    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").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.contains("div", "1").click();
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Варианты ответов +
+
+    cy.contains("button", "Варианты ответов").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    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").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.contains("label", "1").click();
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+
+    cy.get('[data-cy="create-question"]').click();
+
+    // Варианты и картинка +
+
+    cy.contains("button", "Варианты и картинка").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    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").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.contains("div", "1").click();
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Эмоджи +
+
+    cy.contains("button", "Эмоджи").click();
+    cy.contains("label", "Необязательный вопрос").click();
+    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").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.contains("div", "1").click();
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Своё поле для ввода +
+
+    cy.contains("button", "Своё поле для ввода").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    cy.get('input[placeholder="Пример ответа"]').eq(0).type("1").type("{enter}");
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.get('input[type="text"]').type("email@invalid.com");
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Выпадающий список +
+
+    cy.contains("button", "Выпадающий список").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    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").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.get("#display-select").click();
+    cy.get("li").eq(0).click();
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Дата +
+
+    cy.contains("button", "Дата").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.get('button[data-cy="open-datepicker"]').click();
+
+    cy.wait(500);
+
+    cy.get('button[role="gridcell"]').eq(16).click();
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Ползунок +
+
+    cy.contains("button", "Ползунок").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.get('input[aria-invalid="false"][id=":r0:"][placeholder="0"]').type("10");
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Загрузка файла +
+
+    cy.contains("button", "Загрузка файла").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.get('label.MuiButtonBase-root input[type="file"]').attachFile("./image/Bunner.png");
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    // Рейтинг
+
+    cy.contains("button", "Рейтинг").click();
+    cy.contains("label", "Необязательный вопрос").click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(500);
+
+    cy.contains("Далее →").should("be.disabled");
+    cy.contains("label", "4 Stars").click();
+
+    cy.wait(500);
+    cy.contains("Далее →").should("not.be.disabled");
+
+    cy.visit("http://localhost:3000/view");
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+  });
+});

package.json

@@ -21,6 +21,7 @@
         "@types/react-dnd": "^3.0.2",
         "@types/react-dom": "^18.0.0",
         "axios": "^1.5.1",
+        "cypress-file-upload": "^5.0.8",
         "cytoscape": "^3.26.0",
         "cytoscape-popper": "^2.0.0",
         "dayjs": "^1.11.10",
@@ -78,6 +79,6 @@
         "@types/react-beautiful-dnd": "^13.1.4",
         "@types/react-cytoscapejs": "^1.2.4",
         "craco-alias": "^3.0.1",
-        "cypress": "^13.4.0"
+        "cypress": "^13.6.1"
     }
 }

src/pages/InstallQuiz/InstallQuiz.tsx

@@ -104,10 +104,7 @@ export default function InstallQuiz() {
           }}
         >
           <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
-            <LinkIcon
+            <LinkIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
-              color={theme.palette.brightPurple.main}
-              bgcolor={"#EEE4FC"}
-            />
             <Typography>Ссылка на квиз</Typography>
 
             <Tooltip
@@ -242,11 +239,7 @@ export default function InstallQuiz() {
                 }}
               />
             </FormControl>
-            <CopyIcon
+            <CopyIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} marL={"10px"} />
-              color={theme.palette.brightPurple.main}
-              bgcolor={"#EEE4FC"}
-              marL={"10px"}
-            />
           </Box>
           <Box
             sx={{
@@ -274,16 +267,11 @@ export default function InstallQuiz() {
           }}
         >
           <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
-            <VkIcon
+            <VkIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
-              color={theme.palette.brightPurple.main}
-              bgcolor={"#EEE4FC"}
-            />
             <Typography> Вконтакте</Typography>
           </Box>
 
-          <Typography>
+          <Typography>Для публикации сниппета на стене группы, призывающего пройти тест.</Typography>
-            Для публикации сниппета на стене группы, призывающего пройти тест.
-          </Typography>
           <Link
             component="button"
             onClick={handleOpenVk}
@@ -312,16 +300,10 @@ export default function InstallQuiz() {
           }}
         >
           <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
-            <DomenIcon
+            <DomenIcon color={theme.palette.brightPurple.main} bgcolor={"#EEE4FC"} />
-              color={theme.palette.brightPurple.main}
-              bgcolor={"#EEE4FC"}
-            />
             <Typography>Свой домен</Typography>
           </Box>
-          <Typography>
+          <Typography>Подключите свой домен, если хотите, чтобы квиз открывался по вашей ссылке.</Typography>
-            Подключите свой домен, если хотите, чтобы квиз открывался по вашей
-            ссылке.
-          </Typography>
           <Link
             component="button"
             onClick={handleOpenDom}
@@ -397,16 +379,13 @@ export default function InstallQuiz() {
       <AutoOpenInstall />
       <VidjetInstall />
       <InstallQzCode />
-      <Box
+      <Box sx={{ display: "flex", gap: "8px", justifyContent: "end", mt: "30px" }}>
-        sx={{ display: "flex", gap: "8px", justifyContent: "end", mt: "30px" }}
+        <Button variant="outlined" sx={{ padding: "10px 20px", borderRadius: "8px" }}>
-      >
-        <Button
-          variant="outlined"
-          sx={{ padding: "10px 20px", borderRadius: "8px" }}
-        >
           <ArrowLeft />
         </Button>
-        <Button variant="contained" onClick={incrementCurrentStep}>Запустить рекламу</Button>
+        <Button variant="contained" onClick={incrementCurrentStep}>
+          Запустить рекламу
+        </Button>
       </Box>
 
       <Modal
@@ -438,9 +417,7 @@ export default function InstallQuiz() {
               background: theme.palette.background.default,
             }}
           >
-            <Typography sx={{ color: theme.palette.grey2.main }}>
+            <Typography sx={{ color: theme.palette.grey2.main }}>Добавить квиз в группу ВК</Typography>
-              Добавить квиз в группу ВК
-            </Typography>
           </Box>
           <Box
             sx={{
@@ -473,19 +450,12 @@ export default function InstallQuiz() {
                 Добавить приложение
               </Button>
               <Typography sx={{ color: theme.palette.grey2.main }}>
-                Для публикации сниппета на стене, призывающего пройти тест,
+                Для публикации сниппета на стене, призывающего пройти тест, вставьте в новую запись ссылку на приложение
-                вставьте в новую запись ссылку на приложение
               </Typography>
-              <CustomTextField
+              <CustomTextField placeholder={""} text={"https://vk.com/app6656524_-XXXXXXXXXXX"} />
-                placeholder={""}
+              <Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
-                text={"https://vk.com/app6656524_-XXXXXXXXXXX"}
+                где XXXXXXXXXXX - id вашего сообщества (полный адрес ссылки можно узнать в браузерной строке, открыв
-              />
+                приложение в вашей группе
-              <Typography
-                sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
-              >
-                где XXXXXXXXXXX - id вашего сообщества (полный адрес ссылки
-                можно узнать в браузерной строке, открыв приложение в вашей
-                группе
               </Typography>
             </Box>
 
@@ -496,24 +466,13 @@ export default function InstallQuiz() {
                 flexDirection: "column",
               }}
             >
-              <Typography>
+              <Typography>2. Откройте квиз в группе (вы должны быть администратором группы)</Typography>
-                2. Откройте квиз в группе (вы должны быть администратором
+              <Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
-                группы)
+                Справа снизу нажмите на значок "редактировать" В появившемся окне введите id квиза и нажмите
+                "Привязать". Готово! Квиз привязан к группе
               </Typography>
-              <Typography
+              <Typography sx={{ color: theme.palette.grey2.main }}>ID этого квиза</Typography>
-                sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
+              <CustomTextField placeholder={""} text={"639727c5177be5004f11a0f2"} />
-              >
-                Справа снизу нажмите на значок "редактировать" В появившемся
-                окне введите id квиза и нажмите "Привязать". Готово! Квиз
-                привязан к группе
-              </Typography>
-              <Typography sx={{ color: theme.palette.grey2.main }}>
-                ID этого квиза
-              </Typography>
-              <CustomTextField
-                placeholder={""}
-                text={"639727c5177be5004f11a0f2"}
-              />
             </Box>
 
             <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
@@ -555,9 +514,7 @@ export default function InstallQuiz() {
               background: theme.palette.background.default,
             }}
           >
-            <Typography sx={{ color: theme.palette.grey2.main }}>
+            <Typography sx={{ color: theme.palette.grey2.main }}>Подключить свой домен</Typography>
-              Подключить свой домен
-            </Typography>
           </Box>
           <Box
             sx={{
@@ -575,21 +532,14 @@ export default function InstallQuiz() {
               }}
             >
               <Typography sx={{ color: theme.palette.grey2.main }}>
-                Подключите домен к проекту, чтобы создать несколько квизов на
+                Подключите домен к проекту, чтобы создать несколько квизов на одном домене
-                одном домене
               </Typography>
               <Typography>1. Настройте записи в регистраторе домена</Typography>
               <Box sx={{ display: "flex" }}>
-                <SelectableButton
+                <SelectableButton isSelected={backgroundType === "text"} onClick={() => setBackgroundType("text")}>
-                  isSelected={backgroundType === "text"}
-                  onClick={() => setBackgroundType("text")}
-                >
                   Для поддоменов
                 </SelectableButton>
-                <SelectableButton
+                <SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
-                  isSelected={backgroundType === "video"}
-                  onClick={() => setBackgroundType("video")}
-                >
                   Для доменов
                 </SelectableButton>
               </Box>
@@ -623,8 +573,7 @@ export default function InstallQuiz() {
                   maxWidth: "372px",
                 }}
               >
-                Как подключить свой домен/поддомен к квизу? Ошибки при
+                Как подключить свой домен/поддомен к квизу? Ошибки при подключении домена
-                подключении домена
               </Link>
             </Box>
 
@@ -655,10 +604,7 @@ export default function InstallQuiz() {
                         // onMouseDown={}
                         edge="end"
                       >
-                        <CopyIcon
+                        <CopyIcon color={"#ffffff"} bgcolor={theme.palette.brightPurple.main} />
-                          color={"#ffffff"}
-                          bgcolor={theme.palette.brightPurple.main}
-                        />
                       </IconButton>
                     </InputAdornment>
                   }
@@ -668,11 +614,8 @@ export default function InstallQuiz() {
             </Box>
 
             <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
-              <Typography
+              <Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
-                sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
+                Привязка домена и обновление DNS записей может занять до 48 часов
-              >
-                Привязка домена и обновление DNS записей может занять до 48
-                часов
               </Typography>
               <Button variant="outlined" onClick={handleCloseDom}>
                 Отмена

yarn.lock

@@ -4114,10 +4114,15 @@ csstype@^3.0.2, csstype@^3.1.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
-cypress@^13.4.0:
+cypress-file-upload@^5.0.8:
-  version "13.4.0"
+  version "5.0.8"
-  resolved "https://registry.npmjs.org/cypress/-/cypress-13.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-5.0.8.tgz#d8824cbeaab798e44be8009769f9a6c9daa1b4a1"
-  integrity sha512-KeWNC9xSHG/ewZURVbaQsBQg2mOKw4XhjJZFKjWbEjgZCdxpPXLpJnfq5Jns1Gvnjp6AlnIfpZfWFlDgVKXdWQ==
+  integrity sha512-+8VzNabRk3zG6x8f8BWArF/xA/W0VK4IZNx3MV0jFWrJS/qKn8eHfa5nU73P9fOQAgwHFJx7zjg4lwOnljMO8g==
+
+cypress@^13.6.1:
+  version "13.6.1"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.6.1.tgz#c5f714f08551666ed3ac1fa95718eabb23a416df"
+  integrity sha512-k1Wl5PQcA/4UoTffYKKaxA0FJKwg8yenYNYRzLt11CUR0Kln+h7Udne6mdU1cUIdXBDTVZWtmiUjzqGs7/pEpw==
   dependencies:
     "@cypress/request" "^3.0.0"
     "@cypress/xvfb" "^1.2.4"