tests for the extension request tab in the /request route using Puppeteer (#781)

* tabs are switching on request page

* added extension-request in request page

* added extension-request in request page

* feat: Added the whole extension page UI

* refactor: Abstract fetch logic into reusable function

- Created fetchData function to handle fetch requests with different query parameters and controllers.
- Updated getOooRequests and getExtensionRequests to use fetchData.

* refactor: Abstract fetch logic into reusable function

- Created fetchData function to handle fetch requests with different query parameters and controllers.
- Updated getOooRequests and getExtensionRequests to use fetchData.

* refactor: createExtensionCard function to optimize element creation

- Use DocumentFragment to accumulate and append elements efficiently
- Simplify element creation with template literals
- Extract repetitive tasks and event listeners into separate functions
- Maintain coding standards and improve readability

Resolves PR comment regarding optimizing document.createElement calls in createExtensionCard function.

* refactor: code refactored to show superusers the extension request

* Merge branch 'feat/extension-request-page' of github.com:Real-Dev-Squad/website-dashboard into feat/extension-request-page
bbbjbLines starting with '#' will be ignored, and an empty message aborts
e commit.

:wq
Merge branch 'feat/extension-request-page' of github.com:Real-Dev-Squad/website-dashboard into feat/extension-request-page

This merge is necessary to integrate the latest changes from the remote branch into the local branch.

* fix: delete the mock-date, will raise the test PR separately

* feat: add UI for listing extension requests with status update controls

- Implemented a separate tab for listing extension requests on the /requests page.
- Added functionality for super users to approve or reject extension requests directly from the UI.
- Updated script.js to handle API calls for both OOO and extension requests.
- Ensured correct query parameters are reflected in the URL when switching between tabs.
- Improved error handling and message display for extension requests.

* fix(css): center the loading text on the requests page

- Updated .container__body__loader class to center the loading text both horizontally and vertically using Flexbox.

* add: test for listing extension request

---------

Co-authored-by: devanshdixit <[email protected]>
Co-authored-by: Amit Prakash <[email protected]>

Author: 3 people

__tests__/requests/requests.test.js

@@ -3,13 +3,14 @@ const {
   pendingRequest,
   requestActionResponse,
   approvedRequest,
+  extensionRequest,
 } = require('../../mock-data/requests');
 const { allUsersData } = require('../../mock-data/users');
 
 const API_BASE_URL = 'https://api.realdevsquad.com';
 const SITE_URL = 'http://localhost:8000';
 
-describe('Tests the request card', () => {
+describe('Tests the request cards', () => {
   let browser;
   let page;
   jest.setTimeout(60000);
@@ -50,6 +51,19 @@ describe('Tests the request card', () => {
           },
           body: JSON.stringify(pendingRequest),
         });
+      } else if (
+        url === `${API_BASE_URL}/requests?dev=true&type=extension&size=12`
+      ) {
+        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(extensionRequest),
+        });
       } else if (
         url === `${API_BASE_URL}/requests/Wl4TTbpSrQDIjs6KLJwD?dev=true`
       ) {
@@ -88,7 +102,7 @@ describe('Tests the request card', () => {
     await browser.close();
   });
 
-  it('should update the card when the accept or reject button is clicked', async () => {
+  it('should update the card when the accept or reject button is clicked for OOO requests', async () => {
     await page.waitForSelector('.request__status');
     const statusButtonText = await page.$eval(
       '.request__status',
@@ -105,4 +119,21 @@ describe('Tests the request card', () => {
     );
     expect(updatedStatusButtonText).toBe('Approved');
   });
+
+  it('should load the extension request when the extension tab is clicked', async () => {
+    await page.click('#extension_tab_link');
+    await page.waitForSelector('.ooo_request__card');
+
+    const cardTitle = await page.$eval(
+      '.request__content p',
+      (el) => el.textContent,
+    );
+    expect(cardTitle).toBe('request message');
+
+    const statusButtonText = await page.$eval(
+      '.request__status',
+      (el) => el.textContent,
+    );
+    expect(statusButtonText).toBe('Approved');
+  });
 });

mock-data/requests/index.js

@@ -8,7 +8,7 @@ const pendingRequest = {
       from: 1712275200000,
       until: 1712448000000,
       type: 'OOO',
-      message: 'Testing purpose',
+      message: 'request message',
       lastModifiedBy: 'V4rqL1aDecNGoa1IxiCu',
       state: 'PENDING',
       updatedAt: 1711482912686,
@@ -28,7 +28,7 @@ const approvedRequest = {
       from: 1712275200000,
       until: 1712448000000,
       type: 'OOO',
-      message: 'Testing purpose',
+      message: 'request message',
       lastModifiedBy: 'V4rqL1aDecNGoa1IxiCu',
       state: 'APPROVED',
       updatedAt: 1711482912686,
@@ -49,4 +49,33 @@ const requestActionResponse = {
   },
 };
 
-module.exports = { pendingRequest, approvedRequest, requestActionResponse };
+const extensionRequest = {
+  message: 'Request fetched successfully',
+  data: [
+    {
+      id: 'TlIWPP8WPcIebsVvwzxa',
+      createdAt: 1714946917634,
+      requestedBy: 'iODXB6ns8jaZB9p0XlBw',
+      requestNumber: 1,
+      newEndsOn: 1709674980000,
+      oldEndsOn: 1703911191.083,
+      assignee: 'sunny',
+      type: 'EXTENSION',
+      title: 'Extension Request',
+      message: 'request message',
+      taskId: 'YofR3z5fxudqrM55iXRI',
+      lastModifiedBy: 'V4rqL1aDecNGoa1IxiCu',
+      state: 'APPROVED',
+      updatedAt: 1715602207156,
+    },
+  ],
+  next: null,
+  prev: null,
+};
+
+module.exports = {
+  pendingRequest,
+  approvedRequest,
+  requestActionResponse,
+  extensionRequest,
+};