Merge pull request #264 from Nosto/clientscript-loading

Remove test references from main code
Nosto · Dec 31, 2024 · 91c210c · 91c210c
2 parents 995bc47 + ba64bda
commit 91c210c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 29 deletions.
diff --git a/spec/setup.js b/spec/setup.js
@@ -1,5 +1,5 @@
 import { JSDOM } from "jsdom"
-import { afterEach, vi } from "vitest"
+import { beforeEach, afterEach, vi } from "vitest"
 import { clearNostoGlobals } from "@nosto/nosto-js/testing"
 
 const { window } = new JSDOM("<html></html>", {
@@ -15,8 +15,13 @@ global.location = window.location
 global.document = window.document
 global.localStorage = window.localStorage
 
-// test mode flag
-global.window.nostoReactTest = true
+beforeEach(() => {
+  window.nostoab = {
+    settings: {
+      site: "localhost"
+    }
+  }
+})
 
 afterEach(() => {
   clearNostoGlobals()

diff --git a/spec/useLoadClientScript.spec.tsx b/spec/useLoadClientScript.spec.tsx
@@ -3,8 +3,7 @@ import { renderHook } from "@testing-library/react"
 import { useLoadClientScript } from "../src/hooks/useLoadClientScript"
 import scriptLoader from "../src/hooks/scriptLoader"
 import "@testing-library/jest-dom/vitest"
-import { nostojs, getNostoWindow, isNostoLoaded } from "@nosto/nosto-js"
-import { reloadNosto } from "@nosto/nosto-js/testing"
+import { nostojs, isNostoLoaded, getNostoWindow } from "@nosto/nosto-js"
 
 function loadClientScript(merchant: string) {
   const script = document.createElement("script")
@@ -13,10 +12,7 @@ function loadClientScript(merchant: string) {
   script.type = "text/javascript"
   script.async = true
   const promise = new Promise<void>(resolve => {
-    script.onload = () => {
-      reloadNosto({ site: "localhost" })
-      resolve()
-    }
+    script.onload = () => resolve()
   })
   document.body.appendChild(script)
   return promise
@@ -26,6 +22,10 @@ function getScriptSources() {
   return Array.from(document.querySelectorAll("script")).map(script => script.src)
 }
 
+function wait(time: number) {
+  return new Promise(resolve => setTimeout(resolve, time))
+}
+
 describe("useLoadClientScript", () => {
   const testAccount = "shopify-11368366139"
 
@@ -34,6 +34,7 @@ describe("useLoadClientScript", () => {
     await new Promise(nostojs)
 
     hook.rerender()
+    await wait(1)
     expect(hook.result.current.clientScriptLoaded).toBe(true)
     expect(isNostoLoaded()).toBeTruthy()
     expect(getScriptSources()).toEqual([`https://connect.nosto.com/include/${testAccount}`])
@@ -71,17 +72,6 @@ describe("useLoadClientScript", () => {
     expect(getScriptSources()).toEqual([`http://connect.nosto.com/include/${testAccount}`])
   })
 
-  it("reloads client script once with loadScript=false", async () => {
-    await loadClientScript(testAccount)
-    const reloadSpy = vi.spyOn(getNostoWindow()!, "reload")
-
-    const hook = renderHook(() => useLoadClientScript({ loadScript: false, account: testAccount }))
-    expect(reloadSpy).toHaveBeenCalledTimes(1)
-
-    hook.rerender()
-    expect(reloadSpy).toHaveBeenCalledTimes(1)
-  })
-
   it("remove existing Shopify markets related scripts before loading new ones", () => {
     const props = { account: testAccount, shopifyMarkets: { marketId: "123", language: "en" } }
     const hook = renderHook(props => useLoadClientScript(props), { initialProps: props })

diff --git a/src/hooks/useLoadClientScript.ts b/src/hooks/useLoadClientScript.ts
@@ -2,10 +2,11 @@ import { useState, useEffect } from "react"
 import type { NostoProviderProps } from "../components/NostoProvider"
 import scriptLoaderFn from "./scriptLoader"
 import { init, initNostoStub, isNostoLoaded, nostojs } from "@nosto/nosto-js"
-import { reloadNosto } from "@nosto/nosto-js/testing"
 
 type NostoScriptProps = Pick<NostoProviderProps, "account" | "host" | "shopifyMarkets" | "loadScript" | "scriptLoader">
 
+const defaultAttributes = { "nosto-client-script": "" }
+
 export function useLoadClientScript(props: NostoScriptProps) {
   const {
     host = "connect.nosto.com",
@@ -18,19 +19,13 @@ export function useLoadClientScript(props: NostoScriptProps) {
 
   useEffect(() => {
     function scriptOnload() {
-      // Override for production scripts to work in unit tests
-      if ("nostoReactTest" in window) {
-        reloadNosto({
-          site: "localhost"
-        })
-      }
       setClientScriptLoaded(true)
     }
 
     // Create and append script element
     async function injectScriptElement(urlPartial: string, extraAttributes: Record<string, string> = {}) {
       const scriptSrc = `//${host}${urlPartial}`
-      const attributes = { "nosto-client-script": "", ...extraAttributes }
+      const attributes = { ...defaultAttributes, ...extraAttributes }
       await scriptLoader(scriptSrc, { attributes })
       scriptOnload()
     }
@@ -71,7 +66,7 @@ export function useLoadClientScript(props: NostoScriptProps) {
       await init({
         merchantId: account,
         options: {
-          attributes: { "nosto-client-script": ""}
+          attributes: defaultAttributes
         },
         scriptLoader
       })