277 test for featured image (#293)

* create desktop test for featured image

* test(frontend): ✅ add tests for featured image

* refactor: prettier write

* test(frontend): ✅ update featured image tests

---------

Co-authored-by: Mats <mnyflot@gmail.com>

frontend/package.json

@@ -77,7 +77,7 @@
         "@graphql-typed-document-node/core": "^3.2.0",
         "@iconify-icon/react": "^2.0.1",
         "@iconify/react": "^4.1.1",
-        "@playwright/test": "^1.41.2",
+        "@playwright/test": "^1.43.1",
         "@tailwindcss/typography": "^0.5.10",
         "@types/chart.js": "^2.9.41",
         "@types/luxon": "^3.4.2",

frontend/src/lib/data/fetchFeaturedImage.tsx

@@ -60,7 +60,7 @@ export default async function fetchFeaturedImage() {
                 <div>
                     <div className="relative h-[300px] w-[300px]">
                         <Image
-                            alt="Most recent satellite image"
+                            alt="Featured satellite image"
                             src={featuredImageURL}
                             className="m-0"
                             layout="fill"

frontend/tests/featured-image.desktop.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from "@playwright/test";
+
+test("test", async ({ page }) => {
+    await page.goto("/");
+    await expect(
+        page.getByRole("img", { name: "Featured satellite image" }),
+    ).toBeVisible();
+    await expect(
+        page.getByRole("heading", { name: "Featured Satellite Image" }),
+    ).toBeVisible();
+});

frontend/tests/featured-image.mobile.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from "@playwright/test";
+
+test("test", async ({ page }) => {
+    await page.goto("/");
+    await expect(
+        page.getByRole("img", { name: "Featured satellite image" }),
+    ).toBeVisible();
+    await expect(
+        page.getByRole("heading", { name: "Featured Satellite Image" }),
+    ).toBeVisible();
+});