Dev to Main release

.github/workflows/tests.yml

@@ -0,0 +1,13 @@
+name: Tests
+on:
+  pull_request:
+    branches: [main, develop]
+  push:
+    branches: [main, develop]
+jobs:
+  Lint-Check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: yarn
+      - run: yarn test

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+coverage/

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

@@ -0,0 +1,192 @@
+const puppeteer = require('puppeteer');
+const { allUsersData, filteredUsersData } = require('../../mock-data/users');
+const { tags } = require('../../mock-data/tags');
+
+describe('Tests the User Management User Listing Screen', () => {
+  let browser;
+  let page;
+  let userListElement;
+  let tileViewBtn;
+  let tableViewBtn;
+  let userSearchElement;
+  let paginationElement;
+  let prevBtn;
+  let nextBtn;
+  jest.setTimeout(60000);
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      headless: true,
+      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://api.realdevsquad.com/users?size=100&page=0') {
+        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(allUsersData),
+        });
+      } else if (url === 'https://api.realdevsquad.com/users?search=randhir') {
+        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(filteredUsersData),
+        });
+      } else if (url === 'https://api.realdevsquad.com/tags') {
+        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(tags),
+        });
+      } else {
+        interceptedRequest.continue();
+      }
+    });
+    await page.goto('http://localhost:8000/users');
+    await page.waitForNetworkIdle();
+
+    userListElement = await page.$('#user-list');
+    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 () => {
+    await browser.close();
+  });
+
+  it('Checks the UI elements on user listing page.', async () => {
+    expect(userListElement).toBeTruthy();
+    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 () => {
+    await tileViewBtn.click();
+    const activeTileView = await page.$('.btn-active');
+    expect(activeTileView).toBeTruthy();
+    expect(activeTileView).toEqual(tileViewBtn);
+
+    await tableViewBtn.click();
+    const activeTableView = await page.$('.btn-active');
+    expect(activeTableView).toBeTruthy();
+    expect(activeTableView).toEqual(tableViewBtn);
+  });
+
+  it('Check the home screen contain user-cards', async () => {
+    const userList = await page.$('#user-list');
+    const liList = await userList.$$('li');
+    expect(liList.length).toBeGreaterThan(0);
+  });
+
+  it('checks the search functionality to display queried user', async () => {
+    await page.type('input[id="user-search"]', 'randhir');
+    await page.waitForNetworkIdle();
+    const userList = await page.$('#user-list');
+    const userCard = await userList.$$('li');
+    expect(userCard.length).toBeGreaterThan(0);
+  });
+
+  it('checks the next and previous button functionality', async () => {
+    await page.goto('http://localhost:8000/users');
+    await page.waitForNetworkIdle();
+
+    // Get the "next" button and check if it is enabled
+    const nextBtn = await page.$('#nextButton');
+    const isNextButtonDisabled = await page.evaluate(
+      (button) => button.disabled,
+      nextBtn,
+    );
+    expect(isNextButtonDisabled).toBe(false);
+
+    // Click the "next" button and wait for the page to load
+    await nextBtn.click();
+    await page.waitForNetworkIdle();
+
+    // Check that the "next" button is still present and the "previous" button is not disabled
+    const updatedNextButton = await page.$('#nextButton');
+    expect(updatedNextButton).toBeTruthy();
+
+    const prevBtn = await page.$('#prevButton');
+    const isPrevButtonDisabled = await page.evaluate(
+      (button) => button.disabled,
+      prevBtn,
+    );
+    expect(isPrevButtonDisabled).toBe(false);
+  });
+
+  it('Clicking on filter button should display filter modal', async () => {
+    const modal = await page.$('.filter-modal');
+    expect(await modal.evaluate((el) => el.classList.contains('hidden'))).toBe(
+      true,
+    );
+    await page.click('#filter-button');
+    expect(modal).not.toBeNull();
+    expect(await modal.evaluate((el) => el.classList.contains('hidden'))).toBe(
+      false,
+    );
+    await page.click('#filter-button');
+    expect(await modal.evaluate((el) => el.classList.contains('hidden'))).toBe(
+      true,
+    );
+  });
+
+  it('Selecting filters and clicking on apply should filter user list', async () => {
+    await page.click('#filter-button');
+    await page.click('input[value="ACTIVE"]');
+    await page.click('#apply-filter-button');
+    await page.waitForNetworkIdle();
+    const userList = await page.$('#user-list');
+    expect(userList).not.toBeNull();
+    const userCard = await userList.$$('li');
+    expect(userCard.length).toBeGreaterThanOrEqual(0);
+  });
+
+  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="ACTIVE"]');
+    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);
+  });
+});

admin-panel/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/images/index.ico" type="image/x-icon" />
     <title>Admin Panel | Real Dev Squad</title>
+    <script src="/constants.js"></script>
     <script src="/admin-panel/index.js" type="module" defer></script>
     <link rel="stylesheet" href="/admin-panel/index.css" />
   </head>

admin-panel/index.js

@@ -3,10 +3,9 @@ const mainContainer = document.getElementById('main-container');
 const main = document.getElementById('main');
 const loading = document.getElementById('loading');
 const selectElement = document.getElementById('select-tags');
-const BASE_URL = 'https://api.realdevsquad.com';
 (async function setAuth() {
   try {
-    const res = await fetch(`${BASE_URL}/users/self`, {
+    const res = await fetch(`${API_BASE_URL}/users/self`, {
       method: 'GET',
       credentials: 'include',
       headers: {
@@ -70,7 +69,7 @@ async function createLevel() {
     setLoadingState();
     button.textContent = 'Creating Level...';
 
-    const response = await fetch(`${BASE_URL}/levels`, {
+    const response = await fetch(`${API_BASE_URL}/levels`, {
       method: 'POST',
       credentials: 'include',
       body: JSON.stringify(body),
@@ -103,7 +102,7 @@ async function createSkill() {
     setLoadingState();
     button.textContent = 'creating skill...';
 
-    const response = await fetch(`${BASE_URL}/tags`, {
+    const response = await fetch(`${API_BASE_URL}/tags`, {
       method: 'POST',
       credentials: 'include',
       body: JSON.stringify(body),

babel.config.js

@@ -0,0 +1,5 @@
+const plugins = ['istanbul'];
+
+module.exports = {
+  plugins: plugins,
+};

constants.js

@@ -1,2 +1,3 @@
 const API_BASE_URL = 'https://api.realdevsquad.com';
 const USER_MANAGEMENT_LINK = 'user-management-link';
+const EXTENSION_REQUESTS_LINK = 'extension-requests-link';

extension-requests/constants.js

@@ -0,0 +1,19 @@
+const taskInfoModelHeadings = [
+  { title: 'Title' },
+  { title: 'Ends On', key: 'endsOn', time: true },
+  { title: 'Purpose' },
+  { title: 'Assignee' },
+  { title: 'Created By', key: 'createdBy' },
+  { title: 'Is Noteworthy', key: 'isNoteworthy' },
+];
+
+const extensionRequestCardHeadings = [
+  { title: 'Title' },
+  { title: 'Reason' },
+  { title: 'Old Ends On', key: 'oldEndsOn', time: true },
+  { title: 'New Ends On', key: 'newEndsOn', time: true },
+  { title: 'Status', bold: true },
+  { title: 'Assignee' },
+  { title: 'Created At', key: 'timestamp', time: true },
+  { title: 'Task', key: 'taskId' },
+];

extension-requests/index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Extension Requests</title>
+  </head>
+
+  <body>
+    <div class="extension-requests-modal-parent">
+      <div class="extension-requests-info"></div>
+      <form class="extension-requests-form">
+        <h3>Update Extension Request</h3>
+        <label for="title">Title</label>
+        <input
+          required
+          type="text"
+          id="title"
+          name="title"
+          class="extensionTitle"
+        />
+        <label for="reason">Reason</label>
+        <input
+          required
+          type="text"
+          id="reason"
+          name="reason"
+          class="extensionReason"
+        />
+        <label for="newEndsOn">New Ends On</label>
+        <input
+          required
+          type="datetime-local"
+          id="newEndsOn"
+          name="newEndsOn"
+          class="extensionNewEndsOn"
+        />
+        <label for="oldEndsOn">Old Ends On</label>
+        <input
+          required
+          type="datetime-local"
+          id="oldEndsOn"
+          class="extensionOldEndsOn"
+          readonly
+        />
+        <label for="status">Status</label>
+        <input
+          required
+          type="text"
+          id="status"
+          class="extensionStatus"
+          readonly
+        />
+        <label for="Task Id">Task Id</label>
+        <input required type="text" id="Task Id" class="extensionId" readonly />
+        <label for="assignee">Assignee</label>
+        <input
+          required
+          type="text"
+          id="assignee"
+          class="extensionAssignee"
+          readonly
+        />
+        <button type="submit">Submit</button>
+        <button id="close-modal" type="button">Cancel</button>
+      </form>
+      <form class="extension-requests-status-form">
+        <h3>Update Extension Request Status</h3>
+        <label for="status">Status</label>
+        <select name="status" id="status">
+          <option value="APPROVED">APPROVED</option>
+          <option value="DENIED">DENIED</option>
+        </select>
+        <label for="title">Title</label>
+        <input
+          required
+          type="text"
+          id="title"
+          class="extensionTitle"
+          readonly
+        />
+        <label for="Task Id">Task Id</label>
+        <input required type="text" id="Task Id" class="extensionId" readonly />
+        <label for="assignee">Assignee</label>
+        <input
+          required
+          type="text"
+          id="assignee"
+          class="extensionAssignee"
+          readonly
+        />
+        <button type="submit">Submit</button>
+        <button id="close-modal" type="button">Cancel</button>
+      </form>
+    </div>
+    <header class="header">
+      <h1>Extension Requests</h1>
+    </header>
+    <div class="container">
+      <div class="extension-requests"></div>
+    </div>
+    <h2 id="error"></h2>
+    <script src="/constants.js"></script>
+    <script src="constants.js"></script>
+    <script src="/utils.js"></script>
+    <script src="local-utils.js"></script>
+    <script src="script.js"></script>
+  </body>
+</html>