From 21e89f685bb1bdc6c5d31c22bfefdbbe5cc7c4c7 Mon Sep 17 00:00:00 2001 From: Mads Hermansen <119772939+madshermansen@users.noreply.github.com> Date: Mon, 22 Apr 2024 14:41:13 +0200 Subject: [PATCH 1/3] =?UTF-8?q?feat(frontend):=20:sparkles:=20Update=20sat?= =?UTF-8?q?ellite=20page=20layout=20and=20map=20compo=E2=80=A6=20(#312)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(frontend): :sparkles: Update satellite page layout and map component + navbar fix * feat(frontend): :sparkles: prettier write * small fixes with styling * underline noradID * prettier --------- Co-authored-by: Lukas --- .../app/satellites/[satelliteSlug]/page.tsx | 35 ++++++++++++------- frontend/src/components/2dmap/Map2d.tsx | 14 ++++---- frontend/src/components/Navbar.tsx | 2 +- .../src/components/ui/launchDateCountDown.tsx | 9 +++-- 4 files changed, 35 insertions(+), 25 deletions(-) diff --git a/frontend/src/app/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx index a1597fc..344cf8b 100644 --- a/frontend/src/app/satellites/[satelliteSlug]/page.tsx +++ b/frontend/src/app/satellites/[satelliteSlug]/page.tsx @@ -52,7 +52,7 @@ export default async function SatelliteInfoPage({ return ( <> -
+
{satelliteInfo.name} @@ -62,22 +62,24 @@ export default async function SatelliteInfoPage({ - {satelliteInfo.launchDate ? ( -
- -
- ) : null} {/* Container for satname, stats and sat image */} {satelliteInfo.noradId ? (
{/* Stats Container */}
- {satelliteInfo.noradId - ? "NORAD ID: " + satelliteInfo.noradId - : null} + {satelliteInfo.noradId ? ( + + ) : null}

{satelliteInfo.massKg ? "Mass: " + @@ -115,8 +117,17 @@ export default async function SatelliteInfoPage({

) : null} + {/* Container for launch date */} + {satelliteInfo.launchDate ? ( +
+ +
+ ) : null} + {/* Container for body content */} -
+
diff --git a/frontend/src/components/2dmap/Map2d.tsx b/frontend/src/components/2dmap/Map2d.tsx index a4e1854..aba8cf8 100644 --- a/frontend/src/components/2dmap/Map2d.tsx +++ b/frontend/src/components/2dmap/Map2d.tsx @@ -8,7 +8,7 @@ import { predictFuturePositions, } from "@/lib/convertSatrec"; -const updateInterval = 50; +const updateInterval = 100; export default function Map2d({ satName }: { satName: string }) { const { satelliteData } = useSatelliteStore(); @@ -94,9 +94,9 @@ export default function Map2d({ satName }: { satName: string }) { return (
-
-

- Current and Predicted Satellite Position +
+

+ Satellite Position

- Positions {projectionAmount} minutes into the{" "} - {projectionAmount >= 0 ? "future" : "past"} + Projected positions {projectionAmount / 60} hours into + the {projectionAmount >= 0 ? "future" : "past"}

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index c52e5cd..74ddf09 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -122,7 +122,7 @@ export function CodiconGithubProject(props: SVGProps) { export default function Navbar() { const pathname = usePathname(); const getButtonVariant = (path: string) => { - if (path === pathname) { + if (pathname.includes(path)) { return; } return "ghost"; diff --git a/frontend/src/components/ui/launchDateCountDown.tsx b/frontend/src/components/ui/launchDateCountDown.tsx index 84bf812..26a1a7f 100644 --- a/frontend/src/components/ui/launchDateCountDown.tsx +++ b/frontend/src/components/ui/launchDateCountDown.tsx @@ -1,5 +1,4 @@ -"use client"; // This directive marks the component for client-side execution - +"use client"; import React, { useState, useEffect } from "react"; type LaunchDateCountDownProps = { @@ -62,11 +61,11 @@ const LaunchDateCountDown: React.FC = ({ )}

-
-
+
+
-
+
{displayTime.length > 0 && (
From 831f6efe85d42a15ee59352515c9400dfea2ac8e Mon Sep 17 00:00:00 2001 From: Lukas Thrane <76877975+Windove@users.noreply.github.com> Date: Mon, 22 Apr 2024 14:41:24 +0200 Subject: [PATCH 2/3] fix bug (#356) --- .../src/components/homeComponents/homeGlobe.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/homeComponents/homeGlobe.tsx b/frontend/src/components/homeComponents/homeGlobe.tsx index 71c9c4f..a75fc99 100644 --- a/frontend/src/components/homeComponents/homeGlobe.tsx +++ b/frontend/src/components/homeComponents/homeGlobe.tsx @@ -58,7 +58,8 @@ export default function SatelliteGlobe() { globeRef.current.controls().enablePan = false; globeRef.current.controls().enableRotate = true; - const setGlobeSize = () => { + // lock the initial height of the globe + const setInitialGlobeSize = () => { if (globeRef.current && chart.current) { const { width, height } = chart.current.getBoundingClientRect(); @@ -68,7 +69,15 @@ export default function SatelliteGlobe() { }; // Initially set the globe size to match the container - setGlobeSize(); + setInitialGlobeSize(); + + // set globesize on screen resize + const setGlobeSize = () => { + if (globeRef.current && chart.current) { + const { width } = chart.current.getBoundingClientRect(); + globeRef.current.width(width); + } + }; // Resize listener to update the globe size if (typeof window !== "undefined") { From 6b7a2aa70652dce6658b48ccfed79a660f640cb7 Mon Sep 17 00:00:00 2001 From: Mats <64415243+mnyflot@users.noreply.github.com> Date: Mon, 22 Apr 2024 14:43:25 +0200 Subject: [PATCH 3/3] =?UTF-8?q?fix(frontend):=20:white=5Fcheck=5Fmark:=20f?= =?UTF-8?q?ix=20blog=20end2end=20test=20to=20only=20acces=E2=80=A6=20(#355?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(frontend): :white_check_mark: fix blog end2end test to only access first element * refactor(ide): :recycle: move project en2end test into end2end folder * test(frontend): :white_check_mark: add satellite end2end test * style(frontend): :rotating_light: run prettier --- .../componentTests/SatelliteSelector.spec.tsx | 2 + frontend/tests/e2e/blog.desktop.spec.ts | 6 ++- .../tests/{ => e2e}/project.desktop.spec.ts | 0 .../tests/{ => e2e}/project.mobile.spec.ts | 0 frontend/tests/e2e/satellite.desktop.spec.ts | 34 ++++++++++++++ frontend/tests/e2e/satellite.mobile.spec.ts | 45 +++++++++++++++++++ 6 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 frontend/tests/componentTests/SatelliteSelector.spec.tsx rename frontend/tests/{ => e2e}/project.desktop.spec.ts (100%) rename frontend/tests/{ => e2e}/project.mobile.spec.ts (100%) create mode 100644 frontend/tests/e2e/satellite.desktop.spec.ts create mode 100644 frontend/tests/e2e/satellite.mobile.spec.ts diff --git a/frontend/tests/componentTests/SatelliteSelector.spec.tsx b/frontend/tests/componentTests/SatelliteSelector.spec.tsx new file mode 100644 index 0000000..336646a --- /dev/null +++ b/frontend/tests/componentTests/SatelliteSelector.spec.tsx @@ -0,0 +1,2 @@ +import SatelliteSelector from "@/components/homeComponents/SatelliteSelector"; +import { test, expect } from "@playwright/experimental-ct-react"; diff --git a/frontend/tests/e2e/blog.desktop.spec.ts b/frontend/tests/e2e/blog.desktop.spec.ts index d8649d4..9d86179 100644 --- a/frontend/tests/e2e/blog.desktop.spec.ts +++ b/frontend/tests/e2e/blog.desktop.spec.ts @@ -9,8 +9,10 @@ test.describe("Blogs pages test", () => { await expect(page.getByTestId("pageSubtitle")).toBeVisible(); await page.getByTestId("blogsSatellitesButton").click(); await expect(page).toHaveURL("/blog?page=1&tag=Satellites"); - await expect(page.getByTestId("articleTag")).toHaveText("Satellites"); - await page.getByTestId("blogCardLink").click(); + await expect(page.getByTestId("articleTag").first()).toHaveText( + "Satellites", + ); + await page.getByTestId("blogCardLink").first().click(); await expect(page).toHaveURL(/\/blog\/.+$/); }); test("individualBlogPagetest", async ({ page }) => { diff --git a/frontend/tests/project.desktop.spec.ts b/frontend/tests/e2e/project.desktop.spec.ts similarity index 100% rename from frontend/tests/project.desktop.spec.ts rename to frontend/tests/e2e/project.desktop.spec.ts diff --git a/frontend/tests/project.mobile.spec.ts b/frontend/tests/e2e/project.mobile.spec.ts similarity index 100% rename from frontend/tests/project.mobile.spec.ts rename to frontend/tests/e2e/project.mobile.spec.ts diff --git a/frontend/tests/e2e/satellite.desktop.spec.ts b/frontend/tests/e2e/satellite.desktop.spec.ts new file mode 100644 index 0000000..c236843 --- /dev/null +++ b/frontend/tests/e2e/satellite.desktop.spec.ts @@ -0,0 +1,34 @@ +import { test, expect } from "@playwright/test"; + +test.describe("All Satellites Page Test", () => { + test("CheckHeadingAndSubtitleIsVisible", async ({ page }) => { + await page.goto("/"); + await page.getByRole("button", { name: "Satellites" }).click(); + await expect(page).toHaveURL("/satellites"); + await expect(page.getByTestId("pageHeader")).toBeVisible(); + await expect(page.getByTestId("pageSubtitle")).toBeVisible(); + }); + test("CheckIfCardIsClickable", async ({ page }) => { + await page.goto("/"); + await page.getByRole("button", { name: "Satellites" }).click(); + await expect(page).toHaveURL("/satellites"); + await expect( + page.getByTestId("satellitesTableRow").first(), + ).toBeVisible(); + await page.getByTestId("satellitesTableRow").first().click(); + //Checks if the URL matches /satellites/anySlug + await expect(page).toHaveURL(/\/satellites\/.+$/); + }); +}); + +test.describe("Individual Satellite Page Test", () => { + test("TestHeadingAndParagraphIsVisible", async ({ page }) => { + await page.goto("/"); + await page.getByRole("button", { name: "Satellites" }).click(); + await page.getByTestId("satellitesTableRow").first().click(); + await expect(page).toHaveURL(/\/satellites\/.+$/); + await expect(page.getByRole("heading").first()).toBeVisible(); + await expect(page.getByRole("heading").nth(2)).toBeVisible(); + await expect(page.getByTestId("blockParagraph").first()).toBeVisible(); + }); +}); diff --git a/frontend/tests/e2e/satellite.mobile.spec.ts b/frontend/tests/e2e/satellite.mobile.spec.ts new file mode 100644 index 0000000..df4561e --- /dev/null +++ b/frontend/tests/e2e/satellite.mobile.spec.ts @@ -0,0 +1,45 @@ +import { test, expect } from "@playwright/test"; + +test.describe("All Satellites Page Test", () => { + test.use({ + viewport: { width: 390, height: 844 }, + }); + + test("CheckHeadingAndSubtitleIsVisible", async ({ page }) => { + await page.goto("/"); + await page.getByRole("navigation").getByRole("button").click(); + await page.getByRole("button", { name: "Satellites" }).click(); + await expect(page).toHaveURL("/satellites"); + await expect(page.getByTestId("pageHeader")).toBeVisible(); + await expect(page.getByTestId("pageSubtitle")).toBeVisible(); + }); + test("CheckIfCardIsClickable", async ({ page }) => { + await page.goto("/"); + await page.getByRole("navigation").getByRole("button").click(); + await page.getByRole("button", { name: "Satellites" }).click(); + await expect(page).toHaveURL("/satellites"); + await expect( + page.getByTestId("satellitesTableRow").first(), + ).toBeVisible(); + await page.getByTestId("satellitesTableRow").first().click(); + //Checks if the URL matches /satellites/anySlug + await expect(page).toHaveURL(/\/satellites\/.+$/); + }); +}); + +test.describe("Individual Satellite Page Test", () => { + test.use({ + viewport: { width: 390, height: 844 }, + }); + + test("TestHeadingAndParagraphIsVisible", async ({ page }) => { + await page.goto("/"); + await page.getByRole("navigation").getByRole("button").click(); + await page.getByRole("button", { name: "Satellites" }).click(); + await page.getByTestId("satellitesTableRow").first().click(); + await expect(page).toHaveURL(/\/satellites\/.+$/); + await expect(page.getByRole("heading").first()).toBeVisible(); + await expect(page.getByRole("heading").nth(2)).toBeVisible(); + await expect(page.getByTestId("blockParagraph").first()).toBeVisible(); + }); +});