test: add test for request card component

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

@@ -1227,4 +1227,78 @@ describe('Tests the Extension Requests Screen', () => {
       extensionRequestListForAuditLogs.allExtensionRequests.length,
     );
   });
+
+  it.skip('should display all the required field in the extension request card under feature flag', async () => {
+    await page.goto(
+      `${LOCAL_TEST_PAGE_URL}/extension-requests?order=desc&dev=true&size=1&q=status%3APENDING`,
+    );
+    await page.waitForNetworkIdle();
+
+    const card = await page.$("[data-testid='extension-request-card']");
+    expect(card).not.toBeNull();
+
+    const reasonText = await card.$eval(
+      '[data-testid="request-reason"]',
+      (el) => el.textContent.trim(),
+    );
+    expect(reasonText).toBe(
+      extensionRequestsListPending.allExtensionRequests[1].reason,
+    );
+
+    const assigneeName = await card.$eval('.assignee-name', (el) =>
+      el.textContent.trim().toLowerCase(),
+    );
+    expect(assigneeName).toBe(
+      extensionRequestsListPending.allExtensionRequests[1].assignee,
+    );
+
+    const taskTitle = await card.$eval('.task-title', (el) =>
+      el.textContent.trim(),
+    );
+    expect(taskTitle).toContain(taskDone.taskData.title);
+  });
+
+  it.skip('should remove the card from display after approving the request under feature flag', async () => {
+    await page.goto(
+      `${LOCAL_TEST_PAGE_URL}/extension-requests?order=desc&dev=true&size=1&q=status%3APENDING`,
+    );
+    await page.waitForNetworkIdle();
+    const extensionCards = await page.$$(
+      "[data-testid='extension-request-card']",
+    );
+    expect(extensionCards.length).toBe(1);
+
+    const approveButton = await extensionCards[0].$('.approve-button');
+    await approveButton.click();
+
+    await page.waitForTimeout(2000);
+
+    const extensionCardsAfter = await page.$$(
+      "[data-testid='extension-request-card']",
+    );
+
+    expect(extensionCardsAfter.length).toBe(0);
+  });
+
+  it.skip('should remove the card from display after rejecting the request under feature flag', async () => {
+    await page.goto(
+      `${LOCAL_TEST_PAGE_URL}/extension-requests?order=desc&dev=true&size=1&q=status%3APENDING`,
+    );
+    await page.waitForNetworkIdle();
+    const extensionCards = await page.$$(
+      "[data-testid='extension-request-card']",
+    );
+    expect(extensionCards.length).toBe(1);
+
+    const rejectButton = await extensionCards[0].$('.reject-button');
+    await rejectButton.click();
+
+    await page.waitForTimeout(2000);
+
+    const extensionCardsAfter = await page.$$(
+      "[data-testid='extension-request-card']",
+    );
+
+    expect(extensionCardsAfter.length).toBe(0);
+  });
 });

__tests__/requests/requests.test.js

@@ -620,4 +620,76 @@ describe('Tests the request cards', () => {
     );
     expect(statusText).toContain('Approved');
   });
+
+  describe.skip('Test Request Card (Dev Mode Enabled)', () => {
+    beforeEach(async () => {
+      await page.goto(`${LOCAL_TEST_PAGE_URL}/requests?dev=true`);
+      await page.waitForNetworkIdle();
+    });
+
+    it('should display all the field in the request card', async () => {
+      const requestCards = await page.$$('[data-testid="ooo-request-card"]');
+      expect(requestCards.length).toBeGreaterThan(0);
+
+      for (const card of requestCards) {
+        const approveButton = await card.$(
+          '[data-testid="request-approve-button"]',
+        );
+        const rejectButton = await card.$(
+          '[data-testid="request-reject-button"]',
+        );
+        const remarkInput = await card.$(
+          '[data-testid="request-remark-input"]',
+        );
+
+        const requestTypeElement = await card.$('[data-testid="request-type"]');
+        const requestTypeText = await requestTypeElement.evaluate((el) =>
+          el.textContent.trim(),
+        );
+
+        const requestReasonElement = await card.$(
+          '[data-testid="request-reason"]',
+        );
+
+        const requestReasonText = await requestReasonElement.evaluate((el) =>
+          el.textContent.trim(),
+        );
+        expect(approveButton).not.toBeNull();
+        expect(rejectButton).not.toBeNull();
+        expect(remarkInput).not.toBeNull();
+        expect(requestTypeText).toBe('OOO');
+        expect(requestReasonText).toBe(pendingRequest.data[0].reason);
+      }
+    });
+
+    it('should remove the card from display after approving the request', async () => {
+      const requestCards = await page.$$('[data-testid="ooo-request-card"]');
+      expect(requestCards.length).toBe(1);
+
+      const approveButton = await requestCards[0].$('.approve-button');
+      await approveButton.click();
+      approveButton.click();
+
+      await page.waitForTimeout(2000);
+
+      const requestCardsAfterUpdate = await page.$$(
+        '[data-testid="ooo-request-card"]',
+      );
+      expect(requestCardsAfterUpdate.length).toBe(0);
+    });
+
+    it('should remove the card from display after rejecting the request', async () => {
+      const requestCards = await page.$$('[data-testid="ooo-request-card"]');
+      expect(requestCards.length).toBe(1);
+
+      const rejectButton = await requestCards[0].$('.reject-button');
+      await rejectButton.click();
+      await page.waitForTimeout(2000);
+
+      const requestCardsAfterUpdate = await page.$$(
+        '[data-testid="ooo-request-card"]',
+      );
+      expect(requestCardsAfterUpdate.length).toBe(0);
+    });
+  });
 });

mock-data/requests/index.js

@@ -8,6 +8,7 @@ const pendingRequest = {
       from: 1712275200000,
       until: 1712448000000,
       type: 'OOO',
+      reason: 'need some time for job',
       message: 'request message',
       lastModifiedBy: 'V4rqL1aDecNGoa1IxiCu',
       state: 'PENDING',