Skip to content

Commit

Permalink
Adds rpc param (#11)
Browse files Browse the repository at this point in the history 
* Discusses #7

* wip

* adds tests, post bos-workspace merge, wip

* resolve merge conflicts

* passing tests

* revert wallet selector change

* increment version

---------

Co-authored-by: Tom Kleingers <[email protected]>
  • Loading branch information
@elliotBraem @klngrs
elliotBraem and klngrs authored May 13, 2024
1 parent 2d69901 commit f3ec420
Show file tree
Hide file tree
Showing 7 changed files with 236 additions and 179 deletions.
2 changes: 1 addition & 1 deletion config/webpack.development.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const path = require("path");
const { HotModuleReplacementPlugin } = require("webpack");

module.exports = () => ({
devtool: false,
devtool: 'inline-source-map',
module: {
rules: [
{
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "near-bos-webcomponent",
"version": "0.0.6",
"version": "0.0.7",
"homepage": "https://github.com/petersalomonsen/near-bos-webcomponent",
"repository": {
"type": "git",
Expand Down
85 changes: 85 additions & 0 deletions playwright-tests/tests/rpc.spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { expect, test } from "@playwright/test";
import { waitForSelectorToBeVisible } from "../testUtils";

const DEFAULT_RPC_URL = "https://rpc.mainnet.near.org/";
const CUSTOM_RPC_URL = "https://custom-rpc-url.com/";

test("Verify default RPC is called when value not provided", async ({
page,
}) => {
// Set up a listener for the default rpc request
const defaultRpcRequestPromise = page.waitForRequest(DEFAULT_RPC_URL);

// Navigate to the default route
await page.goto("/");

// Verify the viewer is visible
await waitForSelectorToBeVisible(page, "near-social-viewer");

// Get the value of the rpc attribute
const rpc = await page.evaluate(() => {
const viewer = document.querySelector("near-social-viewer");
return viewer.getAttribute("rpc");
});

// expect value to be undefined (aka use default value)
expect(rpc, undefined);

// Wait for the widget to render
await waitForSelectorToBeVisible(
page,
'div[data-component="devs.near/widget/default"]'
);

// Assert that the default RPC request has been made
const defaultRpcRequest = await defaultRpcRequestPromise;
expect(defaultRpcRequest).toBeTruthy();
});

test("Verify custom RPC is called when provided", async ({ page }) => {
// Navigate to the default route
await page.goto("/");

// Verify the viewer is visible
await waitForSelectorToBeVisible(page, "near-social-viewer");

// Mock the custom rpc call so that the request doesn't hang
await page.route(CUSTOM_RPC_URL, (route) => {
route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify({ result: "some valid response" }),
});
});

// Set the rpc attribute to a custom rpc value
await page.evaluate((url) => {
const viewer = document.querySelector("near-social-viewer");
viewer.setAttribute("rpc", url);
}, CUSTOM_RPC_URL);

// Get the value of the rpc attribute
const actualRpc = await page.evaluate(() => {
const viewer = document.querySelector("near-social-viewer");
return viewer.getAttribute("rpc");
});

// Assert it equals custom value
expect(actualRpc).toBe(CUSTOM_RPC_URL);

// Wait for the widget to render
await waitForSelectorToBeVisible(
page,
'div[data-component="devs.near/widget/default"]'
);

// Set the src to new value (which should trigger the custom rpc call)
await page.evaluate(() => {
const viewer = document.querySelector("near-social-viewer");
viewer.setAttribute("src", "efiz.near/widget/Tree");
});

// Expect that the custom RPC is called
const customRpcRequest = await page.waitForRequest(CUSTOM_RPC_URL);
expect(customRpcRequest).toBeTruthy();
});
214 changes: 112 additions & 102 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<base href="/" />
<title>Near social</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@near-wallet-selector/[email protected]/styles.css"
/>
</head>
<body>
<div>
<button id="open-walletselector-button" type="button">
Open wallet selector
</button>
</div>
<near-social-viewer></near-social-viewer>
</body>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<base href="/" />
<title>Near social</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@near-wallet-selector/[email protected]/styles.css">
</head>
<body>
<div><button id="open-walletselector-button">Open wallet selector</button></div>
<near-social-viewer></near-social-viewer>
</body>

<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type="importmap">
{
"imports": {
"@near-wallet-selector/core": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
"@near-wallet-selector/here-wallet": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
"@near-wallet-selector/meteor-wallet": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
"@near-wallet-selector/modal-ui-js": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
"@near-wallet-selector/my-near-wallet": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
"@near-wallet-selector/sender": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js"
},
"scopes": {
"https://ga.jspm.io/": {
"@here-wallet/core": "https://ga.jspm.io/npm:@here-wallet/[email protected]/build/index.js",
"@meteorwallet/sdk": "https://ga.jspm.io/npm:@meteorwallet/[email protected]/dist/meteor-sdk/src/index.js",
"@near-js/accounts": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/crypto": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/keystores": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/keystores-browser": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/providers": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/signers": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/transactions": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/types": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/utils": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/wallet-account": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-wallet-selector/wallet-utils": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
"ajv": "https://ga.jspm.io/npm:[email protected]/dist/dev.ajv.js",
"ajv-formats": "https://ga.jspm.io/npm:[email protected]/dist/index.js",
"ajv/dist/compile/codegen": "https://ga.jspm.io/npm:[email protected]/dist/compile/codegen/index.js",
"base-x": "https://ga.jspm.io/npm:[email protected]/src/index.js",
"bn.js": "https://ga.jspm.io/npm:[email protected]/lib/bn.js",
"borsh": "https://ga.jspm.io/npm:[email protected]/lib/index.js",
"bs58": "https://ga.jspm.io/npm:[email protected]/index.js",
"buffer": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/buffer.js",
"capability": "https://ga.jspm.io/npm:[email protected]/index.js",
"capability/es5": "https://ga.jspm.io/npm:[email protected]/es5.js",
"charenc": "https://ga.jspm.io/npm:[email protected]/charenc.js",
"copy-to-clipboard": "https://ga.jspm.io/npm:[email protected]/index.js",
"crypt": "https://ga.jspm.io/npm:[email protected]/crypt.js",
"crypto": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/crypto.js",
"decode-uri-component": "https://ga.jspm.io/npm:[email protected]/index.js",
"depd": "https://ga.jspm.io/npm:[email protected]/lib/browser/index.js",
"dijkstrajs": "https://ga.jspm.io/npm:[email protected]/dijkstra.js",
"encode-utf8": "https://ga.jspm.io/npm:[email protected]/index.js",
"error-polyfill": "https://ga.jspm.io/npm:[email protected]/index.js",
"events": "https://ga.jspm.io/npm:[email protected]/events.js",
"fast-deep-equal": "https://ga.jspm.io/npm:[email protected]/index.js",
"filter-obj": "https://ga.jspm.io/npm:[email protected]/index.js",
"http": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/http.js",
"http-errors": "https://ga.jspm.io/npm:[email protected]/index.js",
"https": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/https.js",
"inherits": "https://ga.jspm.io/npm:[email protected]/inherits_browser.js",
"is-mobile": "https://ga.jspm.io/npm:[email protected]/index.js",
"js-sha256": "https://ga.jspm.io/npm:[email protected]/src/sha256.js",
"json-schema-traverse": "https://ga.jspm.io/npm:[email protected]/index.js",
"mustache": "https://ga.jspm.io/npm:[email protected]/mustache.js",
"nanoid": "https://ga.jspm.io/npm:[email protected]/index.browser.js",
"near-abi": "https://ga.jspm.io/npm:[email protected]/lib/index.js",
"near-api-js": "https://ga.jspm.io/npm:[email protected]/lib/browser-index.js",
"near-api-js/lib/providers": "https://ga.jspm.io/npm:[email protected]/lib/providers/index.js",
"near-api-js/lib/utils": "https://ga.jspm.io/npm:[email protected]/lib/utils/index.js",
"near-api-js/lib/utils/key_pair": "https://ga.jspm.io/npm:[email protected]/lib/utils/key_pair.js",
"near-api-js/lib/utils/serialize": "https://ga.jspm.io/npm:[email protected]/lib/utils/serialize.js",
"node-fetch": "https://ga.jspm.io/npm:[email protected]/browser.js",
"o3": "https://ga.jspm.io/npm:[email protected]/index.js",
"process": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/process.js",
"qrcode": "https://ga.jspm.io/npm:[email protected]/lib/browser.js",
"query-string": "https://ga.jspm.io/npm:[email protected]/index.js",
"rxjs": "https://ga.jspm.io/npm:[email protected]/dist/esm5/index.js",
"safe-buffer": "https://ga.jspm.io/npm:[email protected]/index.js",
"setprototypeof": "https://ga.jspm.io/npm:[email protected]/index.js",
"sha1": "https://ga.jspm.io/npm:[email protected]/sha1.js",
"split-on-first": "https://ga.jspm.io/npm:[email protected]/index.js",
"statuses": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
"strict-uri-encode": "https://ga.jspm.io/npm:[email protected]/index.js",
"text-encoding-utf-8": "https://ga.jspm.io/npm:[email protected]/lib/encoding.lib.js",
"toggle-selection": "https://ga.jspm.io/npm:[email protected]/index.js",
"toidentifier": "https://ga.jspm.io/npm:[email protected]/index.js",
"tslib": "https://ga.jspm.io/npm:[email protected]/tslib.es6.mjs",
"tweetnacl": "https://ga.jspm.io/npm:[email protected]/nacl-fast.js",
"u3": "https://ga.jspm.io/npm:[email protected]/index.js",
"uri-js": "https://ga.jspm.io/npm:[email protected]/dist/es5/uri.all.js",
"uuid4": "https://ga.jspm.io/npm:[email protected]/browser.mjs"
},
"https://ga.jspm.io/npm:[email protected]/": {
"depd": "https://ga.jspm.io/npm:[email protected]/lib/browser/index.js"
<script
async
src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"
crossorigin="anonymous"
></script>
<script type="importmap">
{
"imports": {
"@near-wallet-selector/core": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
"@near-wallet-selector/here-wallet": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
"@near-wallet-selector/meteor-wallet": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
"@near-wallet-selector/modal-ui-js": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
"@near-wallet-selector/my-near-wallet": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
"@near-wallet-selector/sender": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js"
},
"scopes": {
"https://ga.jspm.io/": {
"@here-wallet/core": "https://ga.jspm.io/npm:@here-wallet/[email protected]/build/index.js",
"@meteorwallet/sdk": "https://ga.jspm.io/npm:@meteorwallet/[email protected]/dist/meteor-sdk/src/index.js",
"@near-js/accounts": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/crypto": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/keystores": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/keystores-browser": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/providers": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/signers": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/transactions": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/types": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/utils": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-js/wallet-account": "https://ga.jspm.io/npm:@near-js/[email protected]/lib/index.js",
"@near-wallet-selector/wallet-utils": "https://ga.jspm.io/npm:@near-wallet-selector/[email protected]/index.js",
"ajv": "https://ga.jspm.io/npm:[email protected]/dist/dev.ajv.js",
"ajv-formats": "https://ga.jspm.io/npm:[email protected]/dist/index.js",
"ajv/dist/compile/codegen": "https://ga.jspm.io/npm:[email protected]/dist/compile/codegen/index.js",
"base-x": "https://ga.jspm.io/npm:[email protected]/src/index.js",
"bn.js": "https://ga.jspm.io/npm:[email protected]/lib/bn.js",
"borsh": "https://ga.jspm.io/npm:[email protected]/lib/index.js",
"bs58": "https://ga.jspm.io/npm:[email protected]/index.js",
"buffer": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/buffer.js",
"capability": "https://ga.jspm.io/npm:[email protected]/index.js",
"capability/es5": "https://ga.jspm.io/npm:[email protected]/es5.js",
"charenc": "https://ga.jspm.io/npm:[email protected]/charenc.js",
"copy-to-clipboard": "https://ga.jspm.io/npm:[email protected]/index.js",
"crypt": "https://ga.jspm.io/npm:[email protected]/crypt.js",
"crypto": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/crypto.js",
"decode-uri-component": "https://ga.jspm.io/npm:[email protected]/index.js",
"depd": "https://ga.jspm.io/npm:[email protected]/lib/browser/index.js",
"dijkstrajs": "https://ga.jspm.io/npm:[email protected]/dijkstra.js",
"encode-utf8": "https://ga.jspm.io/npm:[email protected]/index.js",
"error-polyfill": "https://ga.jspm.io/npm:[email protected]/index.js",
"events": "https://ga.jspm.io/npm:[email protected]/events.js",
"fast-deep-equal": "https://ga.jspm.io/npm:[email protected]/index.js",
"filter-obj": "https://ga.jspm.io/npm:[email protected]/index.js",
"http": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/http.js",
"http-errors": "https://ga.jspm.io/npm:[email protected]/index.js",
"https": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/https.js",
"inherits": "https://ga.jspm.io/npm:[email protected]/inherits_browser.js",
"is-mobile": "https://ga.jspm.io/npm:[email protected]/index.js",
"js-sha256": "https://ga.jspm.io/npm:[email protected]/src/sha256.js",
"json-schema-traverse": "https://ga.jspm.io/npm:[email protected]/index.js",
"mustache": "https://ga.jspm.io/npm:[email protected]/mustache.js",
"nanoid": "https://ga.jspm.io/npm:[email protected]/index.browser.js",
"near-abi": "https://ga.jspm.io/npm:[email protected]/lib/index.js",
"near-api-js": "https://ga.jspm.io/npm:[email protected]/lib/browser-index.js",
"near-api-js/lib/providers": "https://ga.jspm.io/npm:[email protected]/lib/providers/index.js",
"near-api-js/lib/utils": "https://ga.jspm.io/npm:[email protected]/lib/utils/index.js",
"near-api-js/lib/utils/key_pair": "https://ga.jspm.io/npm:[email protected]/lib/utils/key_pair.js",
"near-api-js/lib/utils/serialize": "https://ga.jspm.io/npm:[email protected]/lib/utils/serialize.js",
"node-fetch": "https://ga.jspm.io/npm:[email protected]/browser.js",
"o3": "https://ga.jspm.io/npm:[email protected]/index.js",
"process": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/process.js",
"qrcode": "https://ga.jspm.io/npm:[email protected]/lib/browser.js",
"query-string": "https://ga.jspm.io/npm:[email protected]/index.js",
"rxjs": "https://ga.jspm.io/npm:[email protected]/dist/esm5/index.js",
"safe-buffer": "https://ga.jspm.io/npm:[email protected]/index.js",
"setprototypeof": "https://ga.jspm.io/npm:[email protected]/index.js",
"sha1": "https://ga.jspm.io/npm:[email protected]/sha1.js",
"split-on-first": "https://ga.jspm.io/npm:[email protected]/index.js",
"statuses": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
"strict-uri-encode": "https://ga.jspm.io/npm:[email protected]/index.js",
"text-encoding-utf-8": "https://ga.jspm.io/npm:[email protected]/lib/encoding.lib.js",
"toggle-selection": "https://ga.jspm.io/npm:[email protected]/index.js",
"toidentifier": "https://ga.jspm.io/npm:[email protected]/index.js",
"tslib": "https://ga.jspm.io/npm:[email protected]/tslib.es6.mjs",
"tweetnacl": "https://ga.jspm.io/npm:[email protected]/nacl-fast.js",
"u3": "https://ga.jspm.io/npm:[email protected]/index.js",
"uri-js": "https://ga.jspm.io/npm:[email protected]/dist/es5/uri.all.js",
"uuid4": "https://ga.jspm.io/npm:[email protected]/browser.mjs"
},
"https://ga.jspm.io/npm:[email protected]/": {
"depd": "https://ga.jspm.io/npm:[email protected]/lib/browser/index.js"
}
}
}
}
}
</script>
</script>
<script src="webcomponentapp.js" type="module"></script>
</html>
</html>
Loading

0 comments on commit f3ec420

Please sign in to comment.