generated from Real-Dev-Squad/website-template
-
Notifications
You must be signed in to change notification settings - Fork 148
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
2 changed files
with
271 additions
and
0 deletions.
There are no files selected for viewing
172 changes: 172 additions & 0 deletions
172
__tests__/extension-requests/extension-requests.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
}; |