Tests for task requests

__tests__/taskRequests/taskRequest.test.js

@@ -0,0 +1,130 @@
+const puppeteer = require('puppeteer');
+
+const { fetchedTaskRequests } = require('../../mock-data/taskRequests');
+
+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('Task Requests', () => {
+  let browser;
+  let page;
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch();
+    page = await browser.newPage();
+
+    await page.setRequestInterception(true);
+
+    page.on('request', (request) => {
+      if (request.url() === `${API_BASE_URL}/taskRequests`) {
+        request.respond({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ data: fetchedTaskRequests }),
+          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}/taskRequests`);
+    await page.waitForNetworkIdle();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  describe('When the user is super user', () => {
+    it('should display the task requests card', async () => {
+      const url = await page.evaluate(() => API_BASE_URL);
+      console.log(url);
+      const taskCards = await page.$$('.taskRequest__card');
+      const title = await taskCards[0].evaluate(
+        (el) => el.children[0].textContent,
+      );
+      const purpose = await taskCards[0].evaluate(
+        (el) => el.children[1].textContent,
+      );
+
+      expect(taskCards).toHaveLength(1);
+      expect(title).toMatch(/test title/i);
+      expect(purpose).toMatch(/test purpose/i);
+    });
+  });
+});
+
+describe('createCustomElement', () => {
+  let browser;
+  let page;
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch();
+    page = await browser.newPage();
+
+    await page.goto(`${SITE_URL}/taskRequests`);
+    await page.waitForNetworkIdle();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  describe('tagName', () => {
+    it('should create tag with provided tagName', async () => {
+      const tag = await page.evaluate(
+        () => createCustomElement({ tagName: 'p' }).tagName,
+      );
+      expect(tag).toMatch(/p/i);
+    });
+
+    it('should not add tagName attribute', async () => {
+      const tagNameAttr = await page.evaluate(() =>
+        createCustomElement({ tagName: 'p' }).getAttribute('tagName'),
+      );
+
+      expect(tagNameAttr).toBeNull();
+    });
+  });
+
+  describe('className', () => {
+    it('should add the class when class key is provided using string', async () => {
+      const classes = await page.evaluate(() => [
+        ...createCustomElement({ tagName: 'p', class: 'test-class' }).classList,
+      ]);
+
+      expect(classes).toHaveLength(1);
+      expect(classes).toContain('test-class');
+    });
+
+    it('should add multiple classes when class key has array as value', async () => {
+      const classes = await page.evaluate(() => [
+        ...createCustomElement({
+          tagName: 'p',
+          class: ['test-class-1', 'test-class-2'],
+        }).classList,
+      ]);
+
+      expect(classes).toHaveLength(2);
+      expect(classes).toStrictEqual(['test-class-1', 'test-class-2']);
+    });
+  });
+
+  describe('textContent', () => {
+    it('should add textContent key when specified', async () => {
+      const textContent = await page.evaluate(
+        () =>
+          createCustomElement({ tagName: 'p', textContent: 'test content' })
+            .textContent,
+      );
+
+      expect(textContent).toBe('test content');
+    });
+  });
+});

mock-data/taskRequests/index.js

@@ -0,0 +1,45 @@
+const fetchedTaskRequests = [
+  {
+    id: '123CCXSDF123',
+    url: `https://api.realdevsquad.com/taskRequests/123CCXSDF123`,
+    taskId: 'TESTID123',
+    status: 'WAITING',
+    task: {
+      percentCompleted: 0,
+      isNoteworthy: true,
+      purpose: 'Test purpose',
+      assignee: false,
+      title: 'Test title',
+      type: 'feature',
+      priority: 'HIGH',
+      status: 'ASSIGNED',
+    },
+    requestors: [
+      {
+        userExists: true,
+        user: {
+          id: 'V4rqL1aDecNGoa1IxiCu',
+          incompleteUserDetails: false,
+          discordId: '12345',
+          roles: {
+            archived: false,
+          },
+          linkedin_id: 'uiram',
+          last_name: 'Raghunathan',
+          yoe: '5',
+          github_display_name: 'Sriram',
+          company_name: 'Juniper networks ',
+          github_id: '19sriram',
+          designation: 'Front end engineer',
+          twitter_id: '19sriram',
+          first_name: 'Sriram',
+          username: '19sriram',
+        },
+      },
+    ],
+  },
+];
+
+module.exports = {
+  fetchedTaskRequests,
+};

taskRequests/constants.js

@@ -0,0 +1,17 @@
+const taskRequestStatus = {
+  WAITING: 'WAITING',
+  APPROVED: 'APPROVED',
+};
+
+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',
+  NOT_FOUND: 'Task Requests not found',
+  SERVER_ERROR: 'Unexpected error occurred',
+};

taskRequests/details/index.html

@@ -0,0 +1,72 @@
+<!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" />
+    <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"
+    />
+    <link rel="stylesheet" href="/taskRequests/details/style.css" />
+
+    <title>Task Requests | Real Dev Squad</title>
+    <script src="/helpers/loadENV.js"></script>
+    <script src="/taskRequests/util.js"></script>
+    <script src="/taskRequests/constants.js"></script>
+    <script src="/taskRequests/details/script.js" defer></script>
+  </head>
+  <body>
+    <div class="header">
+      <div class="header__contents">
+        <img
+          src="/taskRequests/assets/RDSLogo.png"
+          alt="RDS logo"
+          height="48"
+          width="48"
+        />
+        <a href="/" class="header__contents__navlink">Home</a>
+      </div>
+    </div>
+    <div class="container">
+      <div id="task-request-details" class="taskRequest">
+        <div class="taskRequest__skeleton">
+          <div class="taskRequest__skeleton__title skeleton"></div>
+          <div class="taskRequest__skeleton__subtitle skeleton"></div>
+        </div>
+      </div>
+
+      <div id="task-details" class="task">
+        <div class="task__skeleton">
+          <div class="task__skeleton__title skeleton"></div>
+          <div class="task__skeleton__details skeleton"></div>
+          <div class="task__skeleton__details skeleton"></div>
+          <div class="task__skeleton__description skeleton"></div>
+          <div class="task__skeleton__description skeleton"></div>
+          <div class="task__skeleton__description skeleton"></div>
+          <div class="task__skeleton__description skeleton"></div>
+        </div>
+      </div>
+
+      <div class="requestors">
+        <div class="requestors__container">
+          <h4 class="requestors__container__title">Requestors</h4>
+          <ul class="requestors__container__list" id="requestors-details"></ul>
+          <ul
+            class="
+              requestors__container__list requestors__container__list__skeleton
+            "
+          >
+            <li class="skeleton"></li>
+            <li class="skeleton"></li>
+            <li class="skeleton"></li>
+            <li class="skeleton"></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>