Fix CI tests

.github/workflows/tests.yml

@@ -4,10 +4,24 @@ on:
     branches: [main, develop]
   push:
     branches: [main, develop]
+
 jobs:
-  Lint-Check:
+  test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - run: yarn
-      - run: yarn test
+    - uses: actions/checkout@v2
+
+    - name: Install system dependencies
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y libgbm1 libnss3 libatk-bridge2.0-0 libgtk-3-0 libgbm-dev
+        echo 0 | sudo tee /proc/sys/kernel/apparmor_restrict_unprivileged_userns
+
+    - name: Install project dependencies
+      run: yarn install
+
+    - name: Run tests
+      run: yarn test
+      env:
+        CI: true
+        PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 'true'

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

@@ -12,6 +12,7 @@ const {
   extensionRequestLogs,
   extensionRequestLogsInSentence,
 } = require('../../mock-data/logs');
+const setTimeout = require('node:timers/promises').setTimeout;
 const {
   userSunny,
   userRandhir,
@@ -633,7 +634,7 @@ describe('Tests the Extension Requests Screen', () => {
         break;
       }
     }
-    await page.waitForTimeout(1650);
+    await setTimeout(1650);
 
     const extensionCardsAfter = await page.$$('.extension-card');
 
@@ -656,7 +657,7 @@ describe('Tests the Extension Requests Screen', () => {
         break;
       }
     }
-    await page.waitForTimeout(850);
+    await setTimeout(850);
 
     const extensionCardsAfter = await page.$$('.extension-card');
 
@@ -720,7 +721,7 @@ describe('Tests the Extension Requests Screen', () => {
 
     await page.click('.update-button');
 
-    await page.waitForTimeout(1100);
+    await setTimeout(1100);
 
     await page.waitForNetworkIdle();
 
@@ -778,7 +779,7 @@ describe('Tests the Extension Requests Screen', () => {
 
     await element.hover();
 
-    await page.waitForTimeout(500);
+    await setTimeout(5000);
     const isTooltipVisible = await page.evaluate(() => {
       const tooltip = document.querySelector('.tooltip');
       const style = window.getComputedStyle(tooltip);
@@ -900,7 +901,7 @@ describe('Tests the Extension Requests Screen', () => {
     );
 
     await page.$$eval('.update-button', (buttons) => buttons[0].click());
-    await page.waitForTimeout(1100);
+    await setTimeout(1100);
     await page.waitForNetworkIdle();
     logs = await extensionLogsForFirstER.$$('.log-div');
     expect(Array.from(logs).length).toBe(9);
@@ -966,7 +967,7 @@ describe('Tests the Extension Requests Screen', () => {
     for (const card of extensionCardsList) {
       let approveButton = await card.$('.approve-button');
       await approveButton.click();
-      await page.waitForTimeout(1700);
+      await setTimeout(1700);
     }
 
     extensionRequestsElement = await page.$('.extension-requests');

__tests__/home/home.test.js

@@ -1,5 +1,6 @@
 const puppeteer = require('puppeteer');
 const { superUserData } = require('../../mock-data/users');
+const setTimeout = require('node:timers/promises').setTimeout;
 
 describe('Home Page', () => {
   let browser;
@@ -447,7 +448,7 @@ describe('Home Page', () => {
       },
     ];
 
-    await page.waitForTimeout(1500);
+    await setTimeout(5000);
 
     const userName = await page.$eval(
       '#user-name',
@@ -541,7 +542,7 @@ describe('Home Page', () => {
 
     const hamIcon = await page.$('.hamburger');
     expect(hamIcon).toBeTruthy();
-    await hamIcon.click();
+    await hamIcon.evaluate((h) => h.click());
 
     await page.waitForSelector('.links');
 

__tests__/standup/standup.test.js

@@ -2,6 +2,7 @@ const puppeteer = require('puppeteer');
 const API_BASE_URL = 'https://staging-api.realdevsquad.com';
 const { user } = require('../../mock-data/users');
 const { standup } = require('../../mock-data/standup');
+const setTimeout = require('node:timers/promises').setTimeout;
 
 const oneDay = 24 * 60 * 60 * 1000;
 const numberOfMonthsAgo = 3;
@@ -118,7 +119,7 @@ describe('Standup Page', () => {
     await userInput.press('Backspace');
     await userInput.type('sunny');
     await searchButton.click();
-    await page.waitForTimeout(1000);
+    await setTimeout(1000);
     const updatedUrl = page.url();
     expect(updatedUrl).toContain('q=user:sunny');
   });
@@ -130,7 +131,7 @@ describe('Standup Page', () => {
     await userInput.press('Backspace');
     await userInput.type('sunny,pratiyush');
     await searchButton.click();
-    await page.waitForTimeout(1000);
+    await setTimeout(1000);
     const updatedUrl = page.url();
     expect(updatedUrl).toContain('q=user:sunny+user:pratiyush');
   });
@@ -142,7 +143,7 @@ describe('Standup Page', () => {
     await userInput.press('Backspace');
     await userInput.type('sunny,sunny,pratiyush');
     await searchButton.click();
-    await page.waitForTimeout(1000);
+    await setTimeout(1000);
     const updatedUrl = page.url();
     expect(updatedUrl).toContain('q=user:sunny+user:pratiyush');
   });

__tests__/tasks/profile-picture.test.js

@@ -1,6 +1,7 @@
 const puppeteer = require('puppeteer');
 const { allUsersData } = require('../../mock-data/users');
 const API_BASE_URL = 'https://api.realdevsquad.com';
+const setTimeout = require('node:timers/promises').setTimeout;
 
 describe('Task Page - Assignee Profile Pic', () => {
   let browser;
@@ -61,7 +62,7 @@ describe('Task Page - Assignee Profile Pic', () => {
 
     await page.waitForSelector('#suggested-users-container');
 
-    await page.waitForTimeout(2000);
+    await setTimeout(2000);
     const imgSrc = await page.$eval('#list-items img', (img) => img.src);
     const expectedImageFilename =
       'https://res.cloudinary.com/realdevsquad/image/upload/v1679878917/profile/54vObOfoscwiIVNMSqnN/askdcanhcehukqrdugge.jpg';
@@ -81,7 +82,7 @@ describe('Task Page - Assignee Profile Pic', () => {
     }
 
     await page.waitForSelector('#suggested-users-container');
-    await page.waitForTimeout(2000);
+    await setTimeout(2000);
 
     const imgSrc = await page.$eval('#list-items img', (img) => img.src);
     const expectedImageFilename = 'No-profile-pic.jpg';

__tests__/user-details/Intro-button.test.js

@@ -1,5 +1,6 @@
 const puppeteer = require('puppeteer');
 const { userDetails } = require('../../mock-data/user-details/index');
+const setTimeout = require('node:timers/promises').setTimeout;
 
 describe('Intro User Button Users Detail Page', () => {
   let browser;
@@ -55,7 +56,7 @@ describe('Intro User Button Users Detail Page', () => {
     expect(button).toBeTruthy();
 
     await button.hover();
-    await page.waitForTimeout(500);
+    await setTimeout(5000);
 
     const tooltipElement = await page.$('.tooltip');
     expect(tooltipElement).toBeTruthy();
@@ -68,7 +69,7 @@ describe('Intro User Button Users Detail Page', () => {
     );
 
     await page.mouse.move(0, 0);
-    await page.waitForTimeout(500);
+    await setTimeout(5000);
 
     const updatedTooltipElement = await page.$('.tooltip');
     expect(updatedTooltipElement).toBeFalsy();

__tests__/user-details/task-duedate-hover.test.js

@@ -6,6 +6,7 @@ const {
 const {
   superUserDetails,
 } = require('../../mock-data/tasks-card-date-time-end-date-self/index'); // has super user info
+const setTimeout = require('node:timers/promises').setTimeout;
 
 describe('Tasks On User Management Page', () => {
   let browser;
@@ -127,7 +128,7 @@ describe('Tasks On User Management Page', () => {
 
     await taskDiv.click();
 
-    await page.waitForTimeout(500);
+    await setTimeout(5000);
   });
 
   it('should select and interact with text elements', async () => {
@@ -151,7 +152,7 @@ describe('Tasks On User Management Page', () => {
       await page.waitForTimeout(200); //waiting for a moment to check changes(very helpful when you turn headless into false), please increase value to 2000 or above to see clear changes
     }
 
-    await page.waitForTimeout(500); //waiting for a moment to check changes(very helpful when you turn headless into false)
+    await setTimeout(5000); //waiting for a moment to check changes(very helpful when you turn headless into false)
   });
 
   it('should interact with hover elements', async () => {
@@ -177,7 +178,7 @@ describe('Tasks On User Management Page', () => {
       await page.waitForTimeout(200); //waiting for a moment to check changes(very helpful when you turn headless into false), please increase value to 2000 or above to see clear changes
     }
 
-    await page.waitForTimeout(500); //waiting for a moment to check changes(very helpful when you turn headless into false)
+    await setTimeout(5000); //waiting for a moment to check changes(very helpful when you turn headless into false)
   });
 
   it('Scroll of task should work', async () => {

__tests__/users/applyFilterPagination.test.js

@@ -19,7 +19,6 @@ describe('Apply Filter and Pagination Functionality', () => {
 
   beforeAll(async () => {
     browser = await puppeteer.launch({
-      headless: true,
       ignoreHTTPSErrors: true,
       args: ['--incognito', '--disable-web-security'],
     });

__tests__/users/onboarding-31-days-multiple-selections.test.js

@@ -1,5 +1,6 @@
 const puppeteer = require('puppeteer');
 const { superUserDetails } = require('../../mock-data/users/mockdata');
+const setTimeout = require('node:timers/promises').setTimeout;
 
 describe('Tests the "Onboarding > 31 Days" Filter', () => {
   let browser;
@@ -63,7 +64,7 @@ describe('Tests the "Onboarding > 31 Days" Filter', () => {
 
     await taskDiv.click();
 
-    await page.waitForTimeout(2000);
+    await setTimeout(2000);
     const elements = await page.$$('.checkbox-label');
 
     // Checking if elements are found
@@ -76,26 +77,26 @@ describe('Tests the "Onboarding > 31 Days" Filter', () => {
     expect(applyfilterbutton).toBeTruthy();
     await applyfilterbutton.click();
 
-    await page.waitForTimeout(500);
+    await setTimeout(5000);
   });
   it('should gives results for ACTIVE SELECTED', async () => {
     const taskDiv = await page.$('.filter-button');
     expect(taskDiv).toBeTruthy();
 
     await taskDiv.click();
 
-    // await page.waitForTimeout(2000);  enable to see the tests in actions
+    //await setTimeout(2000);  enable to see the tests in actions
     const elements = await page.$$('.checkbox-label');
 
     const clear = await page.$('#clear-button');
-    await clear.click();
+    await clear.evaluate((b) => b.click());
 
-    // await page.waitForTimeout(2000);     enable to see the tests in actions
+    //await setTimeout(2000);     enable to see the tests in actions
 
     const taskDiv2 = await page.$('.filter-button');
     await taskDiv2.click();
     expect(taskDiv2).toBeTruthy();
-    // await page.waitForTimeout(2000); enable to see the tests in actions
+    //await setTimeout(2000); enable to see the tests in actions
     expect(elements).toBeTruthy();
 
     const checkbox = await page.$('#ACTIVE');
@@ -105,7 +106,7 @@ describe('Tests the "Onboarding > 31 Days" Filter', () => {
     expect(applyfilterbutton).toBeTruthy();
     await applyfilterbutton.click();
 
-    await page.waitForTimeout(500);
+    await setTimeout(5000);
   });
 
   it('should gives results for both ACTIVE & Onboarding > 31 SELECTED', async () => {
@@ -114,7 +115,7 @@ describe('Tests the "Onboarding > 31 Days" Filter', () => {
 
     await taskDiv.click();
 
-    // await page.waitForTimeout(2000);  enable to see the tests in actions
+    //await setTimeout(2000);  enable to see the tests in actions
     const elements = await page.$$('.checkbox-label');
 
     // Checking if elements are found
@@ -123,22 +124,22 @@ describe('Tests the "Onboarding > 31 Days" Filter', () => {
     const clear = await page.$('#clear-button');
     await clear.click();
 
-    // await page.waitForTimeout(2000);   enable to see the tests in actions
+    //await setTimeout(2000);   enable to see the tests in actions
 
     const taskDiv2 = await page.$('.filter-button');
     await taskDiv2.click();
     expect(taskDiv2).toBeTruthy();
-    // await page.waitForTimeout(2000);  enable to see the tests in actions
+    //await setTimeout(2000);  enable to see the tests in actions
     const checkbox = await page.$('#ONBOARDING31DAYS');
     await checkbox.click();
-    // await page.waitForTimeout(2000);  enable to see the tests in actions
+    //await setTimeout(2000);  enable to see the tests in actions
     const checkbox2 = await page.$('#ACTIVE');
     await checkbox2.click();
-    // await page.waitForTimeout(2000);   enable to see the tests in actions
+    //await setTimeout(2000);   enable to see the tests in actions
     const applyfilterbutton = await page.$('.apply-filter-button');
     expect(applyfilterbutton).toBeTruthy();
     await applyfilterbutton.click();
 
-    await page.waitForTimeout(500);
+    await setTimeout(5000);
   });
 });

__tests__/users/onboarding31days.test.js

@@ -1,5 +1,6 @@
 const puppeteer = require('puppeteer');
 const { superUserDetails } = require('../../mock-data/users/mockdata');
+const setTimeout = require('node:timers/promises').setTimeout;
 
 describe('Tests the "Onboarding > 31 Days" Filter', () => {
   let browser;
@@ -63,7 +64,7 @@ describe('Tests the "Onboarding > 31 Days" Filter', () => {
 
     await taskDiv.click();
 
-    await page.waitForTimeout(2000);
+    await setTimeout(2000);
     const elements = await page.$$('.checkbox-label');
 
     // Checking if elements are found
@@ -76,6 +77,6 @@ describe('Tests the "Onboarding > 31 Days" Filter', () => {
     expect(applyfilterbutton).toBeTruthy();
     await applyfilterbutton.click();
 
-    await page.waitForTimeout(5000);
+    await setTimeout(5000);
   });
 });

jest-puppeteer.config.js

@@ -5,18 +5,24 @@ const baseOptions = {
     port: 8000,
     launchTimeout: 30000,
   },
+  launch: {
+    args: ['--no-sandbox', '--disable-setuid-sandbox'],
+  },
 };
+
 const ciPipelineOptions = {
   launch: {
     executablePath: '/usr/bin/google-chrome-stable',
-    headless: true,
+    headless: 'new',
     args: [
-      '--ignore-certificate-errors',
       '--no-sandbox',
       '--disable-setuid-sandbox',
+      '--ignore-certificate-errors',
+      '--disable-dev-shm-usage',
       '--disable-gpu',
     ],
   },
   server: baseOptions.server,
 };
+
 module.exports = ci ? ciPipelineOptions : baseOptions;