Merge branch 'Real-Dev-Squad:develop' into develop

Real-Dev-Squad · Sep 22, 2024 · 24f4451 · 24f4451
2 parents 2244976 + 7533e96
commit 24f4451
Show file tree

Hide file tree

Showing 13 changed files with 289 additions and 76 deletions.
diff --git a/__tests__/extension-requests/extension-requests.test.js b/__tests__/extension-requests/extension-requests.test.js
@@ -4,7 +4,7 @@ const {
   extensionRequestsListPending,
   extensionRequestsListApproved,
   extensionRequestResponse,
-  extensionRequestsListPendingDescending,
+  extensionRequestsListPendingAscending,
   extensionRequestsListUserSearch,
   extensionRequestListForAuditLogs,
 } = require('../../mock-data/extension-requests');
@@ -46,9 +46,9 @@ describe('Tests the Extension Requests Screen', () => {
       const url = interceptedRequest.url();
       if (
         url ===
-          'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3APENDING' ||
+          'https://api.realdevsquad.com/extension-requests?order=desc&size=5&q=status%3APENDING' ||
         url ===
-          'https://api.realdevsquad.com/extension-requests?dev=true&order=asc'
+          'https://api.realdevsquad.com/extension-requests?dev=true&order=desc'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -86,7 +86,7 @@ describe('Tests the Extension Requests Screen', () => {
         });
       } else if (
         url ===
-        'https://api.realdevsquad.com/extension-requests?order=desc&size=5&q=status%3APENDING'
+        'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3APENDING'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -96,7 +96,7 @@ describe('Tests the Extension Requests Screen', () => {
             'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
             'Access-Control-Allow-Headers': 'Content-Type, Authorization',
           },
-          body: JSON.stringify(extensionRequestsListPendingDescending),
+          body: JSON.stringify(extensionRequestsListPendingAscending),
         });
       } else if (
         url === 'https://api.realdevsquad.com/users?search=sunny&size=1'
@@ -196,7 +196,7 @@ describe('Tests the Extension Requests Screen', () => {
         });
       } else if (
         url ===
-        'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3APENDING%2Cassignee%3AiODXB6gfsjaZB9p0XlBw'
+        'https://api.realdevsquad.com/extension-requests?order=desc&size=5&q=status%3APENDING%2Cassignee%3AiODXB6gfsjaZB9p0XlBw'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -210,7 +210,7 @@ describe('Tests the Extension Requests Screen', () => {
         });
       } else if (
         url ===
-        'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3APENDING%2Cassignee%3AiODXB6gfsjaZB9p0XlBw%2B7yzVDl8s1ORNCtH9Ps7K'
+        'https://api.realdevsquad.com/extension-requests?order=desc&size=5&q=status%3APENDING%2Cassignee%3AiODXB6gfsjaZB9p0XlBw%2B7yzVDl8s1ORNCtH9Ps7K'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -278,9 +278,9 @@ describe('Tests the Extension Requests Screen', () => {
         });
       } else if (
         url ===
-          'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3AAPPROVED%2BPENDING%2BDENIED' ||
+          'https://api.realdevsquad.com/extension-requests?order=desc&size=5&q=status%3AAPPROVED%2BPENDING%2BDENIED' ||
         url ===
-          'https://api.realdevsquad.com/extension-requests?dev=true&order=asc&q=status%3AAPPROVED%2BDENIED'
+          'https://api.realdevsquad.com/extension-requests?dev=true&order=desc&q=status%3AAPPROVED%2BDENIED'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -346,7 +346,7 @@ describe('Tests the Extension Requests Screen', () => {
         });
       } else if (
         url ===
-        'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3AAPPROVED%2Cassignee%3AiODXB6gfsjaZB9p0XlBw%2B7yzVDl8s1ORNCtH9Ps7K'
+        'https://api.realdevsquad.com/extension-requests?order=desc&size=5&q=status%3AAPPROVED%2Cassignee%3AiODXB6gfsjaZB9p0XlBw%2B7yzVDl8s1ORNCtH9Ps7K'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -360,7 +360,7 @@ describe('Tests the Extension Requests Screen', () => {
         });
       } else if (
         url ===
-        'https://api.realdevsquad.com/extension-requests?order=asc&size=1&q=status%3APENDING'
+        'https://api.realdevsquad.com/extension-requests?order=desc&size=1&q=status%3APENDING'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -677,11 +677,11 @@ describe('Tests the Extension Requests Screen', () => {
 
     const sortedRequestDaysArray = requestDaysArray
       .slice()
-      .sort((a, b) => a - b);
+      .sort((a, b) => b - a);
     expect(requestDaysArray).toEqual(sortedRequestDaysArray);
   });
 
-  it('Checks whether the cards displayed in descending order when sort icon is clicked', async () => {
+  it('Checks whether the cards displayed in ascending order when sort icon is clicked', async () => {
     const sortButton = await page.$('.sort-button');
 
     await sortButton.click();
@@ -697,7 +697,7 @@ describe('Tests the Extension Requests Screen', () => {
       requestDaysArray.push(requestedDays.slice(5));
     }
 
-    const sortedRequestDaysArray = [...requestDaysArray].sort().reverse();
+    const sortedRequestDaysArray = [...requestDaysArray].sort();
 
     expect(requestDaysArray).toEqual(sortedRequestDaysArray);
   });
@@ -916,12 +916,12 @@ describe('Tests the Extension Requests Screen', () => {
     await page.waitForNetworkIdle();
     const url = page.url();
     expect(url).toBe(
-      `${baseUrl}?order=asc&size=5&q=status%3AAPPROVED%2Cassignee%3Asunny%2Brandhir`,
+      `${baseUrl}?order=desc&size=5&q=status%3AAPPROVED%2Cassignee%3Asunny%2Brandhir`,
     );
   });
   it('Should have UI elements in sync with url', async () => {
     await page.goto(
-      `${baseUrl}/?order=asc&size=5&q=status%3AAPPROVED%2Cassignee%3Asunny%2Brandhir`,
+      `${baseUrl}/?order=desc&size=5&q=status%3AAPPROVED%2Cassignee%3Asunny%2Brandhir`,
     );
     const filterButton = await page.$('#filter-button');
     await filterButton.click();
@@ -936,15 +936,15 @@ describe('Tests the Extension Requests Screen', () => {
     );
     expect(searchText).toBe('sunny,randhir');
     await page.waitForSelector('.sort-button');
-    const ascSortIconDisplayStyle = await page.$eval(
-      '#asc-sort-icon',
+    const descSortIconDisplayStyle = await page.$eval(
+      '#desc-sort-icon',
       (icon) => window.getComputedStyle(icon).display,
     );
-    expect(ascSortIconDisplayStyle).toBe('block');
+    expect(descSortIconDisplayStyle).toBe('block');
   });
 
   it('Should show empty message if all extension requests have been addressed', async () => {
-    await page.goto(`${baseUrl}/?order=asc&size=1&q=status%3APENDING`);
+    await page.goto(`${baseUrl}/?order=desc&size=1&q=status%3APENDING`);
     await page.waitForNetworkIdle();
 
     extensionRequestsElement = await page.$('.extension-requests');

diff --git a/__tests__/groups/group.test.js b/__tests__/groups/group.test.js
@@ -243,4 +243,27 @@ describe('Discord Groups Page', () => {
 
     expect(groupCreationModalClosed).toBeFalsy();
   });
+
+  test('Should display only specified groups when dev=true and name=<group-name> with different case', async () => {
+    const groupNames = 'fIrSt,DSA+COdInG';
+    await page.goto(`${PAGE_URL}/groups?dev=true&name=${groupNames}`);
+    await page.waitForNetworkIdle();
+
+    const displayedGroups = await page.evaluate(() => {
+      return Array.from(document.querySelectorAll('.card__title')).map(
+        (el) => el.textContent,
+      );
+    });
+
+    expect(displayedGroups).toEqual(['First Daaa', 'DSA Coding Group']);
+  });
+
+  test('Should display no group found div when no group is present', async () => {
+    await page.goto(`${PAGE_URL}/groups?dev=true&name=no-group-present`);
+    await page.waitForNetworkIdle();
+
+    const noGroupDiv = await page.$('.no-group-container');
+
+    expect(noGroupDiv).toBeTruthy();
+  });
 });
diff --git a/__tests__/user-details/task-duedate-hover.test.js b/__tests__/user-details/task-duedate-hover.test.js
@@ -182,7 +182,7 @@ describe('Tasks On User Management Page', () => {
 
   it('Scroll of task should work', async () => {
     await page.goto(
-      'http://localhost:8000/users/details/index.html?username=ajeyakrishna',
+      'http://localhost:8000/users/details/index.html?username=ankush',
     );
     await page.waitForNetworkIdle();
     const taskDiv = await page.$$('.accordion-tasks');
@@ -213,12 +213,12 @@ describe('Tasks On User Management Page', () => {
     await page.waitForNetworkIdle();
 
     let renderedTasks = await userTasksDevDiv.$$('.user-task');
-    expect(Array.from(renderedTasks).length).toBe(12);
+    expect(Array.from(renderedTasks).length).toBe(15);
   });
 
   it('New task card should have all the detail fields', async () => {
     await page.goto(
-      'http://localhost:8000/users/details/index.html?username=ajeyakrishna',
+      'http://localhost:8000/users/details/index.html?username=ankush',
     );
     await page.waitForNetworkIdle();
     const taskDiv = await page.$$('.accordion-tasks');
@@ -236,7 +236,7 @@ describe('Tasks On User Management Page', () => {
     );
 
     expect(firstTaskHTML).toContain('<div class="task-title">');
-    expect(firstTaskHTML).not.toContain('<progress');
+    expect(firstTaskHTML).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">');
@@ -251,7 +251,7 @@ describe('Tasks On User Management Page', () => {
     );
 
     expect(secondTaskHTML).toContain('<div class="task-title">');
-    expect(secondTaskHTML).not.toContain('<progress');
+    expect(secondTaskHTML).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">');
@@ -266,7 +266,7 @@ describe('Tasks On User Management Page', () => {
     );
 
     expect(thirdTaskHTML).toContain('<div class="task-title">');
-    expect(thirdTaskHTML).not.toContain('<progress');
+    expect(thirdTaskHTML).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">');

diff --git a/applications/index.html b/applications/index.html
@@ -77,8 +77,18 @@ <h2>Status</h2>
         </button>
         <div class="application-details-main"></div>
         <div class="application-details-actions">
-          <button class="application-details-accept">Accept</button>
-          <p class="application-details-reject">Reject</p>
+          <button
+            class="application-details-accept"
+            aria-label="Accept Application"
+          >
+            Accept
+          </button>
+          <button
+            class="application-details-reject"
+            aria-label="Reject Application"
+          >
+            Reject
+          </button>
         </div>
       </div>
       <main class="application-container"></main>

diff --git a/applications/style.css b/applications/style.css
@@ -2,6 +2,7 @@
   font-family: 'Inter', sans-serif;
   --color-primary: #1d1283;
   --color-primary-hover: #11085c;
+  --color-button-hover: #2c1bc6;
   --white: #fff;
   --color-gray: #666;
   --black-color: black;
@@ -48,7 +49,7 @@ body {
 .container {
   max-width: 1100px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 1rem;
   overflow-y: auto;
 }
 
@@ -145,7 +146,6 @@ body {
 .application-container {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
   padding-bottom: 10px;
   padding-top: 32px;
   gap: 25px;
@@ -159,7 +159,10 @@ body {
   border-radius: 15px;
   box-shadow: var(--elevation-1);
   padding: 24px;
-  width: 44%;
+  width: 85%;
+  max-width: 800px;
+  box-sizing: border-box;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -364,16 +367,57 @@ body {
 
 .application-details .application-details-actions .application-details-reject {
   color: var(--red-color);
-  height: auto;
   background-color: white;
-  margin-left: auto;
-  margin-right: auto;
-  text-decoration: underline;
+  margin: 0 auto;
+  width: 40%;
+  border: 2px solid var(--red-color);
+}
+
+.application-details
+  .application-details-actions
+  .application-details-reject:is(:hover, :active, :focus-visible) {
+  background: var(--red-color);
+  color: var(--white);
+  transition: transform 0.2s ease;
+  will-change: transform;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-reject:hover {
+  transform: scale(1.05);
+}
+
+.application-details
+  .application-details-actions
+  .application-details-reject:active {
+  animation: bounceBackAnimation 0.4s ease forwards;
 }
 
 .application-details .application-details-actions .application-details-accept {
   background: var(--color-primary);
-  width: 50%;
+  margin: 0 auto;
+  width: 40%;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-accept:is(:hover, :active, :focus-visible) {
+  background: var(--color-button-hover);
+  transition: transform 0.2s ease;
+  will-change: transform;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-accept:hover {
+  transform: scale(1.05);
+}
+
+.application-details
+  .application-details-actions
+  .application-details-accept:active {
+  animation: bounceBackAnimation 0.4s ease forwards;
 }
 
 .application-details-actions .hidden {
@@ -442,6 +486,28 @@ body {
   opacity: 0.2;
 }
 
+@keyframes bounceBackAnimation {
+  0% {
+    transform: scale(1);
+  }
+
+  25% {
+    transform: scale(0.9);
+  }
+
+  55% {
+    transform: scale(1.1);
+  }
+
+  75% {
+    transform: scale(0.9);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
 @keyframes slideIn {
   from {
     right: -300px;
@@ -463,10 +529,6 @@ body {
 }
 
 @media screen and (max-width: 850px) {
-  .application-card {
-    width: 100%;
-  }
-
   .container {
     padding: 1rem;
   }
@@ -478,4 +540,8 @@ body {
     height: 100%;
     border-radius: 0;
   }
+
+  .application-card {
+    width: 90%;
+  }
 }