Dev to Main sync

__tests__/applications/applications.test.js

@@ -0,0 +1,175 @@
+const puppeteer = require('puppeteer');
+
+const {
+  fetchedApplications,
+  acceptedApplications,
+} = require('../../mock-data/applications');
+const { superUserForAudiLogs } = require('../../mock-data/users');
+
+const SITE_URL = 'http://localhost:8000';
+// helper/loadEnv.js file causes API_BASE_URL to be stagin-api on local env url in taskRequest/index.html
+const API_BASE_URL = 'https://staging-api.realdevsquad.com';
+
+describe('Applications page', () => {
+  let browser;
+  let page;
+
+  jest.setTimeout(60000);
+
+  beforeEach(async () => {
+    browser = await puppeteer.launch({
+      headless: 'new',
+      ignoreHTTPSErrors: true,
+      args: ['--incognito', '--disable-web-security'],
+    });
+  });
+  beforeEach(async () => {
+    page = await browser.newPage();
+
+    await page.setRequestInterception(true);
+
+    page.on('request', (request) => {
+      if (
+        request.url() === `${API_BASE_URL}/applications?size=5` ||
+        request.url() ===
+          `${API_BASE_URL}/applications?next=YwTi6zFNI3GlDsZVjD8C&size=5`
+      ) {
+        request.respond({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            applications: fetchedApplications,
+            next: '/applications?next=YwTi6zFNI3GlDsZVjD8C&size=5',
+          }),
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          },
+        });
+      } else if (
+        request.url() === `${API_BASE_URL}/applications?size=5&status=accepted`
+      ) {
+        request.respond({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ applications: acceptedApplications }),
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          },
+        });
+      } else if (request.url() === `${API_BASE_URL}/users/self`) {
+        request.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(superUserForAudiLogs),
+        });
+      } else if (
+        request.url() === `${API_BASE_URL}/applications/lavEduxsb2C5Bl4s289P`
+      ) {
+        request.respond({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            message: 'application updated successfully!',
+          }),
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          },
+        });
+      } else {
+        request.continue();
+      }
+    });
+    await page.goto(`${SITE_URL}/applications`);
+    await page.waitForNetworkIdle();
+  });
+
+  afterEach(async () => {
+    await page.close();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  it('should render the initial UI elements', async function () {
+    const title = await page.$('.header h1');
+    const filterButton = await page.$('.filter-button');
+    const applicationCards = await page.$$('.application-card');
+    expect(title).toBeTruthy();
+    expect(filterButton).toBeTruthy();
+    expect(applicationCards).toBeTruthy();
+    expect(applicationCards.length).toBe(5);
+  });
+
+  it('should load and render the accepted application requests when accept is selected from filter, and after clearing the filter it should again show all the applications', async function () {
+    await page.click('.filter-button');
+
+    await page.$eval('input[name="status"][value="accepted"]', (radio) =>
+      radio.click(),
+    );
+    await page.click('.apply-filter-button');
+    await page.waitForNetworkIdle();
+    let applicationCards = await page.$$('.application-card');
+    expect(applicationCards.length).toBe(4);
+
+    await page.click('.filter-button');
+    await page.click('.clear-btn');
+
+    await page.waitForNetworkIdle();
+    applicationCards = await page.$$('.application-card');
+    expect(applicationCards.length).toBe(5);
+  });
+
+  it('should load more applications on going to the bottom of the page', async function () {
+    let applicationCards = await page.$$('.application-card');
+    expect(applicationCards.length).toBe(5);
+    await page.evaluate(() => {
+      const element = document.querySelector('#page_bottom_element');
+      if (element) {
+        element.scrollIntoView({ behavior: 'auto' });
+      }
+    });
+    await page.waitForNetworkIdle();
+    applicationCards = await page.$$('.application-card');
+    expect(applicationCards.length).toBe(10);
+  });
+
+  it('should open application details modal for application, when user click on view details on any card', async function () {
+    const applicationDetailsModal = await page.$('.application-details');
+    expect(
+      await applicationDetailsModal.evaluate((el) =>
+        el.classList.contains('hidden'),
+      ),
+    ).toBe(true);
+    await page.click('.view-details-button');
+    expect(
+      await applicationDetailsModal.evaluate((el) =>
+        el.classList.contains('hidden'),
+      ),
+    ).toBe(false);
+  });
+
+  it('should show toast message with application updated successfully', async function () {
+    await page.click('.view-details-button');
+    await page.click('.application-details-accept');
+    const toast = await page.$('#toast');
+    expect(await toast.evaluate((el) => el.classList.contains('hidden'))).toBe(
+      false,
+    );
+    expect(await toast.evaluate((el) => el.innerText)).toBe(
+      'application updated successfully!',
+    );
+    await page.waitForNetworkIdle();
+  });
+});

__tests__/extension-requests/extension-requests.test.js

@@ -21,7 +21,7 @@ const {
 } = require('../../mock-data/users');
 const { usersStatus } = require('../../mock-data/users-status');
 const { taskDone, auditLogTasks } = require('../../mock-data/tasks/index');
-
+const baseUrl = 'http://localhost:8000/extension-requests';
 describe('Tests the Extension Requests Screen', () => {
   let browser;
   let page;
@@ -46,7 +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=asc&size=5&q=status%3APENDING' ||
+        url ===
+          'https://api.realdevsquad.com/extension-requests?dev=true&order=asc'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -109,6 +111,19 @@ describe('Tests the Extension Requests Screen', () => {
           },
           body: JSON.stringify(userSunny),
         });
+      } else if (
+        url === 'https://api.realdevsquad.com/users?search=randhir&size=1'
+      ) {
+        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(userRandhir),
+        });
       } else if (
         url ===
         'https://api.realdevsquad.com/tasks/PYj79ki2agB0q5JN3kUf/details'
@@ -263,7 +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=asc&size=5&q=status%3AAPPROVED%2BPENDING%2BDENIED' ||
+        url ===
+          'https://api.realdevsquad.com/extension-requests?dev=true&order=asc&q=status%3AAPPROVED%2BDENIED'
       ) {
         interceptedRequest.respond({
           status: 200,
@@ -327,12 +344,26 @@ describe('Tests the Extension Requests Screen', () => {
           },
           body: JSON.stringify(extensionRequestLogs['lw7dRB0I3a6ivsFR5Izs']),
         });
+      } else if (
+        url ===
+        'https://api.realdevsquad.com/extension-requests?order=asc&size=5&q=status%3AAPPROVED%2Cassignee%3AiODXB6gfsjaZB9p0XlBw%2B7yzVDl8s1ORNCtH9Ps7K'
+      ) {
+        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(extensionRequestsListUserSearch),
+        });
       } else {
         interceptedRequest.continue();
       }
     });
 
-    await page.goto('http://localhost:8000/extension-requests');
+    await page.goto(baseUrl);
 
     await page.waitForNetworkIdle();
 
@@ -361,6 +392,31 @@ describe('Tests the Extension Requests Screen', () => {
     expect(extensionCardsList.length).toBe(4);
     expect(extensionRequestsElement).toBeTruthy();
   });
+  it('Should contain all dates elements', async () => {
+    const checkContainer = async (containerId) => {
+      const textExists = await page.$eval(
+        `${containerId} .card-row-text`,
+        (el) => !!el,
+      );
+      const valueExists = await page.$eval(
+        `${containerId} .tooltip-container`,
+        (el) => !!el,
+      );
+      const tooltipExists = await page.$eval(
+        `${containerId} .tooltip`,
+        (el) => !!el,
+      );
+
+      expect(textExists).toBeTruthy();
+      expect(valueExists).toBeTruthy();
+      expect(tooltipExists).toBeTruthy();
+    };
+
+    await checkContainer('#deadline-container');
+    await checkContainer('#requested-time-container');
+    await checkContainer('#new-deadline-container');
+    await checkContainer('#extension-container');
+  });
 
   it('checks the search functionality', async () => {
     await page.type('#assignee-search', 'sunny');
@@ -511,14 +567,14 @@ describe('Tests the Extension Requests Screen', () => {
       '.extension-card:first-child .panel',
     );
     const firstAccordionIsVisible = await firstAccordionContent.evaluate(
-      (el) => el.style.display === 'block',
+      (el) => el.style.maxHeight !== '',
     );
     expect(firstAccordionIsVisible).toBe(true);
 
     await firstAccordionButton.click();
 
     const firstAccordionIsHidden = await firstAccordionContent.evaluate(
-      (el) => el.style.display !== 'block',
+      (el) => el.style.maxHeight === '',
     );
     expect(firstAccordionIsHidden).toBe(true);
   });
@@ -630,7 +686,7 @@ describe('Tests the Extension Requests Screen', () => {
     await page.$eval('.title-text-input', (el) => (el.value = ''));
     await page.type('.title-text-input', newTitle);
 
-    const newDate = '2023-09-19T22:20';
+    const newDate = '2023-09-19';
     await page.evaluate((newDate) => {
       document.querySelector('.date-input').value = newDate;
     }, newDate);
@@ -668,7 +724,7 @@ describe('Tests the Extension Requests Screen', () => {
     const newTitle = 'New Title Text';
     await page.type('.title-text-input', newTitle);
 
-    const newDate = '2023-09-19T22:20';
+    const newDate = '2023-09-19';
     await page.evaluate((newDate) => {
       document.querySelector('.date-input').value = newDate;
     }, newDate);
@@ -774,7 +830,7 @@ describe('Tests the Extension Requests Screen', () => {
     const cardNumber1Value = await extensionRequestNumberContainer[1].evaluate(
       (node) => node.textContent,
     );
-    expect(cardNumber1Value).toBe('5');
+    expect(cardNumber1Value).toBe('#5');
   });
 
   test('Default Request Number to 1 if requestNumber field is missing in API Response', async () => {
@@ -791,7 +847,7 @@ describe('Tests the Extension Requests Screen', () => {
     const cardNumber2Value = await extensionRequestNumberContainer[3].evaluate(
       (node) => node.textContent,
     );
-    expect(cardNumber2Value).toBe('1');
+    expect(cardNumber2Value).toBe('#1');
   });
 
   it('Validating if audit logs are being generated in realtime', async () => {
@@ -823,7 +879,7 @@ describe('Tests the Extension Requests Screen', () => {
     // Click the first element with class '.edit-button'
     await page.$$eval('.edit-button', (buttons) => buttons[0].click());
     const newTitle = 'This is a new title test case';
-    const newDate = '2024-09-19T22:20';
+    const newDate = '2024-09-19';
     const newReason = 'This is the new reason';
 
     // Updating all the input fields
@@ -849,4 +905,41 @@ describe('Tests the Extension Requests Screen', () => {
     logs = await extensionLogsForFirstER.$$('.log-div');
     expect(Array.from(logs).length).toBe(9);
   });
+
+  it('Should update page url when filters and usernames are changed', 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.type('#assignee-search', 'sunny,randhir');
+    await page.keyboard.press('Enter');
+    await page.waitForNetworkIdle();
+    const url = page.url();
+    expect(url).toBe(
+      `${baseUrl}?order=asc&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`,
+    );
+    const filterButton = await page.$('#filter-button');
+    await filterButton.click();
+    await page.waitForSelector('.filter-modal');
+    const approvedFilter = await page.$('input[value="APPROVED"]');
+    const currentState = await approvedFilter.getProperty('checked');
+    const isApprovedChecked = await currentState.jsonValue();
+    expect(isApprovedChecked).toBe(true);
+    const searchText = await page.$eval(
+      '#assignee-search',
+      (input) => input.value,
+    );
+    expect(searchText).toBe('sunny,randhir');
+    await page.waitForSelector('.sort-button');
+    const ascSortIconDisplayStyle = await page.$eval(
+      '#asc-sort-icon',
+      (icon) => window.getComputedStyle(icon).display,
+    );
+    expect(ascSortIconDisplayStyle).toBe('block');
+  });
 });