test ContactForm create

cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    viewportWidth: 1200,
+    viewportHeight: 800,
+    fixturesFolder: "tests/e2e/fixtures",
+    supportFile: false,
+    defaultCommandTimeout: 100,
+  },
+});

cypress/e2e/modal.cy.ts

@@ -0,0 +1,104 @@
+describe("positive tests ContactForm", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3000");
+    cy.contains("Связаться с нами").click();
+    cy.get("[aria-labelledby='modal-modal-title'] h4").should("have.text", "Оставьте ваши контактные данные");
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(30000);
+  });
+
+  it("form validation with all fields filled in", () => {
+    cy.get("input[name='name']").type("Irina Alegovna");
+    cy.get("input[name='phoneNumber']").type("+1278967890");
+    cy.get("input[name='telegram']").type("@irina");
+    cy.get("input[name='whatsapp']").type("+7876547810");
+
+    cy.get("button[type='submit']").click();
+    cy.get("[aria-labelledby='modal-modal-title']").should("exist");
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(3000);
+    cy.contains("Данные отправлены");
+  });
+
+  it("Form validation with two fields filled in", () => {
+    cy.get("input[name='name']").type("Irina Alegovna");
+    cy.get("input[name='phoneNumber']").type("+1278967890");
+
+    cy.get("button[type='submit']").click();
+    cy.get("[aria-labelledby='modal-modal-title']").should("exist");
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(3000);
+    cy.contains("Данные отправлены");
+  });
+
+  it("Form validation with three fields filled in", () => {
+    cy.get("input[name='name']").type("Irina Alegovna");
+    cy.get("input[name='phoneNumber']").type("+1278967890");
+    cy.get("input[name='telegram']").type("@irina");
+
+    cy.get("button[type='submit']").click();
+    cy.get("[aria-labelledby='modal-modal-title']").should("exist");
+
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(3000);
+    cy.contains("Данные отправлены");
+  });
+});
+
+describe("negative tests ContactForm", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3000");
+    cy.contains("Связаться с нами").click();
+    cy.get("[aria-labelledby='modal-modal-title'] h4").should("have.text", "Оставьте ваши контактные данные");
+  });
+
+  it("should show validation errors for invalid input name", () => {
+    cy.get("input[name='phoneNumber']").type("12345");
+
+    cy.get("button[type='submit']").click();
+    cy.contains("Имя не указано");
+
+    cy.get("[aria-labelledby='modal-modal-title']").should("exist");
+  });
+
+  it("should show validation errors for empty contacts", () => {
+    cy.get("button[type='submit']").click();
+    cy.contains("Имя не указано");
+
+    cy.get("input[name='name']").type("John Doe");
+    cy.get("button[type='submit']").click();
+    cy.contains("Ни один из контактов не указан");
+
+    cy.get("[aria-labelledby='modal-modal-title']").should("exist");
+  });
+
+  it("Проверка, что пользователь не может отправить запрос несколько раз без перерыва", () => {
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(30000);
+    cy.get("input[name='name']").type("Artem khaletskiy");
+    cy.get("input[name='phoneNumber']").type("+127896754");
+    cy.get("input[name='telegram']").type("@artem");
+    cy.get("input[name='whatsapp']").type("+375295850658");
+
+    cy.get("button[type='submit']").click();
+
+    cy.get("[aria-labelledby='modal-modal-title']").should("exist");
+
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(3000);
+    cy.contains("Данные отправлены");
+
+    cy.contains("Связаться с нами").click();
+    cy.get("[aria-labelledby='modal-modal-title'] h4").should("have.text", "Оставьте ваши контактные данные");
+
+    cy.get("input[name='name']").type("Artem khaletskiy");
+    cy.get("input[name='phoneNumber']").type("+375295850658");
+    cy.get("input[name='telegram']").type("@artem");
+    cy.get("input[name='whatsapp']").type("+375295850658");
+
+    cy.get("button[type='submit']").click();
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(3000);
+    cy.contains("Что-то пошло не так. Повторите попытку позже");
+  });
+});

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "-": "^0.0.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@fontsource/roboto": "^4.5.8",
@@ -12,11 +13,14 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/cypress": "^1.1.3",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.11",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "axios": "^1.4.0",
+    "cypress": "^12.17.1",
+    "eslint-plugin-cypress": "^2.13.3",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
     "notistack": "^3.0.1",
@@ -26,6 +30,7 @@
     "react-router-dom": "^6.8.0",
     "react-scripts": "5.0.1",
     "sort-by": "^1.2.0",
+    "start-server-and-test": "^2.0.0",
     "styled-components": "^5.3.6",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",
@@ -35,12 +40,15 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:cypress": "start-server-and-test start http://localhost:3000 cypress",
+    "cypress": "cypress open",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest"
+      "react-app/jest",
+      "plugin:cypress/recommended"
     ]
   },
   "browserslist": {

src/kit/ContactForm.tsx

@@ -15,6 +15,7 @@ import { enqueueSnackbar } from "notistack";
 export const ContactFormModal = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+
   const isModalOpen = useContactFormStore((state) => state.isModalOpen);
   const isSubmitDisabled = useContactFormStore((state) => state.isSubmitDisabled);
   const nameField = useContactFormStore((state) => state.nameField);
@@ -38,7 +39,7 @@ export const ContactFormModal = () => {
     >
       <Box
         sx={{
-          position: "absolute" as "absolute",
+          position: "absolute",
           top: "50%",
           left: "50%",
           transform: "translate(-50%, -50%)",
@@ -84,6 +85,7 @@ export const ContactFormModal = () => {
                   value={nameField}
                   onChange={(e) => setContactFormNameField(e.target.value)}
                   placeholder="Имя"
+                  name="name"
                   fullWidth
                   sx={{
                     width: isMobile ? "266px" : "300px",
@@ -108,6 +110,7 @@ export const ContactFormModal = () => {
                   value={phoneNumberField}
                   onChange={(e) => setContactFormPhoneNumberField(e.target.value)}
                   placeholder="Номер телефона"
+                  name="phoneNumber"
                   fullWidth
                   sx={{
                     width: isMobile ? "266px" : "300px",
@@ -133,6 +136,7 @@ export const ContactFormModal = () => {
                   value={telegramField}
                   onChange={(e) => setContactFormTelegramField(e.target.value)}
                   placeholder="Telegram"
+                  name="telegram"
                   fullWidth
                   sx={{
                     width: isMobile ? "266px" : "300px",
@@ -158,6 +162,7 @@ export const ContactFormModal = () => {
                   value={whatsappField}
                   onChange={(e) => setContactFormWhatsappField(e.target.value)}
                   placeholder="Whatsapp"
+                  name="whatsapp"
                   fullWidth
                   sx={{
                     width: isMobile ? "266px" : "300px",
@@ -178,6 +183,7 @@ export const ContactFormModal = () => {
                 />
               </Box>
               <Button
+                type="submit"
                 disableRipple
                 onClick={handleSendForm}
                 disabled={isSubmitDisabled}

src/pages/home/hero.tsx

@@ -54,12 +54,13 @@ export default function Component({ sectionRef }: SectionRef) {
               lineHeight: isMobile ? "32px" : "60px",
             }}
           >
-            Pena предоставляет услуги по разработке всего спектра программного
-            обеспечения для частных и юридических лиц по всему миру
+            Pena предоставляет услуги по разработке всего спектра программного обеспечения для частных и юридических лиц
+            по всему миру
           </Typography>
         </Box>
         <Button
-        onClick={() => setIsContactFormOpen(true)}
+          className="Connectwithus"
+          onClick={() => setIsContactFormOpen(true)}
           disableRipple
           variant="connect"
           sx={{

tsconfig.json

@@ -1,11 +1,8 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["es5", "dom", "dom.iterable", "esnext"],
+    "types": ["node"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -18,9 +15,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "baseUrl": "src"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src", "**/*.ts"]
 }