Merge pull request #107 from Nosto/client-script-loading

Improve client script loading

spec/setup.js

@@ -15,7 +15,12 @@ global.navigator = window.navigator
 global.window.nostoReactTest = true
 
 afterEach(() => {
+    // clearing Nosto iframe window handle
     window.nosto = undefined
+    // clearing nostojs stub
+    window.nostojs = undefined
+    // clearing Shopify specific Nosto namespace
+    window.Nosto = undefined
     document.head.innerHTML = ""
     document.body.innerHTML = ""
 })

spec/useLoadClientScript.spec.tsx

@@ -1,11 +1,59 @@
 import { describe, expect, it } from "vitest"
 import { renderHook } from "@testing-library/react"
 import { useLoadClientScript } from "../src/hooks"
+import "@testing-library/jest-dom/vitest"
+
+function loadClientScript(merchant: string) {
+  const script = document.createElement("script")
+  script.setAttribute("nosto-client-script", "")
+  script.src = `http://connect.nosto.com/include/${merchant}`
+  script.type = "text/javascript"
+  script.async = true
+  const promise = new Promise<void>(resolve => {
+    script.onload = () => {
+      window.nosto?.reload({ site: "localhost" })
+      resolve()
+    }
+  })
+  document.body.appendChild(script)
+  return promise
+}
+
+function getScriptSources() {
+  return Array.from(document.querySelectorAll("script")).map(script => script.src)
+}
 
 describe("useLoadClientScript", () => {
-  it("set loaded state to true when client is loaded externally", () => {
+
+  it("loads client script", async () => {
+    const hook = renderHook(() => useLoadClientScript({ account: "shopify-11368366139" }))
+    await new Promise(window.nostojs)
+
+    hook.rerender()
+    expect(hook.result.current.clientScriptLoaded).toBe(true)
+    expect(window.nosto).toBeDefined()
+    expect(getScriptSources()).toEqual(["http://connect.nosto.com/include/shopify-11368366139"])
+  })
+
+  it("set loaded state to true when client is loaded externally after", async () => {
+    const hook = renderHook(() => useLoadClientScript({ loadScript: false, account: "shopify-11368366139" }))
+    expect(hook.result.current.clientScriptLoaded).toBe(false)
+
+    await loadClientScript("shopify-11368366139")
+    expect(window.nosto).toBeDefined()
+
+    hook.rerender()
+    expect(hook.result.current.clientScriptLoaded).toBe(true)
+    expect(getScriptSources()).toEqual(["http://connect.nosto.com/include/shopify-11368366139"])
+  })
+
+  it("set loaded state to true when client is loaded externally before", async () => {
+    await loadClientScript("shopify-11368366139")
+    expect(window.nosto).toBeDefined()
+
     const { result } = renderHook(() => useLoadClientScript({ loadScript: false, account: "shopify-11368366139" }))
     expect(result.current.clientScriptLoaded).toBe(true)
+    expect(getScriptSources()).toEqual(["http://connect.nosto.com/include/shopify-11368366139"])
   })
 
   it("remove existing Shopify markets related scripts before loading new ones", () => {
@@ -17,9 +65,12 @@ describe("useLoadClientScript", () => {
     nostoSandbox.id = "nosto-sandbox"
     document.body.appendChild(nostoSandbox)
 
-    const { result } = renderHook(() => useLoadClientScript({ account: "shopify-11368366139", shopifyMarkets: { marketId: "123", language: "en" } }))
+    renderHook(() => useLoadClientScript({ account: "shopify-11368366139", shopifyMarkets: { marketId: "123", language: "en" } }))
 
     expect(document.body.contains(existingScript)).toBe(false)
     expect(document.body.contains(nostoSandbox)).toBe(false)
+    expect(getScriptSources()).toEqual([
+      "http://connect.nosto.com/script/shopify/market/nosto.js?merchant=shopify-11368366139&market=123&locale=en"
+    ])
   })
 })

src/hooks/useLoadClientScript.ts

@@ -40,7 +40,7 @@ export function useLoadClientScript(props: NostoScriptProps) {
     }
 
     if (!loadScript) {
-      scriptOnload()
+      window.nosto ? scriptOnload() : window.nostojs(scriptOnload)
       return
     }
 

vite.config.js

@@ -31,7 +31,6 @@ export default defineConfig({
   test: {
     include: ["*.spec.*"],
     dir: "spec",
-    setupFiles: ['./spec/setup.js'],
-    silent: true    
+    setupFiles: ['./spec/setup.js']
   },
 })