Merge branch 'main' of https://github.com/NTNU-SmallSat-Lab/outreach-…

…website

backend/src/api/satellite/content-types/satellite/schema.json

@@ -24,7 +24,7 @@
     "content": {
       "type": "blocks"
     },
-    "previewImage": {
+    "satelliteImage": {
       "type": "media",
       "multiple": false,
       "required": false,

backend/types/generated/contentTypes.d.ts

@@ -980,7 +980,7 @@ export interface ApiSatelliteSatellite extends Schema.CollectionType {
     name: Attribute.String & Attribute.Required & Attribute.Unique;
     catalogNumberNORAD: Attribute.String & Attribute.Unique;
     content: Attribute.Blocks;
-    previewImage: Attribute.Media;
+    satelliteImage: Attribute.Media;
     projects: Attribute.Relation<
       'api::satellite.satellite',
       'manyToMany',

frontend/playwright-ct.config.ts

@@ -18,7 +18,7 @@ export default defineConfig({
     /* Fail the build on CI if you accidentally left test.only in the source code. */
     forbidOnly: !!process.env.CI,
     /* Retry on CI only */
-    retries: process.env.CI ? 2 : 0,
+    retries: 2,
     /* Opt out of parallel tests on CI. */
     workers: process.env.CI ? 1 : undefined,
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */

frontend/playwright.config.ts

@@ -9,6 +9,7 @@ import { defineConfig, devices } from "@playwright/test";
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
+//const baseURL = `http://localhost:3000/`;
 const baseURL = `http://web.hypso.ies.ntnu.no:3000/`;
 
 export default defineConfig({

frontend/src/app/projects/[projectSlug]/page.tsx

@@ -18,7 +18,8 @@ query Projects($projectFilters: ProjectFiltersInput) {
             id
             attributes {
               name
-              previewImage {
+              slug
+              satelliteImage {
                 data {
                   attributes {
                     url
@@ -84,14 +85,14 @@ export default async function Page({
                     <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4">
                         {graphqlData.data.projects?.data[0].attributes?.satellites?.data.map(
                             (satellite: any) => {
-                                const previewImage =
-                                    satellite?.attributes?.previewImage?.data
+                                const satelliteImage =
+                                    satellite?.attributes?.satelliteImage?.data
                                         ?.attributes?.url ?? undefined;
                                 const satelliteObject: ProjectOrSatellite = {
                                     id: satellite.id,
                                     title: satellite.attributes.name,
-                                    previewImage: previewImage,
-                                    slug: satellite.attributes.name,
+                                    previewImage: satelliteImage,
+                                    slug: satellite.attributes.slug,
                                     isProject: false,
                                 };
                                 return (

frontend/src/app/satellites/[satelliteSlug]/page.tsx

@@ -11,6 +11,7 @@ import {
     PageSubtitle,
     PageHeaderAndSubtitle,
 } from "@/components/PageHeader";
+import Image from "next/image";
 
 export interface SatelliteInfo {
     launchDate: string | undefined;
@@ -20,6 +21,7 @@ export interface SatelliteInfo {
     noradId: string | undefined;
     missionStatus: string | undefined;
     massKg: number | undefined;
+    satelliteImage: string | undefined;
 }
 
 export interface ProjectOrSatellite {
@@ -30,6 +32,8 @@ export interface ProjectOrSatellite {
     isProject: boolean;
 }
 
+const STRAPI_URL = process.env.STRAPI_URL;
+
 export default async function SatelliteInfoPage({
     params,
 }: {
@@ -41,6 +45,11 @@ export default async function SatelliteInfoPage({
 
     if (!satelliteInfo) return <div>Loading...</div>;
 
+    let imageURL = undefined;
+    if (STRAPI_URL && satelliteInfo.satelliteImage) {
+        imageURL = STRAPI_URL + satelliteInfo.satelliteImage;
+    }
+
     return (
         <>
             <div className="flex flex-col items-center ">
@@ -65,7 +74,7 @@ export default async function SatelliteInfoPage({
                     <div className="flex w-full flex-col border-2 border-gray-600 xl:flex-row">
                         {/* Stats Container */}
                         <div className="z-10 flex w-full flex-col border-gray-600 xl:border-r-2">
-                            <div className="grow basis-0 border-b border-gray-600 bg-black p-5">
+                            <div className="border-b border-gray-600 bg-black p-5">
                                 {satelliteInfo.noradId
                                     ? "NORAD ID: " + satelliteInfo.noradId
                                     : null}
@@ -84,7 +93,16 @@ export default async function SatelliteInfoPage({
                         {/* Image container */}
                         <div className="w-full border-t-2 border-gray-600 xl:border-t-0">
                             <div className="flex h-full w-full items-center justify-center bg-black">
-                                <h1>Satellite image</h1>
+                                {imageURL ? (
+                                    <Image
+                                        src={imageURL}
+                                        alt={satelliteInfo.name}
+                                        width={1600} // Set according to the aspect ratio of the image
+                                        height={0}
+                                        layout="responsive"
+                                        className="p-2"
+                                    />
+                                ) : null}
                             </div>
                         </div>
                     </div>

frontend/src/app/satellites/page.tsx

@@ -10,7 +10,7 @@ query GET_SATELLITES {
         attributes {
           catalogNumberNORAD
           name
-          previewImage {
+          satelliteImage {
             data {
               attributes {
                 url
@@ -32,21 +32,32 @@ export default async function Satellites() {
             query: GET_SATELLITES,
         });
 
+        const noNoradIdArray = graphqlData.data.satellites?.data.filter(
+            (data) => data.attributes?.catalogNumberNORAD == null,
+        );
+
         return (
             <>
+                {/* Table for satellites in orbit */}
                 <SatelliteResponsiveTable
                     satellites={graphqlData.data.satellites?.data.filter(
                         (data) => data.attributes?.catalogNumberNORAD !== null,
                     )}
                     inOrbit={true}
                 ></SatelliteResponsiveTable>
-                <div className="mt-12"></div>
-                <SatelliteResponsiveTable
-                    satellites={graphqlData.data.satellites?.data.filter(
-                        (data) => data.attributes?.catalogNumberNORAD == null,
-                    )}
-                    inOrbit={false}
-                ></SatelliteResponsiveTable>
+
+                <div className="mt-12" />
+
+                {/* Table for satellites not in orbit */}
+                {noNoradIdArray != undefined && noNoradIdArray.length > 0 ? (
+                    <SatelliteResponsiveTable
+                        satellites={graphqlData.data.satellites?.data.filter(
+                            (data) =>
+                                data.attributes?.catalogNumberNORAD == null,
+                        )}
+                        inOrbit={false}
+                    ></SatelliteResponsiveTable>
+                ) : null}
             </>
         );
     } catch (error) {

frontend/src/components/SatelliteResponsiveTable.tsx

@@ -54,10 +54,10 @@ export default function SatelliteResponsiveTable({
                                 <TableHead className="min-w-[135px]">
                                     Altitude
                                 </TableHead>
-                                <TableHead className="min-w-[100px]">
+                                <TableHead className="hidden min-w-[100px] sm:table-cell">
                                     Latitude
                                 </TableHead>
-                                <TableHead className="min-w-[100px]">
+                                <TableHead className="hidden min-w-[100px] sm:table-cell">
                                     Longitude
                                 </TableHead>
                             </>

frontend/src/components/satelliteData/SatelliteStatsTableRow.tsx

@@ -42,8 +42,12 @@ export default function SatelliteStatsTableRow({
                     Loading...
                 </TableCell>
                 <TableCell className="w-1/5">Loading...</TableCell>
-                <TableCell className="w-1/5">Loading...</TableCell>
-                <TableCell className="w-1/5">Loading...</TableCell>
+                <TableCell className="hidden w-1/5 sm:table-cell">
+                    Loading...
+                </TableCell>
+                <TableCell className="hidden w-1/5 sm:table-cell">
+                    Loading...
+                </TableCell>
             </TableRow>
         );
     }
@@ -60,13 +64,11 @@ export default function SatelliteStatsTableRow({
             <TableCell className="hidden w-1/5 sm:table-cell">
                 {satelliteInfo.velocity} km/s
             </TableCell>
-            <TableCell className=" w-1/5">
-                {satelliteInfo.altitude} km
-            </TableCell>
-            <TableCell className=" w-1/5">
+            <TableCell className="w-1/5">{satelliteInfo.altitude} km</TableCell>
+            <TableCell className="hidden w-1/5 sm:table-cell">
                 {satelliteInfo.latitudeDeg}° N
             </TableCell>
-            <TableCell className="w-1/5">
+            <TableCell className="hidden w-1/5 sm:table-cell">
                 {satelliteInfo.longitudeDeg}° E
             </TableCell>
         </TableRow>

frontend/src/components/ui/satelliteCard.tsx

@@ -16,14 +16,14 @@ import { OuiImage } from "@/components/fullBlogCard";
 interface SatelliteCardProps {
     satelliteName: string;
     missionStatus: string;
-    previewImage?: string; // Optional
+    satelliteImage?: string; // Optional
     satelliteId: Number;
 }
 
 const SatelliteCard: React.FC<SatelliteCardProps> = ({
     satelliteName,
     missionStatus,
-    previewImage,
+    satelliteImage,
     satelliteId,
 }) => {
     /*const setSelectedSatellite = useSatelliteStore(
@@ -45,10 +45,10 @@ const SatelliteCard: React.FC<SatelliteCardProps> = ({
                         satName={satelliteName}
                         missionStatus={missionStatus}
                     />
-                    {previewImage ? (
+                    {satelliteImage ? (
                         <Image
-                            src={previewImage}
-                            alt={previewImage}
+                            src={satelliteImage}
+                            alt={satelliteImage}
                             width={200}
                             height={0}
                             className="margin p-2"

frontend/src/lib/convertSatrec.ts

@@ -1,6 +1,6 @@
 import * as satellite from "satellite.js";
 import { SatRec } from "satellite.js";
-import globeData from "@components/homeComponents/files/globe-data.json";
+import globeData from "@/components/homeComponents/files/globe-data.json";
 
 // turf needs ts ignore to work with typescript
 // @ts-ignore

frontend/src/lib/data/fetchSatelliteInfo.ts

@@ -16,6 +16,13 @@ const GET_SATELLITE_INFO =
                 name
                 massKg
                 missionStatus
+                satelliteImage {
+                  data {
+                    attributes {
+                      url
+                    }
+                  }
+                }
               projects {
                 data {
                   attributes {
@@ -90,6 +97,9 @@ export default async function fetchSatelliteInfo({
         massKg:
             graphqlData?.data?.satellites?.data[0]?.attributes?.massKg ??
             undefined,
+        satelliteImage:
+            graphqlData?.data?.satellites?.data[0]?.attributes?.satelliteImage
+                ?.data?.attributes?.url ?? undefined,
     };
 
     return satelliteInfo;

frontend/tests/componentTests/blocksrendererclient.desktop.spec.tsx → frontend/tests/componentTests/blocksrendererclient.spec.tsx

@@ -24,19 +24,15 @@ test("Check content rendering in BlockRendererClient", async ({ mount }) => {
                 },
             ],
         },
-        // Add other content blocks as needed
     ];
 
     // Mount the BlockRendererClient with mock content
     const component = await mount(
         <BlockRendererClient content={mockContent} />,
     );
 
-    // Assertions
     await expect(component.getByRole("heading")).toContainText("Lorem ipsum");
     await expect(component.getByRole("paragraph")).toContainText(
         "Dolor sit amet",
     );
-
-    // Add more assertions based on your content blocks
 });

frontend/tests/componentTests/fullblogcard.spec.tsx

@@ -0,0 +1,64 @@
+import { test, expect } from "@playwright/experimental-ct-react";
+import FullBlogCard from "@/components/fullBlogCard";
+import { BlogPost } from "@/app/blog/page";
+import { Enum_Article_Tag } from "@/__generated__/graphql";
+
+test("FullBlogCard renders correctly", async ({ mount }) => {
+    const mockArticle: BlogPost = {
+        key: "mock-key",
+        title: "Mock Article Title",
+        content: [
+            {
+                type: "paragraph",
+                children: [
+                    {
+                        type: "text",
+                        text: "Mock article content preview text...",
+                    },
+                ],
+            },
+        ],
+        coverImage: "mock-cover-image.jpg",
+        datePublished: "2024-04-13",
+        tag: Enum_Article_Tag.Projects,
+        slug: "mock-article-slug",
+    };
+    // Mount the FullBlogCard component with mock data
+    const component = await mount(<FullBlogCard article={mockArticle} />);
+
+    //Check if the component is visible
+    await expect(component).toBeVisible();
+
+    //Check if title is correct
+    await expect(component.getByTestId("blogCardLink")).toContainText(
+        "Mock Article Title",
+    );
+
+    //Check if preview text for blog is visible
+    await expect(
+        component.getByText("Mock article content preview text..."),
+    ).toBeVisible();
+
+    //Wait for the image to actually have its src attribute set with the real image URL
+    await expect(component.getByRole("img")).toHaveAttribute(
+        "src",
+        /mock-cover-image\.jpg/,
+    );
+
+    //Check if datePublished is visible
+    await expect(component.getByText("April 13, 2024")).toBeVisible();
+
+    //Check if the tag is correct
+    await expect(component.getByTestId("articleTag")).toHaveText("Projects");
+
+    //Check if the urls on the links are correct
+    await expect(component.getByTestId("blogCardLink")).toHaveAttribute(
+        "href",
+        "/blog/mock-article-slug",
+    );
+
+    await expect(component.getByText("Read more")).toHaveAttribute(
+        "href",
+        "/blog/mock-article-slug",
+    );
+});