Тест на создание нового квиза

2024-01-10 21:02:14 +03:00 · 2024-01-10 21:02:14 +03:00 · 5366ab6fce
commit 5366ab6fce
parent ec22f52a97
8 changed files with 174 additions and 5 deletions
--- a/cypress/e2e/quizHomePageFields.cy.ts
+++ b/cypress/e2e/quizHomePageFields.cy.ts
@ -0,0 +1,140 @@
+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"]').click();
+    cy.wait(1000);
+    cy.get('button[data-cy="select-quiz-layout-standard"]').click();
+
+    cy.get("#contentButton").click();
+
+    cy.get("#headingInput").type("Заголовок заголовка");
+    cy.get("#textInput").type("У нас тут какой-то текст");
+    cy.get("#buttonTextInput").type("Нажми на кнопку");
+    cy.get("#phoneInput").type("8-800-000-00-00");
+    cy.get("#companyInput").type("Наш слоган - слоган наш");
+    cy.get("#websiteInput").type("http://vk:3000/edit");
+    cy.get("#legalInformationInput").type("У наших документов есть данные");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+    cy.wait(2000);
+
+    // проверка введёных значений
+    cy.get(`[data-cy="heading"]`)
+      .should("exist")
+      .and("have.text", "Заголовок заголовка");
+    cy.get(`[data-cy="text"]`)
+      .should("exist")
+      .and("have.text", "У нас тут какой-то текст");
+    cy.get(`[data-cy="phonenumber"`)
+      .should("exist")
+      .and("have.text", "8-800-000-00-00");
+    cy.get(`[data-cy="startpage-button"]`)
+      .should("exist")
+      .and("have.text", "Нажми на кнопку");
+    cy.get(`[data-cy="company"]`)
+      .should("exist")
+      .and("have.text", "Наш слоган - слоган наш");
+    cy.get(`[data-cy="legalInformation"]`)
+      .should("exist")
+      .and("have.text", "У наших документов есть данные");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+
+    //создаём вопрос для тестового просмотра
+
+    cy.get('[data-cy="setup-questions"]').click();
+
+    cy.wait(500);
+
+    // cy.get('[data-cy="create-question"]').click();
+
+    cy.get(`[data-cy="select-questiontype-images"]`).click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(0)
+      .type("1")
+      .type("{enter}");
+
+    cy.get('button[data-cy="back-button"]').scrollIntoView().wait(500).click();
+    cy.wait(1000);
+    cy.visit("http://localhost:3000/view");
+    cy.wait(2000);
+
+    //проверка введёных значений
+    cy.get(`[data-cy="heading"]`)
+      .should("exist")
+      .and("have.text", "Заголовок заголовка");
+    cy.get(`[data-cy="text"]`)
+      .should("exist")
+      .and("have.text", "У нас тут какой-то текст");
+    cy.get(`[data-cy="phonenumber"`)
+      .should("exist")
+      .and("have.text", "8-800-000-00-00");
+    cy.get(`[data-cy="startpage-button"]`)
+      .should("exist")
+      .and("have.text", "Нажми на кнопку");
+    cy.get(`[data-cy="company"]`)
+      .should("exist")
+      .and("have.text", "Наш слоган - слоган наш");
+    cy.get(`[data-cy="legalInformation"]`)
+      .should("exist")
+      .and("have.text", "У наших документов есть данные");
+
+    cy.visit("http://localhost:3000/edit");
+    cy.wait(2000);
+
+    cy.get(`[data-cy="publish-button"]`).click();
+    cy.wait(500);
+
+    let linkText;
+
+    cy.get('[data-cy="link-test"]')
+      .invoke("text")
+      .then((text) => {
+        linkText = text;
+      });
+
+    cy.wait(2000).then(() => {
+      cy.visit(linkText);
+    });
+
+    cy.origin("https://hbpn.link", () => {
+      // <команды, направленные на https://hbpn.link, идут здесь>
+      cy.contains("p", "Заголовок заголовка").should("exist");
+      cy.wait(100);
+      cy.contains("p", "У нас тут какой-то текст").should("exist");
+      cy.wait(100);
+      cy.contains("p", "8-800-000-00-00").should("exist");
+      cy.wait(100);
+      cy.contains("p", "Наш слоган - слоган наш").should("exist");
+      cy.wait(100);
+      cy.contains("p", "У наших документов есть данные").should("exist");
+      cy.wait(100);
+      cy.get(`button`).should("exist").and("have.text", "Нажми на кнопку");
+    });
+
+    cy.visit("http://localhost:3000/list");
+    cy.wait(2000);
+
+    cy.get('[data-cy="quiz-card"] h5')
+      .should("exist")
+      .and("have.text", "Заголовок заголовка");
+  });
+});
--- a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
+++ b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
@ -127,6 +127,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                />
              )}
              <Typography
+                data-cy="company"
                sx={{
                  fontSize: "14px",
                  color:
@ -167,6 +168,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
              }}
            >
              <Typography
+                data-cy="heading"
                sx={{
                  fontWeight: "bold",
                  fontSize: "26px",
@ -188,6 +190,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                {quiz.name}
              </Typography>
              <Typography
+                data-cy="text"
                sx={{
                  fontSize: "16px",
                  m: "16px 0",
@ -211,6 +214,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                }
              >
                <Button
+                  data-cy="startpage-button"
                  variant="contained"
                  sx={{
                    fontSize: "16px",
@ -244,6 +248,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                  isMobileDevice ? (
                    <Link href={`tel:${quiz.config.info.phonenumber}`}>
                      <Typography
+                        data-cy="phonenumber"
                        sx={{
                          fontSize: "16px",
                          color: theme.palette.primary.main,
@ -255,6 +260,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                  ) : (
                    <ButtonBase onClick={handleCopyNumber}>
                      <Typography
+                        data-cy="phonenumber"
                        sx={{
                          fontSize: "16px",
                          color: theme.palette.primary.main,
@ -266,12 +272,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                  )
                ) : (
                  <Typography
+                    data-cy="phonenumber"
                    sx={{ fontSize: "16px", color: theme.palette.primary.main }}
                  >
                    {quiz.config.info.phonenumber}
                  </Typography>
                )}
                <Typography
+                  data-cy="legalInformation"
                  sx={{
                    width: "100%",
                    overflowWrap: "break-word",
--- a/src/pages/createQuize/QuizCard.tsx
+++ b/src/pages/createQuize/QuizCard.tsx
@ -69,6 +69,7 @@ export default function QuizCard({

  return (
    <Box
+      data-cy="quiz-card"
      sx={{
        display: "flex",
        flexDirection: "column",
--- a/src/pages/main.tsx
+++ b/src/pages/main.tsx
@ -177,6 +177,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
              {quiz?.status === "start" &&
                (!isLinkButton ? (
                  <Box
+                    data-cy="link-test"
                    component={Link}
                    sx={{
                      whiteSpace: "nowrap",
@ -193,6 +194,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
                  </Box>
                ) : (
                  <Box
+                    data-cy="link-test"
                    component={Link}
                    sx={{
                      cursor: "pointer",
@ -215,6 +217,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
              {/* Маленькая кнопка ссылки */}
              {isMobile && quiz?.status === "start" && (
                <Box
+                  data-cy="link-test"
                  component={Link}
                  sx={{
                    cursor: "pointer",
@ -237,6 +240,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
              {currentStep <= 1 && (
                <Box sx={{ textAlign: "end", width: "100%" }}>
                  <IconButton
+                    data-cy="button-preview"
                    onClick={toggleQuizPreview}
                    sx={{
                      pointerEvents: "auto",
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@ -126,7 +126,7 @@ export default function StartPageSettings() {
              Дизайн
            </Typography>
          </Button>
-          <Button onClick={() => setFormState("content")}>
+          <Button id="contentButton" onClick={() => setFormState("content")}>
            <Typography
              sx={{
                fontWeight: 500,
@ -616,6 +616,7 @@ export default function StartPageSettings() {
                Заголовок
              </Typography>
              <CustomTextField
+                id="headingInput"
                placeholder="Имя заголовка опроса для подбора табуретки"
                value={quiz.name}
                onChange={(e) =>
@ -636,6 +637,7 @@ export default function StartPageSettings() {
                Текст
              </Typography>
              <CustomTextField
+                id="textInput"
                placeholder="Внимательно заполняйте поля ответов"
                value={quiz.config.startpage.description}
                onChange={(e) =>
@ -656,6 +658,7 @@ export default function StartPageSettings() {
                Текст кнопки
              </Typography>
              <CustomTextField
+                id="buttonTextInput"
                placeholder="Начать опрос"
                value={quiz.config.startpage.button}
                onChange={(e) =>
@ -676,6 +679,7 @@ export default function StartPageSettings() {
                Телефон
              </Typography>
              <CustomTextField
+                id="phoneInput"
                placeholder="8-800-000-00-00"
                type="number"
                value={quiz.config.info.phonenumber}
@ -707,6 +711,7 @@ export default function StartPageSettings() {
                Название или слоган компании
              </Typography>
              <CustomTextField
+                id="companyInput"
                placeholder="Только лучшее"
                value={quiz.config.info.orgname}
                onChange={(e) =>
@ -727,6 +732,7 @@ export default function StartPageSettings() {
                Сайт
              </Typography>
              <CustomTextField
+                id="websiteInput"
                placeholder="https://mysite.com"
                value={quiz.config.info.site}
                onChange={(e) =>
@ -747,6 +753,7 @@ export default function StartPageSettings() {
                Юридическая информация
              </Typography>
              <CustomTextField
+                id="legalInformationInput"
                placeholder="Данные наших документов"
                value={quiz.config.info.law}
                onChange={(e) =>
--- a/src/ui_kit/CustomTextField.tsx
+++ b/src/ui_kit/CustomTextField.tsx
@ -13,6 +13,7 @@ import type { InputProps, SxProps, Theme } from "@mui/material";

 interface CustomTextFieldProps {
  placeholder: string;
+  id?: string;
  value?: string;
  error?: string;
  emptyError?: boolean;
@ -31,6 +32,7 @@ interface CustomTextFieldProps {

 export default function CustomTextField({
  placeholder,
+  id,
  value = "",
  onChange,
  onKeyDown,
@ -99,6 +101,7 @@ export default function CustomTextField({
        </InputLabel>
      )}
      <Input
+        id={id}
        defaultValue={text}
        fullWidth
        value={inputValue}
--- a/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx
+++ b/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx
@ -84,7 +84,7 @@ export default function QuizPreviewLayout() {
                  alt=""
                />
              )}
-              <Typography sx={{ fontSize: "12px" }}>
+              <Typography data-cy="company" sx={{ fontSize: "12px" }}>
                {quiz.config.info.orgname}
              </Typography>
            </Box>
@ -105,12 +105,15 @@ export default function QuizPreviewLayout() {
                    : "start",
              }}
            >
-              <Typography sx={{ fontWeight: "bold" }}>{quiz.name}</Typography>
-              <Typography sx={{ fontSize: "12px" }}>
+              <Typography data-cy="heading" sx={{ fontWeight: "bold" }}>
+                {quiz.name}
+              </Typography>
+              <Typography data-cy="text" sx={{ fontSize: "12px" }}>
                {quiz.config.startpage.description}
              </Typography>
              <Box>
                <Button
+                  data-cy="startpage-button"
                  variant="contained"
                  sx={{
                    fontSize: "16px",
@ -139,6 +142,7 @@ export default function QuizPreviewLayout() {
                ) : (
                  <ButtonBase onClick={handleCopyNumber}>
                    <Typography
+                      data-cy="phonenumber"
                      sx={{
                        fontSize: "16px",
                        color: theme.palette.primary.main,
@ -150,12 +154,13 @@ export default function QuizPreviewLayout() {
                )
              ) : (
                <Typography
+                  data-cy="phonenumber"
                  sx={{ fontSize: "16px", color: theme.palette.primary.main }}
                >
                  {quiz.config.info.phonenumber}
                </Typography>
              )}
-              <Typography sx={{ fontSize: "12px" }}>
+              <Typography data-cy="legalInformation" sx={{ fontSize: "12px" }}>
                {quiz.config.info.law}
              </Typography>
            </Box>
--- a/src/ui_kit/Toolbars/ButtonRecallQuiz.tsx
+++ b/src/ui_kit/Toolbars/ButtonRecallQuiz.tsx
@ -38,6 +38,7 @@ export const ButtonRecallQuiz = () => {

  return (
    <Button
+      data-cy="publish-button"
      variant="contained"
      sx={{
        fontSize: "14px",