Feature/repository links for webpages

__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__/home/home.test.js

@@ -393,13 +393,13 @@ describe('Home Page', () => {
   });
 
   it('should display the footer with the correct repo link', async () => {
-    const footer = await page.$('footer');
+    const footer = await page.$('[data-test-id="footer"]');
     expect(footer).toBeTruthy();
 
-    const infoRepo = await footer.$('.info-repo');
+    const infoRepo = await footer.$('[data-test-id="info-repo"]');
     expect(infoRepo).toBeTruthy();
 
-    const repoLink = await infoRepo.$('a');
+    const repoLink = await infoRepo.$('[data-test-id="repo-link"]');
     expect(repoLink).toBeTruthy();
 
     const repoLinkHref = await page.evaluate((el) => el.href, repoLink);

applications/index.html

@@ -121,5 +121,12 @@ <h2>Status</h2>
       <div class="loader hidden">Loading...</div>
       <div id="page_bottom_element"></div>
     </div>
+    <script src="../footer/footerComponent.js"></script>
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        const href = 'https://github.com/Real-Dev-Squad/website-dashboard';
+        loadFooter(href);
+      });
+    </script>
   </body>
 </html>

applications/style.css

@@ -59,6 +59,13 @@ body {
   text-align: center;
 }
 
+.footer {
+  width: 100vw;
+  text-align: center;
+  position: fixed;
+  bottom: 4px;
+}
+
 .container {
   max-width: 1100px;
   margin: 0 auto;

footer/footerComponent.js

@@ -0,0 +1,23 @@
+// footerComponent.js
+
+// Define the loadFooter function that takes an href argument
+function loadFooter(href) {
+  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="${href}"
+            target="_blank"
+            rel="noopener noreferrer"
+            data-test-id="repo-link"
+          >
+            open sourced repo
+          </a>
+        </p>
+      </footer>
+    `;
+
+  // Insert the footer into the DOM
+  document.body.insertAdjacentHTML('beforeend', footerHTML);
+}

footerTest.js

@@ -1,4 +1,7 @@
 const puppeteer = require('puppeteer');
+const EventEmitter = require('events');
+
+EventEmitter.defaultMaxListeners = 15;
 
 let config = {
   launchOptions: {

goal/index.html

@@ -139,17 +139,13 @@ <h2>Page not found</h2>
         <a href="/">Go to homepage</a>
       </div>
     </div>
-    <footer>
-      <p class="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"
-          >open sourced repo</a
-        >
-      </p>
-    </footer>
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        const href = 'https://github.com/Real-Dev-Squad/website-dashboard';
+        loadFooter(href);
+      });
+    </script>
+    <script src="../../footer/footerComponent.js"></script>
     <script src="script.js"></script>
   </body>
 </html>

groups/index.html

@@ -38,12 +38,19 @@
         <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 src="../footer/footerComponent.js"></script>
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        const href = 'https://github.com/Real-Dev-Squad/website-dashboard';
+        loadFooter(href);
+      });
+    </script>
   </body>
   <div class="toast">
     <div class="toast__message"></div>

groups/style.css

@@ -102,6 +102,11 @@ body {
   flex-direction: column;
 }
 
+.footer {
+  position: fixed;
+  bottom: 4px;
+}
+
 .container {
   flex-grow: 1;
   width: clamp(300px, 100%, 1000px);

identity-service-logs/index.html

@@ -48,17 +48,12 @@ <h1>Identity Service Logs</h1>
     <div class="wrapperDiv"></div>
     <p id="loader">Loading...</p>
     <div id="page_bottom_element"></div>
-    <footer id="footer">
-      <p class="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"
-        >
-          open sourced repo
-        </a>
-      </p>
-    </footer>
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        const href = 'https://github.com/Real-Dev-Squad/website-dashboard';
+        loadFooter(href);
+      });
+    </script>
+    <script src="../../footer/footerComponent.js"></script>
   </body>
 </html>

identity-service-logs/style.css

@@ -74,6 +74,11 @@ nav h1::before {
   background-color: #000000;
 }
 
+.footer {
+  position: fixed;
+  bottom: 4px;
+}
+
 .wrapperDiv {
   display: flex;
   flex-direction: column;

index.html

@@ -158,18 +158,12 @@
         </div>
       </div>
     </section>
-
-    <footer>
-      <p class="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"
-        >
-          open sourced repo
-        </a>
-      </p>
-    </footer>
+    <script src="../footer/footerComponent.js"></script>
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        const href = 'https://github.com/Real-Dev-Squad/website-dashboard';
+        loadFooter(href);
+      });
+    </script>
   </body>
 </html>

online-members/online-members.html

@@ -28,17 +28,12 @@
       <!-- Members -->
       <div class="users-container" id="users-container"></div>
     </div>
-    <footer>
-      <p class="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"
-        >
-          open sourced repo
-        </a>
-      </p>
-    </footer>
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        const href = 'https://github.com/Real-Dev-Squad/website-dashboard';
+        loadFooter(href);
+      });
+    </script>
+    <script src="../../footer/footerComponent.js"></script>
   </body>
 </html>

profile/index.html

@@ -24,18 +24,12 @@ <h1>PROFILE DIFFERENCES</h1>
     </nav>
 
     <p id="loader">Loading...</p>
-
-    <footer id="footer">
-      <p class="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"
-        >
-          open sourced repo
-        </a>
-      </p>
-    </footer>
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        const href = 'https://github.com/Real-Dev-Squad/website-dashboard';
+        loadFooter(href);
+      });
+    </script>
+    <script src="../../footer/footerComponent.js"></script>
   </body>
 </html>

profile/style.css

@@ -80,6 +80,11 @@ nav h1::before {
   background-color: #000000;
 }
 
+.footer {
+  position: fixed;
+  bottom: 5px;
+}
+
 .wrapperDiv {
   display: flex;
   flex-direction: column;

standup/index.html

@@ -35,20 +35,13 @@ <h1 class="user-standup-nav">User Standup</h1>
 
       <section class="table-container" id="table-container"></section>
     </main>
-
-    <footer>
-      <p class="info-repo">
-        The contents of this website are deployed from this
-        <a
-          class="info-repo-link"
-          href="https://github.com/Real-Dev-Squad/website-dashboard"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Open sourced repo
-        </a>
-      </p>
-    </footer>
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        const href = 'https://github.com/Real-Dev-Squad/website-dashboard';
+        loadFooter(href);
+      });
+    </script>
+    <script src="../../footer/footerComponent.js"></script>
     <script src="/helpers/loadENV.js"></script>
     <script src="/constants.js"></script>
     <script src="/standup/utils.js"></script>

task/index.html

@@ -287,21 +287,16 @@ <h4 class="suggested-users-title">Suggested users</h4>
           />
         </div>
       </form>
-
-      <footer>
-        <p class="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"
-            >open sourced repo</a
-          >
-        </p>
-      </footer>
+      <script>
+        document.addEventListener('DOMContentLoaded', () => {
+          const href = 'https://github.com/Real-Dev-Squad/website-dashboard';
+          loadFooter(href);
+        });
+      </script>
       <div class="hidden" id="submit-loader">
         <div class="loader"></div>
       </div>
+      <script src="../../footer/footerComponent.js"></script>
       <script src="/helpers/loadENV.js"></script>
       <script src="/task/script.js"></script>
     </div>