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

@@ -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();
+  });
 });

__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();
+  });
 });

__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"]');
 

applications/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="/applications/style.css" />
+    <link rel="stylesheet" href="../global.css" />
     <script type="module" src="/applications/script.js" defer></script>
     <script src="/helpers/loadENV.js"></script>
     <title>Applications</title>
@@ -121,5 +122,11 @@ <h2>Status</h2>
       <div class="loader hidden">Loading...</div>
       <div id="page_bottom_element"></div>
     </div>
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        loadFooter();
+      });
+    </script>
+    <script src="../footer/footerComponent.js"></script>
   </body>
 </html>

footer/footerComponent.js

@@ -0,0 +1,19 @@
+function loadFooter() {
+  const footerHTML = `
+      <footer class="footer" data-test-id="footer">
+        <p class="info-repo" data-test-id="info-repo">
+          The contents of this website are deployed from this
+          <a
+            href="https://github.com/Real-Dev-Squad/website-dashboard"
+            target="_blank"
+            rel="noopener noreferrer"
+            data-test-id="repo-link"
+          >
+            open sourced repo
+          </a>
+        </p>
+      </footer>
+    `;
+
+  document.body.insertAdjacentHTML('beforeend', footerHTML);
+}

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;

groups/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/images/index.ico" type="image/x-icon" />
     <title>Discord Groups | Real Dev Squad</title>
-    <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="../global.css" />
     <link rel="stylesheet" href="/groups/style.css" />
     <script src="/helpers/loadENV.js"></script>
     <script src="/constants.js"></script>
@@ -38,12 +38,18 @@
         <div class="create-group">
           <button class="button">
             <span class="button__text">Create Group</span>
-            <img src="assets/plus.svg" class="button__icon" />
+            <img src="assets/plus.svg" alt="+" class="button__icon" />
           </button>
         </div>
       </section>
       <div class="group-container"></div>
     </main>
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        loadFooter();
+      });
+    </script>
+    <script src="../footer/footerComponent.js"></script>
   </body>
   <div class="toast">
     <div class="toast__message"></div>

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',

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}`],
+        ),
+      ]),
+    ],
+  );
 };

users/discord/components/UsersSection.js

@@ -3,15 +3,20 @@ 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',
         {
           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', {

users/discord/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../../global.css" />
     <link rel="stylesheet" href="/style.css" />
-    <link rel="stylesheet" href="/global.css" />
     <link rel="stylesheet" href="/users/discord/style.css" />
     <title>Discord Users | Real Dev Squad</title>
     <script src="/utils.js"></script>
@@ -16,6 +16,12 @@
     <nav id="tasksNav"></nav>
     <h1 id="pageTitle">Discord Users</h1>
     <div id="root"></div>
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        loadFooter();
+      });
+    </script>
+    <script src="../../footer/footerComponent.js"></script>
   </body>
   <script src="utils/react.js"></script>
   <script src="/helpers/loadENV.js"></script>