Setup Github Workflow

.github/workflows/continuous-integration.yml

@@ -0,0 +1,29 @@
+# For more information see: https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions
+
+name: Continuous Integration
+
+on:
+  pull_request:
+    branches: ['*']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+      - run: yarn
+      - run: yarn prettier:check
+      - run: yarn test:coverage
+      - run: yarn build

jest.config.js

@@ -1,16 +1,11 @@
 const nextJest = require('next/jest');
 
-const createJestConfig = nextJest({
-  dir: './',
-});
+const createJestConfig = nextJest({ dir: './' });
 
 const customJestConfig = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   moduleDirectories: ['node_modules', '<rootDir>/'],
   testEnvironment: 'jest-environment-jsdom',
-  testEnvironmentOptions: {
-    customExportConditions: [''],
-  },
 };
 
 module.exports = createJestConfig(customJestConfig);

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "volta": {
-    "node": "18.16.0",
+    "node": "18.20.8",
     "yarn": "1.22.19"
   },
   "scripts": {
@@ -13,6 +13,8 @@
     "build:production": "cp ./env/.env.production .env && next build",
     "start": "next start",
     "test": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "build": "next build",
     "lint:check": "next lint",
     "lint:fix": "next lint --fix",
     "build:staging": "cp ./env/.env.staging .env && next build",
@@ -31,8 +33,7 @@
     "@types/node": "22.5.0",
     "@types/react": "18.3.4",
     "@types/react-dom": "18.3.0",
-    "@types/react-toastify": "^4.1.0",
-    "eslint": "9.9.0",
+    "eslint": "^8.57.0",
     "eslint-config-next": "14.2.6",
     "framer-motion": "^11.3.29",
     "module-alias": "^2.2.3",
@@ -47,18 +48,25 @@
     "whatwg-fetch": "^3.6.20"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
-    "autoprefixer": "^10.4.20",
+    "@testing-library/dom": "^8.19.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.14",
+    "autoprefixer": "^10.4.13",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "local-ssl-proxy": "^2.0.5",
-    "msw": "^2.4.1",
+    "msw": "^1.3.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.41",
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.10"
+  },
+  "resolutions": {
+    "string-width": "^4.2.3",
+    "strip-ansi": "^6.0.1",
+    "wrap-ansi": "^7.0.0",
+    "mute-stream": "^1.0.0"
   }
 }

src/components/Layout/Navbar/NavbarDesktop.tsx

@@ -24,7 +24,7 @@ const NavbarDesktop: FC<NavbarTypes> = ({
   ));
 
   return (
-    <nav className={styles.navbar} data-testId="navbarDesktop">
+    <nav className={styles.navbar} data-testid="navbarDesktop">
       <UnorderedList listStyleType="none" className={styles.navbar_menu}>
         <ListItem>
           <Link href={HOME_URL}>

src/components/Layout/Navbar/NavbarMobile.tsx

@@ -28,9 +28,9 @@ const NavbarMobile: FC<NavbarTypes> = ({
 
   return (
     <>
-      <Box className={styles.navbarMobile_container} data-testId="navbarMobile">
+      <Box className={styles.navbarMobile_container} data-testid="navbarMobile">
         <Button
-          data-testId="hamburger"
+          data-testid="hamburger"
           onClick={() => setNavLinksVisibility((prev) => !prev)}
         >
           <Image
@@ -51,7 +51,7 @@ const NavbarMobile: FC<NavbarTypes> = ({
       </Box>
       {navLinksVisibility && (
         <UnorderedList
-          data-testId="linksContainer"
+          data-testid="linksContainer"
           listStyleType="none"
           className={styles.navbarMobile_menu}
         >

src/components/MemberContribution/ContributionAccordianItem.tsx

@@ -9,8 +9,7 @@ import Image from 'next/image';
 import { useGetIsSuperUser } from '../../utils/customHooks';
 import { LINKS } from '@/src/constants/AppConstants';
 
-
-const URL =LINKS.STATUS_BASE_URL
+const URL = LINKS.STATUS_BASE_URL;
 interface TaskDetails {
   title: string;
   state: string;
@@ -30,7 +29,6 @@ type ContributionAccordionItemProps = Readonly<{
   openTaskStatusUpdateModal: (taskId: string, isTaskNoteworthy: string) => void;
 }>;
 
-
 export default function ContributionAccordianItem({
   task,
   isTitle,
@@ -60,26 +58,25 @@ export default function ContributionAccordianItem({
       onMouseLeave={hideSetting}
       pb={4}
       className={styles.memberContribution_wrapper}
-      data-testId="contributionContainer"
+      data-testid="contributionContainer"
     >
-
-        {task.id ? (
-          <Link
-            href={`${URL}${task.id}`}
-            isExternal
-            className={styles.memberContribution_taskHeading}
-          >
-            {taskTitle}
-          </Link>
-        ) : (
-          <Link
-            href={`${task.url}`}
-            isExternal
-            className={styles.memberContribution_taskHeading}
-          >
-            {taskTitle}
-          </Link>
-        )}
+      {task.id ? (
+        <Link
+          href={`${URL}${task.id}`}
+          isExternal
+          className={styles.memberContribution_taskHeading}
+        >
+          {taskTitle}
+        </Link>
+      ) : (
+        <Link
+          href={`${task.url}`}
+          isExternal
+          className={styles.memberContribution_taskHeading}
+        >
+          {taskTitle}
+        </Link>
+      )}
       <Text mt={'0.4rem'} mb={'0.2rem'} color={'#636363'}>
         {purpose}
       </Text>
@@ -105,7 +102,7 @@ export default function ContributionAccordianItem({
           right="-10px"
           background="none"
           _hover={{ bg: 'none' }}
-          data-testId="settingButton"
+          data-testid="settingButton"
         >
           <Image src="/icons/setting.svg" alt="" width={15} height={15} />
         </Button>

src/components/MembersSectionNew/components/MembersCard/Presentation.tsx

@@ -62,7 +62,7 @@ export default function MembersCardPresentation({
       onMouseLeave={hideSetting}
       onClick={(e: SyntheticEvent) => routeHandler(e)}
       className={styles.member_card}
-      data-testId="member card button"
+      data-testid="member card button"
     >
       <Image
         className={styles.member_card__image}
@@ -74,14 +74,14 @@ export default function MembersCardPresentation({
           {`${member.first_name} ${member.last_name}`}
         </Text>
         <small
-          data-testId="designation"
+          data-testid="designation"
           className={styles.member_card__designation}
         >
           {member.designation}
         </small>
       </Box>
       <Flex
-        data-testId="socials links"
+        data-testid="socials links"
         justify="center"
         className={styles.member_card__socials}
         gap={1}

src/components/Modals/MembersSkillUpdateModal/Presentation.tsx

@@ -55,12 +55,12 @@ export default function MembersSkillUpdateModalPresentation({
             name={firstName}
             src={picture}
           />
-          <p data-testId="username" className={styles.memberProfile_name}>
+          <p data-testid="username" className={styles.memberProfile_name}>
             {`${firstName} ${lastName?.charAt(0)}.`}
           </p>
         </ModalHeader>
         <ModalCloseButton
-          data-testId="close btn main"
+          data-testid="close btn main"
           className={styles.memberModal_headerCloseButton}
         />
         <ModalBody className={styles.memberModal_body}>

src/components/Modals/MembersSkillUpdateModal/components/MembersActiveSkills/MembersActiveSkills.tsx

@@ -23,15 +23,15 @@ export default function MembersActiveSkills({
   return (
     <Skeleton height="80%" isLoaded={!isSkillsLoading}>
       <Wrap
-        data-testId="active skills"
+        data-testid="active skills"
         className={styles.memberActiveSkills_modal_wrap}
         spacing="1rem"
       >
         <Skills username={username} skills={skills} />
         {filteredTags?.length !== 0 && (
           <WrapItem>
             <IconButton
-              data-testId="add icon"
+              data-testid="add icon"
               className={styles.memberActiveSkills_add_icon_button}
               onClick={() => setIsTagsOpen((prevstate: boolean) => !prevstate)}
               aria-label="Add skills"

src/components/Modals/MembersSkillUpdateModal/components/TagsModal/TagsModal.tsx

@@ -27,7 +27,7 @@ export default function TagsMoadal({
   if (searchTags === '') {
     button = (
       <IconButton
-        data-testId="search btn"
+        data-testid="search btn"
         className={styles.skills_search_icon_button}
         sx={{
           minWidth: '0',
@@ -39,7 +39,7 @@ export default function TagsMoadal({
   } else {
     button = (
       <IconButton
-        data-testId="close btn"
+        data-testid="close btn"
         className={styles.skills_search_icon_button}
         onClick={() => {
           setSearchTags('');
@@ -56,7 +56,7 @@ export default function TagsMoadal({
 
   return (
     <Box
-      data-testId="tagModal bg_gray"
+      data-testid="tagModal bg_gray"
       onClick={() => setIsTagsOpen(false)}
       className={styles.bg_gray}
     >

src/components/NewMemberSection/index.tsx

@@ -43,7 +43,7 @@ export default function NewMemberSection() {
           className={styles.newMemberSectionLoadMore__container}
           ref={loadMoreRef}
         >
-          <Spinner/>
+          <Spinner />
         </div>
       )}
     </div>

src/components/NewMemberSection/newMemberSection.module.css

@@ -40,4 +40,4 @@
 .newMemberSectionLoadMore__button:disabled:hover {
   color: #020617;
   background-color: #e2e8f0;
-}
+}

src/store/superUserOptions.ts

@@ -48,7 +48,7 @@ export const superUserOptions = createSlice({
       state,
       { payload: { visibility, taskId, isTaskNoteworthy } },
     ) => {
-      (state.isTaskUpdateModalVisible = visibility), (state.taskId = taskId);
+      ((state.isTaskUpdateModalVisible = visibility), (state.taskId = taskId));
       state.isTaskNoteworthy = isTaskNoteworthy;
     },
     setUserSkillModalVisibility: (

src/test/unit/components/member-contribution/ContributionAccordianItem.test.tsx

@@ -32,8 +32,7 @@ describe('ContributionAccordianItem', () => {
     );
     expect(deliveryDetails).toBeInTheDocument();
 
-    const contributionHeading = screen.getByRole('heading', {
-      level: 3,
+    const contributionHeading = screen.getByRole('link', {
       name: 'Make Real Dev Squad work!',
     });
     expect(contributionHeading).toBeInTheDocument();
@@ -64,8 +63,7 @@ describe('ContributionAccordianItem', () => {
     );
     expect(container).toBeInTheDocument();
 
-    const contributionHeading = screen.getByRole('heading', {
-      level: 3,
+    const contributionHeading = screen.getByRole('link', {
       name: '[Design doc] For deciding the final indexes on the table.',
     });
     expect(contributionHeading).toBeInTheDocument();
@@ -93,8 +91,7 @@ describe('ContributionAccordianItem', () => {
     const contributionContainer = screen.getByTestId('contributionContainer');
     expect(contributionContainer).toBeInTheDocument();
 
-    const contributionHeading = screen.getByRole('heading', {
-      level: 3,
+    const contributionHeading = screen.getByRole('link', {
       name: 'Create multiple Extension Requests',
     });
     expect(contributionHeading).toBeInTheDocument();

src/utils/toast.tsx

@@ -6,10 +6,7 @@ export default function Toast() {
 }
 
 const notifyBase = (text: string, type: 'success' | 'error' | 'info') => {
-  toast[type](text, {
-    position: toast.POSITION.TOP_RIGHT,
-    autoClose: 2000,
-  } as ToastOptions); // Here, we use `ToastOptions` to provide type information for the options object.
+  toast[type](text, { position: 'top-right', autoClose: 2000 } as ToastOptions); // Here, we use `ToastOptions` to provide type information for the options object.
 };
 
 export const notifySuccess = (text: string) => notifyBase(text, 'success');

styles/Home.module.css

@@ -145,7 +145,6 @@
   }
 }
 
-
 @media only screen and (max-width: 767px) {
   .content {
     margin-top: 1rem;