Dev to Main Sync

__tests__/task-requests/task-request.test.js

@@ -357,3 +357,164 @@ describe('urlParams', () => {
     expect(newestFirstClass).toContain('selected');
   });
 });
+
+describe('Sort Icon Functionality', () => {
+  beforeEach(async () => {
+    await page.goto(`${SITE_URL}/task-requests/?dev=true`);
+    await page.waitForNetworkIdle();
+  });
+
+  const getSortIconDetails = async (iconId) => {
+    const iconElement = await page.$(`#${iconId}`);
+    const display = await page.evaluate(
+      (el) => window.getComputedStyle(el).display,
+      iconElement,
+    );
+    return display;
+  };
+
+  const getSortParameterDetails = async () => {
+    const sortParameterElement = await page.$('.sort-button__text');
+    const sortParameter = await page.evaluate(
+      (el) => el.textContent,
+      sortParameterElement,
+    );
+    return sortParameter;
+  };
+
+  it('updates sort icon display and sort parameter text when sort by is changed', async () => {
+    let ascSortIconDisplay = await getSortIconDetails('asc-sort-icon');
+    let descSortIconDisplay = await getSortIconDetails('desc-sort-icon');
+    let sortParameter = await getSortParameterDetails();
+
+    expect(ascSortIconDisplay).toBe('block');
+    expect(descSortIconDisplay).toBe('none');
+    expect(sortParameter).toBe('created');
+
+    await page.click('.sort-button');
+    await page.click('#REQUESTORS_COUNT_DESC');
+    await page.waitForNetworkIdle();
+
+    ascSortIconDisplay = await getSortIconDetails('asc-sort-icon');
+    descSortIconDisplay = await getSortIconDetails('desc-sort-icon');
+    sortParameter = await getSortParameterDetails();
+
+    expect(ascSortIconDisplay).toBe('none');
+    expect(descSortIconDisplay).toBe('block');
+    expect(sortParameter).toBe('requestors');
+  });
+
+  it('ensures sort icon display and sort parameter text are in sync with URL parameters', async () => {
+    await page.goto(`${SITE_URL}/task-requests?sort=requestors-desc&dev=true`);
+
+    const ascSortIconDisplay = await getSortIconDetails('asc-sort-icon');
+    const descSortIconDisplay = await getSortIconDetails('desc-sort-icon');
+    const sortParameter = await getSortParameterDetails();
+
+    expect(ascSortIconDisplay).toBe('none');
+    expect(descSortIconDisplay).toBe('block');
+    expect(sortParameter).toBe('requestors');
+  });
+});
+
+describe('badges', () => {
+  const DENIED = 'DENIED';
+  const ASSIGNMENT = 'assignment';
+
+  const getBadgeTexts = async (page) => {
+    const badges = await page.$$('.badge');
+    return Promise.all(
+      badges.map((badge) => page.evaluate((el) => el.textContent, badge)),
+    );
+  };
+  beforeEach(async () => {
+    await page.goto(`${SITE_URL}/task-requests/?dev=true`);
+    await page.waitForNetworkIdle();
+  });
+
+  it('verifies that filters applied by the user are correctly displayed as badges on the screen', async () => {
+    await page.click('#filter-button');
+    await page.click(`input[value="${DENIED}"]`);
+    await page.click(`input[value="${ASSIGNMENT}"]`);
+    await page.click('#apply-filter-button');
+    await page.waitForNetworkIdle();
+
+    const badgeTexts = await getBadgeTexts(page);
+    expect(badgeTexts).toContain(DENIED.toLowerCase());
+    expect(badgeTexts).toContain(ASSIGNMENT);
+  });
+
+  it('verifies that badge is removed when clicked and filters are updated accordingly', async () => {
+    await page.goto(
+      `${SITE_URL}/task-requests/?sort=created-asc&status=pending&status=denied&dev=true`,
+    );
+    await page.waitForNetworkIdle();
+
+    const badges = await page.$$('.badge');
+    let badgeTexts = await getBadgeTexts(page);
+    expect(badgeTexts).toContain(DENIED.toLowerCase());
+    expect(badgeTexts).toContain('pending');
+
+    const deniedBadge = badges[badgeTexts.indexOf(DENIED.toLowerCase())];
+    await deniedBadge.click();
+
+    badgeTexts = await getBadgeTexts(page);
+    expect(badgeTexts).not.toContain(DENIED.toLowerCase());
+
+    const checkbox = await page.$(`input[value="${DENIED}"]`);
+    const isChecked = await page.evaluate((el) => el.checked, checkbox);
+    expect(isChecked).toBe(false);
+  });
+
+  it('verifies that filters header is shown only when at least one badge is present', async () => {
+    await page.goto(`${SITE_URL}/task-requests/?sort=created-asc&dev=true`);
+    await page.waitForNetworkIdle();
+
+    const filtersHeader = await page.$('.filters__header');
+    let displayStyle = await page.evaluate(
+      (el) => window.getComputedStyle(el).display,
+      filtersHeader,
+    );
+    expect(displayStyle).toBe('none');
+
+    await page.click('#filter-button');
+    await page.click(`input[value="${DENIED}"]`);
+    await page.click('#apply-filter-button');
+    await page.waitForNetworkIdle();
+
+    displayStyle = await page.evaluate(
+      (el) => window.getComputedStyle(el).display,
+      filtersHeader,
+    );
+    expect(displayStyle).toBe('flex');
+
+    let badges = await page.$$('.badge');
+    let badgeTexts = await getBadgeTexts(page);
+
+    const deniedBadge = badges[badgeTexts.indexOf(DENIED.toLowerCase())];
+    await deniedBadge.click();
+
+    displayStyle = await page.evaluate(
+      (el) => window.getComputedStyle(el).display,
+      filtersHeader,
+    );
+    expect(displayStyle).toBe('none');
+  });
+
+  it('verifies that badges are displayed based on URL parameters and removes all badges when the Clear all button is clicked', async () => {
+    await page.goto(
+      `${SITE_URL}/task-requests/?sort=created-asc&status=denied&request-type=assignment&dev=true`,
+    );
+    await page.waitForNetworkIdle();
+
+    let badgeTexts = await getBadgeTexts(page);
+    expect(badgeTexts).toContain('denied');
+    expect(badgeTexts).toContain(ASSIGNMENT);
+
+    await page.click('#clear-all-button');
+    await page.waitForNetworkIdle();
+
+    badges = await page.$$('.badge');
+    expect(badges.length).toBe(0);
+  });
+});

constants.js

@@ -1,5 +1,4 @@
 const API_BASE_URL = window.API_BASE_URL || 'https://api.realdevsquad.com';
-('https://staging-sync.staging-realdevsquad-com.workers.dev');
 const REPO_SYNC_API_URL =
   'https://staging-sync.staging-realdevsquad-com.workers.dev';
 const USER_MANAGEMENT_LINK = 'user-management-link';

groups/utils.js

@@ -1,4 +1,4 @@
-const BASE_URL = 'https://api.realdevsquad.com'; // REPLACE WITH YOUR LOCALHOST URL FOR TESTING LOCAL BACKEND
+const BASE_URL = window.API_BASE_URL; // REPLACE WITH YOUR LOCALHOST URL FOR TESTING LOCAL BACKEND
 
 async function getMembers() {
   try {

package.json

@@ -7,7 +7,8 @@
     "check": "prettier --check .",
     "fix": "prettier --write .",
     "test": "jest",
-    "start": "node server.js"
+    "start": "node server.js",
+    "dev": "local-ssl-proxy --source 443 --target 5500 -n dev.realdevsquad.com"
   },
   "repository": {
     "type": "git",
@@ -26,6 +27,7 @@
     "jest-puppeteer": "^8.0.6",
     "jest-puppeteer-istanbul": "^0.5.3",
     "jsdom": "^21.1.1",
+    "local-ssl-proxy": "^2.0.5",
     "pre-commit": "^1.2.2",
     "prettier": "2.3.1",
     "puppeteer": "^20.2.1",

requests/constants.js

@@ -0,0 +1,27 @@
+const DEV_FEATURE_FLAG = true;
+const Status = {
+  APPROVED: 'APPROVED',
+  PENDING: 'PENDING',
+  REJECTED: 'REJECTED',
+};
+
+const OOO_REQUEST_TYPE = 'OOO';
+const REQUEST_CONTAINER_ID = 'request_container';
+const OOO_TAB_ID = 'ooo_tab_link';
+
+const DEFAULT_DATE_FORMAT = 'DD MMM YYYY';
+
+const MessageStatus = {
+  SUCCESS: 'SUCCESS',
+  ERROR: 'ERROR',
+};
+
+const ErrorMessages = {
+  UNAUTHENTICATED:
+    'You are unauthenticated to view this section, please login!',
+  UNAUTHORIZED: 'You are unauthrozed to view this section',
+  OOO_NOT_FOUND: 'OOO Requests not found',
+  SERVER_ERROR: 'Unexpected error occurred',
+};
+
+const LAST_ELEMENT_CONTAINER = '.virtual';

requests/index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="This web page is for the requests managment functionality in real dev squad's dashboard website. admin can view and take action on the requests raised by the team members."
+    />
+    <meta name="keywords" content="RDS, Request Managment" />
+    <meta name="author" content="Real Dev Squad" />
+    <link rel="icon" href="/images/index.ico" type="image/x-icon" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700;800&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>Requests | Real Dev Squad</title>
+    <link rel="stylesheet" href="/requests/style.css" />
+    <script src="/helpers/loadENV.js"></script>
+    <script src="/requests/constants.js"></script>
+    <script src="/requests/util.js"></script>
+    <script src="/utils.js"></script>
+    <script src="/requests/script.js" defer></script>
+  </head>
+
+  <body>
+    <div class="header">
+      <div class="header__contents">
+        <img
+          src="/task-requests/assets/RDSLogo.png"
+          alt="RDS logo"
+          height="48"
+          width="48"
+        />
+        <a href="/index.html" class="header__contents__navlink">Home</a>
+      </div>
+    </div>
+    <div class="container">
+      <div class="container__header">
+        <nav>
+          <a href="#" class="selected__tab" id="ooo_tab_link">OOO</a>
+          <a href="#" class="disabled__tab" id="task_tab_link">Task</a>
+          <a href="#" class="disabled__tab" id="extension_tab_link"
+            >Extension</a
+          >
+        </nav>
+        <div id="toast" class="hidden">
+          <div class="message"></div>
+          <div class="progress-bar"></div>
+        </div>
+      </div>
+      <div class="container__body">
+        <div id="request_container" class="request"></div>
+        <div class="container__body__loader hidden">Loading...</div>
+        <div class="virtual"></div>
+      </div>
+    </div>
+  </body>
+</html>