Merge pull request #436 from Real-Dev-Squad/test/user-search-and-filter

Adds test cases for filter and user search in extension requests page

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

@@ -0,0 +1,172 @@
+const puppeteer = require('puppeteer');
+const {
+  extensionRequestsList,
+  extensionRequestsListPending,
+  extensionRequestsListApproved,
+} = require('../../mock-data/extension-requests');
+
+describe('Tests the Extension Requests Screen', () => {
+  let browser;
+  let page;
+  let title;
+  let searchBar;
+  let filterButton;
+  let extensionRequestsElement;
+  jest.setTimeout(60000);
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      headless: 'new',
+      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/extension-requests') {
+        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(extensionRequestsList),
+        });
+      } else if (
+        url === 'https://api.realdevsquad.com/extension-requests?status=PENDING'
+      ) {
+        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(extensionRequestsListPending),
+        });
+      } else if (
+        url ===
+        'https://api.realdevsquad.com/extension-requests?status=ACCEPTED'
+      ) {
+        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(extensionRequestsListApproved),
+        });
+      } else {
+        interceptedRequest.continue();
+      }
+    });
+    await page.goto('http://localhost:8000/extension-requests');
+    await page.waitForNetworkIdle();
+
+    title = await page.$('.header h1');
+    searchBar = await page.$('#search');
+    filterButton = await page.$('#filter-button');
+    extensionRequestsElement = await page.$('.extension-request');
+  });
+
+  afterEach(async () => {
+    await page.goto('http://localhost:8000/extension-requests');
+    await page.waitForNetworkIdle();
+  });
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  it('Checks the UI elements on Extension requests listing page.', async () => {
+    expect(title).toBeTruthy();
+    expect(searchBar).toBeTruthy();
+    expect(filterButton).toBeTruthy();
+
+    expect(extensionRequestsElement).toBeTruthy();
+  });
+
+  it('checks the search functionality', async () => {
+    const ele = await page.$('input[id="assignee-search"]');
+    await page.type('#assignee-search', 'someone');
+    await page.waitForTimeout(600); // wait for input debounce timer
+    const cardsList = await page.$$('.extension-request');
+    expect(cardsList.length).toBe(2);
+    const cardTextContent = await page.evaluate(
+      (element) => element.textContent,
+      cardsList[0],
+    );
+    expect(cardTextContent).toContain('someone');
+  });
+
+  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('checks if PENDING is checked by default', async () => {
+    const filterButton = await page.$('#filter-button');
+    await filterButton.click();
+
+    await page.waitForSelector('.filter-modal');
+
+    const activeFilter = await page.$('input[value="PENDING"]');
+
+    const currentState = await activeFilter.getProperty('checked');
+    const isChecked = await currentState.jsonValue();
+    expect(isChecked).toBe(true);
+  });
+
+  it('Selecting filters and clicking on apply should filter extension requests list', async () => {
+    await page.click('#filter-button');
+    await page.click('input[value="PENDING"]');
+
+    await page.click('input[value="APPROVED"]');
+
+    await page.click('#apply-filter-button');
+    await page.waitForNetworkIdle();
+
+    const cardsList = await page.$$('.extension-request');
+
+    expect(cardsList).not.toBeNull();
+    expect(cardsList.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="APPROVED"]');
+    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);
+  });
+});

mock-data/extension-requests/index.js

@@ -0,0 +1,99 @@
+const extensionRequestsList = {
+  message: 'Extension Requests returned successfully!',
+  allExtensionRequests: [
+    {
+      assignee: 'abc',
+      id: 'lGQ3AjUlgNB6Jd8jXaEC',
+      newEndsOn: 1692149100,
+      oldEndsOn: 1691639385.762,
+      reason: 'a reason, a very good one',
+      status: 'PENDING',
+      taskId: 'GCYGDiU0lw4fwc3qljSY',
+      timestamp: 1690429937,
+      title: 'A title',
+    },
+    {
+      assignee: 'someone',
+      id: 'QISvF7kAmnD9vXHwwIsG',
+      newEndsOn: 1690528980,
+      oldEndsOn: 1689954609.948,
+      reason: 'b',
+      status: 'PENDING',
+      taskId: 'PYj79ki2agB0q5JN3kUf',
+      timestamp: 1689233034,
+      title: 'j',
+    },
+    {
+      assignee: 'someone 2',
+      id: 'QISvF7kAmnD9vXHwwIsG',
+      newEndsOn: 1690528980,
+      oldEndsOn: 1689954609.948,
+      reason: 'b',
+      status: 'DENIED',
+      taskId: 'PYj79ki2agB0q5JN3kUf',
+      timestamp: 1689233034,
+      title: 'j',
+    },
+  ],
+};
+
+const extensionRequestsListPending = {
+  message: 'Extension Requests returned successfully!',
+  allExtensionRequests: [
+    {
+      assignee: 'someone',
+      id: 'QISvF7kAmnD9vXHwwIsG',
+      newEndsOn: 1690528980,
+      oldEndsOn: 1689954609.948,
+      reason: 'b',
+      status: 'PENDING',
+      taskId: 'PYj79ki2agB0q5JN3kUf',
+      timestamp: 1689233034,
+      title: 'j',
+    },
+    {
+      assignee: 'someone 2',
+      id: 'QISvF7kAmnD9vXHwwIsG',
+      newEndsOn: 1690528980,
+      oldEndsOn: 1689954609.948,
+      reason: 'b',
+      status: 'PENDING',
+      taskId: 'PYj79ki2agB0q5JN3kUf',
+      timestamp: 1689233034,
+      title: 'j',
+    },
+  ],
+};
+
+const extensionRequestsListApproved = {
+  message: 'Extension Requests returned successfully!',
+  allExtensionRequests: [
+    {
+      assignee: 'someone',
+      id: 'QISvF7kAmnD9vXHwwIsG',
+      newEndsOn: 1690528980,
+      oldEndsOn: 1689954609.948,
+      reason: 'b',
+      status: 'APPROVED',
+      taskId: 'PYj79ki2agB0q5JN3kUf',
+      timestamp: 1689233034,
+      title: 'j',
+    },
+    {
+      assignee: 'someone 2',
+      id: 'QISvF7kAmnD9vXHwwIsG',
+      newEndsOn: 1690528980,
+      oldEndsOn: 1689954609.948,
+      reason: 'b',
+      status: 'APPROVED',
+      taskId: 'PYj79ki2agB0q5JN3kUf',
+      timestamp: 1689233034,
+      title: 'j',
+    },
+  ],
+};
+module.exports = {
+  extensionRequestsList,
+  extensionRequestsListApproved,
+  extensionRequestsListPending,
+};