From 012ce6d7a1e4abb2a9c1f2052ea793e7cbc86e74 Mon Sep 17 00:00:00 2001 From: Anuj Chhikara <107175639+AnujChhikara@users.noreply.github.com> Date: Tue, 29 Oct 2024 10:23:15 +0530 Subject: [PATCH 1/7] Fix: Side panel data not updating when different user cards are clicked (#900) * Fix: Side panel data not updating when different user cards are clicked * renamed the variable * added tests * using staging api url for testing --- __tests__/users/App.test.js | 60 ++++++++++++++++++++++-- users/discord/App.js | 18 +++---- users/discord/components/UsersSection.js | 3 +- users/discord/utils/util.js | 5 ++ 4 files changed, 71 insertions(+), 15 deletions(-) diff --git a/__tests__/users/App.test.js b/__tests__/users/App.test.js index 05b36b53..54cbbeeb 100644 --- a/__tests__/users/App.test.js +++ b/__tests__/users/App.test.js @@ -37,9 +37,13 @@ describe('App Component', () => { headers, body: JSON.stringify({ ...filteredUsersData, - users: filteredUsersData.users.filter( - (user) => user.roles.in_discord, - ), + ...mockUserData, + users: [ + ...filteredUsersData.users.filter( + (user) => user.roles.in_discord, + ), + ...mockUserData.users.filter((user) => user.roles.in_discord), + ], }), }); } else if (url === `${API_BASE_URL}/users/search/?verified=true`) { @@ -49,9 +53,11 @@ describe('App Component', () => { headers, body: JSON.stringify({ ...filteredUsersData, - users: filteredUsersData.users.filter((user) => user.discordId), ...mockUserData, - users: mockUserData.users.filter((user) => user.discordId), + users: [ + ...filteredUsersData.users.filter((user) => user.discordId), + ...mockUserData.users.filter((user) => user.discordId), + ], }), }); } else { @@ -96,4 +102,48 @@ describe('App Component', () => { const url = await page.url(); expect(url).toContain('?tab=verified'); }); + + it('should handle user card clicks and apply active_tab class to clicked card only in discord tab', async () => { + await page.goto(`${BASE_URL}/users/discord/?tab=in_discord`); + await page.waitForNetworkIdle(); + await page.waitForSelector('.user_card[data-key]'); + const userCardTestIds = await page.$$eval( + '[data-testid^="user-card-"]', + (cards) => cards.map((card) => card.getAttribute('data-testid')), + ); + for (let i = 0; i < userCardTestIds.length; i++) { + const userCardSelector = `[data-testid="${userCardTestIds[i]}"]`; + const userCardElement = await page.$(userCardSelector); + await userCardElement.click(); + await page.waitForTimeout(1000); + const isActive = await page.evaluate((selector) => { + return document + .querySelector(selector) + ?.classList.contains('active_tab'); + }, userCardSelector); + expect(isActive).toBe(true); + } + }); + + it('should handle user card clicks and apply active_tab class to clicked card only verified tab', async () => { + await page.goto(`${BASE_URL}/users/discord/?tab=verified`); + await page.waitForNetworkIdle(); + await page.waitForSelector('.user_card[data-key]'); + const userCardTestIds = await page.$$eval( + '[data-testid^="user-card-"]', + (cards) => cards.map((card) => card.getAttribute('data-testid')), + ); + for (let i = 0; i < userCardTestIds.length; i++) { + const userCardSelector = `[data-testid="${userCardTestIds[i]}"]`; + const userCardElement = await page.$(userCardSelector); + await userCardElement.click(); + await page.waitForTimeout(1000); + const isActive = await page.evaluate((selector) => { + return document + .querySelector(selector) + ?.classList.contains('active_tab'); + }, userCardSelector); + expect(isActive).toBe(true); + } + }); }); diff --git a/users/discord/App.js b/users/discord/App.js index 87fa873d..d1b57e0e 100644 --- a/users/discord/App.js +++ b/users/discord/App.js @@ -37,16 +37,16 @@ const handleTabNavigation = async (e) => { } }; -const handleUserSelected = (e) => { - const selectedUserId = - e.target?.getAttribute('data_key') || - e.target.parentElement?.getAttribute('data_key'); - - if (selectedUserId) { - showUser = usersData[activeTab]?.findIndex( - (user) => user.id === selectedUserId, +const handleUserSelected = (userId) => { + if (userId) { + const selectedUserIndex = usersData[activeTab]?.findIndex( + (user) => user.id === userId, ); - rerender(App(), window['root']); + + if (selectedUserIndex !== -1) { + showUser = selectedUserIndex; + rerender(App(), window['root']); + } } }; diff --git a/users/discord/components/UsersSection.js b/users/discord/components/UsersSection.js index 4d0ac94b..51773f79 100644 --- a/users/discord/components/UsersSection.js +++ b/users/discord/components/UsersSection.js @@ -5,7 +5,7 @@ export const UsersSection = ({ users, showUser, handleUserSelected }) => { 'aside', { class: 'users_section', - onClick: handleUserSelected, + 'data-testid': 'users-section', }, users?.map((user) => { @@ -17,6 +17,7 @@ export const UsersSection = ({ users, showUser, handleUserSelected }) => { }`, 'data-testid': `user-card-${user.id}`, 'data-key': user.id, + onclick: () => handleUserSelected(user.id), }, [ createElement('img', { diff --git a/users/discord/utils/util.js b/users/discord/utils/util.js index 83cd40e5..1937147e 100644 --- a/users/discord/utils/util.js +++ b/users/discord/utils/util.js @@ -1,3 +1,8 @@ +const API_BASE_URL = + window.location.hostname === 'localhost' + ? 'https://staging-api.realdevsquad.com' + : window.API_BASE_URL; + export const getUsers = async (tab) => { let URL = { in_discord: `${API_BASE_URL}/users/search/?role=in_discord`, From 699428473503c5b769643022dfa699a5a5adfe49 Mon Sep 17 00:00:00 2001 From: Prashant Kumar <80661803+prashant67690@users.noreply.github.com> Date: Tue, 29 Oct 2024 23:57:01 +0530 Subject: [PATCH 2/7] removed the unwanted pagination div (#902) --- .../users/user-management-home-screen.test.js | 9 -- users/constants.js | 3 - users/index.html | 4 - users/script.js | 93 ++++--------------- 4 files changed, 16 insertions(+), 93 deletions(-) diff --git a/__tests__/users/user-management-home-screen.test.js b/__tests__/users/user-management-home-screen.test.js index 66f7b60c..f50242eb 100644 --- a/__tests__/users/user-management-home-screen.test.js +++ b/__tests__/users/user-management-home-screen.test.js @@ -9,9 +9,6 @@ describe('Tests the User Management User Listing Screen', () => { let tileViewBtn; let tableViewBtn; let userSearchElement; - let paginationElement; - let prevBtn; - let nextBtn; jest.setTimeout(60000); beforeAll(async () => { @@ -71,9 +68,6 @@ describe('Tests the User Management User Listing Screen', () => { tileViewBtn = await page.$('#tile-view-btn'); tableViewBtn = await page.$('#table-view-btn'); userSearchElement = await page.$('#user-search'); - paginationElement = await page.$('#pagination'); - prevBtn = await page.$('#prevButton'); - nextBtn = await page.$('#nextButton'); }); afterAll(async () => { @@ -85,9 +79,6 @@ describe('Tests the User Management User Listing Screen', () => { expect(tileViewBtn).toBeTruthy(); expect(tableViewBtn).toBeTruthy(); expect(userSearchElement).toBeTruthy(); - expect(paginationElement).toBeTruthy(); - expect(prevBtn).toBeTruthy(); - expect(nextBtn).toBeTruthy(); }); it('Check the UI interactions of tile view and table view button.', async () => { diff --git a/users/constants.js b/users/constants.js index 78d86831..bf003d1b 100644 --- a/users/constants.js +++ b/users/constants.js @@ -8,9 +8,6 @@ const TILE_VIEW_BTN = 'tile-view-btn'; const TABLE_VIEW_BTN = 'table-view-btn'; const USER_SEARCH_ELEMENT = 'user-search'; const DEFAULT_AVATAR = '/images/avatar.png'; -const PAGINATION_ELEMENT = 'pagination'; -const PREV_BUTTON = 'prevButton'; -const NEXT_BUTTON = 'nextButton'; const USER_FETCH_COUNT = 100; const NONE = 'NONE'; const OOO = 'OOO'; diff --git a/users/index.html b/users/index.html index 5bae7582..b1e65323 100644 --- a/users/index.html +++ b/users/index.html @@ -72,10 +72,6 @@

Skills

-