add unit testing and update the language selector (#49)

Signed-off-by: Vijay <[email protected]>

inji-web/package.json

@@ -36,7 +36,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --testPathPattern=__tests__",
+    "test": "react-scripts test --silent --testPathPattern=__tests__",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

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

@@ -0,0 +1,18 @@
+import React,{act} from 'react';
+import { render, screen }  from '@testing-library/react';
+import {EmptyListContainer} from "../../../components/Common/EmptyListContainer";
+
+
+describe("Test Empty List Container",() => {
+    test('check the presence of the container', () => {
+        render(<EmptyListContainer content={"No Issuers Found"} />);
+        const emptyElement = screen.getByTestId("EmptyList-Outer-Container");
+        expect(emptyElement).toBeInTheDocument();
+    });
+    test('check if content is rendered properly', () => {
+        render(<EmptyListContainer content={"No Issuers Found"} />);
+        const emptyElement = screen.getByTestId("EmptyList-Outer-Container");
+        expect(emptyElement).toHaveTextContent("No Issuers Found")
+    });
+})
+

inji-web/src/__tests__/components/Common/HeaderTile.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import {HeaderTile} from "../../../components/Common/HeaderTile";
+
+
+
+describe("Test Header Tile Container",() => {
+    test('check the presence of the container', () => {
+        render(<HeaderTile content={"No Issuers Found"} />);
+        const headerElement = screen.getByTestId("HeaderTile-Text");
+        expect(headerElement).toBeInTheDocument();
+    });
+    test('check if content is rendered properly', () => {
+        render(<HeaderTile content={"No Issuers Found"} />);
+        const headerElement = screen.getByTestId("HeaderTile-Text");
+        expect(headerElement).toHaveTextContent("No Issuers Found")
+    });
+})
+

inji-web/src/__tests__/components/Common/IntroBox.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import {IntroBox} from "../../../components/Common/IntroBox";
+
+
+
+describe("Test Intro Box Layout",() => {
+    test('check the presence of the container', () => {
+        render(<IntroBox />);
+        const introBoxElement = screen.getByTestId("IntroBox-Container");
+        expect(introBoxElement).toBeInTheDocument();
+    });
+    test('check the presence of the title', () => {
+        render(<IntroBox />);
+        const introBoxElement = screen.getByTestId("IntroBox-Text");
+        expect(introBoxElement).toBeInTheDocument();
+    });
+    test('check the presence of the subTitle', () => {
+        render(<IntroBox />);
+        const introBoxElement = screen.getByTestId("IntroBox-SubText");
+        expect(introBoxElement).toBeInTheDocument();
+    });
+})
+
+
+describe("Test Intro Box Content",() => {
+    test('check if content is rendered properly', () => {
+        render(<IntroBox />);
+        const headerElement = screen.getByTestId("IntroBox-Text");
+        expect(headerElement).toHaveTextContent("Intro.title")
+    });
+    test('check if content is rendered properly', () => {
+        render(<IntroBox />);
+        const headerElement = screen.getByTestId("IntroBox-SubText");
+        expect(headerElement).toHaveTextContent("Intro.subTitle")
+    });
+})

inji-web/src/__tests__/components/Common/ItemBox.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {fireEvent, render, screen} from '@testing-library/react';
+import {ItemBox} from "../../../components/Common/ItemBox";
+describe("Test Item Box Container",() => {
+    test('check the presence of the container', () => {
+        const clickHandler = jest.fn();
+        render(<ItemBox index={1} url={"/"} title={"TitleOfItemBox"} onClick={clickHandler} />);
+        const itemBoxElement = screen.getByTestId("ItemBox-Outer-Container");
+        expect(itemBoxElement).toBeInTheDocument();
+    });
+    test('check if content is rendered properly', () => {
+        const clickHandler = jest.fn();
+        render(<ItemBox index={1} url={"/"} title={"TitleOfItemBox"} onClick={clickHandler} />);
+        const itemBoxElement = screen.getByTestId("ItemBox-Outer-Container");
+        expect(itemBoxElement).toHaveTextContent("TitleOfItemBox")
+    });
+
+    test('check if item box onClick handler is working', () => {
+        const clickHandler = jest.fn();
+        render(<ItemBox index={1} url={"/"} title={"TitleOfItemBox"} onClick={clickHandler} />);
+        const itemBoxElement = screen.getByTestId("ItemBox-Outer-Container");
+        fireEvent.click(itemBoxElement);
+        expect(clickHandler).toBeCalled()
+    });
+})
+

inji-web/src/__tests__/components/Common/SpinningLoader.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import {SpinningLoader} from "../../../components/Common/SpinningLoader";
+
+
+
+describe("Test Spinning Loader Container",() => {
+    test('check the presence of the container', () => {
+        render(<SpinningLoader />);
+        const spinningElement = screen.getByTestId("SpinningLoader-Container");
+        expect(spinningElement).toBeInTheDocument();
+    });
+})
+

inji-web/src/__tests__/components/Credentials/Credentials.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {fireEvent, render, screen} from '@testing-library/react';
+import {Credential} from "../../../components/Credentials/Crendential";
+import {CredentialWellknownObject, DisplayArrayObject, LogoObject} from "../../../types/data";
+import {Provider} from "react-redux";
+
+const getCredentialObject = (): CredentialWellknownObject => {
+    return {
+        format: "ldp_vc",
+        id: "id",
+        scope: "mosip_ldp_vc",
+        display: {
+            name: "Name",
+            language: "en",
+            locale: "en",
+            logo: {
+                url: "https://url.com",
+                alt_text: "alt text of the url"
+            },
+            title: "Title",
+            description: "Description",
+        }
+    }
+}
+describe("Test Credentials Item Layout",() => {
+    test.skip('check the presence of the container', () => {
+        const clickHandler = jest.fn();
+        const credential:CredentialWellknownObject = getCredentialObject();
+        render(
+            <Provider store={{credentials: credential}}>
+            <Credential credential={credential} index={1} />
+            </Provider>
+        );
+        const itemBoxElement = screen.getByTestId("ItemBox-Outer-Container");
+        expect(itemBoxElement).toBeInTheDocument();
+    });
+    test.skip('check if content is rendered properly', () => {
+        const clickHandler = jest.fn();
+        const credential:CredentialWellknownObject = getCredentialObject();
+        render(<Credential credential={credential} index={1} />);
+        const itemBoxElement = screen.getByTestId("ItemBox-Outer-Container");
+        expect(itemBoxElement).toHaveTextContent("TitleOfItemBox")
+    });
+})
+

inji-web/src/__tests__/components/Help/HelpAccordion.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {fireEvent, render, screen} from '@testing-library/react';
+import {HelpAccordion} from "../../../components/Help/HelpAccordion";
+
+describe("Test Help Accordion Container",() => {
+    test('check the presence of the container', () => {
+        render(<HelpAccordion />);
+        const helpElement = screen.getByTestId("Help-Accordion-Container");
+        expect(helpElement).toBeInTheDocument();
+    });
+
+    test('check the presence of the container', () => {
+        render(<HelpAccordion />);
+        const helpItemElement = screen.getAllByTestId("Help-Item-Container");
+        expect(helpItemElement.length).toBe(7)
+    });
+    test('check first item should be expanded', () => {
+        render(<HelpAccordion />);
+        const helpItemElement = screen.getAllByTestId("Help-Item-Title-Text");
+        expect(helpItemElement.length).toBe(7)
+    });
+    test('check first item should be expanded', () => {
+        render(<HelpAccordion />);
+        const helpItemElement = screen.getAllByTestId("Help-Item-Content-Text");
+        expect(helpItemElement.length).toBe(1)
+    });
+})
+
+describe("Test Help Accordion Working",() => {
+    test('The Description should open when we press on the title', () => {
+        render(<HelpAccordion />);
+        const helpItemElement = screen.getAllByTestId("Help-Item-Container")[1];
+        const button = screen.getAllByTestId("Help-Item-Title-Button")[1];
+        expect(helpItemElement.childElementCount).toBe(1)
+        fireEvent.click(button);
+        expect(helpItemElement.childElementCount).toBe(2)
+    });
+
+    test('only one description should be open at a time, rest should close', () => {
+        render(<HelpAccordion />);
+        const helpItemElement = screen.getAllByTestId("Help-Item-Container")[1];
+        const button = screen.getAllByTestId("Help-Item-Title-Button")[1];
+        expect(helpItemElement.childElementCount).toBe(1)
+        fireEvent.click(button);
+        expect(helpItemElement.childElementCount).toBe(2)
+        const overallDescElemet = screen.getAllByTestId("Help-Item-Content-Text");
+        expect(overallDescElemet.length).toBe(1)
+    });
+})

inji-web/src/__tests__/components/Help/HelpAccordionItem.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {fireEvent, render, screen} from '@testing-library/react';
+import {HelpAccordionItem} from "../../../components/Help/HelpAccordionItem";
+
+describe("Test Help Accordion Container",() => {
+    test('check the presence of the container', () => {
+        const openHandler = jest.fn();
+        render(<HelpAccordionItem id={1} title={"HelpTitle"} content={["HelpContent"]} open={1} setOpen={openHandler} />);
+        const helpElement = screen.getByTestId("Help-Item-Container");
+        expect(helpElement).toBeInTheDocument();
+    });
+
+    test('if current help item is not open, it should not show description', () => {
+        const openHandler = jest.fn();
+        render(<HelpAccordionItem id={1} title={"HelpTitle"} content={["HelpContent"]} open={0} setOpen={openHandler} />);
+        const helpElement = screen.getByTestId("Help-Item-Container");
+        expect(helpElement.childElementCount).toBe(1);
+    });
+    test('if current help item is open, it should show description', () => {
+        const openHandler = jest.fn();
+        render(<HelpAccordionItem id={1} title={"HelpTitle"} content={["HelpContent"]} open={1} setOpen={openHandler} />);
+        const helpElement = screen.getByTestId("Help-Item-Container");
+        expect(helpElement.childElementCount).toBe(2);
+    });
+
+    test('if current help item is open, it should show description', () => {
+        const openHandler = jest.fn();
+        render(<HelpAccordionItem id={1} title={"HelpTitle"} content={["HelpContent"]} open={0} setOpen={openHandler} />);
+        const helpElement = screen.getByTestId("Help-Item-Container");
+        expect(helpElement.childElementCount).toBe(1);
+        const buttonElement = screen.getByTestId("Help-Item-Title-Button");
+        fireEvent.click(buttonElement);
+        expect(openHandler).toHaveBeenCalled();
+    });
+})

inji-web/src/__tests__/mockUtils.ts

@@ -0,0 +1,14 @@
+export const mockUseTranslation = () => {
+    return jest.mock('react-i18next', () => ({
+        useTranslation: () => ({
+            t: (key:string) => key,
+        }),
+    }));
+}
+
+export const mockUseNavigate = () => {
+    return jest.mock('react-router-dom', () => ({
+        ...jest.requireActual('react-router-dom'),
+        useNavigate: jest.fn(),
+    }));
+}

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

@@ -4,37 +4,61 @@ import {LanguagesSupported, switchLanguage} from "../../utils/i18n";
 import {useDispatch, useSelector} from "react-redux";
 import {storeLanguage} from "../../redux/reducers/commonReducer";
 import {RootState} from "../../types/redux";
+import {FaCheck} from "react-icons/fa6";
+import {IoIosArrowDown} from "react-icons/io";
+import {RiArrowDownSFill, RiArrowUpSFill} from "react-icons/ri";
 
 export const LanguageSelector: React.FC = () => {
     const dispatch = useDispatch();
     let language = useSelector((state: RootState) => state.common.language);
-    language = language ? language : 'en';
-    const [currentLanguage, setCurrentLanguage] = useState(language);
+    language = language ?? 'en';
+    const [isOpen, setIsOpen] = useState(false);
 
-    const handleChange = (language: string) => {
-        switchLanguage(language);
-        dispatch(storeLanguage(language));
+
+    interface DropdownItem {
+        label: string;
+        value: string;
+    }
+
+    const handleChange = (item: DropdownItem) => {
+        setIsOpen(false);
+        switchLanguage(item.value);
+        dispatch(storeLanguage(item.value));
     }
 
-    return <React.Fragment>
-        <div
-            data-testid="Language-Selector-Container"
-            className="relative flex flex-row items-center font-bold bg-white rounded leading-tight">
-            <VscGlobe
-                data-testid="Language-Selector-Icon"
-                size={30} color={'orange'}/>
-            <select
-                defaultValue={currentLanguage}
-                id="language"
-                className={"cursor-pointer text-light-title dark:text-dark-title"}
-                data-testid="Language-Selector-Options"
-                onChange={(event) => handleChange(event.target.value)}>
-                {LanguagesSupported.map(lang => {
-                    return <option
-                        className={"text-light-title dark:text-dark-title"}
-                        value={lang.value}>{lang.label}</option>
-                })}
-            </select>
+    return <div className={"flex flex-row justify-center items-center"}>
+        <VscGlobe
+            data-testid="Language-Selector-Icon"
+            size={30} color={'orange'}/>
+        <div className="relative inline-block ml-1">
+            <button
+                type="button"
+                className="inline-flex items-center font-bold"
+                onClick={() => setIsOpen(!isOpen)}>
+                <p>{LanguagesSupported.find(lang => lang.value === language)?.label}</p>
+                {isOpen ? <RiArrowUpSFill size={20} /> : <RiArrowDownSFill size={20} /> }
+            </button>
+
+            {isOpen && (
+                <div
+                    className="absolute w-40 right-0 mt-3 rounded-md shadow-lg bg-white overflow-hidden"
+                    onClick={() => setIsOpen(false)}>
+                    <ul className="py-1 divide-y divide-gray-200">
+                        {LanguagesSupported.map((item) => (
+                            <li key={item.value}
+                                className={language === item.value ? "text-light-primary dark:text-dark-primary" : ""}>
+                                <button
+                                    type="button"
+                                    className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 flex items-center justify-between flex-row"
+                                    onClick={() => handleChange(item)}>
+                                    {item.label}
+                                    {language === item.value && <FaCheck color={"orange"}/>}
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
         </div>
-    </React.Fragment>
+    </div>
 }

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

@@ -43,10 +43,10 @@ export const NavBar: React.FC<NavBarProps> = (props) => {
 
                 {props.search &&
                     <div className="flex py-1 items-center" data-testid="NavBar-Search-Container">
-                        <div className="relative w-96 mx-auto flex justify-center items-center">
+                        <div className="w-96 mx-auto flex justify-center items-center">
                             <FaSearch
                                 data-testid="NavBar-Search-Icon"
-                                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-light-searchIcon dark:text-dark-searchIcon ml-2"
+                                className="relative left-10 top-3 transform -translate-y-1/2 text-light-searchIcon dark:text-dark-searchIcon ml-2"
                                 size={20}/>
                             <input
                                 data-testid="NavBar-Search-Input"

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

@@ -3,7 +3,7 @@ import {Oval} from "react-loader-spinner";
 
 export const SpinningLoader: React.FC = () => {
     return <React.Fragment>
-        <div className={"flex justify-center items-center"}>
+        <div data-testid="SpinningLoader-Container" className={"flex justify-center items-center"}>
             <Oval
                 visible={true}
                 height="80"