Merge branch 'fix/ci-test' of https://github.com/Real-Dev-Squad/websi…

…te-dashboard into fix/ci-test

__tests__/applications/applications.test.js

@@ -103,6 +103,23 @@ describe('Applications page', () => {
             'Access-Control-Allow-Headers': 'Content-Type, Authorization',
           },
         });
+      } else if (
+        request.url() ===
+        `${API_BASE_URL}/applications?size=6&status=pending&dev=true`
+      ) {
+        request.respond({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            applications: acceptedApplications,
+            totalCount: acceptedApplications.length,
+          }),
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          },
+        });
       } else {
         request.continue();
       }
@@ -129,6 +146,12 @@ describe('Applications page', () => {
     expect(applicationCards.length).toBe(6);
   });
 
+  it('should render the index of pending applications under dev flag === true', async function () {
+    await page.goto(`${SITE_URL}/applications?dev=true&status=pending`);
+    const indexOfApplication = await page.$$('[data-testid="user-index"]');
+    expect(indexOfApplication).toBeTruthy();
+  });
+
   it('should render the initial UI elements under dev flag === true', async function () {
     await page.goto(`${SITE_URL}/applications?dev=true`);
     const title = await page.$('.header h1');

__tests__/users/user-management-home-screen.test.js

@@ -108,40 +108,46 @@ describe('Tests the User Management User Listing Screen', () => {
     expect(liList.length).toBeGreaterThan(0);
   });
 
-  it('checks the search functionality to display queried user', async () => {
+  it('Checks the search functionality to display queried user', async () => {
     await page.type('input[id="user-search"]', 'randhir');
     await page.waitForNetworkIdle();
     const userList = await page.$('#user-list');
     const userCard = await userList.$$('li');
     expect(userCard.length).toBeGreaterThan(0);
   });
 
-  it('checks the next and previous button functionality', async () => {
-    await page.goto('http://localhost:8000/users');
-    await page.waitForNetworkIdle();
+  it('Checks for empty string input once the user removes their input', async () => {
+    // Find the user list and the user cards
+    const userList = await page.$('#head_list');
+    let userCard = await userList.$$('li');
 
-    // Get the "next" button and check if it is enabled
-    const nextBtn = await page.$('#nextButton');
-    const isNextButtonDisabled = await page.evaluate(
-      (button) => button.disabled,
-      nextBtn,
-    );
-    expect(isNextButtonDisabled).toBe(false);
+    await page.click('input[id="user-search"]');
+    await page.keyboard.down('Control'); // On Mac, use 'Meta' instead of 'Control'
+    await page.keyboard.press('A');
+    await page.keyboard.up('Control');
+    await page.keyboard.press('Backspace');
 
-    // Click the "next" button and wait for the page to load
-    await nextBtn.click();
     await page.waitForNetworkIdle();
 
-    // Check that the "next" button is still present and the "previous" button is not disabled
-    const updatedNextButton = await page.$('#nextButton');
-    expect(updatedNextButton).toBeTruthy();
+    userCard = await userList.$$('li');
+
+    expect(userCard.length).toBeGreaterThan(0);
+  });
 
-    const prevBtn = await page.$('#prevButton');
-    const isPrevButtonDisabled = await page.evaluate(
-      (button) => button.disabled,
-      prevBtn,
+  it('checks infinite scroll functionality to load more users', async () => {
+    await page.goto('http://localhost:8000/users');
+    await page.waitForNetworkIdle();
+    const userList = await page.$('#user-list');
+    let initialUserCount = await userList.$$eval('li', (items) => items.length);
+    expect(initialUserCount).toBeGreaterThan(0);
+    await page.evaluate(() => {
+      window.scrollTo(0, document.body.scrollHeight);
+    });
+    const updatedUserCount = await userList.$$eval(
+      'li',
+      (items) => items.length,
     );
-    expect(isPrevButtonDisabled).toBe(false);
+    expect(updatedUserCount).toBeGreaterThanOrEqual(initialUserCount);
   });
 
   it('Clicking on filter button should display filter modal', async () => {

applications/script.js

@@ -8,6 +8,8 @@ import {
 } from './utils.js';
 let nextLink;
 let isDataLoading = false;
+let totalApplicationCount = 0;
+let currentApplicationIndex = 0;
 const loader = document.querySelector('.loader');
 const filterModal = document.querySelector('.filter-modal');
 const backDrop = document.querySelector('.backdrop');
@@ -38,6 +40,7 @@ const applicationDetailsActionsContainer = document.querySelector(
 );
 const urlParams = new URLSearchParams(window.location.search);
 const isDev = urlParams.get('dev') === 'true';
+let isApplicationPending = urlParams.get('status') === 'pending';
 const filterButton = isDev
   ? document.getElementById('filter-button-new')
   : document.getElementById('filter-button');
@@ -100,6 +103,7 @@ function changeFilter() {
   } else {
     totalCountElement.classList.add('hidden');
     status = 'all';
+    totalApplicationCount = 0;
   }
   applicationContainer.innerHTML = '';
 }
@@ -297,7 +301,7 @@ function removeQueryParamInUrl(queryParamKey) {
   window.history.replaceState(window.history.state, '', updatedUrl);
 }
 
-function createApplicationCard({ application, dev }) {
+function createApplicationCard({ application, dev, index }) {
   const applicationCard = createElement({
     type: 'div',
     attributes: { class: 'application-card' },
@@ -314,6 +318,29 @@ function createApplicationCard({ application, dev }) {
     innerText: application.biodata.firstName,
   });
 
+  if (dev && isApplicationPending) {
+    const usernameTextAndIndex = createElement({
+      type: 'div',
+      attributes: { class: 'user-text-index' },
+    });
+
+    const userIndex = createElement({
+      type: 'input',
+      attributes: {
+        type: 'number',
+        value: `${index}`,
+        readonly: '',
+        class: 'user-index',
+        'data-testid': 'user-index',
+      },
+    });
+    usernameTextAndIndex.appendChild(usernameText);
+    usernameTextAndIndex.appendChild(userIndex);
+    userInfoContainer.appendChild(usernameTextAndIndex);
+  } else {
+    userInfoContainer.appendChild(usernameText);
+  }
+
   const companyNameText = createElement({
     type: 'p',
     attributes: { class: 'company-name hide-overflow' },
@@ -326,7 +353,6 @@ function createApplicationCard({ application, dev }) {
     innerText: `Skills: ${application.professional.skills}`,
   });
 
-  userInfoContainer.appendChild(usernameText);
   userInfoContainer.appendChild(companyNameText);
   userInfoContainer.appendChild(skillsText);
 
@@ -382,7 +408,10 @@ async function renderApplicationCards(next, status, isInitialRender, dev) {
   changeLoaderVisibility({ hide: true });
   const applications = data.applications;
   const totalSelectedCount = data.totalCount;
-
+  if (isInitialRender) {
+    totalApplicationCount = data.totalCount;
+    currentApplicationIndex = totalApplicationCount;
+  }
   nextLink = data.next;
   if (isDev && status != 'all') {
     showAppliedFilter(status);
@@ -394,12 +423,19 @@ async function renderApplicationCards(next, status, isInitialRender, dev) {
   }
   if (!applications.length)
     return noApplicationFoundText.classList.remove('hidden');
-  applications.forEach((application) => {
+
+  if (isInitialRender || !next) {
+    applicationContainer.innerHTML = '';
+    currentApplicationIndex = totalSelectedCount;
+  }
+  applications.forEach((application, index) => {
     const applicationCard = createApplicationCard({
       application,
       dev,
+      index: currentApplicationIndex,
     });
     applicationContainer.appendChild(applicationCard);
+    currentApplicationIndex--;
   });
 }
 
@@ -448,7 +484,8 @@ async function renderApplicationById(id) {
   if (applicationId) {
     await renderApplicationById(applicationId);
   }
-
+  totalApplicationCount = 0;
+  currentApplicationIndex = 0;
   if (isDev) {
     await renderApplicationCards('', status, true, isDev);
   } else {
@@ -467,7 +504,7 @@ const intersectionObserver = new IntersectionObserver(async (entries) => {
   if (entries[0].isIntersecting && !isDataLoading) {
     const dev = urlParams.get('dev');
     if (dev) {
-      await renderApplicationCards(nextLink, status, true, dev);
+      await renderApplicationCards(nextLink, status, false, dev);
     } else {
       await renderApplicationCards(nextLink);
     }
@@ -514,7 +551,7 @@ if (isDev) {
     const dev = urlParams.get('dev');
 
     if (dev) {
-      renderApplicationCards(nextLink, status, false, dev);
+      renderApplicationCards(nextLink, status, true, dev);
     } else {
       renderApplicationCards(nextLink, status);
     }
@@ -539,7 +576,7 @@ function applyFilter(filter, isDev) {
     addQueryParamInUrl('status', filter);
     changeFilter();
     status = filter;
-    renderApplicationCards(nextLink, status, false, isDev);
+    renderApplicationCards('', status, false, isDev);
     filterDropdown.style.display = 'none';
   }
 }
@@ -550,7 +587,7 @@ filterRemove.addEventListener('click', () => {
   removeQueryParamInUrl('status');
   changeFilter();
   const dev = urlParams.get('dev');
-  renderApplicationCards(nextLink, status, false, dev);
+  renderApplicationCards(nextLink, status, true, dev);
 });
 
 backDrop.addEventListener('click', () => {

applications/style.css

@@ -17,6 +17,19 @@
   --color-red-variant1: #f43030;
 }
 
+.user-text-index {
+  display: flex;
+  justify-content: space-between;
+}
+
+.user-index {
+  width: 60px;
+  border: none;
+  font-style: normal;
+  font-size: 20px;
+  font-weight: 700;
+}
+
 body {
   font-family: 'Roboto', sans-serif;
   margin: 0;

online-members/online-members.css

@@ -13,7 +13,7 @@
 }
 
 .task-container {
-  overflow: scroll;
+  overflow: auto;
   display: none;
   padding-top: 10px;
   max-height: 85vh;

online-members/script.js

@@ -142,7 +142,7 @@ async function generateUserTaskData(username) {
     return;
   }
 
-  showLoadingSpinner(`${TASKS_CONTAINER_ID}`);
+  showLoadingSpinner(`#${TASKS_CONTAINER_ID}`);
 
   isTaskDataBeingFetched = true;
 

profile-diff-details/script.js

@@ -122,7 +122,7 @@ async function setUser(profileDiff) {
     type: 'img',
     attributes: {
       class: 'user_image',
-      src: user.picture.url,
+      src: user.picture?.url || 'assets/default-profile.svg',
       height: '71px',
       width: '71px',
     },
@@ -135,7 +135,7 @@ async function setUser(profileDiff) {
       class: 'user_name',
     },
   });
-  username.innerHTML = `${user.first_name} ${user.last_name}`;
+  username.innerHTML = `${user.first_name || ''} ${user.last_name || ''}`;
   CONTAINER.appendChild(username);
 
   const expandControlContainer = createElement({