From 86701169ac8ab2ef9d0d686b881b7e1f143e678b Mon Sep 17 00:00:00 2001
From: Seah Yok Sim <yoksim.seah.2021@scis.smu.edu.sg>
Date: Mon, 6 Nov 2023 20:13:49 +0800
Subject: [PATCH 1/2] [SBRP-116] TDD Test for accurate applicant num for role
 listing + improve test for loading component

---
 .../pages/RoleListingManager.test.tsx         | 44 ++++++++++++++-----
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/client/src/components/pages/RoleListingManager.test.tsx b/client/src/components/pages/RoleListingManager.test.tsx
index da50468..0f7e8a7 100644
--- a/client/src/components/pages/RoleListingManager.test.tsx
+++ b/client/src/components/pages/RoleListingManager.test.tsx
@@ -25,6 +25,30 @@ describe('Role List Manager component tests', () => {
 
 })
 
+describe('Role List Manager loading tests', () => {
+    beforeAll(() => {
+        mockMatchMedia();
+    });
+
+    it ("should load data after a few seconds",() => {
+        render(
+            <Provider store={store}>
+                <BrowserRouter>
+                    <RoleListingManager/>
+                </BrowserRouter>
+            </Provider>)
+
+        expect(screen.getAllByTestId("skeleton-item")[0]).toBeInTheDocument();
+        
+        waitFor(() => {
+            expect(screen.queryAllByTestId("skeleton-item")).not.toBeInTheDocument();
+            expect(screen.getByText('HR Manager')).toBeInTheDocument();
+            expect(screen.getByText('IT Technician')).toBeInTheDocument();
+        });
+    });
+
+})
+
 describe('Role Listings component tests', () => {
     beforeAll(() => {
         mockMatchMedia();
@@ -57,16 +81,6 @@ describe('Role Listings component tests', () => {
         userEvent.click(screen.getAllByText('Open')[0])
         expect(screen.getByLabelText('Open')).toBeChecked()
     });
-
-    it('should load 3 seconds before displaying data', async () => {
-        expect(screen.getByTestId("skeleton-list")).toBeInTheDocument();
-
-        waitFor(() => {
-            expect( screen.queryByTestId("skeleton-list")).not.toBeInTheDocument();
-            expect( screen.getByText('HR Manager')).toBeInTheDocument();
-            expect( screen.getByText('IT Technician')).toBeInTheDocument();
-        });
-    });
     
     it ("able to click edit icon and redirect to update page", async () => {
         waitFor(() => {
@@ -187,7 +201,6 @@ describe('Role Listings component tests', () => {
 
     it ("Engineer Manager should display closed status", async () => {
     waitFor(() => {
-        // screen.debug(undefined, Infinity);
         const statusElement = screen.getAllByTestId('status')[3];
         const itTechnicianElement = screen.getByText("IT Technician");
         const financeStaffElement = screen.getByText("Finance Staff");
@@ -256,4 +269,13 @@ describe('Role Listings component tests', () => {
         expect(departmentElement.compareDocumentPosition(engineeringManagerElement)).toBe(4);
     });
     });
+
+    it ("should display 4 applicants for Engineering Manager", async () => {
+        waitFor(() => {
+            const applicantsElement = screen.getAllByTestId('applicant-count')[1];
+            expect(applicantsElement).toBeInTheDocument();
+
+            expect(applicantsElement).toHaveTextContent('4');
+        }
+    )});
 })
\ No newline at end of file

From 95b1e4efc52c53a09a32da3ec0b66901799a38c7 Mon Sep 17 00:00:00 2001
From: Seah Yok Sim <yoksim.seah.2021@scis.smu.edu.sg>
Date: Mon, 6 Nov 2023 20:14:20 +0800
Subject: [PATCH 2/2] [SBRP-116] Improve UI display of applicant count

---
 .../components/pages/RoleListingManager.tsx   | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/client/src/components/pages/RoleListingManager.tsx b/client/src/components/pages/RoleListingManager.tsx
index ab976ef..69f491e 100644
--- a/client/src/components/pages/RoleListingManager.tsx
+++ b/client/src/components/pages/RoleListingManager.tsx
@@ -13,6 +13,7 @@ import {
     LoadingOutlined,
     BankOutlined,
     SearchOutlined,
+    UserOutlined,
 } from '@ant-design/icons';
 import {getStaffListings} from "../../actions/staffListings";
 import {useNavigate} from "react-router-dom";
@@ -55,6 +56,7 @@ const RoleListingManager = ({
     const getHRName = (id: number) => {
         let staff = staffListing.staffListings.find((staffListing: any) => staffListing.staff_id === id);
         return staff.fname + " " + staff.lname;
+        // return "yo"
     }
 
     const today = new Date();
@@ -137,15 +139,24 @@ const RoleListingManager = ({
                                         renderItem={(item: any) => (
                                                 <List.Item
                                                     key={item.role_name}
-                                                    extra={ item.role_status === "active" ?
-                                                        <Space direction="vertical" size={30}>
-                                                            <Tooltip placement="top" title='Edit'>
-                                                            <span onClick={() => navigate("/listingManage/update/" + item.rl_id)} data-testid="edit-icon-click">
-                                                                <FormOutlined style={{fontSize: 20, cursor: "pointer"}}/>
-                                                            </span>
-                                                            </Tooltip>
-                                                        </Space>  :
-                                                        <></>
+                                                    extra={
+                                                        <Space direction="vertical" size={30} style={{display: "flex", alignItems: "flex-end"}}>
+                                                            { item.role_status === "active" ?
+                                                                <Tooltip placement="top" title='Edit'>
+                                                                <span onClick={() => navigate("/listingManage/update/" + item.rl_id)} data-testid="edit-icon-click">
+                                                                    <FormOutlined style={{fontSize: 20, cursor: "pointer"}}/>
+                                                                </span>
+                                                                </Tooltip> :
+                                                                <div></div>
+                                                            }
+                                                            
+                                                            <Space direction="vertical" size={0} style={{display: "flex", alignItems: "flex-end"}}>
+                                                                <div style={{fontSize: 30}} data-testid="applicant-count">
+                                                                    {item.application_count} <UserOutlined color="blue"/>
+                                                                </div>
+                                                                Applicants
+                                                            </Space>
+                                                        </Space>
                                                     }
                                                     style={{cursor: "pointer"}}
                                                 >
@@ -189,11 +200,6 @@ const RoleListingManager = ({
                                                             </span>
                                                         }
                                                     </Space>
-                                                        <br/>
-                                                        <span>
-                                                            <strong>Applicants: </strong>
-                                                            <span> {item.application_count} </span>
-                                                        </span>
                                                         <br/><br/>
                                                     <div>{item.rl_desc}</div>
                                                     </Link>
@@ -215,11 +221,11 @@ const RoleListingManager = ({
                                         renderItem={(item: any) => (
                                             <List.Item
                                                 key={item}
+                                                data-testid="skeleton-item"
                                             >
                                                 <Skeleton active title/>
                                             </List.Item>
                                         )}
-                                        data-testid="skeleton-list"
                                     />
                                 )
                             }