Injiweb ts migration with unit testing setup with jest

inji-web/package.json

@@ -3,30 +3,40 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@reduxjs/toolkit": "^2.2.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.96",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4",
+
+    "@reduxjs/toolkit": "^2.2.3",
     "@types/react-redux": "^7.1.33",
     "crypto-js": "^4.2.0",
     "i18next": "^23.11.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "react-i18next": "^14.1.0",
     "react-icons": "^5.1.0",
     "react-loader-spinner": "^6.1.6",
     "react-redux": "^9.1.1",
     "react-router-dom": "^6.22.0",
-    "react-scripts": "5.0.1",
     "react-toastify": "^10.0.5",
     "redux": "^5.0.1",
-    "web-vitals": "^2.1.4"
+
+    "@types/crypto-js": "^4.2.2",
+    "autoprefixer": "^9.8.6",
+    "postcss-cli": "^11.0.0",
+    "tailwindcss": "^3.4.3"
   },
   "scripts": {
-    "start": "PORT=3001 react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
-    "build:prod": "NODE_ENV=prod react-scripts build",
-    "test": "jest --coverage",
+    "test": "react-scripts test --testPathPattern=__tests__",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -46,17 +56,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@types/crypto-js": "^4.2.2",
-    "@types/node": "^20.12.7",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
-    "autoprefixer": "^9.8.6",
-    "babel-jest": "^29.7.0",
-    "babel-plugin-transform-require-ignore": "^0.1.1",
-    "postcss-cli": "^11.0.0",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.5"
   }
 }

inji-web/src/__tests__/EmptyListContainer.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import {EmptyListContainer} from "../components/Common/EmptyListContainer";
+
+
+test('renders learn react link', () => {
+    render(<EmptyListContainer content={"Hello"} />);
+    const linkElement = screen.getByText("Hello");
+    expect(linkElement).toBeInTheDocument();
+});

inji-web/src/components/Common/NavBar.tsx

@@ -22,7 +22,7 @@ export const NavBar: React.FC<NavBarProps> = (props) => {
         setSearchText(searchText)
         const apiRequest: ApiRequest = api.searchCredentialType;
         const response = await props.fetchRequest(
-            apiRequest.url(params.issuerId, searchText),
+            apiRequest.url(params.issuerId ?? "", searchText),
             apiRequest.methodType,
             apiRequest.headers()
         );

inji-web/src/pages/CredentialsPage.tsx

@@ -24,15 +24,15 @@ export const CredentialsPage: React.FC = () => {
         const fetchCall = async () => {
             let apiRequest: ApiRequest = api.fetchSpecificIssuer;
             let response = await fetchRequest(
-                apiRequest.url(params.issuerId),
+                apiRequest.url(params.issuerId ?? ""),
                 apiRequest.methodType,
                 apiRequest.headers()
             );
             dispatch(storeSelectedIssuer(response?.response));
 
             apiRequest = api.fetchCredentialTypes;
             response = await fetchRequest(
-                apiRequest.url(params.issuerId),
+                apiRequest.url(params.issuerId ?? ""),
                 apiRequest.methodType,
                 apiRequest.headers()
             );
@@ -48,7 +48,7 @@ export const CredentialsPage: React.FC = () => {
     return <React.Fragment>
         <div className="bg-light-background dark:bg-dark-background  min-h-screen"
              data-testid="Credentials-Page-Container">
-            <NavBar title={params.issuerId} search={true} fetchRequest={fetchRequest}/>
+            <NavBar title={params.issuerId ?? ""} search={true} fetchRequest={fetchRequest}/>
             <HeaderTile content={t("containerHeading")}/>
             <CredentialList state={state}/>
         </div>

inji-web/src/pages/RedirectionPage.tsx

@@ -15,9 +15,9 @@ export const RedirectionPage: React.FC = () => {
     const location = useLocation();
     const searchParams = new URLSearchParams(location.search);
     const redirectedSessionId = searchParams.get("state");
-    const activeSessionInfo: SessionObject = getActiveSession(redirectedSessionId);
+    const activeSessionInfo: any = getActiveSession(redirectedSessionId);
     const {t} = useTranslation("RedirectionPage");
-    const [session, setSession] = useState<SessionObject>(activeSessionInfo);
+    const [session, setSession] = useState<SessionObject | null>(activeSessionInfo);
 
     useEffect(() => {
         const fetchToken = async () => {
@@ -70,7 +70,7 @@ export const RedirectionPage: React.FC = () => {
 
     if (!session) {
         return <div data-testid="Redirection-Page-Container">
-            <NavBar title={activeSessionInfo?.issuerId} search={false}/>
+            <NavBar title={activeSessionInfo?.issuerId ?? ""} search={false}/>
             <DownloadResult title={t("error.invalidSession.title")}
                             subTitle={t("error.invalidSession.subTitle")}
                             state={RequestStatus.ERROR}/>
@@ -79,7 +79,7 @@ export const RedirectionPage: React.FC = () => {
 
     if (state === RequestStatus.LOADING) {
         return <div data-testid="Redirection-Page-Container">
-            <NavBar title={activeSessionInfo?.issuerId} search={false}/>
+            <NavBar title={activeSessionInfo?.issuerId ?? ""} search={false}/>
             <DownloadResult title={t("loading.title")}
                             subTitle={t("loading.subTitle")}
                             state={RequestStatus.LOADING}/>
@@ -88,15 +88,15 @@ export const RedirectionPage: React.FC = () => {
 
     if (state === RequestStatus.ERROR && error) {
         return <div data-testid="Redirection-Page-Container">
-            <NavBar title={activeSessionInfo?.issuerId} search={false}/>
+            <NavBar title={activeSessionInfo?.issuerId ?? ""} search={false}/>
             <DownloadResult title={t("error.generic.title")}
                             subTitle={t("error.generic.subTitle")}
                             state={RequestStatus.ERROR}/>
         </div>
     }
 
     return <div data-testid="Redirection-Page-Container">
-        <NavBar title={activeSessionInfo?.issuerId} search={false}/>
+        <NavBar title={activeSessionInfo?.issuerId ?? ""} search={false}/>
         <DownloadResult title={t("success.title")}
                         subTitle={t("success.subTitle")}
                         state={RequestStatus.DONE}/>

inji-web/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

inji-web/src/types/components.d.ts

@@ -12,7 +12,7 @@ export type ItemBoxProps = {
 export type NavBarProps = {
     title: string;
     search: boolean;
-    fetchRequest?: (...arg: any) => ResponseTypeObject;
+    fetchRequest?: any;
 }
 export type CredentialProps = {
     credential: CredentialWellknownObject;
@@ -43,7 +43,8 @@ export type HeaderTileProps = {
     content: string;
 }
 export type SearchIssuerProps = {
-    fetchRequest: (...arg: any) => ResponseTypeObject
+    state: RequestStatus;
+    fetchRequest: any
 }
 export type IssuersListProps = {
     state: RequestStatus;

inji-web/tsconfig.json

@@ -7,14 +7,18 @@
       "esnext"
     ],
     "allowJs": true,
-    "checkJs": false,
-    "jsx": "react",
-    "tsx": "react",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "allowSyntheticDefaultImports": true
+    "jsx": "react-jsx"
   },
   "include": [
     "src"