From 186ac75019bc460a2f61559bfa41a068950c90b9 Mon Sep 17 00:00:00 2001
From: Alvin Wanjala <40637276+alvyynm@users.noreply.github.com>
Date: Tue, 6 Aug 2024 10:28:26 +0300
Subject: [PATCH] Fix footer spacing issues (#223)

* fix: adjust ui spacing of footer elements

* fix: item spacing on the copyright message

* fix: remove negative margins on the copyright message

* fix: reduce logo and icon sizes

* refactor: remove redundant style

* test: create tests for link validation in Footer

* fix(test): rename Footer component link validation test
---
 src/components/Footer.jsx       | 24 ++++++++++++------------
 tests/components/footer.spec.js | 26 ++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 12 deletions(-)
 create mode 100644 tests/components/footer.spec.js

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 3ee57674..ac93417e 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -85,15 +85,15 @@ function Footer() {
   const year = now.getFullYear();
 
   return (
-    <footer className="bg-secondary text-white">
-      <div className="md:p-12 py-8 px-4 relative max-w-[1440px] mx-auto">
+    <footer className="bg-secondary text-white" data-testid="footer-section">
+      <div className="md:px-12 md:pt-8 md:pb-[2px] py-8 px-4 max-w-[1440px] mx-auto">
         <div className="flex lg:flex-row flex-col md:gap-16 gap-8">
           <div className="flex-3 flex flex-col items-center">
             {/* logo */}
             <LazyLoadImage
               src={logo}
               alt="logo"
-              className="w-[124px] h-32 md:ml-0 ml-4 object-contain"
+              className="h-20 md:ml-0 ml-4 object-contain"
             />
             {/* socials */}
             <div className="flex gap-4 items-center py-4">
@@ -104,7 +104,7 @@ function Footer() {
                   target="_blank"
                   rel="noopener noreferrer"
                   aria-label={link.label}
-                  className="w-7 h-7 text-white"
+                  className="w-5 h-5 text-white"
                 >
                   {link.icon}
                 </a>
@@ -117,7 +117,7 @@ function Footer() {
                   href={link.href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="w-7 h-7 text-white"
+                  className="w-5 h-5 text-white"
                 >
                   {link.icon}
                 </a>
@@ -126,17 +126,17 @@ function Footer() {
           </div>
 
           {/* Footer links */}
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-12 sm:gap-8">
+          <div className="grid grid-cols-1 sm:grid-cols-3 md:gap-12 gap-8">
             {footerLinks.map((section) => (
               <div
                 key={crypto.randomUUID()}
-                className="flex flex-col gap-8 text-center lg:text-left"
+                className="flex flex-col gap-2 md:gap-4 text-center lg:text-left"
               >
-                <h2 className="text-green-footer font-bold sm:text-xl text-lg leading-9">
+                <h2 className="text-green-footer font-bold sm:text-xl text-lg md:leading-9">
                   {section.title}
                 </h2>
 
-                <ul className="flex flex-col gap-5 list-none text-sm font-light">
+                <ul className="flex flex-col gap-3 md:gap-5 list-none text-sm font-light">
                   {section.links.map((link) =>
                     link.href ? (
                       <li key={crypto.randomUUID()}>
@@ -162,7 +162,7 @@ function Footer() {
 
           {/* Newsletter */}
           <div className="flex-2">
-            <div className="flex flex-col md:gap-8">
+            <div className="flex flex-col gap-2 md:gap-4">
               <h2 className="text-green-footer font-bold sm:text-xl text-lg md:leading-9 mx-auto lg:mx-0 text-center lg:text-left">
                 Subscribe to our Newsletter
               </h2>
@@ -192,8 +192,8 @@ function Footer() {
             </div>
           </div>
         </div>
-        <div className="sm:mt-14 mt-10">
-          <h1 className="text-center text-green-footer my-4 md:my-8">
+        <div>
+          <h1 className="text-center text-green-footer my-4 ">
             &copy; {year} SpaceYaTech | All Rights Reserved
           </h1>
         </div>
diff --git a/tests/components/footer.spec.js b/tests/components/footer.spec.js
new file mode 100644
index 00000000..38e1faef
--- /dev/null
+++ b/tests/components/footer.spec.js
@@ -0,0 +1,26 @@
+import { expect, test } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("http://localhost:5173");
+});
+
+test("all links in the Footer component should be valid", async ({ page }) => {
+  await page.goto("http://localhost:5173");
+
+  const component = await page.locator("data-testid=footer-section");
+
+  const links = await page.$$eval("data-testid=footer-section a", (anchors) =>
+    anchors.map((anchor) => anchor.href)
+  );
+
+  // check if the footer section is visible
+  await expect(component).toBeVisible();
+
+  // validate footer links
+  // eslint-disable-next-line no-restricted-syntax
+  for (const link of links) {
+    // eslint-disable-next-line no-await-in-loop
+    const response = await fetch(link);
+    expect(response.status).toBe(200);
+  }
+});