New UI for task accordion

__tests__/taskRequests/taskRequestDetails.test.js

@@ -11,7 +11,7 @@ describe('Tests the User Management User Listing Screen', () => {
 
   beforeAll(async () => {
     browser = await puppeteer.launch({
-      headless: true,
+      headless: 'new',
       ignoreHTTPSErrors: true,
       args: ['--incognito', '--disable-web-security'],
       devtools: false,

__tests__/user-details/task-duedate-hover.test.js

@@ -1,6 +1,7 @@
 const puppeteer = require('puppeteer');
 const {
   userDetailsApi,
+  usersTasksInDev,
 } = require('../../mock-data/task-card-date-hover/index'); //has user info
 const {
   superUserDetails,
@@ -49,6 +50,62 @@ describe('Tasks On User Management Page', () => {
           },
           body: JSON.stringify(superUserDetails), // Y contains the json of a superuser in the server which will grant us the access to view the page without locks
         });
+      } else if (
+        url ===
+        'https://api.realdevsquad.com/tasks/?size=3&dev=true&assignee=ajeyakrishna'
+      ) {
+        interceptedRequest.respond({
+          status: 200,
+          contentType: 'application/json',
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          },
+          body: JSON.stringify(usersTasksInDev['initial']),
+        });
+      } else if (
+        url ===
+        'https://api.realdevsquad.com/tasks?dev=true&assignee=ajeyakrishna&size=3&next=vvTPGHAs9w36oY1UnV8r'
+      ) {
+        interceptedRequest.respond({
+          status: 200,
+          contentType: 'application/json',
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          },
+          body: JSON.stringify(usersTasksInDev['vvTPGHAs9w36oY1UnV8r']),
+        });
+      } else if (
+        url ===
+        'https://api.realdevsquad.com/tasks?dev=true&assignee=ajeyakrishna&size=3&next=i1LQOKkGhhpOxE6yEo3A'
+      ) {
+        interceptedRequest.respond({
+          status: 200,
+          contentType: 'application/json',
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          },
+          body: JSON.stringify(usersTasksInDev['i1LQOKkGhhpOxE6yEo3A']),
+        });
+      } else if (
+        url ===
+        'https://api.realdevsquad.com/tasks?dev=true&assignee=ajeyakrishna&size=3&next=OhNeSTj5J72PhrA4mtrr'
+      ) {
+        interceptedRequest.respond({
+          status: 200,
+          contentType: 'application/json',
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          },
+          body: JSON.stringify(usersTasksInDev['OhNeSTj5J72PhrA4mtrr']),
+        });
       } else {
         interceptedRequest.continue();
       }
@@ -57,25 +114,6 @@ describe('Tasks On User Management Page', () => {
       'http://localhost:8000/users/details/index.html?username=sunny-s',
     );
 
-    await page.evaluate(async () => {
-      // We write the function with superUser as true
-
-      async function accessingUserData() {
-        const isSuperUser = true;
-        if (isSuperUser) {
-          await getUserTasks();
-          await getUserPrs();
-          await generateAcademicTabDetails();
-          toggleAccordionTabsVisibility();
-        } else {
-          lockAccordiansForNonSuperUser();
-        }
-      }
-
-      // Calling the function
-      await accessingUserData();
-    });
-
     await page.waitForNetworkIdle();
   });
 
@@ -141,4 +179,120 @@ describe('Tasks On User Management Page', () => {
 
     await page.waitForTimeout(500); //waiting for a moment to check changes(very helpful when you turn headless into false)
   });
+
+  it('Scroll of task should work in dev mode', async () => {
+    await page.goto(
+      'http://localhost:8000/users/details/index.html?username=ajeyakrishna&dev=true',
+    );
+    await page.waitForNetworkIdle();
+    const taskDiv = await page.$$('.accordion-tasks');
+    expect(taskDiv).toBeTruthy();
+    await taskDiv[0].click();
+
+    const userTasksDevDiv = await page.$('.user-tasks-dev');
+    expect(userTasksDevDiv).toBeTruthy();
+
+    await page.evaluate(() => {
+      window.scrollBy(0, window.document.body.scrollHeight);
+    });
+    await page.waitForNetworkIdle();
+
+    await page.evaluate(() => {
+      window.scrollBy(0, window.document.body.scrollHeight);
+    });
+    await page.waitForNetworkIdle();
+
+    await page.evaluate(() => {
+      window.scrollBy(0, window.document.body.scrollHeight);
+    });
+    await page.waitForNetworkIdle();
+
+    await page.evaluate(() => {
+      window.scrollBy(0, window.document.body.scrollHeight);
+    });
+    await page.waitForNetworkIdle();
+
+    let renderedTasks = await userTasksDevDiv.$$('.user-task');
+    expect(Array.from(renderedTasks).length).toBe(12);
+  });
+
+  it('New task card should have all the detail fields', async () => {
+    await page.goto(
+      'http://localhost:8000/users/details/index.html?username=ajeyakrishna&dev=true',
+    );
+    await page.waitForNetworkIdle();
+    const taskDiv = await page.$$('.accordion-tasks');
+    expect(taskDiv).toBeTruthy();
+    await taskDiv[0].click();
+
+    const userTasksDevDiv = await page.$('.user-tasks-dev');
+    expect(userTasksDevDiv).toBeTruthy();
+
+    let renderedTasks = await page.$$('.user-task');
+    let firstTask = await renderedTasks[0].$$('.task');
+    let firstTaskHTML = await page.evaluate(
+      (element) => element.innerHTML,
+      firstTask[0],
+    );
+
+    expect(firstTaskHTML).toContain('<div class="task-title">');
+    expect(firstTaskHTML).not.toContain('<progress');
+    expect(firstTaskHTML).toContain('<div class="detail-block eta">');
+    expect(firstTaskHTML).toContain('<div class="detail-block status">');
+    expect(firstTaskHTML).toContain('<div class="detail-block startedOn">');
+    expect(firstTaskHTML).toContain('<div class="detail-block priority">');
+    expect(firstTaskHTML).toContain('<div class="detail-block createdBy">');
+    expect(firstTaskHTML).toContain('<div class="detail-block type">');
+
+    let secondTask = await renderedTasks[1].$$('.task');
+    let secondTaskHTML = await page.evaluate(
+      (element) => element.innerHTML,
+      secondTask[0],
+    );
+
+    expect(secondTaskHTML).toContain('<div class="task-title">');
+    expect(secondTaskHTML).not.toContain('<progress');
+    expect(secondTaskHTML).toContain('<div class="detail-block eta">');
+    expect(secondTaskHTML).toContain('<div class="detail-block status">');
+    expect(secondTaskHTML).toContain('<div class="detail-block startedOn">');
+    expect(secondTaskHTML).toContain('<div class="detail-block priority">');
+    expect(secondTaskHTML).toContain('<div class="detail-block createdBy">');
+    expect(secondTaskHTML).toContain('<div class="detail-block type">');
+
+    let thirdTask = await renderedTasks[2].$$('.task');
+    let thirdTaskHTML = await page.evaluate(
+      (element) => element.innerHTML,
+      thirdTask[0],
+    );
+
+    expect(thirdTaskHTML).toContain('<div class="task-title">');
+    expect(thirdTaskHTML).not.toContain('<progress');
+    expect(thirdTaskHTML).toContain('<div class="detail-block eta">');
+    expect(thirdTaskHTML).toContain('<div class="detail-block status">');
+    expect(thirdTaskHTML).toContain('<div class="detail-block startedOn">');
+    expect(thirdTaskHTML).toContain('<div class="detail-block priority">');
+    expect(thirdTaskHTML).toContain('<div class="detail-block createdBy">');
+    expect(thirdTaskHTML).toContain('<div class="detail-block type">');
+
+    await page.evaluate(() => {
+      window.scrollBy(0, window.document.body.scrollHeight);
+    });
+    await page.waitForNetworkIdle();
+
+    renderedTasks = await page.$$('.user-task');
+    let fourthTask = await renderedTasks[3].$$('.task');
+    let fourthTaskHTML = await page.evaluate(
+      (element) => element.innerHTML,
+      fourthTask[0],
+    );
+
+    expect(fourthTaskHTML).toContain('<div class="task-title">');
+    expect(fourthTaskHTML).toContain('<progress class="green"');
+    expect(fourthTaskHTML).toContain('<div class="detail-block eta">');
+    expect(fourthTaskHTML).toContain('<div class="detail-block status">');
+    expect(fourthTaskHTML).toContain('<div class="detail-block startedOn">');
+    expect(fourthTaskHTML).toContain('<div class="detail-block priority">');
+    expect(fourthTaskHTML).toContain('<div class="detail-block createdBy">');
+    expect(fourthTaskHTML).toContain('<div class="detail-block type">');
+  });
 });

extension-requests/local-utils.js

@@ -205,38 +205,6 @@ function formDataToObject(formData) {
   return result;
 }
 
-function dateDiff(date1, date2, formatter) {
-  if (date2 > date1) {
-    return dateDiff(date2, date1, formatter);
-  }
-
-  const timeDifference = new Date(date1).getTime() - new Date(date2).getTime();
-
-  const seconds = Math.floor(timeDifference / 1000);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-  const days = Math.floor(hours / 24);
-  const months = Math.floor(days / 30);
-  const years = Math.floor(days / 365);
-
-  let res;
-  if (seconds < 60) {
-    res = `${seconds} ${seconds === 1 ? 'second' : 'seconds'}`;
-  } else if (minutes < 60) {
-    res = `${minutes} ${minutes === 1 ? 'minute' : 'minutes'}`;
-  } else if (hours < 24) {
-    res = `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
-  } else if (days < 30) {
-    res = `${days} ${days === 1 ? 'day' : 'days'}`;
-  } else if (months < 12) {
-    res = `${months} ${months === 1 ? 'month' : 'months'}`;
-  } else {
-    res = `${years} ${years === 1 ? 'year' : 'years'}`;
-  }
-
-  return formatter ? formatter(res) : res;
-}
-
 const addSpinner = (container) => {
   const spinner = createElement({
     type: 'div',

footerTest.js

@@ -2,7 +2,7 @@ const puppeteer = require('puppeteer');
 
 let config = {
   launchOptions: {
-    headless: true,
+    headless: 'new',
     ignoreHTTPSErrors: true,
   },
 };