From f84d5376e46497a9040c217355b8ab2c70710a9b Mon Sep 17 00:00:00 2001
From: Thibault <54189871+Asaren1070@users.noreply.github.com>
Date: Mon, 16 Jun 2025 10:42:11 +0100
Subject: [PATCH] test: Add E2E test for homepage satellite Selector and
 satellite pass over a certain location (#447)

---
 .../src/app/_homeComponents/SatDropdown.tsx   |  7 ++-
 .../SatellitePassOverLocation.tsx             |  8 +++-
 frontend/tests/e2e/homepage.desktop.spec.ts   | 44 +++++++++++++++++++
 3 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 frontend/tests/e2e/homepage.desktop.spec.ts

diff --git a/frontend/src/app/_homeComponents/SatDropdown.tsx b/frontend/src/app/_homeComponents/SatDropdown.tsx
index 656113d..ea38cc7 100644
--- a/frontend/src/app/_homeComponents/SatDropdown.tsx
+++ b/frontend/src/app/_homeComponents/SatDropdown.tsx
@@ -119,9 +119,12 @@ export default function SatDropdown() {
             <button
                 className="flex w-full cursor-pointer flex-row  justify-between bg-black p-4 text-left"
                 onClick={toggleDropdown}
+                data-testid="satellite-dropdown-button"
             >
                 <div className="flex flex-col">
-                    <div>{selectedSatelliteName || "Select a Satellite"}</div>
+                    <div data-testid="satellite-name">
+                        {selectedSatelliteName || "Select a Satellite"}
+                    </div>
                     <p className="text-gray-400">
                         {selectedSatelliteName ? "Selected Satellite" : null}
                     </p>
@@ -144,6 +147,7 @@ export default function SatDropdown() {
                 animate={isOpen ? "open" : "collapsed"}
                 variants={variants}
                 transition={{ duration: 0.5 }}
+                data-testid="satellite-dropdown-list"
             >
                 {Object.entries(satNumToEntry).map(([num]) => {
                     let satNum = Number(num) as SatelliteNumber;
@@ -157,6 +161,7 @@ export default function SatDropdown() {
                             onClick={() =>
                                 handleSelect(Number(num) as SatelliteNumber)
                             }
+                            role="option"
                         >
                             {satNumToEntry[satNum].name}
                         </div>
diff --git a/frontend/src/components/satelliteData/SatellitePassOverLocation.tsx b/frontend/src/components/satelliteData/SatellitePassOverLocation.tsx
index 27c6ed1..4ffde58 100644
--- a/frontend/src/components/satelliteData/SatellitePassOverLocation.tsx
+++ b/frontend/src/components/satelliteData/SatellitePassOverLocation.tsx
@@ -115,9 +115,10 @@ export default function SatellitePassOverLocation() {
             <button
                 className="flex w-full cursor-pointer flex-row  justify-between bg-black p-4 text-left"
                 onClick={toggleDropdown}
+                data-testid="location-dropdown-button"
             >
                 <div className="flex flex-col">
-                    <div>
+                    <div data-testid="location-name">
                         {displaeydCity ||
                             displayedLocation ||
                             "Select a Location"}
@@ -147,12 +148,14 @@ export default function SatellitePassOverLocation() {
                 animate={isOpen ? "open" : "collapsed"}
                 variants={variants}
                 transition={{ duration: 0.5 }}
+                data-testid="location-dropdown-list"
             >
                 {locations.map((location, idx) => (
                     <div
                         key={idx}
                         className="cursor-pointer p-2 text-white hover:bg-gray-700"
                         onClick={() => handleSelect(location)}
+                        role="option"
                     >
                         {location.name} ({location.latitude + "° N"},{" "}
                         {location.longitude + "° E"})
@@ -168,6 +171,7 @@ export default function SatellitePassOverLocation() {
                             onKeyDown={handleKeyDown}
                             className="flex-1 bg-black p-2 text-white outline-none"
                             placeholder="latitude"
+                            data-testid="latitude-input"
                         />
                         <input
                             type="text"
@@ -176,6 +180,7 @@ export default function SatellitePassOverLocation() {
                             onKeyDown={handleKeyDown}
                             className="flex-2 bg-black p-2 text-white outline-none"
                             placeholder="longitude"
+                            data-testid="longitude-input"
                         />
                     </div>
                     <button
@@ -185,6 +190,7 @@ export default function SatellitePassOverLocation() {
                             }
                         }}
                         className="flex-3 mr-2 whitespace-nowrap rounded-md border bg-primary p-1 text-white duration-200 ease-in-out hover:opacity-80"
+                        data-testid="add-location-button"
                     >
                         Add Location
                     </button>
diff --git a/frontend/tests/e2e/homepage.desktop.spec.ts b/frontend/tests/e2e/homepage.desktop.spec.ts
new file mode 100644
index 0000000..f3c7970
--- /dev/null
+++ b/frontend/tests/e2e/homepage.desktop.spec.ts
@@ -0,0 +1,44 @@
+import { test, expect } from "@playwright/test";
+import exp from "constants";
+
+test.describe("Homepage Test", () => {
+    test("CheckSatelliteSelector", async ({ page }) => {
+        await page.goto("/");
+        await expect(
+            page.getByTestId("satellite-dropdown-button"),
+        ).toBeVisible();
+        await page.getByTestId("satellite-dropdown-button").click();
+        await expect(page.getByTestId("satellite-dropdown-list")).toBeVisible();
+        await expect(
+            page.getByTestId("satellite-dropdown-list").getByRole("option"),
+        ).toHaveCount(2); // By default, there are two options: "Hypso-1" and "Hypso-2"
+        await page
+            .getByTestId("satellite-dropdown-list")
+            .getByRole("option")
+            .nth(1)
+            .click();
+        await expect(page.getByTestId("satellite-name")).toHaveText("HYPSO-2");
+    });
+    test("CheckPassOverTimeSelector", async ({ page }) => {
+        await page.goto("/");
+        await expect(page.getByTestId("location-name")).toHaveText("Trondheim");
+        await expect(
+            page.getByTestId("location-dropdown-button"),
+        ).toBeVisible();
+        await page.getByTestId("location-dropdown-button").click();
+        await expect(page.getByTestId("location-dropdown-list")).toHaveCount(1); // By default, only one location is available
+        await expect(page.getByTestId("latitude-input")).toBeVisible();
+        await expect(page.getByTestId("longitude-input")).toBeVisible();
+        await page.getByTestId("latitude-input").fill("1");
+        await page.getByTestId("longitude-input").fill("1");
+        await page.getByTestId("add-location-button").click();
+        await page
+            .getByTestId("location-dropdown-list")
+            .getByRole("option")
+            .nth(1)
+            .click();
+        await expect(page.getByTestId("location-name")).toHaveText(
+            "1.00° N, 1.00° E",
+        );
+    });
+});