tlsnotary/tlsn-js
1
0
Fork 0
mirror of https://github.com/tlsnotary/tlsn-js.git synced 2026-01-06 19:23:54 -05:00
Code Issues Packages Projects Releases 10 Wiki Activity

Use Playwright to test demos (#106)

Browse Source 
* Run tests and demos with playwright
* ci: renamed workflow
* Improved demo readmes
* Use a separate page for each test
This commit is contained in:
Hendrik Eeckhaut
2025-05-28 08:50:05 +02:00
committed by GitHub
parent 8bc8a94948
commit 4cecbb5334
37 changed files with 933 additions and 1553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
.github/workflows/ci.yaml vendored
View File

@@ -5,12 +5,6 @@ on:
release:
types: [published]
env:
LOCAL-NOTARY: true
LOCAL-WS: false
HEADLESS: true
PUPPETEER_SKIP_DOWNLOAD: true
jobs:
build-and-test:
name: Build and test
@@ -37,7 +31,7 @@ jobs:
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 18
node-version: 20
cache: 'npm'
- name: Install stable nightly toolchain
@@ -61,27 +55,18 @@ jobs:
- name: Build
run: npm run build
- name: Lint
run: npm run lint
- name: Install Chrome
uses: browser-actions/setup-chrome@v1
id: setup-chrome
with:
chrome-version: 121.0.6167.85
- name: Set CHROME_PATH environment variable
run: echo "CHROME_PATH=${{ steps.setup-chrome.outputs['chrome-path'] }}" >> $GITHUB_ENV
- name: install wstcp
run: cargo install wstcp
- name: Install Chromium (Playwright)
run: npx playwright install --with-deps chromium
- name: Test
run: |
# Install wstcp and use it in the background
cargo install wstcp
wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443 &
WSTCP_PID=$!
trap "kill $WSTCP_PID" EXIT
npm run test
run: npm run test
- name: Determine release type (dry-run or publish)
run: |

54
.github/workflows/playwright.yml vendored Normal file
View File

@@ -0,0 +1,54 @@
name: Tests demos
on:
pull_request:
jobs:
test:
timeout-minutes: 60
name: Tests demos
runs-on: ubuntu-latest
services:
notary-server:
image: ghcr.io/tlsnotary/tlsn/notary-server:v0.1.0-alpha.10
env:
NOTARY_SERVER__TLS__ENABLED: false
ports:
- 7047:7047
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: lts/*
- name: build tlsn-js
run: npm ci; npm run build
- name: install wstcp
run: cargo install wstcp
- name: Install Chromium (Playwright)
run: npx playwright install --with-deps chromium
- name: Test react demo
working-directory: demo/react-ts-webpack
continue-on-error: true
run: |
set -e
npm i
npm run test
- name: Test interactive verifier demo
continue-on-error: true
run: |
set -e
cd demo/interactive-demo/verifier-rs
cargo build --release
cd ../prover-ts
npm i
npm run test
- name: Test web-to-web p2p demo
working-directory: demo/react-ts-webpack
continue-on-error: true
run: |
set -e
npm run test
- uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
with:
name: playwright-report
path: '**/playwright-report/'
retention-days: 30

8
.gitignore vendored
View File

@@ -6,4 +6,10 @@ dev-build/
test-build/
./demo/node_modules
utils/tlsn
.vscode
.vscode
# Playwright
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/

75
demo/interactive-demo/README.md
View File

@@ -1,38 +1,59 @@
# Test Rust Prover
# Interactive Verifier Demo
1. Start the verifier:
```bash
cd verifier-rs; cargo run --release
```
2. Run the prover:
```bash
cd prover-rs; cargo run --release
```
This demo shows how to use TLSNotary **without a notary**: a direct proof between a prover and a verifier, where the verifier checks both the TLS session and the revealed data.
# Test Browser Prover
1. Start the verifier:
```bash
cd verifier-rs; cargo run --release
```
2. Since a web browser doesn't have the ability to make TCP connection, we need to use a websocket proxy server to access <raw.githubusercontent.com>.
```bash
cargo install wstcp
There are two prover implementations:
- **Rust**
- **TypeScript** (browser)
The verifier is implemented in Rust.
wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443
```
3. Run the prover
1. Build tlsn-js
---
## Interactive Verifier Demo with Rust Prover
1. **Start the verifier:**
```bash
cd verifier-rs
cargo run --release
```
2. **Run the prover:**
```bash
cd prover-rs
cargo run --release
```
---
## Interactive Verifier Demo with TypeScript Prover (Browser)
1. **Start the verifier:**
```bash
cd verifier-rs
cargo run --release
```
2. **Set up a websocket proxy for raw.githubusercontent.com**
Browsers cannot make raw TCP connections, so a websocket proxy is required:
```bash
cargo install wstcp
wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443
```
3. **Run the prover in the browser:**
1. **Build tlsn-js**
```bash
cd ..
npm i
npm install
npm run build
npm link
```
2. Build demo prover-ts
2. **Build and start the TypeScript prover demo**
```bash
cd prover-ts
npm i
npm link
npm install
npm run dev
```
3. Open <http://localhost:3456/> and click **Start Prover**
3. **Open the demo in your browser:**
Go to [http://localhost:8080/](http://localhost:8080/) and click **Start Prover**.
---
**Tip:**
If you encounter issues, make sure all dependencies are installed and the websocket proxy is running before starting the browser demo.

7
demo/interactive-demo/prover-ts/.gitignore vendored
View File

@@ -1 +1,8 @@
package-lock.json
# Playwright
node_modules/
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/

2
demo/interactive-demo/prover-ts/index.ejs
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React/Typescript Example</title>
<title>TLSNotary React TypeScript Demo</title>
</head>
<body>

4
demo/interactive-demo/prover-ts/package.json
View File

@@ -4,7 +4,9 @@
"description": "",
"main": "webpack.js",
"scripts": {
"dev": "webpack-dev-server --config webpack.js"
"dev": "webpack-dev-server --config webpack.js",
"start": "webpack serve --config webpack.js",
"test": "npx playwright test"
},
"author": "",
"license": "ISC",

90
demo/interactive-demo/prover-ts/playwright.config.ts Normal file
View File

@@ -0,0 +1,90 @@
import { defineConfig, devices } from '@playwright/test';
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });
/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './tests',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: 'http://localhost:8080',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},
/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
// {
// name: 'firefox',
// use: { ...devices['Desktop Firefox'] },
// },
// {
// name: 'webkit',
// use: { ...devices['Desktop Safari'] },
// },
/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },
/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],
/* Run your local dev server before starting the tests */
webServer: [
{
command: 'npm run start',
url: 'http://localhost:8080',
reuseExistingServer: !process.env.CI,
},
{
command: 'wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443',
reuseExistingServer: true,
},
{
command: 'cargo run --release',
cwd: '../verifier-rs',
reuseExistingServer: true,
}
]
});

2
demo/interactive-demo/prover-ts/src/app.tsx
View File

@@ -224,7 +224,7 @@ function App(): ReactElement {
</div>
) : (
<div className="bg-gray-100 border border-gray-300 p-4 rounded-lg mt-4">
<pre className="text-left text-sm text-gray-800 whitespace-pre-wrap overflow-auto">
<pre data-testid="proof-data" className="text-left text-sm text-gray-800 whitespace-pre-wrap overflow-auto">
{JSON.stringify(result, null, 2)}
</pre>
</div>

16
demo/interactive-demo/prover-ts/tests/demo-flow.spec.ts Normal file
View File

@@ -0,0 +1,16 @@
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveTitle(/TLSNotary/)
});
test('run demo', async ({ page }) => {
await page.goto('/');
// Click the get started link.
await page.getByRole('button', { name: 'Start Prover' }).click();
await expect(page.getByTestId('proof-data')).toContainText('Unredacted data successfully revealed to Verifier', { timeout: 60000 });
});

7
demo/react-ts-webpack/.gitignore vendored
View File

@@ -1 +1,8 @@
package-lock.json
# Playwright
node_modules/
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/

79
demo/react-ts-webpack/README.md Normal file
View File

@@ -0,0 +1,79 @@
# TLSNotary in React/TypeScript with `tlsn-js`
This demo shows how to use TLSNotary with a delegated verifier, also known as a **notary**.
In this demo, we request JSON data from a GitHub page, use `tlsn-js` to notarize the TLS request with TLSNotary, and display the attestation and revealed data.
> **Note:**
> This demo uses TLSNotary to notarize **public** data for simplicity. In real-world applications, TLSNotary is especially valuable for notarizing private and sensitive data.
---
## Setup
Before running the demo, you need to start a local notary server and a websocket proxy. If you prefer to use the hosted test servers from PSE, see the section below.
### Websocket Proxy
Browsers cannot make raw TCP connections, so a websocket proxy server is required.
1. **Install [wstcp](https://github.com/sile/wstcp):**
```sh
cargo install wstcp
```
2. **Run a websocket proxy for `https://raw.githubusercontent.com`:**
```sh
wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443
```
> Note: The `raw.githubusercontent.com:443` argument specifies the server used in this quick start.
### Run a Local Notary Server
You also need to run a local notary server for this demo.
- **Using Git and Rust Cargo:**
```sh
git clone https://github.com/tlsnotary/tlsn.git
cargo run --release --bin notary-server
```
- **Using Docker (from the root of the tlsn-js repo):**
```sh
npm run notary
```
The notary server will now be running in the background, waiting for connections.
---
### Use the PSE Web Proxy and Notary
If you want to use the hosted PSE notary and proxy:
1. Open `app.tsx` in your editor.
2. Replace the notary URL:
```ts
notaryUrl: 'https://notary.pse.dev/v0.1.0-alpha.10',
```
This uses the [PSE](https://pse.dev) notary server to notarize the API request. You can use a different or [local notary](#run-a-local-notary-server); a local server will be faster due to the high bandwidth and low network latency.
3. Replace the websocket proxy URL:
```ts
websocketProxyUrl: 'wss://notary.pse.dev/proxy?token=raw.githubusercontent.com',
```
This uses a proxy hosted by [PSE](https://pse.dev). You can use a different or local proxy if you prefer.
---
## Run the Demo
1. **Install dependencies:**
```sh
npm i
```
2. **Start the Webpack Dev Server:**
```sh
npm run dev
```
3. **Open the demo in your browser:**
Go to [http://localhost:8080](http://localhost:8080)
4. **Click the "Start demo" button**
5. **Open Developer Tools** and monitor the console logs
œœ

8
demo/react-ts-webpack/index.ejs
View File

@@ -4,13 +4,13 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React/Typescrip Example</title>
<title>TLSNotary React TypeScript Demo</title>
</head>
<body>
<script>
</script>
<div id="root"></div>
<script>
</script>
<div id="root"></div>
</body>
</html>

10
demo/react-ts-webpack/package.json
View File

@@ -5,16 +5,18 @@
"main": "webpack.js",
"scripts": {
"dev": "webpack-dev-server --config webpack.js",
"build": "webpack --config webpack.js"
"build": "webpack --config webpack.js",
"start": "webpack serve --config webpack.js",
"test": "npx playwright test"
},
"author": "",
"license": "ISC",
"dependencies": {
"comlink": "^4.4.1",
"css-loader": "^7.1.2",
"http-parser-js": "^0.5.9",
"postcss": "^8.4.49",
"postcss-loader": "^8.1.1",
"http-parser-js": "^0.5.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-loader-spinner": "^6.1.6",
@@ -25,6 +27,8 @@
"tlsn-js": "../../"
},
"devDependencies": {
"@playwright/test": "^1.52.0",
"@types/node": "^22.15.18",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"babel-loader": "^9.1.3",
@@ -41,4 +45,4 @@
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
}
}

85
demo/react-ts-webpack/playwright.config.ts Normal file
View File

@@ -0,0 +1,85 @@
import { defineConfig, devices } from '@playwright/test';
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });
/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './tests',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: 'http://localhost:8080',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},
/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
// {
// name: 'firefox',
// use: { ...devices['Desktop Firefox'] },
// },
// {
// name: 'webkit',
// use: { ...devices['Desktop Safari'] },
// },
/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },
/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],
/* Run your local dev server before starting the tests */
webServer: [
{
command: 'npm run start',
url: 'http://localhost:8080',
reuseExistingServer: !process.env.CI,
},
{
command: 'wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443',
reuseExistingServer: true,
}
]
});

5
demo/react-ts-webpack/src/app.tsx
View File

@@ -140,6 +140,7 @@ function App(): ReactElement {
const proof = await (Prover.notarize as typeof TProver.notarize)({
notaryUrl: notaryUrl,
websocketProxyUrl: websocketProxyUrl,
maxRecvData: 2048,
url: serverUrl,
method: 'GET',
headers: {
@@ -285,7 +286,7 @@ function App(): ReactElement {
<summary className="cursor-pointer text-slate-600">
View Proof
</summary>
<pre
<pre data-testid="proof-data"
className="mt-2 p-2 bg-slate-100 rounded text-sm text-slate-800 overflow-auto"
style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}
>
@@ -301,7 +302,7 @@ function App(): ReactElement {
) : !result ? (
<i className="text-slate-500">verifying</i>
) : (
<pre
<pre data-testid="verify-data"
className="mt-2 p-2 bg-slate-100 rounded text-sm text-slate-800 overflow-auto"
style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}
>

36
demo/react-ts-webpack/tests/demo-flow.spec.ts Normal file
View File

@@ -0,0 +1,36 @@
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveTitle(/TLSNotary React TypeScript Demo/)
});
test('run demo (normal)', async ({ page }) => {
test.setTimeout(60000);
await page.goto('/');
// Click the get started link.
await page.getByRole('button', { name: 'Start Demo (Normal config)' }).click();
await expect(page.getByTestId('proof-data')).toContainText('"data":', { timeout: 60000 });
let verify_data = await page.getByTestId('verify-data').innerText();
expect(verify_data).toContain('"serverName": "raw.githubusercontent.com"');
expect(verify_data).toContain('John Doe');
});
test('run demo (helper)', async ({ page }) => {
test.setTimeout(60000);
await page.goto('/');
// Click the get started link.
await page.getByRole('button', { name: 'Start Demo 2 (With helper method)' }).click();
await expect(page.getByTestId('proof-data')).toContainText('"data":', { timeout: 60000 });
// await page.screenshot({ path: 'screenshot.png', fullPage: true });
let verify_data = await page.getByTestId('verify-data').innerText();
expect(verify_data).toContain('"serverName": "raw.githubusercontent.com"');
expect(verify_data).toContain('"recv"');
});

7
demo/web-to-web-p2p/.gitignore vendored
View File

@@ -1 +1,8 @@
package-lock.json
# Playwright
node_modules/
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/

2
demo/web-to-web-p2p/README.md
View File

@@ -12,7 +12,7 @@ In this demo, the two web clients run in the same browser page (`./src/app.tsx`)
npm i
npm run dev
```
2. Open <http://localhost:3456/>
2. Open <http://localhost:8080/>
3. Click the **Start Demo** button
The Prover window logs the Prover's output, the Verifier logs the Verifier's output. In the console view you can see the websocket log.

8
demo/web-to-web-p2p/index.ejs
View File

@@ -4,13 +4,13 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React/Typescrip Example</title>
<title>Web-to-Web P2P Demo</title>
</head>
<body>
<script>
</script>
<div id="root"></div>
<script>
</script>
<div id="root"></div>
</body>
</html>

6
demo/web-to-web-p2p/package.json
View File

@@ -7,7 +7,9 @@
"dev:server": "node ./server/index.js",
"dev:ui": "webpack-dev-server --config webpack.js",
"dev": "concurrently npm:dev:ui npm:dev:server",
"build": "webpack --config webpack.js"
"build": "webpack --config webpack.js",
"start:ui": "webpack serve --config webpack.js",
"test": "npm run build && npx playwright test"
},
"author": "",
"license": "ISC",
@@ -45,4 +47,4 @@
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
}
}

90
demo/web-to-web-p2p/playwright.config.ts Normal file
View File

@@ -0,0 +1,90 @@
import { defineConfig, devices } from '@playwright/test';
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });
/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './tests',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: 'http://localhost:8080',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},
/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
// {
// name: 'firefox',
// use: { ...devices['Desktop Firefox'] },
// },
// {
// name: 'webkit',
// use: { ...devices['Desktop Safari'] },
// },
/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },
/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],
/* Run your local dev server before starting the tests */
webServer: [
{
command: 'npm run start:ui',
url: 'http://localhost:8080',
reuseExistingServer: !process.env.CI,
},
{
command: 'wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443',
reuseExistingServer: true,
},
{
command: 'node ./server/index.js',
port: 3001,
reuseExistingServer: !process.env.CI,
}
]
});

4
demo/web-to-web-p2p/src/app.tsx
View File

@@ -243,6 +243,7 @@ function App(): ReactElement {
{proverMessages.map((m, index) => (
<span
key={index}
data-testid="prover-data"
className="px-3 py-1 text-slate-600 break-all"
>
{m}
@@ -257,6 +258,7 @@ function App(): ReactElement {
{verifierMessages.map((m, index) => (
<span
key={index}
data-testid="verifier-data"
className="px-3 py-1 text-slate-600 break-all"
>
{m}
@@ -271,7 +273,7 @@ function App(): ReactElement {
disabled={!ready || started}
onClick={start}
>
<div className="flex items-center">
<div data-testid="start" className="flex items-center">
{ready && !started ? (
<>Start Demo</>
) : (

24
demo/web-to-web-p2p/tests/demo-flow.spec.ts Normal file
View File

@@ -0,0 +1,24 @@
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveTitle(/Web-to-Web P2P Demo/)
});
test('run web-to-web p2p demo', async ({ page }) => {
await page.goto('/');
await page.getByTestId('start').click();
await expect(page.getByTestId('start')).toContainText('Start Demo', { timeout: 60000 });
const proverMessages = await page.getByTestId('prover-data').allTextContents();
expect(proverMessages.some(text => text.includes('Transcript received'))).toBe(true);
// console.log('Verifier Messages:', proverMessages);
expect(proverMessages.some(text => text.includes('"name": "John Doe",'))).toBe(true);
expect(proverMessages.some(text => text.includes('"address": {'))).toBe(true);
const verifierMessages = await page.getByTestId('verifier-data').allTextContents();
expect(verifierMessages.some(text => text.includes('Verification completed'))).toBe(true);
expect(verifierMessages.some(text => text.includes('***"name": "John Doe"*************************"street": "123 Elm Street"***'))).toBe(true);
});

1237
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
package.json
View File

@@ -23,13 +23,12 @@
"lint:eslint": "eslint . --fix",
"lint:tsc": "tsc --noEmit",
"lint": "concurrently npm:lint:tsc npm:lint:eslint",
"run:spec": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' mocha -r ts-node/register 'test/specs/*.ts'",
"run:e2e": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' mocha -r ts-node/register 'test/testRunner.ts'",
"test": "npm run build:test && npm run run:e2e",
"test": "playwright test",
"notary": "docker run --platform=linux/amd64 -p 7047:7047 --rm ghcr.io/tlsnotary/tlsn/notary-server:v0.1.0-alpha.10 notary-server --tls-enabled=false"
},
"devDependencies": {
"@types/mocha": "^10.0.6",
"@playwright/test": "^1.52.0",
"@types/node": "^22.15.18",
"@types/serve-handler": "^6.1.4",
"browserify": "^17.0.0",
"buffer": "^6.0.3",
@@ -43,20 +42,17 @@
"eslint-plugin-prettier": "^5.0.0",
"file-loader": "^5.0.2",
"html-webpack-plugin": "~5.3.2",
"https-browserify": "^1.0.0",
"http-parser-js": "^0.5.9",
"https-browserify": "^1.0.0",
"image-webpack-loader": "^6.0.0",
"js-yaml": "^4.1.0",
"mocha": "^10.2.0",
"node-loader": "^0.6.0",
"prettier": "^3.0.2",
"process": "^0.11.10",
"puppeteer": "^24.1.0",
"serve": "14.2.1",
"serve-handler": "^6.1.5",
"stream-browserify": "^3.0.0",
"ts-loader": "^6.2.1",
"ts-mocha": "^10.0.0",
"ts-node": "^10.9.2",
"typescript": "^4.9.5",
"typescript-eslint": "^7.4.0",

26
playwright-test/full-integration.spec.ts Normal file
View File

@@ -0,0 +1,26 @@
import { test, expect } from '@playwright/test';
test('full-integration', async ({ page }) => {
// log browser console messages
page.on('console', (msg) => {
console.log(`[BROWSER ${msg.type().toUpperCase()}] ${msg.text()}`);
});
await page.goto('/full-integration');
await expect(page.getByTestId('full-integration')).toHaveText(/\{.*\}/s, { timeout: 60000 });
const json = await page.getByTestId('full-integration').innerText();
const { sent, recv, server_name, version, meta } = JSON.parse(json);
expect(version).toBe('0.1.0-alpha.10');
expect(new URL(meta.notaryUrl!).protocol === 'http:');
expect(server_name).toBe('raw.githubusercontent.com');
expect(sent).toContain('host: raw.githubusercontent.com');
expect(sent).not.toContain('secret: test_secret');
expect(recv).toContain('"id": 1234567890');
expect(recv).toContain('"city": "Anytown"');
expect(recv).toContain('"postalCode": "12345"');
});

20
playwright-test/simple-verify.spec.ts Normal file
View File

@@ -0,0 +1,20 @@
import { test, expect } from '@playwright/test';
test('simple verify', async ({ page }) => {
// log browser console messages
page.on('console', (msg) => {
console.log(`[BROWSER ${msg.type().toUpperCase()}] ${msg.text()}`);
});
await page.goto('/simple-verify');
await expect(page.getByTestId('simple-verify')).toHaveText(/\{.*\}/s);
const json = await page.getByTestId('simple-verify').innerText();
const { sent, recv } = JSON.parse(json);
expect(sent).toContain('host: raw.githubusercontent.com');
expect(recv).toContain('"name": "John Doe"');
expect(recv).toContain('"city": "Anytown"');
expect(recv).toContain('"id": **********,');
});

85
playwright.config.ts Normal file
View File

@@ -0,0 +1,85 @@
import { defineConfig, devices } from '@playwright/test';
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });
/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './playwright-test',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: 'http://localhost:3001',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},
/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
// {
// name: 'firefox',
// use: { ...devices['Desktop Firefox'] },
// },
// {
// name: 'webkit',
// use: { ...devices['Desktop Safari'] },
// },
/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },
/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],
/* Run your local dev server before starting the tests */
webServer: [
{
command: 'npm run build:test && npm run serve:test',
url: 'http://localhost:3001',
reuseExistingServer: !process.env.CI,
},
{
command: 'wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443',
reuseExistingServer: true,
},
]
});

111
readme.md
View File

@@ -1,43 +1,42 @@
![MIT licensed][mit-badge]
![MIT licensed][mit-badge]
![Apache licensed][apache-badge]
[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg
[mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg
[apache-badge]: https://img.shields.io/github/license/saltstack/salt
# tlsn-js
NPM Modules for proving and verifying using TLSNotary in the browser.
The prover requires a [notary-server](https://github.com/tlsnotary/notary-server) and a websocket proxy.
NPM modules for proving and verifying using TLSNotary in the browser.
> [!IMPORTANT]
> The primary purpose of `tlsn-js` is to support the development of the [TLSNotary browser extension](https://github.com/tlsnotary/tlsn-extension/).
> `tlsn-js` is developed specifically for **browser environments** and does **not** work in Node.js.
> [!IMPORTANT]
> The primary goal of `tlsn-js` is to support the development of the [TLSNotary browser extension](https://github.com/tlsnotary/tlsn-extension/).
> **Please do not treat this as a public API (yet).**
> [!IMPORTANT]
> `tlsn-js` is developed for the usage of TLSNotary **in the Browser**. This module does not work in `nodejs`.
## License
This repository is licensed under either of
This repository is licensed under either:
- [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0)
- [MIT license](http://opensource.org/licenses/MIT)
- [MIT License](http://opensource.org/licenses/MIT)
at your option.
...at your option.
## Examples
`tlsn-js` can be used in many different modes, depending on your use case.
`tlsn-js` can be used in several modes depending on your use case.
The `./demo` folder contains three demos of `tlsn-js`:
The `./demo` folder contains three demos:
* `react-ts-webpack`: create an attestation with a Notary and render the result.
* `interactive-demo`: prove data interactively to a Verifier.
* `web-to-web-p2p`: prove data between two peers, in the browser.
- `react-ts-webpack`: Create an attestation with a Notary and render the result.
- `interactive-demo`: Prove data interactively to a Verifier.
- `web-to-web-p2p`: Prove data between two browser peers.
## Running a local websocket proxy
## Running a Local WebSocket Proxy
In the demos, we attest data from `https://raw.githubusercontent.com`. Because the browser does not allow for TCP connections, you need to set up a websocket proxy:
In the demos, we attest data from `https://raw.githubusercontent.com`. Since browsers do not support raw TCP connections, a WebSocket proxy is required:
1. Install [wstcp](https://github.com/sile/wstcp):
@@ -47,33 +46,42 @@ In the demos, we attest data from `https://raw.githubusercontent.com`. Because t
| brew | `brew install wstcp` |
| source | https://github.com/sile/wstcp |
2. Run a websocket proxy for `https://raw.githubusercontent.com`:
```sh
wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443
```
2. Run a WebSocket proxy for `https://raw.githubusercontent.com`:
```sh
wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443
```
## Install as NPM Package
```sh
npm install tlsn-js
```
# Development
## Development
This library is a JS wrapper for `tlsn-wasm`.
This library wraps the `tlsn-wasm` module.
To work on `tlsn-wasm` and `tlsn-js` at the same time, replace the "tlsn-wasm" dependency in `package.json` with:
To work on both `tlsn-wasm` and `tlsn-js` locally, update `package.json`:
```json
"tlsn-wasm": "./tlsn-wasm/pkg"
```
"tlsn-wasm": "./tlsn-wasm/pkg"
```
and run `npm run build:wasm` to build `tlsn-wasm` locally.
Next, run:
Then build `tlsn-wasm`:
```sh
npm run build:wasm
```
Next:
```sh
npm install
npm run test
```
Note: if you want to switch back to a build with the version from npm, make sure to reset/remove `package-lock.json`, or it will keep using the local link.
> ℹ️ To switch back to the npm-published version of `tlsn-wasm`, delete or reset `package-lock.json` to remove the local path reference.
## Build for NPM
@@ -82,9 +90,42 @@ npm install
npm run build
```
## Adding a new test
1. Create a new `new-test.spec.ts` file in the `test/` directory.
2. Add your spec file to the entry object in `webpack.web.dev.config.js`.
3. Add a new `div` block to `test/test.ejs` like this: `<div>Testing "new-test":<div id="new-test"></div></div>`. The `div` id must be the same as the filename.
## Testing
Testing is slightly complex due to the need for browser-based workers.
- Tests live in the `test/` directory.
- The `tests/` directory contains a Playwright test runner that opens a Chromium browser and runs the actual test page.
Some tests require a running Notary. You can start one via Docker:
```sh
npm run notary
```
### Adding a New `tlsn-js` Test
1. Create a `new-test.spec.ts` file in the `test/` directory.
2. Add your spec file to the `entry` object in `webpack.web.dev.config.js`.
3. Create a corresponding `new-test.spec.ts` file in the `playwright-test/` directory.
4. Add an `expect()` call for it in `tests/test.spec.ts`.
### Testing the Demos
Playwright is also used to test the demos.
```sh
npm install
npm run test
```
- View tests in the browser:
```sh
npx playwright test --ui
```
- Debug tests:
```sh
npx playwright test --debug
```

20
test/e2e/full-integration.spec.ts
View File

@@ -8,7 +8,6 @@ import {
Transcript,
} from '../../src/lib';
import * as Comlink from 'comlink';
import { assert } from '../utils';
import { HTTPParser } from 'http-parser-js';
const { init, Prover, Presentation }: any = Comlink.wrap(
@@ -89,8 +88,7 @@ const { init, Prover, Presentation }: any = Comlink.wrap(
console.log('presentation:', await presentation.serialize());
console.timeEnd('prove');
const json = await presentation.json();
assert(json.version === '0.1.0-alpha.10');
assert(new URL(json.meta.notaryUrl!).protocol === 'http:');
console.time('verify');
const { transcript: partialTranscript, server_name } =
@@ -109,19 +107,17 @@ const { init, Prover, Presentation }: any = Comlink.wrap(
console.log("Sent:", sentStr);
console.log("Received:", recvStr);
assert(sentStr.includes('host: raw.githubusercontent.com'));
assert(!sentStr.includes('secret: test_secret'));
assert(recvStr.includes('"id": 1234567890'));
assert(recvStr.includes('"city": "Anytown"'));
assert(recvStr.includes('"postalCode": "12345"'));
assert(server_name === 'raw.githubusercontent.com');
// @ts-ignore
document.getElementById('full-integration').textContent = 'OK';
document.getElementById('full-integration').textContent = JSON.stringify({
sent: sentStr,
recv: recvStr,
version: json.version,
meta: json.meta,
server_name
}, null, 2);
} catch (err) {
console.log('caught error from wasm');
console.error(err);
// @ts-ignore
document.getElementById('full-integration').textContent = err.message;
}

14
test/e2e/simple-verify.spec.ts
View File

@@ -2,7 +2,6 @@ import { Presentation as _Presentation } from '../../src/lib';
// import { assert } from '../utils';
import * as Comlink from 'comlink';
import { Transcript } from '../../src/lib';
import { assert } from '../utils';
const { init, Presentation }: any = Comlink.wrap(
// @ts-ignore
@@ -26,16 +25,11 @@ const { init, Presentation }: any = Comlink.wrap(
const sent = transcript.sent();
const recv = transcript.recv();
console.log('sent', sent);
console.log('recv', recv);
assert(sent.includes('host: raw.githubusercontent.com'));
assert(recv.includes('"name": "John Doe"'));
assert(recv.includes('"city": "Anytown"'));
// @ts-ignore
document.getElementById('simple-verify').textContent = 'OK';
document.getElementById('simple-verify').textContent = JSON.stringify({
sent,
recv
}, null, 2);
} catch (err) {
console.log('caught error from wasm');
console.error(err);

90
test/specs/transcript.ts
View File

@@ -1,90 +0,0 @@
import { describe, it } from 'mocha';
import * as assert from 'assert';
import { Transcript } from '../../src/transcript';
describe('Transcript parsing', () => {
it('should parse transcript correctly', async () => {
const transcript = new Transcript({ sent: swapiSent, recv: swapiRecv });
assert.strictEqual(
Buffer.from(transcript.raw.sent).toString('utf-8'),
'GET https://swapi.dev/api/people/1 HTTP/1.1\r\nconnection: close\r\ncontent-length: 25\r\ncontent-type: application/json\r\nhost: swapi.dev\r\n\r\n{"hello":"world","one":1}',
);
assert.strictEqual(
Buffer.from(transcript.raw.recv).toString('utf-8'),
'HTTP/1.1 200 OK\r\nServer: nginx/1.16.1\r\nDate: Fri, 07 Feb 2025 07:37:11 GMT\r\nContent-Type: application/json\r\nTransfer-Encoding: chunked\r\nConnection: close\r\nVary: Accept, Cookie\r\nX-Frame-Options: SAMEORIGIN\r\nETag: \"ee398610435c328f4d0a4e1b0d2f7bbc\"\r\nAllow: GET, HEAD, OPTIONS\r\nStrict-Transport-Security: max-age=15768000\r\n\r\n287\r\n{\"name\":\"Luke Skywalker\",\"height\":\"172\",\"mass\":\"77\",\"hair_color\":\"blond\",\"skin_color\":\"fair\",\"eye_color\":\"blue\",\"birth_year\":\"19BBY\",\"gender\":\"male\",\"homeworld\":\"https://swapi.dev/api/planets/1/\",\"films\":[\"https://swapi.dev/api/films/1/\",\"https://swapi.dev/api/films/2/\",\"https://swapi.dev/api/films/3/\",\"https://swapi.dev/api/films/6/\"],\"species\":[],\"vehicles\":[\"https://swapi.dev/api/vehicles/14/\",\"https://swapi.dev/api/vehicles/30/\"],\"starships\":[\"https://swapi.dev/api/starships/12/\",\"https://swapi.dev/api/starships/22/\"],\"created\":\"2014-12-09T13:50:51.644000Z\",\"edited\":\"2014-12-20T21:17:56.891000Z\",\"url\":\"https://swapi.dev/api/people/1/\"}\r\n0\r\n\r\n',
);
});
});
const swapiRecv = [
72, 84, 84, 80, 47, 49, 46, 49, 32, 50, 48, 48, 32, 79, 75, 13, 10, 83, 101,
114, 118, 101, 114, 58, 32, 110, 103, 105, 110, 120, 47, 49, 46, 49, 54, 46,
49, 13, 10, 68, 97, 116, 101, 58, 32, 70, 114, 105, 44, 32, 48, 55, 32, 70,
101, 98, 32, 50, 48, 50, 53, 32, 48, 55, 58, 51, 55, 58, 49, 49, 32, 71, 77,
84, 13, 10, 67, 111, 110, 116, 101, 110, 116, 45, 84, 121, 112, 101, 58, 32,
97, 112, 112, 108, 105, 99, 97, 116, 105, 111, 110, 47, 106, 115, 111, 110,
13, 10, 84, 114, 97, 110, 115, 102, 101, 114, 45, 69, 110, 99, 111, 100, 105,
110, 103, 58, 32, 99, 104, 117, 110, 107, 101, 100, 13, 10, 67, 111, 110, 110,
101, 99, 116, 105, 111, 110, 58, 32, 99, 108, 111, 115, 101, 13, 10, 86, 97,
114, 121, 58, 32, 65, 99, 99, 101, 112, 116, 44, 32, 67, 111, 111, 107, 105,
101, 13, 10, 88, 45, 70, 114, 97, 109, 101, 45, 79, 112, 116, 105, 111, 110,
115, 58, 32, 83, 65, 77, 69, 79, 82, 73, 71, 73, 78, 13, 10, 69, 84, 97, 103,
58, 32, 34, 101, 101, 51, 57, 56, 54, 49, 48, 52, 51, 53, 99, 51, 50, 56, 102,
52, 100, 48, 97, 52, 101, 49, 98, 48, 100, 50, 102, 55, 98, 98, 99, 34, 13,
10, 65, 108, 108, 111, 119, 58, 32, 71, 69, 84, 44, 32, 72, 69, 65, 68, 44,
32, 79, 80, 84, 73, 79, 78, 83, 13, 10, 83, 116, 114, 105, 99, 116, 45, 84,
114, 97, 110, 115, 112, 111, 114, 116, 45, 83, 101, 99, 117, 114, 105, 116,
121, 58, 32, 109, 97, 120, 45, 97, 103, 101, 61, 49, 53, 55, 54, 56, 48, 48,
48, 13, 10, 13, 10, 50, 56, 55, 13, 10, 123, 34, 110, 97, 109, 101, 34, 58,
34, 76, 117, 107, 101, 32, 83, 107, 121, 119, 97, 108, 107, 101, 114, 34, 44,
34, 104, 101, 105, 103, 104, 116, 34, 58, 34, 49, 55, 50, 34, 44, 34, 109, 97,
115, 115, 34, 58, 34, 55, 55, 34, 44, 34, 104, 97, 105, 114, 95, 99, 111, 108,
111, 114, 34, 58, 34, 98, 108, 111, 110, 100, 34, 44, 34, 115, 107, 105, 110,
95, 99, 111, 108, 111, 114, 34, 58, 34, 102, 97, 105, 114, 34, 44, 34, 101,
121, 101, 95, 99, 111, 108, 111, 114, 34, 58, 34, 98, 108, 117, 101, 34, 44,
34, 98, 105, 114, 116, 104, 95, 121, 101, 97, 114, 34, 58, 34, 49, 57, 66, 66,
89, 34, 44, 34, 103, 101, 110, 100, 101, 114, 34, 58, 34, 109, 97, 108, 101,
34, 44, 34, 104, 111, 109, 101, 119, 111, 114, 108, 100, 34, 58, 34, 104, 116,
116, 112, 115, 58, 47, 47, 115, 119, 97, 112, 105, 46, 100, 101, 118, 47, 97,
112, 105, 47, 112, 108, 97, 110, 101, 116, 115, 47, 49, 47, 34, 44, 34, 102,
105, 108, 109, 115, 34, 58, 91, 34, 104, 116, 116, 112, 115, 58, 47, 47, 115,
119, 97, 112, 105, 46, 100, 101, 118, 47, 97, 112, 105, 47, 102, 105, 108,
109, 115, 47, 49, 47, 34, 44, 34, 104, 116, 116, 112, 115, 58, 47, 47, 115,
119, 97, 112, 105, 46, 100, 101, 118, 47, 97, 112, 105, 47, 102, 105, 108,
109, 115, 47, 50, 47, 34, 44, 34, 104, 116, 116, 112, 115, 58, 47, 47, 115,
119, 97, 112, 105, 46, 100, 101, 118, 47, 97, 112, 105, 47, 102, 105, 108,
109, 115, 47, 51, 47, 34, 44, 34, 104, 116, 116, 112, 115, 58, 47, 47, 115,
119, 97, 112, 105, 46, 100, 101, 118, 47, 97, 112, 105, 47, 102, 105, 108,
109, 115, 47, 54, 47, 34, 93, 44, 34, 115, 112, 101, 99, 105, 101, 115, 34,
58, 91, 93, 44, 34, 118, 101, 104, 105, 99, 108, 101, 115, 34, 58, 91, 34,
104, 116, 116, 112, 115, 58, 47, 47, 115, 119, 97, 112, 105, 46, 100, 101,
118, 47, 97, 112, 105, 47, 118, 101, 104, 105, 99, 108, 101, 115, 47, 49, 52,
47, 34, 44, 34, 104, 116, 116, 112, 115, 58, 47, 47, 115, 119, 97, 112, 105,
46, 100, 101, 118, 47, 97, 112, 105, 47, 118, 101, 104, 105, 99, 108, 101,
115, 47, 51, 48, 47, 34, 93, 44, 34, 115, 116, 97, 114, 115, 104, 105, 112,
115, 34, 58, 91, 34, 104, 116, 116, 112, 115, 58, 47, 47, 115, 119, 97, 112,
105, 46, 100, 101, 118, 47, 97, 112, 105, 47, 115, 116, 97, 114, 115, 104,
105, 112, 115, 47, 49, 50, 47, 34, 44, 34, 104, 116, 116, 112, 115, 58, 47,
47, 115, 119, 97, 112, 105, 46, 100, 101, 118, 47, 97, 112, 105, 47, 115, 116,
97, 114, 115, 104, 105, 112, 115, 47, 50, 50, 47, 34, 93, 44, 34, 99, 114,
101, 97, 116, 101, 100, 34, 58, 34, 50, 48, 49, 52, 45, 49, 50, 45, 48, 57,
84, 49, 51, 58, 53, 48, 58, 53, 49, 46, 54, 52, 52, 48, 48, 48, 90, 34, 44,
34, 101, 100, 105, 116, 101, 100, 34, 58, 34, 50, 48, 49, 52, 45, 49, 50, 45,
50, 48, 84, 50, 49, 58, 49, 55, 58, 53, 54, 46, 56, 57, 49, 48, 48, 48, 90,
34, 44, 34, 117, 114, 108, 34, 58, 34, 104, 116, 116, 112, 115, 58, 47, 47,
115, 119, 97, 112, 105, 46, 100, 101, 118, 47, 97, 112, 105, 47, 112, 101,
111, 112, 108, 101, 47, 49, 47, 34, 125, 13, 10, 48, 13, 10, 13, 10,
];
const swapiSent = [
71, 69, 84, 32, 104, 116, 116, 112, 115, 58, 47, 47, 115, 119, 97, 112, 105,
46, 100, 101, 118, 47, 97, 112, 105, 47, 112, 101, 111, 112, 108, 101, 47, 49,
32, 72, 84, 84, 80, 47, 49, 46, 49, 13, 10, 99, 111, 110, 110, 101, 99, 116,
105, 111, 110, 58, 32, 99, 108, 111, 115, 101, 13, 10, 99, 111, 110, 116, 101,
110, 116, 45, 108, 101, 110, 103, 116, 104, 58, 32, 50, 53, 13, 10, 99, 111,
110, 116, 101, 110, 116, 45, 116, 121, 112, 101, 58, 32, 97, 112, 112, 108,
105, 99, 97, 116, 105, 111, 110, 47, 106, 115, 111, 110, 13, 10, 104, 111,
115, 116, 58, 32, 115, 119, 97, 112, 105, 46, 100, 101, 118, 13, 10, 13, 10,
123, 34, 104, 101, 108, 108, 111, 34, 58, 34, 119, 111, 114, 108, 100, 34, 44,
34, 111, 110, 101, 34, 58, 49, 125,
];

16
test/test.ejs
View File

@@ -5,19 +5,21 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json">
<title>tlsn-js development</title>
<title>
Testing <%= htmlWebpackPlugin.options.testName || 'test' %>
</title>
</head>
<body>
<script>
global = globalThis //<- this should be enough
</script>
<div>Testing "full-integration":
<div id="full-integration"></div>
</div>
<div>Testing "simple-verify":
<div id="simple-verify"></div>
</div>
<h1>Testing "<%= htmlWebpackPlugin.options.testName || 'unknown' %>":</h1>
<pre>
<div id="<%= htmlWebpackPlugin.options.testName || 'test' %>"
data-testid="<%= htmlWebpackPlugin.options.testName || 'test' %>">
</div>
</pre>
</body>
</html>

125
test/testRunner.ts
View File

@@ -1,125 +0,0 @@
import puppeteer, { Browser, LaunchOptions, Page } from 'puppeteer';
import { describe, it, before, after } from 'mocha';
const assert = require('assert');
import { exec, ChildProcess } from 'node:child_process';
import * as fs from 'fs';
import path from 'path';
const timeout = 300000;
// puppeteer options
let opts: LaunchOptions = {
headless: !!process.env.HEADLESS ? true : false,
slowMo: 100,
timeout: timeout,
args: ['--no-sandbox', '--disable-setuid-sandbox'],
};
if (process.env.CHROME_PATH) {
opts = {
...opts,
executablePath: process.env.CHROME_PATH,
};
}
let browser: Browser;
let page: Page;
let server: ChildProcess;
const waitForNotaryServer = async () => {
// wait for the notary server to be ready
while (true) {
try {
const response = await fetch('http://127.0.0.1:7047/info');
if (response.ok) {
return;
}
} catch (error) {
console.error('Waiting for local notary server...', error);
}
await new Promise((resolve) => setTimeout(resolve, 1000));
}
};
// expose variables
before(async function () {
server = exec('serve --config ../serve.json ./test-build -l 3001');
await waitForNotaryServer();
browser = await puppeteer.launch(opts);
page = await browser.newPage();
// log browser console messages
page.on('console', (msg) => {
console.log(`[BROWSER ${msg.type().toUpperCase()}] ${msg.text()}`);
});
await page.goto('http://127.0.0.1:3001');
});
// close browser and reset global variables
after(async function () {
console.log('Cleaning up:');
try {
server.kill();
console.log('* Stopped Test Web Server ✅');
if (page) {
await page.close();
}
if (browser) {
await browser.close();
const childProcess = browser.process();
if (childProcess) {
childProcess.kill(9);
}
console.log('* Closed browser ✅');
const tests = this.test?.parent?.suites.flatMap((suite) => suite.tests);
const failed = tests!.some((test) => test.state === 'failed');
console.log('tests', tests);
console.log('failed', failed);
process.exit(failed ? 1 : 0);
}
process.exit(1);
} catch (e) {
console.error(e);
process.exit(1);
}
});
describe('tlsn-js test suite', function () {
fs.readdirSync(path.join(__dirname, 'e2e')).forEach((file) => {
const [id] = file.split('.');
it(`Test ID: ${id}`, async function () {
const content = await check(id);
assert.strictEqual(
content,
'OK',
`Test ID: ${id} - Expected 'OK' but got '${content}'`,
);
});
});
});
async function check(testId: string): Promise<string> {
const startTime = Date.now();
const attemptFetchContent = async (): Promise<string> => {
const content = await page.$eval(
`#${testId}`,
(el: any) => el.textContent || '',
);
if (content) return content;
const elapsedTime = Date.now() - startTime;
if (elapsedTime >= timeout) {
throw new Error(
`Timeout: Failed to retrieve content for '#${testId}' within ${timeout} ms.`,
);
}
await new Promise((resolve) => setTimeout(resolve, 1000));
return attemptFetchContent();
};
return attemptFetchContent();
}

3
test/utils.ts
View File

@@ -1,3 +0,0 @@
export function assert(expr: any, msg = 'unknown assertion error') {
if (!Boolean(expr)) throw new Error(msg);
}

67
webpack.web.dev.config.js
View File

@@ -33,14 +33,17 @@ const rules = [
const rendererRules = [];
const entry = {
'full-integration': path.join(__dirname, 'test', 'e2e', 'full-integration.spec.ts'),
'simple-verify': path.join(__dirname, 'test', 'e2e', 'simple-verify.spec.ts'),
// add more entries as needed
};
module.exports = [
{
target: 'web',
mode: isProd ? 'production' : 'development',
entry: {
'full-integration.spec': path.join(__dirname, 'test', 'e2e', 'full-integration.spec.ts'),
'simple-verify': path.join(__dirname, 'test', 'e2e', 'simple-verify.spec.ts'),
},
entry,
output: {
path: __dirname + '/test-build',
publicPath: '/',
@@ -49,25 +52,6 @@ module.exports = [
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.png', '.svg'],
// modules: [
// path.resolve('./node_modules'),
// path.resolve(__dirname, compilerOptions.baseUrl),
// ],
// fallback: {
// browserify: require.resolve('browserify'),
// stream: require.resolve('stream-browserify'),
// path: require.resolve('path-browserify'),
// crypto: require.resolve('crypto-browserify'),
// os: require.resolve('os-browserify/browser'),
// http: require.resolve('stream-http'),
// https: require.resolve('https-browserify'),
// assert: require.resolve('assert/'),
// events: require.resolve('events/'),
// 'ansi-html-community': require.resolve('ansi-html-community'),
// 'html-entities': require.resolve('html-entities'),
// constants: false,
// fs: false,
// },
},
module: {
rules: [...rules, ...rendererRules],
@@ -89,10 +73,41 @@ module.exports = [
},
],
}),
// Generate an HTML file for each entry
...Object.keys(entry).map(
(name) =>
new HtmlWebpackPlugin({
template: './test/test.ejs',
filename: `${name}.html`,
chunks: [name],
inject: true,
testName: name,
})
),
// Add an index page listing all test pages
new HtmlWebpackPlugin({
template: './test/test.ejs',
filename: `index.html`,
inject: true,
templateContent: () => `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tlsn-js test index</title>
</head>
<body>
<h1>tlsn-js test index</h1>
<ul>
${Object.keys(entry)
.map(
(name) =>
`<li><a href="${name}.html">${name}</a></li>`
)
.join('\n')}
</ul>
</body>
</html>
`,
filename: 'index.html',
inject: false,
}),
],
stats: 'minimal',