Continue hook extraction

.prettierrc

@@ -1,8 +1,8 @@
 {
-  "trailingComma": "es5",
+  "trailingComma": "none",
   "semi": false,
   "arrowParens": "avoid",
-  "printWidth": 100,
+  "printWidth": 120,
   "useTabs": false,
   "tabWidth": 2
 }

spec/category.spec.tsx

@@ -6,19 +6,19 @@ import { WAIT_FOR_TIMEOUT } from "./utils"
 
 test("Category page render", async () => {
   render(
-    <NostoProvider
-      account="shopify-11368366139"
-      recommendationComponent={<RecommendationComponent />}
-    >
+    <NostoProvider account="shopify-11368366139" recommendationComponent={<RecommendationComponent />}>
       <NostoPlacement id="categorypage-nosto-1" />
       <NostoPlacement id="categorypage-nosto-2" />
       <NostoCategory category="Rings" />
     </NostoProvider>
   )
 
-  await waitFor(() => {
-    expect(screen.getAllByTestId("recommendation")).toHaveLength(2)
-  }, { timeout: WAIT_FOR_TIMEOUT })
+  await waitFor(
+    () => {
+      expect(screen.getAllByTestId("recommendation")).toHaveLength(2)
+    },
+    { timeout: WAIT_FOR_TIMEOUT }
+  )
 
   expect(screen.getAllByTestId("recommendation-product").length).toBeGreaterThanOrEqual(3)
 

spec/checkout.spec.tsx

@@ -6,20 +6,20 @@ import { WAIT_FOR_TIMEOUT } from "./utils"
 
 test("Checkout page render", async () => {
   render(
-    <NostoProvider
-      account="shopify-11368366139"
-      recommendationComponent={<RecommendationComponent />}
-    >
+    <NostoProvider account="shopify-11368366139" recommendationComponent={<RecommendationComponent />}>
       <NostoPlacement id="cartpage-nosto-1" />
       <NostoPlacement id="cartpage-nosto-2" />
       <NostoPlacement id="cartpage-nosto-3" />
       <NostoCheckout />
     </NostoProvider>
   )
 
-  await waitFor(() => {
-    expect(screen.getAllByTestId("recommendation")).toHaveLength(3)
-  }, { timeout: WAIT_FOR_TIMEOUT })
+  await waitFor(
+    () => {
+      expect(screen.getAllByTestId("recommendation")).toHaveLength(3)
+    },
+    { timeout: WAIT_FOR_TIMEOUT }
+  )
 
   expect(screen.getAllByTestId("recommendation-product").length).toBeGreaterThanOrEqual(3)
 

spec/events.ts

@@ -21,21 +21,14 @@ function createEvent(event: Event): Event {
 
 export function frontEvent() {
   return createEvent({
-    elements: [
-      "frontpage-nosto-1",
-      "frontpage-nosto-3",
-      "frontpage-nosto-4",
-    ],
+    elements: ["frontpage-nosto-1", "frontpage-nosto-3", "frontpage-nosto-4"],
     page_type: "front"
   })
 }
 
 export function categoryEvent(category: string) {
   return createEvent({
-    elements: [
-      "categorypage-nosto-1",
-      "categorypage-nosto-2",
-    ],
+    elements: ["categorypage-nosto-1", "categorypage-nosto-2"],
     page_type: "category",
     categories: [category],
     url: `http://localhost/collections/${category}`
@@ -44,14 +37,8 @@ export function categoryEvent(category: string) {
 
 export function productEvent(product: string) {
   return createEvent({
-    elements: [
-      "productpage-nosto-1",
-      "productpage-nosto-2",
-      "productpage-nosto-3",
-    ],
-    events: [
-      ["vp", product],
-    ],
+    elements: ["productpage-nosto-1", "productpage-nosto-2", "productpage-nosto-3"],
+    events: [["vp", product]],
     page_type: "product",
     url: `http://localhost/products/${product}`
   })

spec/fohofo.spec.tsx

@@ -6,19 +6,19 @@ import { WAIT_FOR_TIMEOUT } from "./utils"
 
 test("404 page render", async () => {
   render(
-    <NostoProvider
-      account="shopify-11368366139"
-      recommendationComponent={<RecommendationComponent />}
-    >
+    <NostoProvider account="shopify-11368366139" recommendationComponent={<RecommendationComponent />}>
       <NostoPlacement id="notfound-nosto-1" />
       <NostoPlacement id="notfound-nosto-2" />
       <Nosto404 />
     </NostoProvider>
   )
 
-  await waitFor(() => {
-    expect(screen.getAllByTestId("recommendation")).toHaveLength(2)
-  }, { timeout: WAIT_FOR_TIMEOUT })
+  await waitFor(
+    () => {
+      expect(screen.getAllByTestId("recommendation")).toHaveLength(2)
+    },
+    { timeout: WAIT_FOR_TIMEOUT }
+  )
 
   expect(screen.getAllByTestId("recommendation-product").length).toBeGreaterThanOrEqual(3)
 

spec/home.spec.tsx

@@ -6,20 +6,20 @@ import { WAIT_FOR_TIMEOUT } from "./utils"
 
 test("Home page render", async () => {
   render(
-    <NostoProvider
-      account="shopify-11368366139"
-      recommendationComponent={<RecommendationComponent />}
-    >
+    <NostoProvider account="shopify-11368366139" recommendationComponent={<RecommendationComponent />}>
       <NostoPlacement id="frontpage-nosto-1" />
       <NostoPlacement id="frontpage-nosto-3" />
       <NostoPlacement id="frontpage-nosto-4" />
       <NostoHome />
     </NostoProvider>
   )
 
-  await waitFor(() => {
-    expect(screen.getAllByTestId("recommendation")).toHaveLength(3)
-  }, { timeout: WAIT_FOR_TIMEOUT })
+  await waitFor(
+    () => {
+      expect(screen.getAllByTestId("recommendation")).toHaveLength(3)
+    },
+    { timeout: WAIT_FOR_TIMEOUT }
+  )
 
   expect(screen.getAllByTestId("recommendation-product").length).toBeGreaterThanOrEqual(3)
 

spec/module.spec.ts

@@ -2,28 +2,28 @@ import { test, expect } from "vitest"
 import * as imports from "../src/index"
 
 test("module structure is stable", () => {
-  expect(Object.keys(imports)).toEqual([    
+  expect(Object.keys(imports).sort()).toEqual([
     "Nosto404",
-    "useNosto404",
-    "NostoOther",
-    "useNostoOther",
-    "NostoCheckout",
-    "useNostoCheckout",
-    "NostoProduct",
-    "useNostoProduct",
     "NostoCategory",
-    "useNostoCategory",
-    "NostoSearch",
-    "useNostoSearch",
-    "NostoOrder",
-    "useNostoOrder",
+    "NostoCheckout",
+    "NostoContext",
     "NostoHome",
-    "useNostoHome",
+    "NostoOrder",
+    "NostoOther",
     "NostoPlacement",
+    "NostoProduct",
     "NostoProvider",
+    "NostoSearch",
     "NostoSession",
-    "useNostoSession",
-    "NostoContext",
-    "useNostoContext"
-  ])    
-})
+    "useNosto404",
+    "useNostoCategory",
+    "useNostoCheckout",
+    "useNostoContext",
+    "useNostoHome",
+    "useNostoOrder",
+    "useNostoOther",
+    "useNostoProduct",
+    "useNostoSearch",
+    "useNostoSession"
+  ])
+})

spec/navigation.spec.tsx

@@ -7,85 +7,94 @@ import { listenTo, WAIT_FOR_TIMEOUT } from "./utils"
 import { categoryEvent, frontEvent, productEvent } from "./events"
 
 function HomePage() {
-  useNostoHome()  
-  return <>
-    <NostoPlacement id="frontpage-nosto-1" />
-    <NostoPlacement id="frontpage-nosto-3" />
-    <NostoPlacement id="frontpage-nosto-4" />
-    <Link to="/collections/hoodies">Hoodies</Link>
-  </>    
+  useNostoHome()
+  return (
+    <>
+      <NostoPlacement id="frontpage-nosto-1" />
+      <NostoPlacement id="frontpage-nosto-3" />
+      <NostoPlacement id="frontpage-nosto-4" />
+      <Link to="/collections/hoodies">Hoodies</Link>
+    </>
+  )
 }
 
 function CategoryPage() {
   const { category } = useParams()
   useNostoCategory({ category: category! })
-  return <>
-    <NostoPlacement id="categorypage-nosto-1" />
-    <NostoPlacement id="categorypage-nosto-2" />
-    <Link to="/products/123">Product 123</Link>
-    <Link to="/products/234">Product 234</Link>
-    <Link to="/">Home</Link>
-  </>
+  return (
+    <>
+      <NostoPlacement id="categorypage-nosto-1" />
+      <NostoPlacement id="categorypage-nosto-2" />
+      <Link to="/products/123">Product 123</Link>
+      <Link to="/products/234">Product 234</Link>
+      <Link to="/">Home</Link>
+    </>
+  )
 }
 
 function ProductPage() {
   const { product } = useParams()
   useNostoProduct({ product: product! })
-  return <>
-    <NostoPlacement id="productpage-nosto-1" />
-    <NostoPlacement id="productpage-nosto-2" />
-    <NostoPlacement id="productpage-nosto-3" />
-    <Link to="/products/234">Product 234</Link>
-    <Link to="/collections/hoodies">Hoodies</Link>
-    <Link to="/">Home</Link>
-  </>
+  return (
+    <>
+      <NostoPlacement id="productpage-nosto-1" />
+      <NostoPlacement id="productpage-nosto-2" />
+      <NostoPlacement id="productpage-nosto-3" />
+      <Link to="/products/234">Product 234</Link>
+      <Link to="/collections/hoodies">Hoodies</Link>
+      <Link to="/">Home</Link>
+    </>
+  )
 }
 
 function Main() {
-  return <NostoProvider
-    account="shopify-11368366139"
-    recommendationComponent={<RecommendationComponent />}> 
-    <BrowserRouter>
-      <Routes>
-        <Route path="/collections/:category" element={<CategoryPage />} />
-        <Route path="/products/:product" element={<ProductPage />} />
-        <Route path="/" element={<HomePage />} />
-      </Routes>    
-    </BrowserRouter>
-  </NostoProvider>  
+  return (
+    <NostoProvider account="shopify-11368366139" recommendationComponent={<RecommendationComponent />}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/collections/:category" element={<CategoryPage />} />
+          <Route path="/products/:product" element={<ProductPage />} />
+          <Route path="/" element={<HomePage />} />
+        </Routes>
+      </BrowserRouter>
+    </NostoProvider>
+  )
 }
 
 test("navigation events", async () => {
   render(<Main />)
 
-  await waitFor(() => {
-    expect(screen.getAllByTestId("recommendation")).toHaveLength(3)
-  }, { timeout: WAIT_FOR_TIMEOUT })
+  await waitFor(
+    () => {
+      expect(screen.getAllByTestId("recommendation")).toHaveLength(3)
+    },
+    { timeout: WAIT_FOR_TIMEOUT }
+  )
 
   const requests = listenTo("prerequest")
 
   function verifyEvents(given: unknown[]) {
     expect(requests).toEqual(given)
     requests.length = 0
   }
-  
+
   // home -> category
   fireEvent.click(screen.getByText("Hoodies"))
-  verifyEvents([ frontEvent(), categoryEvent("hoodies")])
+  verifyEvents([frontEvent(), categoryEvent("hoodies")])
 
   // category -> product
   fireEvent.click(screen.getByText("Product 123"))
-  verifyEvents([ productEvent("123") ])
+  verifyEvents([productEvent("123")])
 
   // product -> product
   fireEvent.click(screen.getByText("Product 234"))
-  verifyEvents([ productEvent("234") ])
+  verifyEvents([productEvent("234")])
 
   // product -> category
   fireEvent.click(screen.getByText("Hoodies"))
-  verifyEvents([ categoryEvent("hoodies") ])
+  verifyEvents([categoryEvent("hoodies")])
 
   // category -> home
   fireEvent.click(screen.getByText("Home"))
-  verifyEvents([ frontEvent() ])
-})
+  verifyEvents([frontEvent()])
+})

spec/nosto.load.spec.tsx

@@ -6,7 +6,7 @@ import RecommendationComponent from "./renderer"
 
 describe("Nosto client script", () => {
   it("verify is not loaded twice", () => {
-    // @ts-expect-error dummy placeholder for Nosto iframe window scope  
+    // @ts-expect-error dummy placeholder for Nosto iframe window scope
     window.nosto = {}
 
     render(
@@ -59,4 +59,4 @@ describe("Nosto client script", () => {
     expect(document.querySelector("[nosto-client-script]")?.getAttribute("nosto-language")).toBe("en")
     expect(document.querySelector("[nosto-client-script]")?.getAttribute("nosto-market-id")).toBe("123")
   })
-})
+})

spec/other.spec.tsx

@@ -6,10 +6,7 @@ import { WAIT_FOR_TIMEOUT } from "./utils"
 
 test("Other page render", async () => {
   render(
-    <NostoProvider
-      account="shopify-11368366139"
-      recommendationComponent={<RecommendationComponent />}
-    >
+    <NostoProvider account="shopify-11368366139" recommendationComponent={<RecommendationComponent />}>
       <NostoPlacement id="cartpage-nosto-1" />
       <NostoPlacement id="categorypage-nosto-1" />
       <NostoPlacement id="productpage-nosto-1" />
@@ -18,9 +15,12 @@ test("Other page render", async () => {
     </NostoProvider>
   )
 
-  await waitFor(() => {
-    expect(screen.getAllByTestId("recommendation")).toHaveLength(4)
-  }, { timeout: WAIT_FOR_TIMEOUT })
+  await waitFor(
+    () => {
+      expect(screen.getAllByTestId("recommendation")).toHaveLength(4)
+    },
+    { timeout: WAIT_FOR_TIMEOUT }
+  )
 
   expect(screen.getAllByTestId("recommendation-product").length).toBeGreaterThanOrEqual(3)