chore: implement email edit form test

Author: serapieTuyishime

__mocks__/plugin.ts

@@ -0,0 +1 @@
+export default function remarkPlugin() { }

__mocks__/provider/ReduxProvider.tsx

@@ -0,0 +1,11 @@
+import { wrapper } from "@/store";
+import { ReactNode } from "react";
+import { Provider } from "react-redux";
+
+const ReduxProvider = ({ children }: { children: ReactNode }) => {
+    const { store } = wrapper.useWrappedStore(children);
+
+    return <Provider store={store}>{children}</Provider>;
+};
+
+export default ReduxProvider;

__mocks__/renderWithRedux.tsx

@@ -0,0 +1,10 @@
+import { RenderOptions, render } from "@testing-library/react";
+import { ReactElement } from "react";
+import ReduxProvider from "./provider/ReduxProvider";
+
+const customRender = (element: ReactElement, options?: Omit<RenderOptions, "wrapper">) => {
+    return render(element, { wrapper: ReduxProvider, ...options })
+}
+
+export * from "@testing-library/react"
+export { customRender as renderWithRedux }

__mocks__/unified.ts

@@ -0,0 +1 @@
+export default function unified() { }

__tests__/components/popus/EmailForm.test.tsx

@@ -0,0 +1,83 @@
+import "@testing-library/jest-dom"
+import { renderWithRedux } from "../../../__mocks__/renderWithRedux"
+import EmailForm from "@/components/popups/profile-settings/EmailForm";
+import { act, fireEvent, screen } from "@testing-library/react";
+
+jest.mock("next/router", () => ({
+    useRouter: () => ({
+        push: jest.fn(),
+        events: {
+            on: jest.fn(),
+            off: jest.fn(),
+            emit: jest.fn(),
+        },
+        isFallback: false,
+        pathname: "mocked-pathname",
+    }),
+}));
+
+// Mocking the arrow button in order to avoid double work since it was tested in ui tests
+jest.mock("../../../src/components/ui/button/Arrow", () => {
+    return {
+        __esModule: true,
+        default: () => {
+            return <div />;
+        },
+    };
+});
+
+
+const handleClose = jest.fn()
+
+const onSubmit = jest.fn()
+
+const renderEmailEditForm = () => {
+    renderWithRedux(<EmailForm show onClose={handleClose} />)
+}
+
+beforeEach(() => {
+    renderEmailEditForm()
+})
+
+afterEach(() => {
+    onSubmit.mockReset()
+})
+
+describe("EmailEditForm", () => {
+    it('should render the email edit form modal.', () => {
+        expect(screen.getByTestId('profileModal')).toBeInTheDocument()
+    })
+
+    it('should render a form', () => {
+        const form = screen.getByTestId('edit-email-form')
+        expect(form).toBeInTheDocument()
+    })
+
+    it('should contain 2 inputs, and a close button', () => {
+        const emailInput = screen.getByPlaceholderText('login-page.email.placeholder');
+        const emailInputConfirm = screen.getByPlaceholderText('profile.settings.edit.email.confirm')
+        const closeButton = screen.getByTestId('close-button')
+
+        expect(emailInput).toBeInTheDocument()
+        expect(emailInputConfirm).toBeInTheDocument()
+        expect(closeButton).toBeInTheDocument()
+    })
+
+    it("should not modify the input values of the form", async () => {
+        const emailInput = screen.getByPlaceholderText('login-page.email.placeholder');
+        const emailInputConfirm = screen.getByPlaceholderText('profile.settings.edit.email.confirm')
+
+        act(() => {
+            fireEvent.change(emailInput, { target: { value: "[email protected]" } });
+            fireEvent.change(emailInputConfirm, { target: { value: "[email protected]" } });
+            fireEvent.submit(screen.getByTestId("edit-email-form"));
+        })
+    });
+
+    it("it should close the modal when its open", () => {
+        expect(screen.getByTestId('profileModal')).toBeInTheDocument()
+        fireEvent.click(screen.getByTestId('close-button'))
+        expect(handleClose).toHaveBeenCalled()
+    })
+
+})

check_branch_name.sh

@@ -6,7 +6,7 @@ local_branch_name="$(git rev-parse --abbrev-ref HEAD)"
 #    - ^(dev|main)$)
 # 2. checking for branch Name starting with fix,ft,ht,chore or doc follwed by a "/" then the "branch name"
 #    - ^((fix|ft|ht|chore|doc)\/[a-zA-Z0-9\-]+)$
-valid_branch_regex='^(dev|main)$|^((fix|ft|ht|chore|doc)\/[a-zA-Z0-9\-]+)$'
+valid_branch_regex='^(dev|main)$|^((test|fix|ft|ht|chore|doc)\/[a-zA-Z0-9\-]+)$'
 
 green='\033[0;32m'
 red='\033[0;31m'

jest.config.js

@@ -0,0 +1,29 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+const esModules = ["remark", "rehype", "unist", "github", "query"].join("|");
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: "./",
+});
+
+// Add any custom config to be passed to Jest
+const config = {
+  coverageProvider: "v8",
+  testEnvironment: "jsdom",
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  moduleNameMapper: {
+    [`^(${esModules})-.*`]: "<rootDir>/__mocks__/plugin.ts",
+    unified: "<rootDir>/__mocks__/unified.ts",
+  },
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(config);

package.json

@@ -9,7 +9,8 @@
     "lint": "eslint --ignore-path .eslintignore \"./**/*.{ts,tsx,js}\"",
     "prettier-format": "prettier --config .prettierrc 'src/**/*.{ts,tsx,js,jsx}' --write",
     "check-branch-name": "./check_branch_name.sh",
-    "prepare": "npx husky install && chmod +x .husky/* && chmod +x ./check_branch_name.sh"
+    "prepare": "npx husky install && chmod +x .husky/* && chmod +x ./check_branch_name.sh",
+    "test": "jest --silent"
   },
   "dependencies": {
     "@coingecko/cryptoformat": "^0.5.4",
@@ -18,7 +19,11 @@
     "@sumsub/websdk": "^1.4.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/line-clamp": "^0.4.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^15.0.6",
+    "@testing-library/user-event": "^14.5.2",
     "@types/axios": "^0.14.0",
+    "@types/jest": "^29.5.12",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
@@ -39,6 +44,8 @@
     "hex-to-rgba": "^2.0.1",
     "highlightjs-solidity": "^2.0.6",
     "i18next": "^22.4.13",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
     "lodash.uniqby": "^4.7.0",
@@ -100,6 +107,7 @@
     "lint-staged": "^13.2.0",
     "postcss": "^8.4.24",
     "prettier": "^2.8.8",
+    "redux-mock-store": "^1.5.4",
     "tailwindcss": "^3.3.2"
   },
   "lint-staged": {

public/locales/bg/common.json

@@ -292,6 +292,7 @@
   "profile.settings.edit.name.update": "Update your Name",
   "profile.settings.edit.email": "Email",
   "profile.settings.edit.email.update": "Update your Email",
+  "profile.settings.edit.email.error": "Имейлите трябва да съвпадат",
   "profile.settings.edit.email.confirm": "Confirm email",
   "profile.settings.edit.discord": "Discord",
   "profile.settings.edit.discord.connect": "connect",

public/locales/en/common.json

@@ -119,14 +119,14 @@
   "communities.overview.challenge.certificate": "Certificate",
   "communities.overview.challenge.subtitle": "Upon successful completion",
   "communities.overview.challenge.expiry": "Challenge expiry date:",
-  "communities.overview.challenge.take.challenge":"Take the challenge",
+  "communities.overview.challenge.take.challenge": "Take the challenge",
   "communities.overview.challenge.see.challenge": "See the challenge",
-  "communities.overview.challenge.for.certificate":"for the certificate",
-  "communities.overview.challenge.for.feedback":"for every feedback",
-  "communities.overview.challenge.unlock.certificate":"Unlock with Certificate",
-  "communities.overview.challenge.participate":"Participate in {{token}} hackathons",
+  "communities.overview.challenge.for.certificate": "for the certificate",
+  "communities.overview.challenge.for.feedback": "for every feedback",
+  "communities.overview.challenge.unlock.certificate": "Unlock with Certificate",
+  "communities.overview.challenge.participate": "Participate in {{token}} hackathons",
   "communities.overview.challenge.learning.modules.included": "Learning modules included",
-  "communities.overview.challenge.no.learning.modules":"No learning modules included",
+  "communities.overview.challenge.no.learning.modules": "No learning modules included",
   "communities.overview.challenge.learning.title": "The following learning materials will equip you with the technical expertise required to successfully address the challenge.",
   "communities.overview.challenge.learning.start": "Start now",
   "communities.overview.challenge.team.setup.title": "Form your team",
@@ -203,7 +203,7 @@
   "course.challenge.reward": "REWARD",
   "course.challenge.reward.description": "By completing the challenge in this course you can earn {{amount}} {{token}}",
   "course.challenge.reward.stable.description": "By completing the challenge in this course you can earn {{currency}}{{amount}} in {{token}}",
-  "course.challenge.reward.certificate.description":"Complete the course to achieve the certificate and unlock new opportunities",
+  "course.challenge.reward.certificate.description": "Complete the course to achieve the certificate and unlock new opportunities",
   "course.challenge.certificate": "CERTIFICATE",
   "course.challenge.certificate.description": "By completing the challenge in this course you can earn a certificate.",
   "course.scoreboard.button": "Load more",
@@ -222,8 +222,8 @@
   "testimonials.text": "Dacade is really encouraging, I didn't realize the little that I know would matter. Thank you for making us learn more and to make research too.",
   "footer.text": "Dacade is an open-sourced platform and is created in collaboration with multiple contributors. Go to the <a href=\"https://github.com/dacadeorg/dacade-frontend-app\"> repository  </a>  to start contributing.",
   "footer.privacy-policy": "Impressum & Privacy Policy",
-  "footer.open.source" : "Dacade is an open-sourced platform.",
-  "footer.open.source.contribute":"Become one of our contributors",
+  "footer.open.source": "Dacade is an open-sourced platform.",
+  "footer.open.source.contribute": "Become one of our contributors",
   "feedback.bounty": "Feedback bounty",
   "feedback.issued": "Issued",
   "feedback.ends": "ending in ",
@@ -297,6 +297,7 @@
   "profile.settings.edit.email": "Email",
   "profile.settings.edit.email.update": "Update your Email",
   "profile.settings.edit.email.confirm": "Confirm email",
+  "profile.settings.edit.email.error": "Emails should match",
   "profile.settings.discord.disconnect.confirm": "Do you want to disconnect from Discord?",
   "profile.settings.discord.disconnect": "Disconnect",
   "profile.settings.edit.discord": "Discord",