Repository: Real-Dev-Squad/website-dashboard
Pull request #994: test: add test for request card component
Author: login: AnujChhikara
Created: 2025-05-09T11:50:46Z | Merged: 2025-05-14T18:50:35Z

<!-- Date Here in dd mmm yyyy-->
Date: 09 May 2025
<!--Developer Name Here-->
Developer Name: @AnujChhikara 

---

## Issue Ticket Number
<!--Issue ticket this PR closes-->
- #975 
## Description
- This PR adds tests for the Request Card component.
- It covers rendering of the UI and verifies the functionality for approving and rejecting requests.

🔧 Note: Tests are currently skipped as the related feature code has not yet been pushed.
<!--Description of the changes made in this PR-->

### Documentation Updated?

- [ ] Yes
- [x] No

<!--Additional notes about documentation update if applicable-->

### Under Feature Flag

- [x] Yes
- [ ] No

<!--Indicate if changes are under a feature flag-->

### Database Changes

- [ ] Yes
- [x] No

<!--Notes on any database changes-->

### Breaking Changes

- [ ] Yes
- [x] No

<!--Notes on breaking changes or related issue tickets if applicable-->

### Development Tested?

- [x] Yes
- [ ] No

<!--Confirmation of local testing during development-->

## Screenshots
<details>
<summary>Screenshot 1</summary>

<!-- Attach your screenshots here👇-->

</details>

<!--Attach or link to relevant screenshots or visual aids-->

## Test Coverage
<details>
<summary>Screenshot 1</summary>

<!-- Attach your screenshots here👇-->
![image](https://github.com/user-attachments/assets/f2b149ee-af5a-4e65-a273-52b1ae374e06)
![image](https://github.com/user-attachments/assets/2b130a42-817f-4e75-ab7e-d2a90a31a315)

</details>

<!--Attach Details on test coverage and outcomes-->

## Additional Notes

<!--Any additional notes, considerations or explanations for reviewers-->



Diff:
diff --git a/__tests__/extension-requests/extension-requests.test.js b/__tests__/extension-requests/extension-requests.test.js
index ddcaa4b2..fbd9e4d7 100644
--- a/__tests__/extension-requests/extension-requests.test.js
+++ b/__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);
+  });
 });
diff --git a/__tests__/requests/requests.test.js b/__tests__/requests/requests.test.js
index f6a99997..55fb324e 100644
--- a/__tests__/requests/requests.test.js
+++ b/__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);
+    });
+  });
 });
diff --git a/mock-data/requests/index.js b/mock-data/requests/index.js
index dd8801b6..f8d1b1dc 100644
--- a/mock-data/requests/index.js
+++ b/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',


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 3**

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 958860dcdcc3a77e473b6875c5cccdd8acd815cd and 48dff1320f38c8d72b38e5f2c960cbe3da2a9967.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `__tests__/extension-requests/extension-requests.test.js` (1 hunks)
* `__tests__/requests/requests.test.js` (1 hunks)
* `mock-data/requests/index.js` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (2)</summary>

<details>
<summary>__tests__/extension-requests/extension-requests.test.js (4)</summary><blockquote>

<details>
<summary>mock-data/constants.js (1)</summary>

* `LOCAL_TEST_PAGE_URL` (2-2)

</details>
<details>
<summary>mock-data/extension-requests/index.js (1)</summary>

* `extensionRequestsListPending` (97-147)

</details>
<details>
<summary>extension-requests/script.js (3)</summary>

* `taskTitle` (642-646)
* `approveButton` (905-909)
* `approveButton` (971-974)

</details>
<details>
<summary>mock-data/tasks/index.js (1)</summary>

* `taskDone` (1-25)

</details>

</blockquote></details>
<details>
<summary>__tests__/requests/requests.test.js (5)</summary><blockquote>

<details>
<summary>mock-data/constants.js (1)</summary>

* `LOCAL_TEST_PAGE_URL` (2-2)

</details>
<details>
<summary>requests/script.js (1)</summary>

* `card` (253-263)

</details>
<details>
<summary>extension-requests/script.js (2)</summary>

* `approveButton` (905-909)
* `approveButton` (971-974)

</details>
<details>
<summary>profile-diff-details/script.js (1)</summary>

* `rejectButton` (202-207)

</details>
<details>
<summary>mock-data/requests/index.js (1)</summary>

* `pendingRequest` (1-20)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (2)</summary>

* GitHub Check: test
* GitHub Check: Cloudflare Pages

</details>

<details>
<summary>🔇 Additional comments (1)</summary><blockquote>

<details>
<summary>mock-data/requests/index.js (1)</summary>

`11-11`: **Addition of necessary mock data field**

The `reason` property has been added to the pendingRequest mock data object, which will be used in the new test cases to verify proper rendering of this field in the request cards.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-09T11:53:39Z
user: login: AnujChhikara
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T11:59:51Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-09T12:00:17Z
user: login: AnujChhikara
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T12:01:28Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-09T12:01:51Z
user: login: RishiChaubey31
state: DISMISSED
author_association: NONE
submitted_at: 2025-05-09T15:20:38Z
user: login: pankajjs
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T15:26:47Z
user: login: pankajjs
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T15:32:09Z
user: login: pankajjs
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T15:33:10Z
user: login: pankajjs
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T15:33:42Z
user: login: pankajjs
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T15:35:22Z
user: login: pankajjs
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T15:36:13Z
user: login: pankajjs
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T15:36:47Z
user: login: pankajjs
body: All my suggestions have been addressed.
LGTM
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T16:14:53Z
user: login: RishiChaubey31
state: DISMISSED
author_association: NONE
submitted_at: 2025-05-09T16:16:06Z
user: login: MayankBansal12
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-14T09:02:58Z
user: login: MayankBansal12
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-14T09:04:25Z
user: login: AnujChhikara
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T09:18:52Z
user: login: AnujChhikara
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T09:26:33Z
user: login: pankajjs
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T17:58:47Z
user: login: RishiChaubey31
state: APPROVED
author_association: NONE
submitted_at: 2025-05-14T18:31:12Z
user: login: iamitprakash
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-14T18:50:27Z

Review comments:
diff_hunk: @@ -585,4 +585,80 @@ describe('Tests the request cards', () => {
       'Request approved successfully',
     );
   });
+
+  describe.skip('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);
+
+      for (const card of requestCards) {
+        const approveButton = await card.$('.approve-button');
+        await approveButton.click();
+      }
+      await page.waitForTimeout(2000);
+
+      const requestCardsAfterUpdate = await page.$$(
+        '[data-testid="ooo-request-card"]',
+      );
+      const cardCount = requestCardsAfterUpdate.length;
+      expect(cardCount).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);
+
+      for (const card of requestCards) {
+        const approveButton = await card.$('.reject-button');
+        await approveButton.click();
+      }
+      await page.waitForTimeout(2000);
+
+      const requestCardsAfterUpdate = await page.$$(
+        '[data-testid="ooo-request-card"]',
+      );
+      const cardCount = requestCardsAfterUpdate.length;
+      expect(cardCount).toBe(0);
+    });
+  });
path: __tests__/requests/requests.test.js
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Well-structured test suite for request card component**

This skipped test suite properly tests the request card component's functionality in dev mode, verifying all required fields are displayed correctly and cards are removed after approve/reject actions.

The test suite:
1. Verifies all fields are rendered correctly (approve/reject buttons, remark input, request type, and reason)
2. Confirms that cards are properly removed from display after being approved
3. Confirms that cards are properly removed from display after being rejected



Do the data-testid attributes referenced in the tests (like "request-approve-button", "request-reject-button", etc.) actually exist in the component implementation? I couldn't find these exact attributes in the provided code snippets.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if the data-testid attributes used in the tests exist in the component implementation
rg -A 3 'data-testid.*request-(approve|reject)-button|data-testid.*request-reason|data-testid.*request-remark-input|data-testid.*request-type' --type js
```

Length of output: 1963

---



</details>

**Missing data-testids in component implementation**

The test suite references several `data-testid` attributes that aren’t present in your codebase, so these selectors will never match and the tests will fail:

• `data-testid="request-approve-button"`  
• `data-testid="request-reject-button"`  
• `data-testid="request-remark-input"`  
• `data-testid="request-type"`  
• `data-testid="request-reason"`  

Please update the request-card component (e.g. `RequestCard.jsx`/`.js`) to include these `data-testid` attributes on the corresponding elements, or adjust the tests to use the selectors that already exist in your markup.

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-09T11:53:38Z
author_association: NONE
diff_hunk: @@ -1209,4 +1209,82 @@ describe('Tests the Extension Requests Screen', () => {
       'Extension request successfully updated.',
     );
   });
+
+  it.skip('should display all the field in the extension request card', 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);
+  });
path: __tests__/extension-requests/extension-requests.test.js
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Consider more precise task title assertion**

The current assertion checks if the task title "contains" the expected value, which might pass even if there's additional unexpected text.


Consider a more specific assertion for the task title that accounts for the expected format:

```diff
-  expect(taskTitle).toContain(taskDone.taskData.title);
+  expect(taskTitle).toBe(`Task: ${taskDone.taskData.title}`);
```

This would ensure the task title is displayed exactly as expected, including the "Task: " prefix shown in the relevant code snippet from extension-requests/script.js.


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    const taskTitle = await card.$eval('.task-title', (el) =>
      el.textContent.trim(),
    );
    expect(taskTitle).toBe(`Task: ${taskDone.taskData.title}`);
  });
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-09T11:53:38Z
author_association: NONE
diff_hunk: @@ -1209,4 +1209,82 @@
       'Extension request successfully updated.',
     );
   });
+
+  it.skip('should display all the field in the extension request card', 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', async () => {
+    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);
+
+    for (const card of extensionCards) {
+      const approveButton = await card.$('.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', async () => {
+    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);
+
+    for (const card of extensionCards) {
+      const approveButton = await card.$('.reject-button');
+      await approveButton.click();
+    }
+
+    await page.waitForTimeout(2000);
+
+    const extensionCardsAfter = await page.$$(
+      "[data-testid='extension-request-card']",
+    );
+
+    expect(extensionCardsAfter.length).toBe(0);
+  });
path: __tests__/extension-requests/extension-requests.test.js
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Comprehensive test coverage for extension request cards**

These skipped tests properly validate the extension request card component in dev mode, covering:
1. Display of essential fields (reason, assignee name, task title)
2. Removal of cards after approval
3. Removal of cards after rejection

The tests are thorough and verify that the component behaves as expected by checking its visual elements and state changes after user interactions.



Consider standardizing the page navigation pattern. In the first test you use `await page.goto()`, but in the second and third tests you use `page.goto()` without await. While this might work due to Puppeteer's internal queue, using await consistently would make the tests more reliable:

```diff
-  page.goto(
+  await page.goto(
     `${LOCAL_TEST_PAGE_URL}/extension-requests?order=desc&dev=true&size=1&q=status%3APENDING`,
   );
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
  it.skip('should remove the card from display after approving the request', async () => {
-    page.goto(
+    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);

    for (const card of extensionCards) {
      const approveButton = await card.$('.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', async () => {
-    page.goto(
+    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);

    for (const card of extensionCards) {
      const approveButton = await card.$('.reject-button');
      await approveButton.click();
    }

    await page.waitForTimeout(2000);

    const extensionCardsAfter = await page.$$(
      "[data-testid='extension-request-card']",
    );

    expect(extensionCardsAfter.length).toBe(0);
  });
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-09T11:53:38Z
author_association: NONE
diff_hunk: @@ -585,4 +585,80 @@ describe('Tests the request cards', () => {
       'Request approved successfully',
     );
   });
+
+  describe.skip('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);
+
+      for (const card of requestCards) {
+        const approveButton = await card.$('.approve-button');
+        await approveButton.click();
+      }
+      await page.waitForTimeout(2000);
+
+      const requestCardsAfterUpdate = await page.$$(
+        '[data-testid="ooo-request-card"]',
+      );
+      const cardCount = requestCardsAfterUpdate.length;
+      expect(cardCount).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);
+
+      for (const card of requestCards) {
+        const approveButton = await card.$('.reject-button');
+        await approveButton.click();
+      }
+      await page.waitForTimeout(2000);
+
+      const requestCardsAfterUpdate = await page.$$(
+        '[data-testid="ooo-request-card"]',
+      );
+      const cardCount = requestCardsAfterUpdate.length;
+      expect(cardCount).toBe(0);
+    });
+  });
path: __tests__/requests/requests.test.js
user: login: AnujChhikara
body: This is a test PR, as per our rule to push tests first. The feature code will be added later, and the skipped tests will be enabled accordingly.
created_at: 2025-05-09T11:59:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -585,4 +585,80 @@ describe('Tests the request cards', () => {
       'Request approved successfully',
     );
   });
+
+  describe.skip('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);
+
+      for (const card of requestCards) {
+        const approveButton = await card.$('.approve-button');
+        await approveButton.click();
+      }
+      await page.waitForTimeout(2000);
+
+      const requestCardsAfterUpdate = await page.$$(
+        '[data-testid="ooo-request-card"]',
+      );
+      const cardCount = requestCardsAfterUpdate.length;
+      expect(cardCount).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);
+
+      for (const card of requestCards) {
+        const approveButton = await card.$('.reject-button');
+        await approveButton.click();
+      }
+      await page.waitForTimeout(2000);
+
+      const requestCardsAfterUpdate = await page.$$(
+        '[data-testid="ooo-request-card"]',
+      );
+      const cardCount = requestCardsAfterUpdate.length;
+      expect(cardCount).toBe(0);
+    });
+  });
path: __tests__/requests/requests.test.js
user: login: coderabbitai[bot]
body: @AnujChhikara I understand now! You're following a test-driven development approach where you commit tests first (intentionally skipped) and then implement the features later. This is a great practice that helps ensure your implementation will satisfy all requirements from the beginning.

When you implement the feature code, you'll add those data-testid attributes to the components, and then enable the tests. Thanks for clarifying your workflow.

---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: AnujChhikara
PR: Real-Dev-Squad/website-dashboard#994
File: __tests__/requests/requests.test.js:589-663
Timestamp: 2025-05-09T12:00:15.624Z
Learning: The Real-Dev-Squad/website-dashboard team follows a test-driven development approach where tests are written and committed first (marked as skipped), and the implementation code with corresponding data-testid attributes is added later.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>




<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@AnujChhikara I understand now! You're following a test-driven development approach where you commit tests first (intentionally skipped) and then implement the features later. This is a great practice that helps ensure your implementation will satisfy all requirements from the beginning.

When you implement the feature code, you'll add those data-testid attributes to the components, and then enable the tests. Thanks for clarifying your workflow.

---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: AnujChhikara
PR: Real-Dev-Squad/website-dashboard#994
File: __tests__/requests/requests.test.js:589-663
Timestamp: 2025-05-09T12:00:15.624Z
Learning: The Real-Dev-Squad/website-dashboard team follows a test-driven development approach where tests are written and committed first (marked as skipped), and the implementation code with corresponding data-testid attributes is added later.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>

</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-09T12:00:17Z
author_association: NONE
diff_hunk: @@ -1209,4 +1209,82 @@
       'Extension request successfully updated.',
     );
   });
+
+  it.skip('should display all the field in the extension request card', 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', async () => {
+    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);
+
+    for (const card of extensionCards) {
+      const approveButton = await card.$('.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', async () => {
+    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);
+
+    for (const card of extensionCards) {
+      const approveButton = await card.$('.reject-button');
+      await approveButton.click();
+    }
+
+    await page.waitForTimeout(2000);
+
+    const extensionCardsAfter = await page.$$(
+      "[data-testid='extension-request-card']",
+    );
+
+    expect(extensionCardsAfter.length).toBe(0);
+  });
path: __tests__/extension-requests/extension-requests.test.js
user: login: AnujChhikara
body: nice catch thanks
created_at: 2025-05-09T12:01:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1209,4 +1209,82 @@
       'Extension request successfully updated.',
     );
   });
+
+  it.skip('should display all the field in the extension request card', 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', async () => {
+    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);
+
+    for (const card of extensionCards) {
+      const approveButton = await card.$('.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', async () => {
+    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);
+
+    for (const card of extensionCards) {
+      const approveButton = await card.$('.reject-button');
+      await approveButton.click();
+    }
+
+    await page.waitForTimeout(2000);
+
+    const extensionCardsAfter = await page.$$(
+      "[data-testid='extension-request-card']",
+    );
+
+    expect(extensionCardsAfter.length).toBe(0);
+  });
path: __tests__/extension-requests/extension-requests.test.js
user: login: coderabbitai[bot]
body: @AnujChhikara You're welcome! Happy to help. Your test cases for the extension request cards are well-structured and provide good coverage of the component's functionality. 

(⌒ᴗ⌒)


<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@AnujChhikara You're welcome! Happy to help. Your test cases for the extension request cards are well-structured and provide good coverage of the component's functionality. 

(⌒ᴗ⌒)</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-05-09T12:01:51Z
author_association: NONE
diff_hunk: @@ -585,4 +585,80 @@ describe('Tests the request cards', () => {
       'Request approved successfully',
     );
   });
+
+  describe.skip('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);
+
+      for (const card of requestCards) {
+        const approveButton = await card.$('.approve-button');
+        await approveButton.click();
+      }
+      await page.waitForTimeout(2000);
+
+      const requestCardsAfterUpdate = await page.$$(
+        '[data-testid="ooo-request-card"]',
+      );
+      const cardCount = requestCardsAfterUpdate.length;
+      expect(cardCount).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);
+
+      for (const card of requestCards) {
+        const approveButton = await card.$('.reject-button');
+        await approveButton.click();
+      }
+      await page.waitForTimeout(2000);
+
+      const requestCardsAfterUpdate = await page.$$(
+        '[data-testid="ooo-request-card"]',
+      );
+      const cardCount = requestCardsAfterUpdate.length;
+      expect(cardCount).toBe(0);
path: __tests__/requests/requests.test.js
user: login: pankajjs
body: ```suggestion
      expect(requestCardsAfterUpdate.length).toBe(0);
```
created_at: 2025-05-09T15:26:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -585,4 +585,80 @@ describe('Tests the request cards', () => {
       'Request approved successfully',
     );
   });
+
+  describe.skip('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);
+
+      for (const card of requestCards) {
+        const approveButton = await card.$('.approve-button');
+        await approveButton.click();
+      }
+      await page.waitForTimeout(2000);
+
+      const requestCardsAfterUpdate = await page.$$(
+        '[data-testid="ooo-request-card"]',
+      );
+      const cardCount = requestCardsAfterUpdate.length;
+      expect(cardCount).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);
+
+      for (const card of requestCards) {
+        const approveButton = await card.$('.reject-button');
+        await approveButton.click();
+      }
path: __tests__/requests/requests.test.js
user: login: pankajjs
body: ```suggestion
        const approveButton = await requestCards[0].$('.reject-button');
        await approveButton.click();
```
created_at: 2025-05-09T15:32:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -585,4 +585,80 @@ describe('Tests the request cards', () => {
       'Request approved successfully',
     );
   });
+
+  describe.skip('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);
+
+      for (const card of requestCards) {
+        const approveButton = await card.$('.approve-button');
+        await approveButton.click();
+      }
+      await page.waitForTimeout(2000);
+
+      const requestCardsAfterUpdate = await page.$$(
+        '[data-testid="ooo-request-card"]',
+      );
+      const cardCount = requestCardsAfterUpdate.length;
+      expect(cardCount).toBe(0);
path: __tests__/requests/requests.test.js
user: login: pankajjs
body: ```suggestion
      expect(requestCardsAfterUpdate.length).toBe(0);
```
created_at: 2025-05-09T15:33:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -585,4 +585,80 @@ describe('Tests the request cards', () => {
       'Request approved successfully',
     );
   });
+
+  describe.skip('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);
+
+      for (const card of requestCards) {
+        const approveButton = await card.$('.approve-button');
+        await approveButton.click();
+      }
path: __tests__/requests/requests.test.js
user: login: pankajjs
body: ```suggestion
        const approveButton = await requestCards[0].$('.approve-button');
        await approveButton.click();
```
created_at: 2025-05-09T15:33:42Z
author_association: CONTRIBUTOR
diff_hunk: @@ -585,4 +585,80 @@ describe('Tests the request cards', () => {
       'Request approved successfully',
     );
   });
+
+  describe.skip('Request Card (Dev Mode Enabled)', () => {
path: __tests__/requests/requests.test.js
user: login: pankajjs
body: ```suggestion
  describe.skip('Test Request Card (Dev Mode Enabled)', () => {
```
created_at: 2025-05-09T15:35:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1209,4 +1209,82 @@ describe('Tests the Extension Requests Screen', () => {
       'Extension request successfully updated.',
     );
   });
+
+  it.skip('should display all the field in the extension request card', 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', 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);
+
+    for (const card of extensionCards) {
+      const approveButton = await card.$('.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', 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);
+
+    for (const card of extensionCards) {
+      const approveButton = await card.$('.reject-button');
+      await approveButton.click();
+    }
path: __tests__/extension-requests/extension-requests.test.js
user: login: pankajjs
body: ```suggestion
      const approveButton = await extensionCards[0].$('.reject-button');
      await approveButton.click();
```
created_at: 2025-05-09T15:36:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1209,4 +1209,82 @@ describe('Tests the Extension Requests Screen', () => {
       'Extension request successfully updated.',
     );
   });
+
+  it.skip('should display all the field in the extension request card', 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', 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);
+
+    for (const card of extensionCards) {
+      const approveButton = await card.$('.approve-button');
+      await approveButton.click();
+    }
path: __tests__/extension-requests/extension-requests.test.js
user: login: pankajjs
body: ```suggestion
      const approveButton = await extensionCards[0].$('.approve-button');
      await approveButton.click();
```
created_at: 2025-05-09T15:36:46Z
author_association: CONTRIBUTOR
path: __tests__/extension-requests/extension-requests.test.js
user: login: MayankBansal12
body: question:
- is this refactoring for the extension request card not under the feature flag?
- the test for `should display all the field in the extension request card` covers only required fields or all fields (given there are no optional fields for extension request/request card) 
- should we also consider a negative case for invalid requested?
created_at: 2025-05-14T09:02:58Z
author_association: MEMBER
path: mock-data/requests/index.js
user: login: MayankBansal12
body: `reason` to be used only under feature flag and message without feat flag?
created_at: 2025-05-14T09:04:25Z
author_association: MEMBER
path: mock-data/requests/index.js
user: login: AnujChhikara
body: we already have reason field that also show when we load the request card but we never checked if that rendered or not I have added that check , visit this page https://dashboard.realdevsquad.com/requests/?dev=true
created_at: 2025-05-14T09:18:52Z
author_association: CONTRIBUTOR
path: __tests__/extension-requests/extension-requests.test.js
user: login: AnujChhikara
body: - its under the feature flag updated the description
- only required fields
- This function is only called when we fetch extension request data from the API. We loop through the requests and use it to render each extension request card.
created_at: 2025-05-14T09:26:33Z
author_association: CONTRIBUTOR

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-05-09T11:50:52Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: skip review by coderabbit.ai -->

> [!IMPORTANT]
> ## Review skipped
> 
> Auto incremental reviews are disabled on this repository.
> 
> Please check the settings in the CodeRabbit UI or the `.coderabbit.yaml` file in this repository. To trigger a single review, invoke the `@coderabbitai review` command.
> 
> You can disable this status message by setting the `reviews.review_status` to `false` in the CodeRabbit configuration file.

<!-- end of auto-generated comment: skip review by coderabbit.ai -->
<!-- walkthrough_start -->

## Summary by CodeRabbit

- **Tests**
  - Added new (skipped) test cases to verify the display and removal of extension request cards and request cards in dev mode, including checks for approve/reject actions and correct field rendering.
- **Chores**
  - Updated mock data to include a reason field for pending requests.
## Walkthrough

Three new skipped test cases were added to the extension requests test suite, and a new skipped test suite with three tests was added for request cards in dev mode. The mock data for pending requests was updated to include a "reason" field in the first entry. No existing tests or logic were modified.

## Changes

| File(s)                                                   | Change Summary                                                                                                      |
|-----------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------|
| __tests__/extension-requests/extension-requests.test.js   | Added three skipped Puppeteer UI tests for extension request cards: field display, approve-removal, and reject-removal. |
| __tests__/requests/requests.test.js                       | Added a skipped test suite "Request Card (Dev Mode Enabled)" with three UI tests for card display and approve/reject actions. |
| mock-data/requests/index.js                               | Added a `reason` property to the first object in the `pendingRequest` mock data array.                              |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant Tester
    participant UI
    participant MockData

    Tester->>UI: Navigate to filtered requests page (dev mode)
    UI->>MockData: Fetch pending requests with reasons
    MockData-->>UI: Return mock request data
    UI-->>Tester: Display request/extension request cards

    Tester->>UI: Click approve or reject button
    UI->>UI: Remove card from display
    UI-->>Tester: Updated UI reflects removal
```

## Possibly related PRs

- Real-Dev-Squad/website-dashboard#973: Adds and updates tests for request cards on the /requests page, focusing on reload and error toast behavior; related by modifying UI tests for request card components.

## Suggested reviewers

- iamitprakash
- MayankBansal12

## Poem

> A hop and a skip, new tests in the queue,  
> Cards for requests—approve or adieu!  
> With reasons now shown and buttons to press,  
> The dashboard grows stronger, less prone to a mess.  
> 🐇 Here's to the code, so tidy and neat,  
> Each test a small carrot—so sweet!

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=Real-Dev-Squad/website-dashboard&utm_content=994):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: cloudflare-workers-and-pages[bot]
created_at: 2025-05-09T12:01:29Z
body: ## Deploying dashboard-rds with &nbsp;<a href="https://pages.dev"><img alt="Cloudflare Pages" src="https://user-images.githubusercontent.com/23264/106598434-9e719e00-654f-11eb-9e59-6167043cfa01.png" width="16"></a> &nbsp;Cloudflare Pages

<table><tr><td><strong>Latest commit:</strong> </td><td>
<code>357ba4b</code>
</td></tr>
<tr><td><strong>Status:</strong></td><td>&nbsp;✅&nbsp; Deploy successful!</td></tr>
<tr><td><strong>Preview URL:</strong></td><td>
<a href='https://25c70d16.dashboard-rds.pages.dev'>https://25c70d16.dashboard-rds.pages.dev</a>
</td></tr>
<tr><td><strong>Branch Preview URL:</strong></td><td>
<a href='https://test-request-card.dashboard-rds.pages.dev'>https://test-request-card.dashboard-rds.pages.dev</a>
</td></tr>
</table>

[View logs](https://dash.cloudflare.com/9a288cd5c278d949cd79ed99f986b061/pages/view/dashboard-rds/25c70d16-833b-41f1-bf2c-d3d21c6e6607)

author_association: NONE