sync dev to main

__tests__/taskRequests/taskRequest.test.js

@@ -12,22 +12,25 @@ describe('Task Requests', () => {
 
   jest.setTimeout(60000);
 
-  beforeAll(async () => {
+  beforeEach(async () => {
     browser = await puppeteer.launch({
       headless: 'new',
       ignoreHTTPSErrors: true,
       args: ['--incognito', '--disable-web-security'],
       devtools: false,
     });
-
+  });
+  beforeEach(async () => {
     page = await browser.newPage();
 
     await page.setRequestInterception(true);
 
     page.on('request', (request) => {
       if (
         request.url() === `${API_BASE_URL}/taskRequests` ||
-        request.url() === `${API_BASE_URL}/taskRequests?dev=true`
+        request.url() === `${API_BASE_URL}/taskRequests?dev=true` ||
+        request.url() ===
+          `${API_BASE_URL}/taskRequests?size=20&q=status%3Apending+sort%3Acreated-asc&dev=true`
       ) {
         request.respond({
           status: 200,
@@ -39,19 +42,37 @@ describe('Task Requests', () => {
             'Access-Control-Allow-Headers': 'Content-Type, Authorization',
           },
         });
+      } else if (
+        request.url() ===
+        `${API_BASE_URL}/taskRequests?size=20&q=status%3Aapproved++sort%3Acreated-asc&dev=true`
+      ) {
+        const list = [];
+        for (let i = 0; i < 20; i++) {
+          list.push(fetchedTaskRequests[0]);
+        }
+        request.respond({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            data: list,
+            next: '/taskRequests?size=20&q=status%3Aapproved++sort%3Acreated-asc&dev=true',
+          }),
+        });
       } else {
         request.continue();
       }
     });
-
     await page.goto(`${SITE_URL}/taskRequests`);
     await page.waitForNetworkIdle();
   });
 
+  afterEach(async () => {
+    await page.close();
+  });
+
   afterAll(async () => {
     await browser.close();
   });
-
   describe('When the user is super user', () => {
     it('should display the task requests card', async () => {
       const url = await page.evaluate(() => API_BASE_URL);
@@ -68,11 +89,6 @@ describe('Task Requests', () => {
       expect(purpose).toMatch(/test purpose/i);
     });
     describe('Filter Modal', () => {
-      beforeAll(async () => {
-        await page.goto(`${SITE_URL}/taskRequests/?dev=true`);
-        await page.waitForNetworkIdle();
-      });
-
       it('should be hidden initially', async () => {
         const modal = await page.$('.filter-modal');
         expect(
@@ -84,28 +100,63 @@ describe('Task Requests', () => {
         const modal = await page.$('.filter-modal');
         const filterHead = await page.$('.filter-head');
         const filterContainer = await page.$('.filters-container');
-
         expect(filterHead).toBeTruthy();
         expect(filterContainer).toBeTruthy();
-
         await page.click('#filter-button');
         expect(modal).not.toBeNull();
         expect(
           await modal.evaluate((el) => el.classList.contains('hidden')),
         ).toBe(false);
-
         await page.mouse.click(20, 20);
         expect(
           await modal.evaluate((el) => el.classList.contains('hidden')),
         ).toBe(true);
       });
+
+      it('checks if PENDING is checked by default', async () => {
+        const filterButton = await page.$('#filter-button');
+        await filterButton.click();
+        await page.waitForSelector('.filter-modal');
+        const activeFilter = await page.$('input[value="PENDING"]');
+        const currentState = await activeFilter.getProperty('checked');
+        const isChecked = await currentState.jsonValue();
+        expect(isChecked).toBe(true);
+      });
+
+      it('Selecting filters and clicking on apply should filter task request list', async () => {
+        let cardsList = await page.$$('.taskRequest__card');
+        expect(cardsList).not.toBeNull();
+        const initialLength = cardsList.length;
+        await page.click('#filter-button');
+        await page.click('input[value="PENDING"]');
+        await page.click('input[value="APPROVED"]');
+        await page.click('#apply-filter-button');
+        await page.waitForNetworkIdle();
+        cardsList = await page.$$('.taskRequest__card');
+        expect(cardsList).not.toBeNull();
+        expect(cardsList.length).toBeGreaterThanOrEqual(0);
+        expect(cardsList.length).not.toBe(initialLength);
+      });
+
+      it('clears the filter when the Clear button is clicked', async () => {
+        const filterButton = await page.$('#filter-button');
+        await filterButton.click();
+        await page.waitForSelector('.filter-modal');
+        const activeFilter = await page.$('input[value="APPROVED"]');
+        await activeFilter.click();
+        const clearButton = await page.$('.filter-modal #clear-button');
+        await clearButton.click();
+        await page.waitForSelector('.filter-modal', { hidden: true });
+        const currentState = await activeFilter.getProperty('checked');
+        const isChecked = await currentState.jsonValue();
+        expect(isChecked).toBe(false);
+      });
     });
 
     describe('Sort Modal', () => {
       it('should be hidden initially', async () => {
         const sortModal = await page.$('.sort-modal');
-        const assigneButton = await page.$('#ASSIGNEE_COUNT');
-
+        const assigneButton = await page.$('#REQUESTORS_COUNT_ASC');
         expect(
           await sortModal.evaluate((el) => el.classList.contains('hidden')),
         ).toBe(true);
@@ -114,15 +165,15 @@ describe('Task Requests', () => {
 
       it('should toggle visibility sort modal by clicking the sort button and selecting an option', async () => {
         const sortModal = await page.$('.sort-modal');
-        const assigneButton = await page.$('#ASSIGNEE_COUNT');
+        const assigneButton = await page.$('#REQUESTORS_COUNT_ASC');
         const sortHead = await page.$('.sort-head');
         const sortContainer = await page.$('.sorts-container');
 
         expect(sortHead).toBeTruthy();
         expect(sortContainer).toBeTruthy();
 
         await page.click('.sort-button');
-        await page.click('#ASSIGNEE_COUNT');
+        await page.click('#REQUESTORS_COUNT_ASC');
         expect(
           await assigneButton.evaluate((el) =>
             el.classList.contains('selected'),
@@ -131,9 +182,8 @@ describe('Task Requests', () => {
         expect(
           await sortModal.evaluate((el) => el.classList.contains('hidden')),
         ).toBe(true);
-
         await page.click('.sort-button');
-        await page.click('#ASSIGNEE_COUNT');
+        await page.click('#REQUESTORS_COUNT_ASC');
         expect(
           await assigneButton.evaluate((el) =>
             el.classList.contains('selected'),
@@ -144,6 +194,25 @@ describe('Task Requests', () => {
         ).toBe(true);
       });
     });
+
+    it('Checks that new items are loaded when scrolled to the bottom', async () => {
+      await page.click('#filter-button');
+      await page.click('input[value="PENDING"]');
+      await page.click('input[value="APPROVED"]');
+      await page.click('#apply-filter-button');
+      await page.waitForNetworkIdle();
+      let taskRequestList = await page.$$('.taskRequest__card');
+      expect(taskRequestList.length).toBe(20);
+      await page.evaluate(() => {
+        const element = document.querySelector('.virtual');
+        if (element) {
+          element.scrollIntoView({ behavior: 'auto' });
+        }
+      });
+      await page.waitForNetworkIdle();
+      taskRequestList = await page.$$('.taskRequest__card');
+      expect(taskRequestList.length).toBe(40);
+    });
   });
 });
 

__tests__/taskRequests/taskRequestDetails.test.js

@@ -4,7 +4,7 @@ const {
   defaultMockResponseHeaders,
 } = require('../../mock-data/taskRequests');
 
-describe('Tests the User Management User Listing Screen', () => {
+describe('Task request details page', () => {
   let browser;
   let page;
   jest.setTimeout(60000);
@@ -32,18 +32,18 @@ describe('Tests the User Management User Listing Screen', () => {
     await page.goto(
       'http://localhost:8000/taskRequests/details/?id=dM5wwD9QsiTzi7eG7Oq5',
     );
-    await page.waitForNetworkIdle();
-    await page.click('.requestors__container__list__userDetails');
-    await page.waitForSelector('#requestor_details_modal_content', {
-      visible: true,
-    });
   });
 
   afterAll(async () => {
     await browser.close();
   });
 
   it('Checks the Modal working as expected', async () => {
+    await page.waitForNetworkIdle();
+    await page.click('.info__more');
+    await page.waitForSelector('#requestor_details_modal_content', {
+      visible: true,
+    });
     const modalHeading = await page.$eval(
       '[data-modal-header="requestor-details-header"]',
       (element) => element.textContent,
@@ -88,4 +88,11 @@ describe('Tests the User Management User Listing Screen', () => {
       'code change 3 days , testing - 2 days. total - 5 days',
     );
   });
+
+  it('Should contain Approve and Reject buttons', async function () {
+    const approveButton = await page.$('.requestors__conatainer__list__button');
+    const rejectButton = await page.$('.request-details__reject__button');
+    expect(approveButton).toBeTruthy();
+    expect(rejectButton).toBeTruthy();
+  });
 });

index.html

@@ -27,18 +27,17 @@
           <div class="line"></div>
         </div>
         <div class="links">
-          <a href="">Welcome</a>
-          <a href="">Events</a>
-          <a href="">Members</a>
-          <a href="">Status</a>
+          <a href="https://welcome.realdevsquad.com/">Welcome</a>
+          <a href="https://www.realdevsquad.com/events">Events</a>
+          <a href="https://members.realdevsquad.com/">Members</a>
+          <a href="https://status.realdevsquad.com/tasks">Status</a>
         </div>
       </div>
       <div class="sign-in-btn">
-        <a
-          href="https://github.com/login/oauth/authorize?client_id=23c78f66ab7964e5ef97"
-          >Sign In <span>With GitHub</span>
+        <button onclick="goToAuthPage()">
+          Sign In <span>With GitHub</span>
           <img src="images/github.png" class="user-avatar" />
-        </a>
+        </button>
       </div>
       <div class="user-info">
         <span id="user-name"></span>

mock-data/taskRequests/index.js

@@ -14,27 +14,24 @@ const fetchedTaskRequests = [
       priority: 'HIGH',
       status: 'ASSIGNED',
     },
+    users: [
+      {
+        proposedStartDate: 1700304616479,
+        proposedDeadline: 1700909416479,
+        userId: 'eChYAP0kUwLo4wQ1gqMV',
+        status: 'PENDING',
+        username: 'ajeyak',
+        first_name: 'Test first_name',
+      },
+    ],
     requestors: [
       {
-        userExists: true,
-        user: {
-          id: 'V4rqL1aDecNGoa1IxiCu',
-          incompleteUserDetails: false,
-          discordId: '12345',
-          roles: {
-            archived: false,
-          },
-          linkedin_id: 'uiram',
-          last_name: 'Raghunathan',
-          yoe: '5',
-          github_display_name: 'Sriram',
-          company_name: 'Juniper networks ',
-          github_id: '19sriram',
-          designation: 'Front end engineer',
-          twitter_id: '19sriram',
-          first_name: 'Sriram',
-          username: '19sriram',
-        },
+        proposedStartDate: 1700304616479,
+        proposedDeadline: 1700909416479,
+        userId: 'eChYAP0kUwLo4wQ1gqMV',
+        status: 'PENDING',
+        username: 'ajeyak',
+        first_name: 'Test first_name',
       },
     ],
   },
@@ -47,23 +44,21 @@ const individualTaskReqDetail = {
     lastModifiedAt: 1698837978463,
     requestType: 'ASSIGNMENT',
     createdBy: 'randhir',
-    requestors: ['SooJK37gzjIZfFNH0tlL'],
     lastModifiedBy: 'randhir',
     taskTitle: 'sample golang task s402',
     externalIssueUrl:
       'https://api.github.com/repos/Real-Dev-Squad/website-backend/issues/1310',
     taskId: '44SwDPe1r6AgoOtWq8EN',
-    approvedTo: 'SooJK37gzjIZfFNH0tlL',
     users: [
       {
         proposedStartDate: 1698684354000,
         proposedDeadline: 1699142400000,
         description: 'code change 3 days , testing - 2 days. total - 5 days',
         userId: 'SooJK37gzjIZfFNH0tlL',
-        status: 'APPROVED',
+        status: 'PENDING',
       },
     ],
-    status: 'APPROVED',
+    status: 'PENDING',
     id: 'dM5wwD9QsiTzi7eG7Oq5',
     url: 'http://localhost:3000/taskRequests/dM5wwD9QsiTzi7eG7Oq5',
   },
@@ -142,6 +137,14 @@ const urlMappings = {
     userInformation,
   'https://staging-api.realdevsquad.com/users/userId/SooJK37gzjIZfFNH0tlL':
     userInformation,
+  'https://staging-api.realdevsquad.com/taskRequests?action=approve':
+    fetchedTaskRequests,
+  'https://api.realdevsquad.com/taskRequests?action=approve':
+    fetchedTaskRequests,
+  'https://staging-api.realdevsquad.com/taskRequests?action=reject':
+    fetchedTaskRequests,
+  'https://api.realdevsquad.com/taskRequests?action=reject':
+    fetchedTaskRequests,
 };
 
 module.exports = {

style.css

@@ -81,21 +81,23 @@ img {
   order: 3;
 }
 
-.sign-in-btn a {
+.sign-in-btn button {
   position: absolute;
   right: 10px;
   margin: 10px;
   height: 30px;
+  width: fit-content;
   padding: 5px;
   background-color: var(--blue-color);
   color: var(--white-color);
   cursor: pointer;
   border: 2px solid var(--white-color);
   border-radius: 6px;
   text-decoration: none;
+  font-size: 16px;
 }
 
-.sign-in-btn a img {
+.sign-in-btn button img {
   height: 15px;
   width: 15px;
   position: relative;
@@ -465,7 +467,7 @@ footer {
     justify-content: space-between;
   }
 
-  .sign-in-btn a {
+  .sign-in-btn button {
     position: static;
   }