From 347a5f2fb9ecea902dc74199bdc4171c937f0b42 Mon Sep 17 00:00:00 2001 From: Ajeyakrishna Date: Mon, 31 Jul 2023 21:36:59 +0530 Subject: [PATCH 1/2] test : add test cases for filter and search bar --- .../extension-requests.test.js | 172 ++++++++++++++++++ mock-data/extension-requests/index.js | 99 ++++++++++ 2 files changed, 271 insertions(+) create mode 100644 __tests__/extension-requests/extension-requests.test.js create mode 100644 mock-data/extension-requests/index.js diff --git a/__tests__/extension-requests/extension-requests.test.js b/__tests__/extension-requests/extension-requests.test.js new file mode 100644 index 00000000..e6cc0993 --- /dev/null +++ b/__tests__/extension-requests/extension-requests.test.js @@ -0,0 +1,172 @@ +const puppeteer = require('puppeteer'); +const { + extensionRequestsList, + extensionRequestsListPending, + extensionRequestsListApproved, +} = require('../../mock-data/extension-requests'); +const { tags } = require('../../mock-data/tags'); + +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: 500, + 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: 500, + 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 to display queried user', 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); + }); +}); diff --git a/mock-data/extension-requests/index.js b/mock-data/extension-requests/index.js new file mode 100644 index 00000000..ec322acc --- /dev/null +++ b/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, +}; From 3e7f8f20bbd99a95ab5cf05cc68f74119598ba08 Mon Sep 17 00:00:00 2001 From: Ajeyakrishna Date: Mon, 31 Jul 2023 21:46:37 +0530 Subject: [PATCH 2/2] chore : clean up --- .../extension-requests/extension-requests.test.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/__tests__/extension-requests/extension-requests.test.js b/__tests__/extension-requests/extension-requests.test.js index e6cc0993..d8e5157e 100644 --- a/__tests__/extension-requests/extension-requests.test.js +++ b/__tests__/extension-requests/extension-requests.test.js @@ -4,7 +4,6 @@ const { extensionRequestsListPending, extensionRequestsListApproved, } = require('../../mock-data/extension-requests'); -const { tags } = require('../../mock-data/tags'); describe('Tests the Extension Requests Screen', () => { let browser; @@ -43,7 +42,7 @@ describe('Tests the Extension Requests Screen', () => { url === 'https://api.realdevsquad.com/extension-requests?status=PENDING' ) { interceptedRequest.respond({ - status: 500, + status: 200, contentType: 'application/json', headers: { 'Access-Control-Allow-Origin': '*', @@ -57,7 +56,7 @@ describe('Tests the Extension Requests Screen', () => { 'https://api.realdevsquad.com/extension-requests?status=ACCEPTED' ) { interceptedRequest.respond({ - status: 500, + status: 200, contentType: 'application/json', headers: { 'Access-Control-Allow-Origin': '*', @@ -95,7 +94,7 @@ describe('Tests the Extension Requests Screen', () => { expect(extensionRequestsElement).toBeTruthy(); }); - it('checks the search functionality to display queried user', async () => { + 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 @@ -108,7 +107,7 @@ describe('Tests the Extension Requests Screen', () => { expect(cardTextContent).toContain('someone'); }); - it('Clicking on filter button should display filter modal', async () => { + 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, @@ -136,6 +135,7 @@ describe('Tests the Extension Requests Screen', () => { 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"]');