Test SDK loading before widget tag

sdktest/render/handler.go

@@ -72,8 +72,7 @@ func (r *TestCaseHandler) HandleTestCasePage(res http.ResponseWriter, req *http.
 		Name:  params.Name,
 		Title: fmt.Sprintf("%s | sdktest", params.Name),
 
-		HTMLLang:                   params.Config.Language,
-		FriendlyCaptchaAPIEndpoint: params.Config.APIEndpoint,
+		HTMLLang: params.Config.Language,
 
 		Head: rd.Head,
 		Body: rd.Body,

sdktest/sdktestlib/test.ts

@@ -87,6 +87,16 @@ export class AssertLib {
     });
   }
 
+  async widgetInits(widget: WidgetHandle) {
+    return new Promise<FRCWidgetStateChangeEventData>((resolve) => {
+      widget.addEventListener("frc:widget.statechange", (ev) => {
+        if (ev.detail.state === "unactivated") {
+          resolve(ev.detail);
+        }
+      });
+    });
+  }
+
   async widgetCompletes(widget: WidgetHandle) {
     return new Promise<FRCWidgetCompleteEventData>((resolve) => {
       widget.addEventListener("frc:widget.complete", (ev) => {

sdktest/template/templates.go

@@ -19,8 +19,7 @@ type TestCaseTemplateData struct {
 	Title string
 	Name  string
 
-	HTMLLang                   string
-	FriendlyCaptchaAPIEndpoint string
+	HTMLLang string
 
 	Head []byte
 	Body []byte

sdktest/template/test.tmpl.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>{{ .Title }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="frc-api-endpoint" content="{{ .FriendlyCaptchaAPIEndpoint }}"/>
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧪</text></svg>">
     <link rel="stylesheet" href="/static/public/simple.css">
     <link rel="stylesheet" href="/static/public/sdktestlib.css">

sdktest/test/invalid_api_endpoint/body.tmpl.html

@@ -1,8 +1,9 @@
 <main>
     <form>
-        <input type="textarea"/>
-        <div class="frc-captcha" data-sitekey="{{ .Config.Sitekey }}"></div>
-        <input type="submit"/>
+        <input type="textarea" />
+        <div class="frc-captcha" data-sitekey="{{ .Config.Sitekey }}" data-api-endpoint="{{ .Config.APIEndpoint }}">
+        </div>
+        <input type="submit" />
     </form>
 </main>
 

sdktest/test/sdk_loaded_before_widget_tag/body.tmpl.html

@@ -0,0 +1,13 @@
+<!-- Do not execute async to force loading before the site content -->
+<script src="{{ .SiteJSPath }}"></script>
+
+<main>
+    <form>
+        <input type="textarea" />
+        <div class="frc-captcha" data-sitekey="{{ .Config.Sitekey }}" data-api-endpoint="{{ .Config.APIEndpoint }}">
+        </div>
+        <input type="submit" />
+    </form>
+</main>
+
+<script defer src="main.tmpl.ts"></script>

sdktest/test/sdk_loaded_before_widget_tag/config.yaml

@@ -0,0 +1 @@
+api_endpoint: eu

sdktest/test/sdk_loaded_before_widget_tag/main.tmpl.ts

@@ -0,0 +1,25 @@
+/*!
+ * Copyright (c) Friendly Captcha GmbH 2025.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+import { sdktest } from "../../sdktestlib/sdk.js";
+
+sdktest.description(
+  "The site.js script is loaded before the widget tag that contains the EU API endpoint. After the widget tag is loaded, the EU agent should load and the widget should function normally.",
+);
+
+sdktest.test({ name: "one widget present" }, async (t) => {
+  t.require.numberOfWidgets(1);
+});
+
+sdktest.test({ name: "widget completes after focusing form" }, async (t) => {
+  const w = t.getWidget()!;
+  const completePromise = t.assert.widgetCompletes(w);
+
+  const ta: HTMLTextAreaElement = document.querySelector('input[type="textarea"]')!;
+  ta.focus();
+
+  await completePromise;
+});

sdktest/test/start_mode_auto/main.tmpl.ts

@@ -6,7 +6,6 @@
  */
 import { sdktest } from "../../sdktestlib/sdk.js";
 
-
 sdktest.test({ name: "one widget present" }, async (t) => {
   t.require.numberOfWidgets(1);
 });
@@ -17,8 +16,6 @@ sdktest.test({ name: "auto widget completes automatically" }, async (t) => {
   if (w.getState() === "completed") {
     // Already completed
   } else {
-    const completePromise = t.assert.widgetCompletes(w)
-  await completePromise
-  } 
+    await t.assert.widgetCompletes(w);
+  }
 });
-

sdktest/test/start_mode_none/main.tmpl.ts

@@ -6,17 +6,19 @@
  */
 import { sdktest } from "../../sdktestlib/sdk.js";
 
-
 sdktest.test({ name: "one widget present" }, async (t) => {
   t.require.numberOfWidgets(1);
 });
 
 sdktest.test({ name: "none widget is not triggered by focus" }, async (t) => {
   const w = t.getWidget()!;
 
-  const ta: HTMLTextAreaElement = document.querySelector("input[type=\"textarea\"]")!;
+  const ta: HTMLTextAreaElement = document.querySelector('input[type="textarea"]')!;
   ta.focus();
 
-  t.assert.equal(w.getState(), "unactivated")
+  if (w.getState() === "unactivated") {
+    // Already unactivated (init done)
+  } else {
+    await t.assert.widgetInits(w);
+  }
 });
-