init cypress

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea

.idea/.gitignore

@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml
-# Editor-based HTTP Client requests
-/httpRequests/

.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/squiz.iml" filepath="$PROJECT_DIR$/.idea/squiz.iml" />
-    </modules>
-  </component>
-</project>

.idea/squiz.iml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+    e2e: {
+        baseUrl: 'http://localhost:3000',
+        viewportWidth: 1440,
+        viewportHeight: 900,
+        supportFile: false,
+    },
+});

cypress/e2e/quizPreview.cy.ts

@@ -0,0 +1,52 @@
+describe("Quiz preview", () => {
+    beforeEach(() => {
+        cy.visit("/list");
+
+        cy.get("[data-cy=create-quiz]").click();
+        cy.get("[data-cy=create-quiz-card]").click();
+        cy.get("[data-cy=select-quiz-layout-standard]").click();
+        cy.get("[data-cy=setup-questions]").click();
+    });
+
+    it("container and layout elements should exist", () => {
+        cy.get("[data-cy=quiz-preview-container]").should("exist");
+        cy.get("[data-cy=quiz-preview-layout]").should("exist");
+    });
+
+    describe("Variant question", () => {
+        beforeEach(function fillTitleAndOptions() {
+            cy.get("[data-cy=expand-question]").click();
+            cy.get("[data-cy=select-questiontype-variant]").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 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=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");
+
+                cy.get("[data-cy=variant-answer]").eq(0).click();
+                cy.get("[data-cy=variant-radio]").eq(0).should("be.checked");
+                cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
+                cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");
+
+                cy.get("[data-cy=variant-answer]").eq(1).click();
+                cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
+                cy.get("[data-cy=variant-radio]").eq(1).should("be.checked");
+                cy.get("[data-cy=variant-radio]").eq(2).should("not.be.checked");
+
+                cy.get("[data-cy=variant-answer]").eq(2).click();
+                cy.get("[data-cy=variant-radio]").eq(0).should("not.be.checked");
+                cy.get("[data-cy=variant-radio]").eq(1).should("not.be.checked");
+                cy.get("[data-cy=variant-radio]").eq(2).should("be.checked");
+            });
+        });
+    });
+});

cypress/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "noEmit": true,
+        "types": [
+            "cypress"
+        ]
+    },
+    "include": [
+        "../node_modules/cypress",
+        "./**/*.ts"
+    ]
+}

package.json

@@ -47,23 +47,14 @@
         "start": "craco start",
         "build": "craco build",
         "test": "craco test",
-        "eject": "craco eject"
+        "eject": "craco eject",
+        "cypress:open": "cypress open"
     },
     "eslintConfig": {
         "extends": [
             "react-app",
             "react-app/jest"
-        ],
+        ]
-        "rules": {
-            "quotes": [
-                "warn",
-                "double",
-                {
-                    "avoidEscape": true,
-                    "allowTemplateLiterals": true
-                }
-            ]
-        }
     },
     "browserslist": {
         "production": [
@@ -81,6 +72,7 @@
         "@emoji-mart/data": "^1.1.2",
         "@emoji-mart/react": "^1.1.1",
         "@types/react-beautiful-dnd": "^13.1.4",
-        "craco-alias": "^3.0.1"
+        "craco-alias": "^3.0.1",
+        "cypress": "^13.3.1"
     }
 }

src/mui.d.ts

@@ -9,7 +9,7 @@ declare module "@mui/material/styles" {
         grey1: Palette["primary"],
         grey2: Palette["primary"],
         grey3: Palette["primary"],
-        grey4: Palette ["primary"],
+        grey4: Palette["primary"],
         orange: Palette["primary"],
         navbarbg: Palette["primary"],
     }
@@ -21,7 +21,7 @@ declare module "@mui/material/styles" {
         grey1?: PaletteOptions["primary"],
         grey2?: PaletteOptions["primary"],
         grey3?: PaletteOptions["primary"],
-        grey4?: PaletteOptions ["primary"],
+        grey4?: PaletteOptions["primary"],
         orange?: PaletteOptions["primary"],
         navbarbg?: PaletteOptions["primary"],
     }
@@ -40,4 +40,11 @@ declare module "@mui/material/Typography" {
         infographic: true;
         p1: true;
     }
-}
+}
+
+type DataAttributeKey = `data-${string}`;
+declare module 'react' {
+    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+        [dataAttribute: DataAttributeKey]: unknown;
+    }
+}

src/pages/Questions/AnswerDraggableList/AnswerItem.tsx

@@ -200,6 +200,7 @@ export const AnswerItem = ({
               }}
               inputProps={{
                 sx: { fontSize: "18px", lineHeight: "21px", py: 0, ml: "13px" },
+                "data-cy": "quiz-variant-question-answer",
               }}
             />
             {additionalMobile}

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -168,6 +168,7 @@ export default function QuestionsPageCard({
     <>
       <Paper
         id={String(totalIndex)}
+        data-cy="quiz-question-card"
         sx={{
           maxWidth: "796px",
           width: "100%",
@@ -245,6 +246,7 @@ export default function QuestionsPageCard({
                   py: 0,
                   paddingLeft: question.type.length === 0 ? 0 : "18px",
                 },
+                "data-cy": "quiz-question-title",
               }}
             />
           </FormControl>
@@ -260,6 +262,7 @@ export default function QuestionsPageCard({
             <IconButton
               sx={{ padding: "0", margin: "5px" }}
               disableRipple
+              data-cy="expand-question"
               onClick={() =>
                 updateQuestionsList<QuizQuestionInitial>(quizId, totalIndex, {
                   expanded: !question.expanded,

src/pages/Questions/TypeQuestions.tsx

@@ -110,6 +110,7 @@ export default function TypeQuestions({ totalIndex }: Props) {
       {BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => (
         <QuestionsMiniButton
           key={title}
+          dataCy={`select-questiontype-${value}`}
           onClick={() => {
             const question = { ...listQuestions[quizId][totalIndex] };
 

src/pages/createQuize/FirstQuiz.tsx

@@ -34,6 +34,7 @@ export default function FirstQuiz() {
       </Typography>
       <Button
         variant="contained"
+        data-cy="create-quiz"
         onClick={() => {
             navigate(`/setting/${createBlank()}`);
         }}

src/pages/startPage/StartPageSettings.tsx

@@ -723,6 +723,7 @@ export default function StartPageSettings() {
         />
         <Button
           variant="contained"
+          data-cy="setup-questions"
           onClick={() => {
             let SPageClone = listQuizes[params].config;
             SPageClone.startpage.background.desktop =

src/pages/startPage/stepOne.tsx

@@ -22,6 +22,7 @@ export default function StepOne() {
       >
         <Button
           variant="text"
+          data-cy="create-quiz-card"
           onClick={() => {
             let SPageClone = listQuizes[params].config;
             SPageClone.type = "quize";

src/pages/startPage/steptwo.tsx

@@ -21,6 +21,7 @@ export default function Steptwo () {
                 mt: "40px",
             }}>
                 <Button variant='text'
+                        data-cy="select-quiz-layout-standard"
                         onClick={() => {
                             updateQuizesList(params, {startpage: "standard"})
                         }}
@@ -44,4 +45,4 @@ export default function Steptwo () {
             </Box>
         </Box>
     )
-}
+}

src/ui_kit/QuestionsMiniButton.tsx

@@ -7,15 +7,17 @@ interface QuestionsMiniButtonProps {
   icon: ReactNode;
   text: string;
   onClick: () => void;
+  dataCy?: string;
 }
 
-export default function QuestionsMiniButton({ icon, text, onClick }: QuestionsMiniButtonProps) {
+export default function QuestionsMiniButton({ icon, text, onClick, dataCy }: QuestionsMiniButtonProps) {
   const theme = useTheme();
 
   return (
     <>
       <Button
         variant="outlined"
+        data-cy={dataCy}
         sx={{
           padding: "26px 15px 15px 15px",
           display: "flex",

src/ui_kit/QuizPreview/QuizPreview.tsx

@@ -47,6 +47,7 @@ export default function QuizPreview() {
     return (
         <Box
             ref={rndParentRef}
+            data-cy="quiz-preview-container"
             sx={{
                 position: "fixed",
                 top: NAVBAR_HEIGHT + DRAG_PARENT_MARGIN,

src/ui_kit/QuizPreview/QuizPreviewLayout.tsx

@@ -58,14 +58,17 @@ export default function QuizPreviewLayout() {
     }, [currentQuizStep, maxCurrentQuizStep]);
 
     return (
-        <Paper sx={{
+        <Paper
-            height: "100%",
+            data-cy="quiz-preview-layout"
-            display: "flex",
+            sx={{
-            flexDirection: "column",
+                height: "100%",
-            flexGrow: 1,
+                display: "flex",
-            borderRadius: "12px",
+                flexDirection: "column",
-            pointerEvents: "auto",
+                flexGrow: 1,
-        }}>
+                borderRadius: "12px",
+                pointerEvents: "auto",
+            }}
+        >
             <Box sx={{
                 p: "16px",
                 whiteSpace: "break-spaces",

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx

@@ -17,23 +17,37 @@ export default function Variant({ question }: Props) {
 
     return (
         <FormControl fullWidth>
-            <FormLabel id="quiz-question-radio-group">{question.title}</FormLabel>
+            <FormLabel
+                id="quiz-question-radio-group"
+                data-cy="variant-title"
+            >{question.title}</FormLabel>
             <RadioGroup
                 aria-labelledby="quiz-question-radio-group"
                 value={value}
                 onChange={handleChange}
             >
                 {question.content.variants.map((variant, index) => (
-                    <FormControlLabel key={index} value={variant.answer} control={<Radio />} label={
+                    <FormControlLabel
-                        <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+                        key={index}
-                            <Typography>{variant.answer}</Typography>
+                        value={variant.answer}
-                            <Tooltip title={variant.hints} placement="right">
+                        control={<Radio
-                                <Box>
+                            inputProps={{
-                                    <InfoIcon />
+                                "data-cy": "variant-radio",
-                                </Box>
+                            }}
-                            </Tooltip>
+                        />}
-                        </Box>
+                        label={
-                    } />
+                            <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+                                <Typography
+                                    data-cy="variant-answer"
+                                >{variant.answer}</Typography>
+                                <Tooltip title={variant.hints} placement="right">
+                                    <Box>
+                                        <InfoIcon />
+                                    </Box>
+                                </Tooltip>
+                            </Box>
+                        }
+                    />
                 ))}
             </RadioGroup>
         </FormControl>

tsconfig.json

@@ -19,9 +19,14 @@
         "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
-        "jsx": "react-jsx"
+        "jsx": "react-jsx",
     },
     "include": [
-        "src"
+        "src",
+    ],
+    "exclude": [
+        "cypress.config.ts",
+        "cypress",
+        "node_modules",
     ]
-}
+}