Dev to main sync

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

@@ -667,79 +667,6 @@ describe('Tests the Extension Requests Screen', () => {
     expect(hasSkeletonClassAfter).toBe(false);
   });
 
-  it('checks whether the shimmer effect is working for deadlineValue element under feature flag', async () => {
-    await page.goto(`${baseUrl}/?dev=true`);
-    const deadlineValueSelector = await page.$$(
-      '[data-testid="skeleton-span"]',
-    );
-    expect(deadlineValueSelector).toBeTruthy();
-    await page.waitForTimeout(5000);
-    const hasSkeletonClassAfter = await page.$eval('.tooltip-container', (el) =>
-      el.classList.contains('skeleton-span'),
-    );
-    expect(hasSkeletonClassAfter).toBe(false);
-  });
-
-  it('checks whether the shimmer effect is working for requestedValue element under feature flag', async () => {
-    await page.goto(`${baseUrl}/?dev=true`);
-    const requestedValueSelector = await page.$$(
-      '[data-testid="skeleton-text"]',
-    );
-    expect(requestedValueSelector).toBeTruthy();
-    await page.waitForTimeout(5000);
-    const hasSkeletonClassAfter = await page.$eval('.requested-day', (el) =>
-      el.classList.contains('skeleton-text'),
-    );
-    expect(hasSkeletonClassAfter).toBe(false);
-  });
-  it('checks whether the shimmer effect is working for newDeadlineValue element under feature flag', async () => {
-    await page.goto(`${baseUrl}/?dev=true`);
-    const newDeadlineValueSelector = await page.$$(
-      '[data-testid="skeleton-span"]',
-    );
-    expect(newDeadlineValueSelector).toBeTruthy();
-    await page.waitForTimeout(5000);
-    const hasSkeletonClassAfter = await page.$eval('.requested-day', (el) =>
-      el.classList.contains('skeleton-span'),
-    );
-    expect(hasSkeletonClassAfter).toBe(false);
-  });
-
-  it('checks whether the shimmer effect is working for extensionRequestNumberValue element under feature flag', async () => {
-    await page.goto(`${baseUrl}/?dev=true`);
-    const extensionRequestNumberValueSelector = await page.$$(
-      '[data-testid="skeleton-span"]',
-    );
-    expect(extensionRequestNumberValueSelector).toBeTruthy();
-    await page.waitForTimeout(5000);
-    const hasSkeletonClassAfter = await page.$eval(
-      '.extension-request-number',
-      (el) => el.classList.contains('skeleton-span'),
-    );
-    expect(hasSkeletonClassAfter).toBe(false);
-  });
-
-  it('checks whether the shimmer effect is visible under dev flag only for the statusSiteLink element', async () => {
-    await page.goto(`${baseUrl}/?dev=true`);
-    const statusSiteLinkSelector = await page.$$(
-      '[data-testid="external-link skeleton-link"]',
-    );
-    expect(statusSiteLinkSelector).toBeTruthy();
-    await page.waitForTimeout(5000);
-    const hasSkeletonClassAfter = await page.$eval('.external-link', (el) =>
-      el.classList.contains('skeleton-link'),
-    );
-    expect(hasSkeletonClassAfter).toBe(false);
-  });
-
-  it('checks whether the shimmer effect is visible under dev flag only for the taskStatusValue element', async () => {
-    await page.goto(`${baseUrl}/?dev=true`);
-    const taskStatusValueElement = await page.$$(
-      '[data-testid="skeleton-span"]',
-    );
-    expect(taskStatusValueElement).toBeTruthy();
-  });
-
   it('Checks whether the card is not removed from display when api call is unsuccessful', async () => {
     const extensionCards = await page.$$('.extension-card');
 

__tests__/groups/group.test.js

@@ -1,10 +1,21 @@
 const puppeteer = require('puppeteer');
-const { allUsersData } = require('../../mock-data/users');
+const { allUsersData, superUserData } = require('../../mock-data/users');
 const { discordGroups, GroupRoleData } = require('../../mock-data/groups');
 
 const BASE_URL = 'https://api.realdevsquad.com';
 const PAGE_URL = 'http://localhost:8000';
 
+function setSuperUserPermission() {
+  allUsersData.users[0] = superUserData;
+}
+
+function resetUserPermission() {
+  allUsersData.users[0] = {
+    ...allUsersData.users[0],
+    roles: { archived: false },
+  };
+}
+
 describe('Discord Groups Page', () => {
   let browser;
   let page;
@@ -297,4 +308,66 @@ describe('Discord Groups Page', () => {
     const repoLinkStyle = await page.evaluate((el) => el.style, repoLink);
     expect(repoLinkStyle).toBeTruthy();
   });
+
+  test('Should display delete button for super users', async () => {
+    setSuperUserPermission();
+    await page.goto(`${PAGE_URL}/groups?dev=true`);
+    await page.waitForNetworkIdle();
+    await page.waitForTimeout(1000);
+
+    const deleteButtons = await page.$$('.delete-group');
+    const cards = await page.$$('.card');
+    expect(deleteButtons.length).toBe(cards.length);
+    expect(deleteButtons.length).toBeGreaterThan(0);
+  });
+
+  test('Should not display delete button when user is normal user', async () => {
+    resetUserPermission();
+    await page.goto(`${PAGE_URL}/groups?dev=true`);
+    await page.waitForNetworkIdle();
+
+    const deleteButtons = await page.$$('.delete-group');
+    expect(deleteButtons.length).toBe(0);
+  });
+
+  test('Should not display delete button when dev=false', async () => {
+    setSuperUserPermission();
+    await page.goto(`${PAGE_URL}/groups`);
+    await page.waitForNetworkIdle();
+
+    const deleteButtons = await page.$$('.delete-group');
+    expect(deleteButtons.length).toBe(0);
+  });
+
+  test('Should display delete confirmation modal on click of delete button', async () => {
+    setSuperUserPermission();
+    await page.goto(`${PAGE_URL}/groups?dev=true`);
+    await page.waitForNetworkIdle();
+    await page.waitForTimeout(1000);
+
+    const deleteButton = await page.$('.delete-group');
+    await deleteButton.click();
+
+    const deleteConfirmationModal = await page.waitForSelector(
+      '.delete-confirmation-modal',
+    );
+
+    expect(deleteConfirmationModal).toBeTruthy();
+  });
+
+  test('Should close delete confirmation modal when cancel button is clicked', async () => {
+    setSuperUserPermission();
+    await page.goto(`${PAGE_URL}/groups?dev=true`);
+    await page.waitForNetworkIdle();
+    await page.waitForTimeout(1000);
+
+    const deleteButton = await page.$('.delete-group');
+    await deleteButton.click();
+
+    const cancelButton = await page.waitForSelector('#cancel-delete');
+    await cancelButton.click();
+
+    const modalClosed = await page.$('.delete-confirmation-modal');
+    expect(modalClosed).toBeFalsy();
+  });
 });

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

@@ -3,6 +3,63 @@ const {
   urlMappings,
   defaultMockResponseHeaders,
 } = require('../../mock-data/taskRequests');
+const { user } = require('../../mock-data/users/index.js');
+
+describe('Request container for non-super users', () => {
+  let browser;
+  let page;
+  jest.setTimeout(60000);
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      headless: 'new',
+      ignoreHTTPSErrors: true,
+      args: ['--incognito', '--disable-web-security'],
+      devtools: false,
+    });
+    page = await browser.newPage();
+    await page.setRequestInterception(true);
+    page.on('request', (interceptedRequest) => {
+      const url = interceptedRequest.url();
+      if (url == 'https://staging-api.realdevsquad.com/users/self') {
+        interceptedRequest.respond({
+          ...defaultMockResponseHeaders,
+          body: JSON.stringify(user),
+        });
+      } else if (urlMappings.hasOwnProperty(url)) {
+        interceptedRequest.respond({
+          ...defaultMockResponseHeaders,
+          body: JSON.stringify(urlMappings[url]),
+        });
+      } else {
+        interceptedRequest.continue();
+      }
+    });
+    await page.goto(
+      'http://localhost:8000/task-requests/details/?id=dM5wwD9QsiTzi7eG7Oq5&dev=true',
+    );
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  it('Approve and Reject buttons should not render for non-super users', async function () {
+    await page.waitForNetworkIdle();
+    const approveButton = await page.$('[data-testid="task-approve-button"]');
+    const rejectButton = await page.$('[data-testid="task-reject-button"]');
+    expect(approveButton).toBeNull();
+    expect(rejectButton).toBeNull();
+  });
+
+  it('Should render task status for non-super users', async function () {
+    await page.waitForNetworkIdle();
+    const taskRequestStatus = await page.$(
+      '[data-testid="requestors-task-status"]',
+    );
+    expect(taskRequestStatus).toBeTruthy();
+  });
+});
 
 describe('Task request details page', () => {
   let browser;
@@ -89,9 +146,13 @@ describe('Task request details page', () => {
     );
   });
 
-  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');
+  it('Should render Approve and Reject buttons for super users', async function () {
+    await page.goto(
+      'http://localhost:8000/task-requests/details/?id=dM5wwD9QsiTzi7eG7Oq5&dev=true',
+    );
+    await page.waitForNetworkIdle();
+    const approveButton = await page.$('[data-testid="task-approve-button"]');
+    const rejectButton = await page.$('[data-testid="task-reject-button"]');
     expect(approveButton).toBeTruthy();
     expect(rejectButton).toBeTruthy();
   });
@@ -180,9 +241,13 @@ describe('Task request details page with markdown support in description', () =>
     expect(descriptionHtmlValue).toContain('<h3 id="heading">Heading</h3>');
   });
 
-  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');
+  it('Should render Approve and Reject buttons for super users', async function () {
+    await page.goto(
+      'http://localhost:8000/task-requests/details/?id=dM5wwD9QsiTzi7eG7Oq6&dev=true',
+    );
+    await page.waitForNetworkIdle();
+    const approveButton = await page.$('[data-testid="task-approve-button"]');
+    const rejectButton = await page.$('[data-testid="task-reject-button"]');
     expect(approveButton).toBeTruthy();
     expect(rejectButton).toBeTruthy();
   });

__tests__/users/App.test.js

@@ -37,9 +37,13 @@ describe('App Component', () => {
           headers,
           body: JSON.stringify({
             ...filteredUsersData,
-            users: filteredUsersData.users.filter(
-              (user) => user.roles.in_discord,
-            ),
+            ...mockUserData,
+            users: [
+              ...filteredUsersData.users.filter(
+                (user) => user.roles.in_discord,
+              ),
+              ...mockUserData.users.filter((user) => user.roles.in_discord),
+            ],
           }),
         });
       } else if (url === `${API_BASE_URL}/users/search/?verified=true`) {
@@ -49,9 +53,11 @@ describe('App Component', () => {
           headers,
           body: JSON.stringify({
             ...filteredUsersData,
-            users: filteredUsersData.users.filter((user) => user.discordId),
             ...mockUserData,
-            users: mockUserData.users.filter((user) => user.discordId),
+            users: [
+              ...filteredUsersData.users.filter((user) => user.discordId),
+              ...mockUserData.users.filter((user) => user.discordId),
+            ],
           }),
         });
       } else {
@@ -87,13 +93,55 @@ describe('App Component', () => {
   });
 
   it('should update the URL query string and re-render the app', async () => {
-    await page.waitForSelector('[data_key="verified"]');
-
-    // Click on the "Linked Accounts" tab
-    await page.click('[data_key="verified"]');
+    await page.waitForSelector('[data-testid="tabs-section-select"]');
+    await page.select('[data-testid="tabs-section-select"]', 'verified');
 
     // Get the current URL and make sure the query string has been updated
     const url = await page.url();
     expect(url).toContain('?tab=verified');
   });
+
+  it('should handle user card clicks and apply active_tab class to clicked card only in discord tab', async () => {
+    await page.goto(`${BASE_URL}/users/discord/?tab=in_discord`);
+    await page.waitForNetworkIdle();
+    await page.waitForSelector('.user_card[data-key]');
+    const userCardTestIds = await page.$$eval(
+      '[data-testid^="user-card-"]',
+      (cards) => cards.map((card) => card.getAttribute('data-testid')),
+    );
+    for (let i = 0; i < userCardTestIds.length; i++) {
+      const userCardSelector = `[data-testid="${userCardTestIds[i]}"]`;
+      const userCardElement = await page.$(userCardSelector);
+      await userCardElement.click();
+      await page.waitForTimeout(1000);
+      const isActive = await page.evaluate((selector) => {
+        return document
+          .querySelector(selector)
+          ?.classList.contains('active_tab');
+      }, userCardSelector);
+      expect(isActive).toBe(true);
+    }
+  });
+
+  it('should handle user card clicks and apply active_tab class to clicked card only verified tab', async () => {
+    await page.goto(`${BASE_URL}/users/discord/?tab=verified`);
+    await page.waitForNetworkIdle();
+    await page.waitForSelector('.user_card[data-key]');
+    const userCardTestIds = await page.$$eval(
+      '[data-testid^="user-card-"]',
+      (cards) => cards.map((card) => card.getAttribute('data-testid')),
+    );
+    for (let i = 0; i < userCardTestIds.length; i++) {
+      const userCardSelector = `[data-testid="${userCardTestIds[i]}"]`;
+      const userCardElement = await page.$(userCardSelector);
+      await userCardElement.click();
+      await page.waitForTimeout(1000);
+      const isActive = await page.evaluate((selector) => {
+        return document
+          .querySelector(selector)
+          ?.classList.contains('active_tab');
+      }, userCardSelector);
+      expect(isActive).toBe(true);
+    }
+  });
 });

__tests__/users/applyFilterPagination.test.js

@@ -78,8 +78,8 @@ describe('Apply Filter and Pagination Functionality', () => {
   });
 
   it('should update the URL query string when applying filters', async () => {
-    // click on the "Verified" tab
-    await page.click('[data_key="verified"]');
+    await page.waitForSelector('[data-testid="tabs-section-select"]');
+    await page.select('[data-testid="tabs-section-select"]', 'verified');
 
     // get the current URL
     const url = await page.url();

__tests__/users/user-management-home-screen.test.js

@@ -9,9 +9,6 @@ describe('Tests the User Management User Listing Screen', () => {
   let tileViewBtn;
   let tableViewBtn;
   let userSearchElement;
-  let paginationElement;
-  let prevBtn;
-  let nextBtn;
   jest.setTimeout(60000);
 
   beforeAll(async () => {
@@ -71,9 +68,6 @@ describe('Tests the User Management User Listing Screen', () => {
     tileViewBtn = await page.$('#tile-view-btn');
     tableViewBtn = await page.$('#table-view-btn');
     userSearchElement = await page.$('#user-search');
-    paginationElement = await page.$('#pagination');
-    prevBtn = await page.$('#prevButton');
-    nextBtn = await page.$('#nextButton');
   });
 
   afterAll(async () => {
@@ -85,9 +79,6 @@ describe('Tests the User Management User Listing Screen', () => {
     expect(tileViewBtn).toBeTruthy();
     expect(tableViewBtn).toBeTruthy();
     expect(userSearchElement).toBeTruthy();
-    expect(paginationElement).toBeTruthy();
-    expect(prevBtn).toBeTruthy();
-    expect(nextBtn).toBeTruthy();
   });
 
   it('Check the UI interactions of tile view and table view button.', async () => {