diff --git a/spec/setup.js b/spec/setup.js index 6323639..c1946c1 100644 --- 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("", { @@ -16,8 +16,13 @@ global.document = window.document global.localStorage = window.localStorage global.navigator = window.navigator -// 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 index a6f0015..954be69 100644 --- a/spec/useLoadClientScript.spec.tsx +++ b/spec/useLoadClientScript.spec.tsx @@ -3,7 +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 { nostojs, isNostoLoaded, getNostoWindow } from "@nosto/nosto-js" import { reloadNosto } from "@nosto/nosto-js/testing" function loadClientScript(merchant: string) { @@ -26,6 +26,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 +38,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}`]) @@ -76,6 +81,7 @@ describe("useLoadClientScript", () => { const reloadSpy = vi.spyOn(getNostoWindow()!, "reload") const hook = renderHook(() => useLoadClientScript({ loadScript: false, account: testAccount })) + await wait(1) expect(reloadSpy).toHaveBeenCalledTimes(1) hook.rerender() diff --git a/src/hooks/useLoadClientScript.ts b/src/hooks/useLoadClientScript.ts index 73bbb76..84bb0cf 100644 --- 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 +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 = {}) { 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 })