From f5b70dcb1641acc49361c84aa326f5c6262c35e9 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Wed, 22 Jul 2026 00:15:17 -0700
Subject: [PATCH] Wrap HTML loading logic for mocking purposes and add tests
 for it

---
 src/getPrf.js       | 20 +++++++++++++++++---
 test/getPrf.test.js | 14 +++++++++++++-
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/getPrf.js b/src/getPrf.js
index 6663e1c..3a66334 100644
--- a/src/getPrf.js
+++ b/src/getPrf.js
@@ -7,11 +7,25 @@ import open from 'open';
 /** @import { Bytes32 } from '#src/utils.js'; */
 
 /**
- * Wrapper around browser operations (currently, only `open`). This wrapper object is required
- * to mock the methods for testing purposes.
+ * Load from disk the HTML to be served by the passkey bridge server.
+ * @returns {Promise<string>} The HTML file to serve.
+ */
+async function getHTML() {
+  return await readFile(new URL('./getPrf.html', import.meta.url), { encoding: 'utf8' });
+}
+
+/**
+ * Wrapper around browser operations. This wrapper object is required to mock the methods for
+ * testing purposes.
  */
 export const BROWSER = { open };
 
+/**
+ * Wrapper around server operations. This wrapper object is required to mock the methods for
+ * testing purposes.
+ */
+export const SERVER = { getHTML };
+
 /**
  * 2 minutes in milliseconds. After this duration, the http server will close and the flow
  * must be restarted.
@@ -58,7 +72,7 @@ export async function getPrf(options = {}) {
   const { promise: prfPromise, resolve: prfResolve } = /** @type {PromiseWithResolvers<Bytes32>}*/(Promise.withResolvers());
   const { promise: abortPromise, resolve: abortResolve } = /** @type {PromiseWithResolvers<null>}*/(Promise.withResolvers());
 
-  const html = await readFile(new URL('./getPrf.html', import.meta.url), { encoding: 'utf8' });
+  const html = await SERVER.getHTML();
 
   // Generate hashes of <style> and <script> contents for the CSP header
   const encoder = new TextEncoder();
diff --git a/test/getPrf.test.js b/test/getPrf.test.js
index 656e615..e5bdedf 100644
--- a/test/getPrf.test.js
+++ b/test/getPrf.test.js
@@ -4,7 +4,7 @@ import { Readable } from 'node:stream';
 
 import { request } from 'undici';
 
-import { WINDOW_EXPIRATION_DURATION } from '#src/getPrf.js';
+import { SERVER, WINDOW_EXPIRATION_DURATION } from '#src/getPrf.js';
 import { setupPlaywright, setupServer } from '#test/setup.js';
 
 /**
@@ -55,6 +55,18 @@ function makePostRequest(url, options = {}) {
 }
 
 suite('getPrf.js (server)', () => {
+  test('validates <style> tag is present in HTML template', async (t) => {
+    const html = await SERVER.getHTML();
+    const modified = html.replaceAll('<style>', '');
+    t.mock.method(SERVER, 'getHTML', () => modified);
+    await rejects(setupServer(t), { message: 'Could not find <style> tag in getPrf.html file.' });
+  });
+  test('validates <script> tag is present in HTML template', async (t) => {
+    const html = await SERVER.getHTML();
+    const modified = html.replaceAll('<script type="module">', '');
+    t.mock.method(SERVER, 'getHTML', () => modified);
+    await rejects(setupServer(t), { message: 'Could not find <script> tag in getPrf.html file.' });
+  });
   test('valid GET works', async (t) => {
     const { url } = await setupServer(t);
     deepStrictEqual((await fetch(url)).status, 200);
-- 
2.47.3