Skip to content

Commit 7476581

Browse files
shantanu-02vinit717
shantanu-02
and
vinit717
authored
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 <[email protected]>
1 parent 4748e27 commit 7476581

File tree

11 files changed

+166
-36
lines changed

11 files changed

+166
-36
lines changed

‎__tests__/applications/applications.test.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,4 +295,35 @@ describe('Applications page', () => {
295295
);
296296
await page.waitForNetworkIdle();
297297
});
298+
299+
it('should display the footer with the correct repo link', async () => {
300+
const footer = await page.$('[data-test-id="footer"]');
301+
expect(footer).toBeTruthy();
302+
303+
const infoRepo = await footer.$('[data-test-id="info-repo"]');
304+
expect(infoRepo).toBeTruthy();
305+
306+
const repoLink = await infoRepo.$('[data-test-id="repo-link"]');
307+
expect(repoLink).toBeTruthy();
308+
309+
const repoLinkHref = await page.evaluate((el) => el.href, repoLink);
310+
expect(repoLinkHref).toBe(
311+
'https://github.com/Real-Dev-Squad/website-dashboard',
312+
);
313+
314+
const repoLinkTarget = await page.evaluate((el) => el.target, repoLink);
315+
expect(repoLinkTarget).toBe('_blank');
316+
317+
const repoLinkRel = await page.evaluate((el) => el.rel, repoLink);
318+
expect(repoLinkRel).toBe('noopener noreferrer');
319+
320+
const repoLinkText = await page.evaluate((el) => el.innerText, repoLink);
321+
expect(repoLinkText).toBe('open sourced repo');
322+
323+
const repoLinkClass = await page.evaluate((el) => el.className, repoLink);
324+
expect(repoLinkClass).toBe('');
325+
326+
const repoLinkStyle = await page.evaluate((el) => el.style, repoLink);
327+
expect(repoLinkStyle).toBeTruthy();
328+
});
298329
});

‎__tests__/groups/group.test.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,4 +266,35 @@ describe('Discord Groups Page', () => {
266266

267267
expect(noGroupDiv).toBeTruthy();
268268
});
269+
270+
it('should display the footer with the correct repo link', async () => {
271+
const footer = await page.$('[data-test-id="footer"]');
272+
expect(footer).toBeTruthy();
273+
274+
const infoRepo = await footer.$('[data-test-id="info-repo"]');
275+
expect(infoRepo).toBeTruthy();
276+
277+
const repoLink = await infoRepo.$('[data-test-id="repo-link"]');
278+
expect(repoLink).toBeTruthy();
279+
280+
const repoLinkHref = await page.evaluate((el) => el.href, repoLink);
281+
expect(repoLinkHref).toBe(
282+
'https://github.com/Real-Dev-Squad/website-dashboard',
283+
);
284+
285+
const repoLinkTarget = await page.evaluate((el) => el.target, repoLink);
286+
expect(repoLinkTarget).toBe('_blank');
287+
288+
const repoLinkRel = await page.evaluate((el) => el.rel, repoLink);
289+
expect(repoLinkRel).toBe('noopener noreferrer');
290+
291+
const repoLinkText = await page.evaluate((el) => el.innerText, repoLink);
292+
expect(repoLinkText).toBe('open sourced repo');
293+
294+
const repoLinkClass = await page.evaluate((el) => el.className, repoLink);
295+
expect(repoLinkClass).toBe('');
296+
297+
const repoLinkStyle = await page.evaluate((el) => el.style, repoLink);
298+
expect(repoLinkStyle).toBeTruthy();
299+
});
269300
});

‎__tests__/users/App.test.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const API_BASE_URL = 'https://staging-api.realdevsquad.com';
66
describe('App Component', () => {
77
let browser;
88
let page;
9-
jest.setTimeout(60000);
9+
jest.setTimeout(90000);
1010
let config = {
1111
launchOptions: {
1212
headless: 'new',
@@ -68,6 +68,11 @@ describe('App Component', () => {
6868
});
6969

7070
it('should render all sections', async () => {
71+
await page.waitForSelector('.tabs_section');
72+
await page.waitForSelector('.users_section');
73+
await page.waitForSelector('.user_card');
74+
await page.waitForSelector('.user_details_section');
75+
7176
let tabsSection = await page.$('.tabs_section');
7277
let usersSection = await page.$('.users_section');
7378
let firstUser = await page.$('.user_card');
@@ -82,6 +87,8 @@ describe('App Component', () => {
8287
});
8388

8489
it('should update the URL query string and re-render the app', async () => {
90+
await page.waitForSelector('[data_key="verified"]');
91+
8592
// Click on the "Linked Accounts" tab
8693
await page.click('[data_key="verified"]');
8794

‎applications/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link rel="stylesheet" href="/applications/style.css" />
7+
<link rel="stylesheet" href="../global.css" />
78
<script type="module" src="/applications/script.js" defer></script>
89
<script src="/helpers/loadENV.js"></script>
910
<title>Applications</title>
@@ -121,5 +122,11 @@ <h2>Status</h2>
121122
<div class="loader hidden">Loading...</div>
122123
<div id="page_bottom_element"></div>
123124
</div>
125+
<script>
126+
document.addEventListener('DOMContentLoaded', () => {
127+
loadFooter();
128+
});
129+
</script>
130+
<script src="../footer/footerComponent.js"></script>
124131
</body>
125132
</html>

‎footer/footerComponent.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
function loadFooter() {
2+
const footerHTML = `
3+
<footer class="footer" data-test-id="footer">
4+
<p class="info-repo" data-test-id="info-repo">
5+
The contents of this website are deployed from this
6+
<a
7+
href="https://github.com/Real-Dev-Squad/website-dashboard"
8+
target="_blank"
9+
rel="noopener noreferrer"
10+
data-test-id="repo-link"
11+
>
12+
open sourced repo
13+
</a>
14+
</p>
15+
</footer>
16+
`;
17+
18+
document.body.insertAdjacentHTML('beforeend', footerHTML);
19+
}

‎global.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,13 @@ body {
173173
border-radius: 100%;
174174
}
175175

176+
.footer {
177+
width: 100vw;
178+
text-align: center;
179+
position: fixed;
180+
bottom: 4px;
181+
}
182+
176183
@media screen and (max-width: 970px) {
177184
#tasksNav {
178185
justify-content: space-between;

‎groups/index.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<link rel="icon" href="/images/index.ico" type="image/x-icon" />
88
<title>Discord Groups | Real Dev Squad</title>
9-
<link rel="stylesheet" href="/global.css" />
9+
<link rel="stylesheet" href="../global.css" />
1010
<link rel="stylesheet" href="/groups/style.css" />
1111
<script src="/helpers/loadENV.js"></script>
1212
<script src="/constants.js"></script>
@@ -38,12 +38,18 @@
3838
<div class="create-group">
3939
<button class="button">
4040
<span class="button__text">Create Group</span>
41-
<img src="assets/plus.svg" class="button__icon" />
41+
<img src="assets/plus.svg" alt="+" class="button__icon" />
4242
</button>
4343
</div>
4444
</section>
4545
<div class="group-container"></div>
4646
</main>
47+
<script>
48+
document.addEventListener('DOMContentLoaded', () => {
49+
loadFooter();
50+
});
51+
</script>
52+
<script src="../footer/footerComponent.js"></script>
4753
</body>
4854
<div class="toast">
4955
<div class="toast__message"></div>

‎users/discord/components/TabsSection.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ const { createElement } = react;
33
export const TabsSection = ({ tabs, activeTab, handleTabNavigation }) => {
44
return createElement(
55
'div',
6-
{ class: 'tabs_section', onclick: handleTabNavigation },
6+
{
7+
class: 'tabs_section',
8+
onclick: handleTabNavigation,
9+
'data-testid': 'tabs-section',
10+
},
711
tabs.map((tabItem) => {
812
return createElement(
913
'span',

‎users/discord/components/UserDetailsSection.js‎

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,40 @@ const { createElement } = react;
44
export const UserDetailsSection = ({
55
user: { first_name, username, discordId, discordJoinedAt },
66
}) => {
7-
return createElement('section', { class: 'user_details_section' }, [
8-
createElement('div', { class: 'user_details_field' }, [
9-
createElement('span', {}, ['Name: ']),
10-
createElement('span', {}, [first_name]),
11-
]),
12-
createElement('div', { class: 'user_details_field' }, [
13-
createElement('span', {}, ['Username: ']),
14-
createElement('span', {}, [username]),
15-
]),
16-
createElement('div', { class: 'user_details_field' }, [
17-
createElement('span', {}, ['Discord ID: ']),
18-
createElement('span', {}, [discordId]),
19-
]),
20-
createElement('div', { class: 'user_details_field' }, [
21-
createElement('span', {}, ['Joined RDS server on: ']),
22-
createElement('span', {}, [new Date(discordJoinedAt).toUTCString()]),
23-
]),
24-
createElement('div', { class: 'user_details_field' }, [
25-
createElement('span', {}, ['User Management: ']),
26-
createElement(
27-
'a',
28-
{
29-
target: '_bllank',
30-
href: `${USER_MANAGEMENT_URL}${username}`,
31-
},
32-
[`${USER_MANAGEMENT_URL}${username}`],
33-
),
34-
]),
35-
]);
7+
return createElement(
8+
'section',
9+
{
10+
class: 'user_details_section',
11+
'data-testid': 'user-details-section',
12+
},
13+
[
14+
createElement('div', { class: 'user_details_field' }, [
15+
createElement('span', {}, ['Name: ']),
16+
createElement('span', {}, [first_name]),
17+
]),
18+
createElement('div', { class: 'user_details_field' }, [
19+
createElement('span', {}, ['Username: ']),
20+
createElement('span', {}, [username]),
21+
]),
22+
createElement('div', { class: 'user_details_field' }, [
23+
createElement('span', {}, ['Discord ID: ']),
24+
createElement('span', {}, [discordId]),
25+
]),
26+
createElement('div', { class: 'user_details_field' }, [
27+
createElement('span', {}, ['Joined RDS server on: ']),
28+
createElement('span', {}, [new Date(discordJoinedAt).toUTCString()]),
29+
]),
30+
createElement('div', { class: 'user_details_field' }, [
31+
createElement('span', {}, ['User Management: ']),
32+
createElement(
33+
'a',
34+
{
35+
target: '_bllank',
36+
href: `${USER_MANAGEMENT_URL}${username}`,
37+
},
38+
[`${USER_MANAGEMENT_URL}${username}`],
39+
),
40+
]),
41+
],
42+
);
3643
};

‎users/discord/components/UsersSection.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,20 @@ const { createElement } = react;
33
export const UsersSection = ({ users, showUser, handleUserSelected }) => {
44
return createElement(
55
'aside',
6-
{ class: 'users_section', onclick: handleUserSelected },
6+
{
7+
class: 'users_section',
8+
onClick: handleUserSelected,
9+
'data-testid': 'users-section',
10+
},
711
users?.map((user) => {
812
return createElement(
913
'div',
1014
{
1115
class: `user_card ${
1216
users[showUser].id === user.id ? 'active_tab' : ''
1317
}`,
14-
data_key: user.id,
18+
'data-testid': `user-card-${user.id}`,
19+
'data-key': user.id,
1520
},
1621
[
1722
createElement('img', {

0 commit comments

Comments
 (0)