Skip to content

Commit 0b9ff39

Browse files
iamitprakashiamitprakash
authored
Merge pull request #699 from Real-Dev-Squad/develop
Dev to Main Sync
2 parents 0e2bcb0 + 7cadd44 commit 0b9ff39

File tree

4 files changed

+164
-33
lines changed

4 files changed

+164
-33
lines changed

‎__tests__/users/App.test.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const puppeteer = require('puppeteer');
22
const { filteredUsersData } = require('../../mock-data/users');
3+
const { mockUserData } = require('../../mock-data/users/mockdata');
34
const API_BASE_URL = 'https://staging-api.realdevsquad.com';
45

56
describe('App Component', () => {
@@ -49,6 +50,8 @@ describe('App Component', () => {
4950
body: JSON.stringify({
5051
...filteredUsersData,
5152
users: filteredUsersData.users.filter((user) => user.discordId),
53+
...mockUserData,
54+
users: mockUserData.users.filter((user) => user.discordId),
5255
}),
5356
});
5457
} else {

‎__tests__/users/applyFilterPagination.test.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
const puppeteer = require('puppeteer');
2+
const { filteredUsersData } = require('../../mock-data/users');
3+
const { mockUserData } = require('../../mock-data/users/mockdata');
4+
const API_BASE_URL = 'https://staging-api.realdevsquad.com';
5+
6+
describe('Apply Filter and Pagination Functionality', () => {
7+
let browser;
8+
let page;
9+
10+
jest.setTimeout(60000);
11+
12+
const BASE_URL = 'http://localhost:8000';
13+
14+
const headers = {
15+
'Access-Control-Allow-Origin': '*',
16+
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
17+
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
18+
};
19+
20+
beforeAll(async () => {
21+
browser = await puppeteer.launch({
22+
headless: true,
23+
ignoreHTTPSErrors: true,
24+
args: ['--incognito', '--disable-web-security'],
25+
});
26+
page = await browser.newPage();
27+
28+
await page.setRequestInterception(true);
29+
30+
page.on('request', (interceptedRequest) => {
31+
const url = interceptedRequest.url();
32+
if (url === `${API_BASE_URL}/users/search/?role=in_discord`) {
33+
interceptedRequest.respond({
34+
status: 200,
35+
contentType: 'application/json',
36+
headers,
37+
body: JSON.stringify({
38+
...filteredUsersData,
39+
users: filteredUsersData.users.filter(
40+
(user) => user.roles.in_discord,
41+
),
42+
}),
43+
});
44+
} else if (url === `${API_BASE_URL}/users/search/?verified=true`) {
45+
interceptedRequest.respond({
46+
status: 200,
47+
contentType: 'application/json',
48+
headers,
49+
body: JSON.stringify({
50+
...filteredUsersData,
51+
users: [...filteredUsersData.users, ...mockUserData.users],
52+
}),
53+
});
54+
} else {
55+
interceptedRequest.continue();
56+
}
57+
});
58+
59+
await page.goto(`${BASE_URL}/users/discord/`);
60+
await page.waitForNetworkIdle();
61+
});
62+
63+
afterAll(async () => {
64+
await browser.close();
65+
});
66+
67+
it('should render all sections', async () => {
68+
let tabsSection = await page.$('.tabs_section');
69+
let usersSection = await page.$('.users_section');
70+
let firstUser = await page.$('.user_card');
71+
let userDetailsSection = await page.$('.user_details_section');
72+
73+
expect(tabsSection).toBeDefined();
74+
const tabs = await tabsSection.$$('.tab');
75+
expect(tabs.length).toEqual(2);
76+
expect(usersSection).toBeDefined();
77+
expect(userDetailsSection).toBeDefined();
78+
});
79+
80+
it('should update the URL query string when applying filters', async () => {
81+
// click on the "Verified" tab
82+
await page.click('[data_key="verified"]');
83+
84+
// get the current URL
85+
const url = await page.url();
86+
expect(url).toContain('?tab=verified');
87+
});
88+
});

‎mock-data/users/mockdata.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const mockUserData = {
2+
message: 'Users found successfully!',
3+
users: [
4+
{
5+
id: 'aaL1MXrpmnUNfLkhgXRj',
6+
github_created_at: 1595870020000,
7+
github_display_name: 'Shubham Sharma',
8+
github_id: 'skv93-coder',
9+
incompleteUserDetails: false,
10+
discordId: '1005550883062415400',
11+
last_name: 'Sharma',
12+
linkedin_id:
13+
'https://www.linkedin.com/authwall?trk=bf&trkInfo=AQHYMsRP3tc0OAAAAYoNZX6wuATNqBsHaNmcvvyvI7xW6_p1BWwaPmUuzm_BCNN9-yOKsgGnYm0D8lgJIw3wn_5LghX6G6_oytuczTfM5P6SsJRZy7LFYiEoIs8YPP8Bx5IkPls=&original_referer=&sessionRedirect=https%3A%2F%2Fwww.linkedin.com%2Fin%2Fshubham-sharma-165600206',
14+
company: 'Igzy',
15+
designation: 'Junior engineer',
16+
twitter_id: 'ShubhamSha11638',
17+
first_name: 'Shubham',
18+
username: 'shubham-sharma',
19+
created_at: 1705233567138,
20+
github_user_id: '68867418',
21+
updated_at: 1707409606780,
22+
roles: {
23+
member: false,
24+
in_discord: true,
25+
archived: false,
26+
super_user: true,
27+
},
28+
},
29+
],
30+
links: {
31+
next: '/search?1=10&state=ACTIVE,OOO,IDLE,ONBOARDING,ONBOARDING&time=31d&size=10&dev=true',
32+
prev: null,
33+
},
34+
count: 39,
35+
};
36+
37+
module.exports = { mockUserData };

‎users/script.js‎

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ function showErrorMessage(
123123
loaderElement.classList.add('remove-element');
124124
}
125125

126-
async function getUsersData(page) {
126+
const getUsersData = async (page) => {
127127
try {
128128
const usersRequest = await makeApiCall(
129129
`${RDS_API_USERS}?size=${USER_FETCH_COUNT}&page=${page}`,
@@ -141,7 +141,7 @@ async function getUsersData(page) {
141141
} catch (err) {
142142
throw err;
143143
}
144-
}
144+
};
145145

146146
function generateUserList(
147147
users,
@@ -328,18 +328,18 @@ function clearFilters() {
328328
);
329329
}
330330

331-
async function showUserDataList(
331+
const showUserDataList = async (
332332
page,
333333
userListElement,
334334
paginationElement,
335335
loaderElement,
336336
prevBtn,
337337
nextBtn,
338-
) {
338+
) => {
339339
try {
340340
const userData = await getUsersData(page);
341341
if (userData.length) {
342-
if (userData.length < 100) {
342+
if (userData.length < USER_FETCH_COUNT) {
343343
nextBtn.classList.add('btn-disabled');
344344
} else {
345345
nextBtn.classList.remove('btn-disabled');
@@ -371,7 +371,7 @@ async function showUserDataList(
371371
loaderElement,
372372
);
373373
}
374-
}
374+
};
375375

376376
function addCheckbox(labelText, value, groupName) {
377377
const group = document.getElementById(groupName);
@@ -588,45 +588,48 @@ applyFilterButton.addEventListener('click', async () => {
588588
displayLoader();
589589
const checkedValuesSkills = getCheckedValues('skills-filter');
590590
const checkedValuesAvailability = getCheckedValues('availability-filter');
591+
let page = 0;
592+
const size = USER_FETCH_COUNT;
591593

592-
const queryParams = getFilteredUsersURL(
594+
let queryParams = getFilteredUsersURL(
593595
checkedValuesSkills,
594596
checkedValuesAvailability,
595597
);
596598

597-
const onboarding31DaysFilter =
598-
document.getElementById('ONBOARDING31DAYS').checked;
599599
try {
600600
let users;
601-
if (onboarding31DaysFilter) {
602-
let queryParams = getFilteredUsersURL(
603-
checkedValuesSkills,
604-
checkedValuesAvailability,
605-
);
606-
601+
if (queryParams.includes('&state=ONBOARDING31DAYS')) {
607602
queryParams = replaceOnboarding31days(queryParams);
608-
const usersRequest = await makeApiCall(
609-
`${RDS_API_USERS}/search${queryParams}`,
610-
);
611-
const { users: filteredUsers } = await usersRequest.json();
612-
users = filteredUsers;
613-
} else {
614-
let queryParams = getFilteredUsersURL(
615-
checkedValuesSkills,
616-
checkedValuesAvailability,
617-
);
618-
const usersRequest = await makeApiCall(
619-
`${RDS_API_USERS}/search${queryParams}`,
620-
);
621-
const { users: filteredUsers } = await usersRequest.json();
622-
users = filteredUsers;
623603
}
624604

605+
queryParams += `&page=${page}&size=${size}`;
606+
607+
queryParams += '&dev=true';
608+
609+
const usersRequest = await makeApiCall(
610+
`${RDS_API_USERS}/search${queryParams}`,
611+
);
612+
const { users: filteredUsers } = await usersRequest.json();
613+
users = filteredUsers;
614+
625615
manipulateQueryParamsToURL(queryParams);
626-
// Display the filtered user list
627-
showUserList(users);
616+
// display the filtered user list with pagination
617+
generateUserList(
618+
users,
619+
true,
620+
userListElement,
621+
paginationElement,
622+
loaderElement,
623+
prevBtn,
624+
);
628625
} catch (err) {
629-
throw new Error(`User list request failed with error: ${err}`);
626+
console.debug(`User list request failed with error: ${err}`);
627+
showErrorMessage(
628+
`User list request failed with error: ${err}`,
629+
userListElement,
630+
paginationElement,
631+
loaderElement,
632+
);
630633
}
631634
});
632635

0 commit comments

Comments
 (0)