Merge pull request #2912 from patrick-rodgers/version-4

added button to spa testing page
pnp · Jan 19, 2024 · bdd445c · bdd445c
2 parents 61bfde9 + 7c6499b
commit bdd445c
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Removed
 
+- queryable
+  - removed [extension](https://pnp.github.io/pnpjs/queryable/extensions/) capabilities from core library
+
 - graph
   - paged method removed from IGraphQueryableCollection
   - ./operations.ts methods moved to ./graphqueryable.ts
@@ -32,6 +35,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Changed
 
+- testing
+  - SPA application now has a button to trigger the code vs running on page load
+
 - queryable
   - moved add-props.ts and request-builders.ts to index.ts
 

diff --git a/debug/serve/main.ts b/debug/serve/main.ts
@@ -1,14 +1,43 @@
-import { MSAL, MSALOptions } from "@pnp/msaljsclient/index.js";
+import { MSAL } from "@pnp/msaljsclient/index.js";
 import { spfi, SPBrowser } from "@pnp/sp";
 import "@pnp/sp/webs";
 import { settings } from "../../settings.js";
 // import { graph } from "@pnp/graph/presets/all";
 
 // ******
-// Please edit this file and do any testing required. Please do not submit changes as part of a PR.
+// Please edit the main function and do any testing required. Please do not submit changes as part of a PR.
 // ******
 
-// ensure our DOM is ready for us to do stuff
+/**
+ * The testing function whose code is executed
+ * 
+ * @param resultDiv The div into which you can write your result
+ */
+async function main(resultDiv: HTMLDivElement) {
+
+    const html = [];
+
+    try {
+
+        // Make sure to add `https://localhost:8080/spa.html` as a Redirect URI in your testing's AAD App Registration
+        const sp = spfi().using(
+            SPBrowser({ baseUrl: settings.testing.sp.url }),
+            MSAL({ configuration: settings.testing.sp.msal.init, authParams: { scopes: settings.testing.sp.msal.scopes } })
+        );
+
+        const r = await sp.web();
+
+        html.push(`<textarea cols="200" rows="40">${JSON.stringify(r, null, 4)}</textarea>`);
+
+    } catch (err) {
+
+        html.push(`Error: <pre>${JSON.stringify(err.message, null, 4)}</pre>`);
+    }
+
+    resultDiv.innerHTML = html.join("<br />");
+}
+
+// ensure our DOM is ready for us to do stuff and either wire up the button even or fire the main function
 document.onreadystatechange = async () => {
 
     if (document.readyState === "interactive") {
@@ -22,26 +51,23 @@ document.onreadystatechange = async () => {
         //     },
         // });
 
-        const e = document.getElementById("pnp-test");
+        const resultDiv = <HTMLDivElement>document.getElementById("pnp-test");
+        const body = document.getElementsByTagName("body");
 
-        const html = [];
+        if (body[0].hasAttribute("isPnPSPA")) {
 
-        try {
+            // id in spa use button event to fire
+            const b = document.getElementById("pnp-button");
+            b.addEventListener("click", async function (e: MouseEvent) {
 
-            // Make sure to add `https://localhost:8080/spa.html` as a Redirect URI in your testing's AAD App Registration
-            const sp = spfi().using(
-                SPBrowser({ baseUrl: settings.testing.sp.url}), 
-                MSAL({configuration:settings.testing.sp.msal.init, authParams: {scopes: settings.testing.sp.msal.scopes}})
-            );          
+                e.preventDefault();
+                await main(resultDiv);
+            });
 
-            const r = await sp.web();
+        } else {
 
-            html.push(`<textarea cols="200" rows="40">${JSON.stringify(r, null, 4)}</textarea>`);
-
-        } catch (e) {
-            html.push(`Error: <pre>${JSON.stringify(e.message, null, 4)}</pre>`);
+            // id not in the spa, just run it (old script editor webpart test)
+            await main(resultDiv);
         }
-
-        e.innerHTML = html.join("<br />");
-    }
-};
+    };
+}
diff --git a/debug/serve/spa.html b/debug/serve/spa.html
@@ -3,9 +3,10 @@
         <title>PnPjs SPA Testing Page</title>        
     </head>
 
-    <body>
+    <body isPnPSPA="true">
         <p>This page can be used to test SPA application access / issues locally.</p>
-        <div id="pnp-test"></div>
+        <p><button id="pnp-button">Click Me!</button></p>
+        <div id="pnp-test" style="width:100%;padding:4px;border:1px solid #000;"></div>
     </body>
 
     <script type="text/javascript" src="https://localhost:8080/assets/pnp.js"></script>