Merge pull request #52 from SpaceyaTech/fix/minor-foxes

Refactor HomePage and Footer components, update tests

docs/TESTING.md

@@ -66,7 +66,11 @@ test("has colabs text", async ({ page }) => {
     ).toHaveText("Colabs");
 });
 ```
+use features like the locator picker int the playwright vsocede extension to find to use in the tests
 
 ## Helpful resources
-- [Playwright tips](https://youtu.be/ZF1W6FxWOiA?si=AkHqOwLDedPJ3PC6)
+![playwright-vscode-panel](playwright-vscode-panel.png) 
+
+
+- [☝️ elaborarted in this video below](https://youtu.be/ZF1W6FxWOiA?si=AkHqOwLDedPJ3PC6)
 - [Advice on what to test](https://youtu.be/4-_0aTlkqK0?si=my5IJnAmtcIOhpX9)

e2e-tests/footer/footer.spec.ts

@@ -15,31 +15,33 @@ test.describe("Footer Component", () => {
     page,
   }) => {
     // Check for Colabs logo link
-    const colabsLogoLink = page.locator('img[alt="Colabs logo"]');
+    const colabsLogoLink = page.getByRole("link", { name: "Colabs logo" });
     await expect(colabsLogoLink).toBeVisible();
 
     // Check for X icon link
-    const xIconLink = page.locator('img[alt="X Icon"]');
-    await expect(xIconLink).toBeVisible();
-    await expect(xIconLink).toHaveAttribute("src", /x-icon\.png/);
-    const xLink = page.locator('a[href="http://www.x.com"]');
+    const xLink = page.getByRole("link", { name: "X Icon" });
+    await expect(xLink).toBeVisible();
     await expect(xLink).toHaveAttribute("target", "_blank");
+    const xLinkIcon = xLink.getByRole("img");
+    await expect(xLinkIcon).toHaveAttribute("src", /src\/assets\/x-icon.png/);
+
 
     // Check for LinkedIn icon link
-    const linkedinIconLink = page.locator('img[alt="Linkedin Icon"]');
-    await expect(linkedinIconLink).toBeVisible();
-    await expect(linkedinIconLink).toHaveAttribute("src", /linkedin-icon\.png/);
-    const linkedinLink = page.locator('a[href="http://www.linkedin.com"]');
+    const linkedinLink = page.getByRole("link", { name: "Linkedin Icon" });
+    await expect(linkedinLink).toBeVisible();
     await expect(linkedinLink).toHaveAttribute("target", "_blank");
+    const linkedinLinkIcon = linkedinLink.getByRole("img");
+    await expect(linkedinLinkIcon).toHaveAttribute("src", /linkedin-icon\.png/);
   });
 
   test("should render internal links with correct routes", async ({ page }) => {
     // Check internal navigation links
-    const aboutLink = page.locator("text=About");
-    const hackathonsLink = page.locator("text=Hackathons");
-    const leaderboardLink = page.locator("text=Leaderboard");
-    const privacyLink = page.locator("text=Privacy & Terms");
-    const cookiesLink = page.locator("text=Cookies");
+    const aboutLink = page.getByRole("link", { name: "About" });
+    const hackathonsLink = page.getByRole("link", { name: "Hackathons" });
+    const leaderboardLink = page.getByRole("link", { name: "Leaderboard" });
+    const privacyLink = page.getByRole("link", { name: "Privacy & Terms" });
+    const cookiesLink = page.getByRole("link", { name: "Cookies" });
+
 
     // Assert visibility of links
     await expect(aboutLink).toBeVisible();
@@ -63,9 +65,8 @@ test.describe("Footer Component", () => {
   });
 
   test("should render copyright notice", async ({ page }) => {
-    const copyrightNotice = page.locator(
-      "text=© 2024 Colabs by SpaceYaTech. All rights reserved.",
-    );
+    const copyrightNotice = page.locator('[data-test="FooterCopyright"]')
+
     await expect(copyrightNotice).toBeVisible();
   });
 });

e2e-tests/footer/footerCTA.spec.ts

@@ -36,7 +36,11 @@ test.describe("FooterCTA Component", () => {
   });
 
   test("should render the Launch a Hackathon button", async ({ page }) => {
-    const hackathonButton = await page.locator("text=Launch a Hackathon");
+    const hackathonButton = await page
+      .locator('[data-test="FooterCTA"]')
+      .getByRole("link", {
+        name: "Launch a Hackathon Rocket icon",
+      });
     await expect(hackathonButton).toBeVisible();
     await expect(hackathonButton).toHaveAttribute(
       "href",
@@ -45,8 +49,14 @@ test.describe("FooterCTA Component", () => {
   });
 
   test("should display images", async ({ page }) => {
-    const robotImage = await page.locator('img[alt="Standing robot"]');
-    const ellipseImage = await page.locator('img[alt="ellipse background"]');
+    const robotImage = await page
+      .locator('[data-test="FooterCTA"]')
+      .getByRole("img", {
+        name: "Standing robot",
+      });
+    const ellipseImage = await page.getByRole("img", {
+      name: "ellipse background",
+    });
 
     await expect(robotImage).toBeVisible();
     await expect(ellipseImage).toBeVisible();
@@ -63,7 +73,11 @@ test.describe("FooterCTA Component", () => {
   });
 
   test("Launch a Hackathon button navigates correctly", async ({ page }) => {
-    const hackathonButton = await page.locator("text=Launch a Hackathon");
+    const hackathonButton = await page
+      .locator('[data-test="FooterCTA"]')
+      .getByRole("link", {
+        name: "Launch a Hackathon Rocket icon",
+      });
     await expect(hackathonButton).toBeVisible();
     //setting this up to force a click because the rocket icon is in the way of the button
     await hackathonButton.click({ force: true });

src/data/projects.ts

@@ -1,4 +1,4 @@
-import { Project } from "@/routes/-components/RepositoriesSection";
+import { Project } from "@/routes/-components/repos-sections/RepositoriesSection";
 
 export const projects: Project[] = [
   {

src/routes/-components/HeroSection.tsx

@@ -1,9 +1,9 @@
-import astronaut from "../../assets/Astronaut-herosection.png";
-import rocketIcon from "../../assets/rocket.png";
-import fred from "../../assets/hero-section/fred.png";
-import ian from "../../assets/hero-section/ian.png";
-import katrina from "../../assets/hero-section/katrina.png";
-import sharon from "../../assets/hero-section/sharon.png";
+import astronaut from "@/assets/Astronaut-herosection.png";
+import rocketIcon from "@/assets/rocket.png";
+import fred from "@/assets/hero-section/fred.png";
+import ian from "@/assets/hero-section/ian.png";
+import katrina from "@/assets/hero-section/katrina.png";
+import sharon from "@/assets/hero-section/sharon.png";
 import { Link } from "@tanstack/react-router";
 
 export const HeroSection = () => {
@@ -13,7 +13,7 @@ export const HeroSection = () => {
     //border border-red-500
     <div
       data-test="HeroSection"
-      className="flex flex-col items-center gap-4 p-4 md:mt-2 md:p-5 lg:mt-4 lg:flex lg:flex-row lg:justify-around"
+      className="flex flex-col min-h-screen items-center gap-4 p-4 md:mt-2 md:p-5 lg:mt-4 lg:flex lg:flex-row lg:justify-around"
     >
       <div className="flex flex-col gap-4 p-4 lg:flex lg:w-1/2 lg:flex-col lg:gap-6">
         <h1 className="pb-2 text-[25px] font-bold text-heading md:text-[30px] lg:text-[55px] lg:leading-[60.5px]">

src/routes/-components/HomePage.tsx

@@ -1,27 +1,16 @@
 import { LandingPageNavbar } from "@/components/navigation/LandingPageNavbar";
 import { HeroSection } from "./HeroSection";
-import { Link } from "@tanstack/react-router";
-import RepositoriesSection from "./RepositoriesSection";
-
+import RepositoriesSection from "./repos-sections/RepositoriesSection";
 import { projects } from "@/data/projects";
 import { ToolsSection } from "./tools-section/ToolsSection";
-import { FooterCTA } from "./FooterCTA";
-import Footer from "./Footer";
+import { FooterCTA } from "./footer-section/FooterCTA";
+import Footer from "./footer-section/Footer";
 
 export function HomePage() {
   return (
     <div className="flex h-full min-h-screen w-full flex-col">
       <LandingPageNavbar />
       <HeroSection />
-      <div className="flex h-full min-h-screen w-full flex-col items-center justify-center gap-3 font-ff-poppins">
-        {/* landing page goes here  */}
-        <p className="rounded-2xl border border-primary p-5 text-3xl">
-          Landing page goes here
-        </p>
-        <Link to="/dashboard" className="btn btn-outline">
-          Go to Dashboard
-        </Link>
-      </div>
       <ToolsSection />
       <RepositoriesSection projects={projects} />
       <FooterCTA />

src/routes/-components/footer-section/Footer.tsx

@@ -0,0 +1,57 @@
+import ColabsLogo from "@/assets/logo-container.png";
+import XIcon from "@/assets/x-icon.png";
+import LinkedinIcon from "@/assets/linkedin-icon.png";
+import { Link } from "@tanstack/react-router";
+
+export default function Footer() {
+  return (
+    <footer className="" data-test="Footer">
+      <div className="mb-[200px] flex flex-col md:flex-row md:items-center md:justify-between lg:justify-around">
+        <div className="flex md:w-[25%] w-full items-center justify-center gap-4">
+          {/* Social Icons */}
+          <Link to="/" className="z-10">
+            <img src={ColabsLogo} alt="Colabs logo" />
+          </Link>
+          <a
+            href="https://www.x.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="z-10"
+          >
+            <img
+              src={XIcon}
+              alt="X Icon"
+              className="z-10 h-6 w-6 object-contain"
+            />{" "}
+          </a>
+          <a
+            href="https://www.linkedin.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="z-10"
+          >
+            <img
+              src={LinkedinIcon}
+              alt="Linkedin Icon"
+              className="h-6 w-6 object-contain"
+            />
+          </a>
+        </div>
+        <div className="flex w-full flex-col items-center justify-center">
+          {/* Internal Links */}
+          <div className="my-5 flex flex-col gap-2 text-[#feffff] md:flex-row md:items-center md:gap-3 md:pr-4 lg:justify-between lg:gap-6">
+            <Link to="/">About</Link>
+            <Link to="/dashboard/hackathons">Hackathons</Link>
+            <Link to="/dashboard/leaderboards">Leaderboard</Link>
+            <Link to="/">Privacy & Terms</Link>
+            <Link to="/">Cookies</Link>
+          </div>
+          {/* Footer copyright notice */}
+          <p data-test="FooterCopyright" className="text-xs font-medium text-[#BEB8B8] md:text-center md:text-sm">
+            &copy; {new Date().getFullYear()} Colabs by SpaceYaTech. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/routes/-components/FooterCTA.tsx → src/routes/-components/footer-section/FooterCTA.tsx

@@ -1,14 +1,16 @@
 import { Link } from "@tanstack/react-router";
-import rocketIcon from "../../assets/rocket.png";
-import robot from "../../assets/robot-assistant.png";
-import ellipse from "../../assets/ellipse.png";
+import rocketIcon from "@/assets/rocket.png";
+import robot from "@/assets/robot-assistant.png";
+import ellipse from "@/assets/ellipse.png";
+
+
 export const FooterCTA = () => {
   return (
     <div
       data-test="FooterCTA"
-      className="relative flex flex-col items-center gap-4 p-4 md:gap-10 md:p-10 lg:flex lg:flex-row lg:justify-around"
+      className="relative flex min-h-[150vh] items-center gap-4 p-4 md:gap-10 md:p-10 lg:flex lg:flex-row lg:justify-around"
     >
-      <div className="z-10 p-4 lg:ml-[4%] lg:flex lg:w-1/2 lg:flex-col lg:gap-6">
+      <div className="absolute left-[5%] top-[2%] md:top-[5%] lg:top-[20%] z-10 p-4 lg:flex lg:w-1/2 lg:flex-col lg:gap-6">
         <h1 className="text-[32px] font-bold text-heading lg:text-[55px] lg:leading-[60.5px]">
           Experience counts. Get it on Colabs.
         </h1>
@@ -36,12 +38,12 @@ export const FooterCTA = () => {
       <img
         src={robot}
         alt="Standing robot"
-        className="z-10 mt-4 pl-[30%] md:mt-6 md:w-[50%] md:pl-[15%] lg:h-auto lg:max-w-[40%] lg:object-contain"
+        className="absolute z-10 -right-[15%] sm:right-[5%] md:right-[2%] top-[40%] md:top-[35%] lg:top-[10%]"
       />
       <img
         src={ellipse}
         alt="ellipse background"
-        className="absolute bottom-0 right-2 top-96 z-0 md:right-2 md:top-0 lg:top-10"
+        className="right-0 absolute top-[50%] md:top-[50%] w-full md:w-[65%] lg:top-[10%] lg:w-[50%] "
       />
     </div>
   );