Merge pull request #290 from Nosto/copilot/fix-289

feat: introduce simple fetch facade module

Author: timowestnosto

src/components/NostoDynamicCard/NostoDynamicCard.ts

@@ -1,4 +1,5 @@
 import { assertRequired } from "@/utils"
+import { getText } from "@/utils/fetch"
 import { customElement } from "../decorators"
 import { NostoElement } from "../NostoElement"
 
@@ -84,11 +85,7 @@ async function getMarkup(element: NostoDynamicCard) {
   if (element.variantId) {
     params.set("variant", element.variantId)
   }
-  const result = await fetch(`/products/${element.handle}?${params}`)
-  if (!result.ok) {
-    throw new Error("Failed to fetch product data")
-  }
-  let markup = await result.text()
+  let markup = await getText(`/products/${element.handle}?${params}`)
   if (element.section) {
     const parser = new DOMParser()
     const doc = parser.parseFromString(markup, "text/html")

src/components/NostoSectionCampaign/NostoSectionCampaign.ts

@@ -1,4 +1,5 @@
 import { nostojs } from "@nosto/nosto-js"
+import { getText } from "@/utils/fetch"
 import { customElement } from "../decorators"
 import { NostoElement } from "../NostoElement"
 import { addRequest } from "../NostoCampaign/orchestrator"
@@ -51,11 +52,7 @@ async function getSectionMarkup(element: NostoSectionCampaign, rec: JSONResult)
   const target = new URL("/search", window.location.href)
   target.searchParams.set("section_id", element.section)
   target.searchParams.set("q", handles)
-  const result = await fetch(target)
-  if (!result.ok) {
-    throw new Error(`Failed to fetch section ${element.section}`)
-  }
-  const sectionHtml = await result.text()
+  const sectionHtml = await getText(target.href)
   const parser = new DOMParser()
   const doc = parser.parseFromString(sectionHtml, "text/html")
   if (rec.title) {

src/utils/fetch.ts

@@ -0,0 +1,35 @@
+/**
+ * Internal function to handle common fetch logic with error checking.
+ * @param url - The URL to fetch
+ * @returns Promise that resolves to the Response object
+ * @throws Error if the fetch request fails
+ */
+async function fetchWithErrorHandling(url: string) {
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${url}: ${response.status} ${response.statusText}`)
+  }
+  return response
+}
+
+/**
+ * Fetches a URL and returns the response as text.
+ * @param url - The URL to fetch
+ * @returns Promise that resolves to the response text
+ * @throws Error if the fetch request fails
+ */
+export async function getText(url: string) {
+  const response = await fetchWithErrorHandling(url)
+  return response.text()
+}
+
+/**
+ * Fetches a URL and returns the response as a JSON object.
+ * @param url - The URL to fetch
+ * @returns Promise that resolves to the parsed JSON response
+ * @throws Error if the fetch request fails or JSON parsing fails
+ */
+export async function getJSON(url: string) {
+  const response = await fetchWithErrorHandling(url)
+  return response.json()
+}

test/components/NostoDynamicCard.spec.tsx

@@ -152,7 +152,7 @@ describe("NostoDynamicCard", () => {
 
     const card = (<nosto-dynamic-card handle="handle-error" template="default" />) as NostoDynamicCard
 
-    await expect(card.connectedCallback()).rejects.toThrow("Failed to fetch product data")
+    await expect(card.connectedCallback()).rejects.toThrow("Failed to fetch /products/handle-error")
   })
 
   it("throws error when markup is invalid", async () => {

test/components/NostoSectionCampaign.spec.tsx

@@ -45,7 +45,7 @@ describe("NostoSectionCampaign", () => {
 
     const el = (<nosto-section-campaign placement="placement1" section="missing-section" />) as NostoSectionCampaign
 
-    await expect(el.connectedCallback()).rejects.toThrow("Failed to fetch section missing-section")
+    await expect(el.connectedCallback()).rejects.toThrow("Failed to fetch http://localhost:3000/search")
     expect(el.hasAttribute("loading")).toBe(false)
   })
 

test/utils/fetch.spec.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect, vi, afterEach } from "vitest"
+import { getText, getJSON } from "@/utils/fetch"
+import { addHandlers } from "../msw.setup"
+import { http, HttpResponse } from "msw"
+
+describe("fetch facade", () => {
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe("getText", () => {
+    it("should fetch URL and return text content", async () => {
+      addHandlers(
+        http.get("https://example.com/test", () => {
+          return HttpResponse.text("Hello, World!")
+        })
+      )
+
+      const result = await getText("https://example.com/test")
+      expect(result).toBe("Hello, World!")
+    })
+
+    it("should throw error when fetch response is not ok", async () => {
+      addHandlers(
+        http.get("https://example.com/missing", () => {
+          return HttpResponse.text("Not Found", { status: 404 })
+        })
+      )
+
+      await expect(getText("https://example.com/missing")).rejects.toThrow(
+        "Failed to fetch https://example.com/missing: 404 Not Found"
+      )
+    })
+  })
+
+  describe("getJSON", () => {
+    it("should fetch URL and return JSON object", async () => {
+      const mockData = { message: "Hello", count: 42 }
+      addHandlers(
+        http.get("https://api.example.com/data", () => {
+          return HttpResponse.json(mockData)
+        })
+      )
+
+      const result = await getJSON("https://api.example.com/data")
+      expect(result).toEqual(mockData)
+    })
+
+    it("should throw error when fetch response is not ok", async () => {
+      addHandlers(
+        http.get("https://api.example.com/error", () => {
+          return HttpResponse.json({ error: "Server Error" }, { status: 500 })
+        })
+      )
+
+      await expect(getJSON("https://api.example.com/error")).rejects.toThrow(
+        "Failed to fetch https://api.example.com/error: 500 Internal Server Error"
+      )
+    })
+  })
+})