From 74765818572c1ed7a43d9400d3a9522f250b6b13 Mon Sep 17 00:00:00 2001 From: shantanu-02 <126399165+shantanu-02@users.noreply.github.com> Date: Thu, 17 Oct 2024 01:55:32 +0530 Subject: [PATCH] Feature/repository links for webpages (#863) * fix: Added footer contaning repo link for every webpage * fix: Added footer contaning repo link for every webpage * Enhancement: Added tests for new URLs * Enhancement: Added tests for new URLs * Fix: Removed Live URLs which do not have footer from testing * Enhancement: Fixed position for footer * fix: removed commented content * Enhancement: Used adata-test-id instead of class/id * Fix: footer position styling * Fix: changes using data-test-id * Fix: Prettier changes * Fix: minor bug fixes * Enhancement: Made reusable footer component * Enhancement: Replaced footer of webpages with footer component * Fix: Minor fixes * Fix: Removed additional footers * Fix: Removed additional footers * Fix: Removed additional footers * Fix: Added styles in global stylesheet * Fix: Minor fix of stylesheet * Fix: Test timeout error * Fix: Using data-test-id instead of classes --------- Co-authored-by: Vinit khandal <111434418+vinit717@users.noreply.github.com> --- __tests__/applications/applications.test.js | 31 +++++++++ __tests__/groups/group.test.js | 31 +++++++++ __tests__/users/App.test.js | 9 ++- applications/index.html | 7 ++ footer/footerComponent.js | 19 ++++++ global.css | 7 ++ groups/index.html | 10 ++- users/discord/components/TabsSection.js | 6 +- .../discord/components/UserDetailsSection.js | 65 ++++++++++--------- users/discord/components/UsersSection.js | 9 ++- users/discord/index.html | 8 ++- 11 files changed, 166 insertions(+), 36 deletions(-) create mode 100644 footer/footerComponent.js diff --git a/__tests__/applications/applications.test.js b/__tests__/applications/applications.test.js index a8ead04f..e0081e76 100644 --- a/__tests__/applications/applications.test.js +++ b/__tests__/applications/applications.test.js @@ -295,4 +295,35 @@ describe('Applications page', () => { ); await page.waitForNetworkIdle(); }); + + it('should display the footer with the correct repo link', async () => { + const footer = await page.$('[data-test-id="footer"]'); + expect(footer).toBeTruthy(); + + const infoRepo = await footer.$('[data-test-id="info-repo"]'); + expect(infoRepo).toBeTruthy(); + + const repoLink = await infoRepo.$('[data-test-id="repo-link"]'); + expect(repoLink).toBeTruthy(); + + const repoLinkHref = await page.evaluate((el) => el.href, repoLink); + expect(repoLinkHref).toBe( + 'https://github.com/Real-Dev-Squad/website-dashboard', + ); + + const repoLinkTarget = await page.evaluate((el) => el.target, repoLink); + expect(repoLinkTarget).toBe('_blank'); + + const repoLinkRel = await page.evaluate((el) => el.rel, repoLink); + expect(repoLinkRel).toBe('noopener noreferrer'); + + const repoLinkText = await page.evaluate((el) => el.innerText, repoLink); + expect(repoLinkText).toBe('open sourced repo'); + + const repoLinkClass = await page.evaluate((el) => el.className, repoLink); + expect(repoLinkClass).toBe(''); + + const repoLinkStyle = await page.evaluate((el) => el.style, repoLink); + expect(repoLinkStyle).toBeTruthy(); + }); }); diff --git a/__tests__/groups/group.test.js b/__tests__/groups/group.test.js index 4400450f..a158810f 100644 --- a/__tests__/groups/group.test.js +++ b/__tests__/groups/group.test.js @@ -266,4 +266,35 @@ describe('Discord Groups Page', () => { expect(noGroupDiv).toBeTruthy(); }); + + it('should display the footer with the correct repo link', async () => { + const footer = await page.$('[data-test-id="footer"]'); + expect(footer).toBeTruthy(); + + const infoRepo = await footer.$('[data-test-id="info-repo"]'); + expect(infoRepo).toBeTruthy(); + + const repoLink = await infoRepo.$('[data-test-id="repo-link"]'); + expect(repoLink).toBeTruthy(); + + const repoLinkHref = await page.evaluate((el) => el.href, repoLink); + expect(repoLinkHref).toBe( + 'https://github.com/Real-Dev-Squad/website-dashboard', + ); + + const repoLinkTarget = await page.evaluate((el) => el.target, repoLink); + expect(repoLinkTarget).toBe('_blank'); + + const repoLinkRel = await page.evaluate((el) => el.rel, repoLink); + expect(repoLinkRel).toBe('noopener noreferrer'); + + const repoLinkText = await page.evaluate((el) => el.innerText, repoLink); + expect(repoLinkText).toBe('open sourced repo'); + + const repoLinkClass = await page.evaluate((el) => el.className, repoLink); + expect(repoLinkClass).toBe(''); + + const repoLinkStyle = await page.evaluate((el) => el.style, repoLink); + expect(repoLinkStyle).toBeTruthy(); + }); }); diff --git a/__tests__/users/App.test.js b/__tests__/users/App.test.js index b612408f..05b36b53 100644 --- a/__tests__/users/App.test.js +++ b/__tests__/users/App.test.js @@ -6,7 +6,7 @@ const API_BASE_URL = 'https://staging-api.realdevsquad.com'; describe('App Component', () => { let browser; let page; - jest.setTimeout(60000); + jest.setTimeout(90000); let config = { launchOptions: { headless: 'new', @@ -68,6 +68,11 @@ describe('App Component', () => { }); it('should render all sections', async () => { + await page.waitForSelector('.tabs_section'); + await page.waitForSelector('.users_section'); + await page.waitForSelector('.user_card'); + await page.waitForSelector('.user_details_section'); + let tabsSection = await page.$('.tabs_section'); let usersSection = await page.$('.users_section'); let firstUser = await page.$('.user_card'); @@ -82,6 +87,8 @@ describe('App Component', () => { }); it('should update the URL query string and re-render the app', async () => { + await page.waitForSelector('[data_key="verified"]'); + // Click on the "Linked Accounts" tab await page.click('[data_key="verified"]'); diff --git a/applications/index.html b/applications/index.html index 8ab396b0..b37d33da 100644 --- a/applications/index.html +++ b/applications/index.html @@ -4,6 +4,7 @@ + Applications @@ -121,5 +122,11 @@

Status

+ + diff --git a/footer/footerComponent.js b/footer/footerComponent.js new file mode 100644 index 00000000..a92fe3c6 --- /dev/null +++ b/footer/footerComponent.js @@ -0,0 +1,19 @@ +function loadFooter() { + const footerHTML = ` + + `; + + document.body.insertAdjacentHTML('beforeend', footerHTML); +} diff --git a/global.css b/global.css index 54d386d2..70d6bbae 100644 --- a/global.css +++ b/global.css @@ -173,6 +173,13 @@ body { border-radius: 100%; } +.footer { + width: 100vw; + text-align: center; + position: fixed; + bottom: 4px; +} + @media screen and (max-width: 970px) { #tasksNav { justify-content: space-between; diff --git a/groups/index.html b/groups/index.html index e354491b..b58fcdcf 100644 --- a/groups/index.html +++ b/groups/index.html @@ -6,7 +6,7 @@ Discord Groups | Real Dev Squad - + @@ -38,12 +38,18 @@
+ +
diff --git a/users/discord/components/TabsSection.js b/users/discord/components/TabsSection.js index 15c69408..57dd4416 100644 --- a/users/discord/components/TabsSection.js +++ b/users/discord/components/TabsSection.js @@ -3,7 +3,11 @@ const { createElement } = react; export const TabsSection = ({ tabs, activeTab, handleTabNavigation }) => { return createElement( 'div', - { class: 'tabs_section', onclick: handleTabNavigation }, + { + class: 'tabs_section', + onclick: handleTabNavigation, + 'data-testid': 'tabs-section', + }, tabs.map((tabItem) => { return createElement( 'span', diff --git a/users/discord/components/UserDetailsSection.js b/users/discord/components/UserDetailsSection.js index 419d3ee5..655c19bc 100644 --- a/users/discord/components/UserDetailsSection.js +++ b/users/discord/components/UserDetailsSection.js @@ -4,33 +4,40 @@ const { createElement } = react; export const UserDetailsSection = ({ user: { first_name, username, discordId, discordJoinedAt }, }) => { - return createElement('section', { class: 'user_details_section' }, [ - createElement('div', { class: 'user_details_field' }, [ - createElement('span', {}, ['Name: ']), - createElement('span', {}, [first_name]), - ]), - createElement('div', { class: 'user_details_field' }, [ - createElement('span', {}, ['Username: ']), - createElement('span', {}, [username]), - ]), - createElement('div', { class: 'user_details_field' }, [ - createElement('span', {}, ['Discord ID: ']), - createElement('span', {}, [discordId]), - ]), - createElement('div', { class: 'user_details_field' }, [ - createElement('span', {}, ['Joined RDS server on: ']), - createElement('span', {}, [new Date(discordJoinedAt).toUTCString()]), - ]), - createElement('div', { class: 'user_details_field' }, [ - createElement('span', {}, ['User Management: ']), - createElement( - 'a', - { - target: '_bllank', - href: `${USER_MANAGEMENT_URL}${username}`, - }, - [`${USER_MANAGEMENT_URL}${username}`], - ), - ]), - ]); + return createElement( + 'section', + { + class: 'user_details_section', + 'data-testid': 'user-details-section', + }, + [ + createElement('div', { class: 'user_details_field' }, [ + createElement('span', {}, ['Name: ']), + createElement('span', {}, [first_name]), + ]), + createElement('div', { class: 'user_details_field' }, [ + createElement('span', {}, ['Username: ']), + createElement('span', {}, [username]), + ]), + createElement('div', { class: 'user_details_field' }, [ + createElement('span', {}, ['Discord ID: ']), + createElement('span', {}, [discordId]), + ]), + createElement('div', { class: 'user_details_field' }, [ + createElement('span', {}, ['Joined RDS server on: ']), + createElement('span', {}, [new Date(discordJoinedAt).toUTCString()]), + ]), + createElement('div', { class: 'user_details_field' }, [ + createElement('span', {}, ['User Management: ']), + createElement( + 'a', + { + target: '_bllank', + href: `${USER_MANAGEMENT_URL}${username}`, + }, + [`${USER_MANAGEMENT_URL}${username}`], + ), + ]), + ], + ); }; diff --git a/users/discord/components/UsersSection.js b/users/discord/components/UsersSection.js index bc07cdaa..4d0ac94b 100644 --- a/users/discord/components/UsersSection.js +++ b/users/discord/components/UsersSection.js @@ -3,7 +3,11 @@ const { createElement } = react; export const UsersSection = ({ users, showUser, handleUserSelected }) => { return createElement( 'aside', - { class: 'users_section', onclick: handleUserSelected }, + { + class: 'users_section', + onClick: handleUserSelected, + 'data-testid': 'users-section', + }, users?.map((user) => { return createElement( 'div', @@ -11,7 +15,8 @@ export const UsersSection = ({ users, showUser, handleUserSelected }) => { class: `user_card ${ users[showUser].id === user.id ? 'active_tab' : '' }`, - data_key: user.id, + 'data-testid': `user-card-${user.id}`, + 'data-key': user.id, }, [ createElement('img', { diff --git a/users/discord/index.html b/users/discord/index.html index a3dd743f..7300e0ec 100644 --- a/users/discord/index.html +++ b/users/discord/index.html @@ -4,8 +4,8 @@ + - Discord Users | Real Dev Squad @@ -16,6 +16,12 @@

Discord Users

+ +