Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added button to spa testing page #2912

Merged
merged 1 commit into from
Jan 19, 2024
Merged

added button to spa testing page #2912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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

Expand Down
66 changes: 46 additions & 20 deletions debug/serve/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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") {
Expand All @@ -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 />");
}
};
};
}
5 changes: 3 additions & 2 deletions debug/serve/spa.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down