test: Add test for task requests UI

__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

@@ -3,6 +3,11 @@ const taskRequestStatus = {
   APPROVED: 'APPROVED',
 };
 
+const MessageStatus = {
+  SUCCESS: 'SUCCESS',
+  ERROR: 'ERROR',
+};
+
 const ErrorMessages = {
   UNAUTHENTICATED:
     'You are unauthenticated to view this section, please login!',

taskRequests/details/index.html

@@ -16,7 +16,8 @@
     <title>Task Requests | Real Dev Squad</title>
     <script src="/helpers/loadENV.js"></script>
     <script src="/taskRequests/util.js"></script>
-    <script src="/taskRequests/script.js" defer></script>
+    <script src="/taskRequests/constants.js"></script>
+    <script src="/taskRequests/details/script.js" defer></script>
   </head>
   <body>
     <div class="header">

taskRequests/details/script.js

@@ -1,10 +1,5 @@
 const API_BASE_URL = window.API_BASE_URL;
 
-const taskRequestStatus = {
-  WAITING: 'WAITING',
-  APPROVED: 'APPROVED',
-};
-
 let taskRequest;
 
 const taskRequestSkeleton = document.querySelector('.taskRequest__skeleton');