node-turbo 1.2.1 → 1.2.2

package/README.md

@@ -56,9 +56,9 @@ node-turbo has been tested with 100% code coverage with the following engines/li
 | Name | Version(s) |
 | :--- | :--- |
 | [Node.js](https://nodejs.org/) | 16.6 - 21.5.0 |
-| [Hotwire Turbo](https://turbo.hotwired.dev/) | 7.3.0 - 8.0.6 |
+| [Hotwire Turbo](https://turbo.hotwired.dev/) | 7.3.0 - 8.0.10 |
 | [Koa](https://koajs.com/) | 2.14.2 - 2.15.3 |
-| [Express](https://expressjs.com/) | 4.18.2 - 4.21.0 |
+| [Express](https://expressjs.com/) | 4.18.2 - 4.21.1 |
 | [ws](https://github.com/websockets/ws) | 8.15.1 -  8.18.0 |
 
 ## API docs

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "node-turbo",
-	"version": "1.2.1",
+	"version": "1.2.2",
 	"description": "A library for Node.js to assist with the server side of 37signals' Hotwire Turbo framework. It provides classes and functions for Web servers and also convenience functions for the frameworks Koa and Express as well as for WebSocket and SSE.",
 	"keywords": [
 		"node",
@@ -48,14 +48,15 @@
 		"#errors": "./lib/errors/index.js"
 	},
 	"scripts": {
-		"test": "NODE_ENV=testing mocha --require \"./test/hooks.js\" \"./test/**/*.test.js\"",
+		"test": "NODE_ENV=testing mocha --require \"./test/hooks.js\" \"./test/unit/**/*.test.js\" \"./test/integration/**/*.test.js\"",
 		"test:unit": "NODE_ENV=testing mocha \"./test/unit/**/*.test.js\"",
 		"test:integration": "NODE_ENV=testing mocha \"./test/integration/**/*.test.js\"",
 		"test:package": "NODE_ENV=testing mocha \"./test/package.test.js\"",
-		"test:all": "NODE_ENV=testing mocha \"./test/**/*.test.js\"",
+		"test:all": "NODE_ENV=testing mocha \"./test/unit/**/*.test.js\" \"./test/integration/**/*.test.js\" \"./test/package.test.js\"",
 		"test:coverage": "c8 -c './.c8rc.json' npm test",
-		"docs": "esdoc -c ./.esdoc.json",
-		"postdocs": "cp -f ./docs/internal/API.md ./docs"
+		"pretest:e2e": "cp -f ./node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js ./test/end2end/static/",
+		"test:e2e": "npx playwright test -c ./test/end2end/playwright.config.js",
+		"test:e2eserver": "node ./test/end2end/server-koa.js"
 	},
 	"dependencies": {
 		"debug": "^4.3.7",
@@ -63,24 +64,21 @@
 		"negotiator": "^0.6.3"
 	},
 	"devDependencies": {
-		"@enterthenamehere/esdoc": "^2.6.0-dev.1",
-		"@enterthenamehere/esdoc-external-nodejs-plugin": "^2.6.0-dev.1",
-		"@enterthenamehere/esdoc-importpath-plugin": "^2.6.0-dev.1",
-		"@enterthenamehere/esdoc-standard-plugin": "^2.6.0-dev.2",
-		"@hotwired/turbo": "^8.0.6",
-		"@vividvisions/esdoc-api-doc-markdown-plugin": "file:../esdoc-api-doc-markdown-plugin",
+		"@hotwired/turbo": "^8.0.10",
+		"@koa/bodyparser": "^5.1.1",
+		"@playwright/test": "^1.48.0",
 		"c8": "^10.1.2",
 		"chai": "^5.1.1",
 		"chai-spies": "^1.1.0",
 		"colorette": "^2.0.20",
 		"eventsource": "^2.0.2",
-		"express": "^4.21.0",
+		"express": "^4.21.1",
 		"git-repo-info": "^2.1.1",
 		"koa": "^2.15.3",
 		"koa-route": "^4.0.1",
 		"koa-static": "^5.0.0",
 		"mocha": "^10.7.3",
-		"node-mocks-http": "^1.16.0",
+		"node-mocks-http": "^1.16.1",
 		"nunjucks": "^3.2.4",
 		"supertest": "^7.0.0",
 		"ws": "^8.18.0"

package/test/end2end/global-setup.js

@@ -0,0 +1,23 @@
+
+import { resolve } from 'node:path';
+import { readFile } from 'node:fs/promises';
+import { green } from 'colorette';
+
+// We're misusing Playwright's global setup functionality to log the 
+// tested version of Hotwire Turbo, since test.beforeAll() can be called
+// multiple times.
+try {
+	const
+		filePath = resolve('./node_modules/@hotwired/turbo/package.json'),
+		contents = await readFile(filePath, { encoding: 'utf8' }),
+		pkg = JSON.parse(contents);
+
+	console.log('–––––––––––––––––––––––––––––––––');
+	console.log(`Testing node-turbo ${green(process.env.npm_package_version)} against Hotwire Turbo ${green(pkg.version)}.`);
+	console.log('–––––––––––––––––––––––––––––––––');
+}
+catch(err) {
+	throw err;
+}
+
+export default () => ({});

package/test/end2end/playwright.config.js

@@ -0,0 +1,26 @@
+
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+	testDir: './tests',
+	outputDir: './test-results',
+	fullyParallel: true,
+	globalSetup: './global-setup.js',
+	use: {
+		baseURL: 'http://127.0.0.1:3000',
+	},
+	webServer: {
+		command: 'npm run test:e2eserver',
+		url: 'http://127.0.0.1:3000/ready',
+		reuseExistingServer: false,
+		stdout: 'ignore',
+		stderr: 'pipe',
+		timeout: 5000
+	},
+	projects: [
+		{
+			name: 'node-turbo e2e tests',
+			use: { ...devices['Desktop Safari'] }
+		}
+	]
+});

package/test/end2end/server-koa.js

@@ -0,0 +1,155 @@
+
+import Koa from 'koa';
+import route from 'koa-route';
+import serve from 'koa-static';
+import bodyParser from '@koa/bodyparser';
+import { turbochargeKoa } from '#koa';
+import { SseTurboStream } from '#sse';
+
+const app = new Koa();
+let ssets;
+
+app.on('error', (err, ctx) => {
+	console.error('Error in Koa:', err);
+});
+
+// Add node-turbo functions to Koa context.
+turbochargeKoa(app);
+
+// Serve static Hotwire Turbo, which gets copied from node_modules before the test.
+app.use(serve('./test/end2end/static'));
+
+// Tell Playwright that this server is ready.
+app.use(route.get('/ready', ctx => {
+	ctx.body = `OK`;
+	ctx.status = 200;
+}));
+
+// Main testing page. 
+app.use(route.get('/test', ctx => {
+	ctx.body = `<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="turbo-prefetch" content="false">
+		<title>node-turbo E2E Tests</title>
+		<script type="module">
+		import * as Turbo from '/turbo.es2017-esm.js';
+		const sse = new EventSource('/sse');
+		Turbo.session.connectStreamSource(sse);
+
+		document.getElementById('sse').addEventListener('click', async e => {
+			// Ignore repsonse.
+			await fetch('/sse-send');
+		});
+		</script>
+	</head>
+	<body>
+		<h1>node-turbo E2E Tests</h1>
+		<turbo-frame id="test-1">
+			<p>preclick</p>
+			<a href="/frame" data-testid="test-1-link">Link</a>
+		</turbo-frame>
+		<form action="/stream" method="POST" enctype="text/vnd.turbo-stream.html" id="test-form">
+			<select name="action" id="select">
+				<option value="append">append</option>
+				<option value="prepend">prepend</option>
+				<option value="replace">replace</option>
+				<option value="update">update</option>
+				<option value="remove">remove</option>
+				<option value="before">before</option>
+				<option value="after">after</option>
+				<option value="refresh">refresh</option>
+			</select>
+			<input type="submit" id="submit">
+		</form>
+		<ul id="stream-response">
+			<li>initial</li>
+		</ul>
+		<div id="sse-response">
+			No SSE response yet.
+		</div>
+		<input id="sse" type="button" value="SSE">
+	</body>
+</html>`;
+	ctx.status = 200;
+}));
+
+// For local use.
+// app.use(async (ctx, next) => {
+// 	console.log(`Request to ${ctx.path} (${ctx.method}).`);
+// 	await next();
+// });
+
+// Turbo Frame response.
+app.use(route.get('/frame', ctx => {
+	if (ctx.isTurboFrameRequest()) {
+		ctx.turboFrame('<p>afterclick</p>');
+	}
+	else {
+		ctx.status = 501;
+	}
+}));
+
+// Initiate Turbo Stream over SSE.
+app.use(route.get('/sse', ctx => {
+	ssets = ctx.sseTurboStream();
+}));
+
+// Send SSE on request (to prevent having to deal with timings).
+app.use(route.get('/sse-send', ctx => {
+	ssets.update('sse-response', 'sse-sent');
+	
+	ctx.status = 200;
+	ctx.body = 'OK';
+}));
+
+// Parse POST body.
+app.use(bodyParser());
+
+// Turbo Stream responses.
+app.use(route.post('/stream', ctx => {
+	if (ctx.isTurboStreamRequest()) {
+		switch (ctx.request.body?.action) {
+			case 'append':
+				ctx.turboStream().append('stream-response', '<li>append</li>');
+				break;
+
+			case 'prepend':
+				ctx.turboStream().prepend('stream-response', '<li>prepend</li>');
+				break;
+
+			case 'replace':
+				ctx.turboStream().replace('stream-response', '<div id="stream-response">replace</div>');
+				break;
+
+			case 'update':
+				ctx.turboStream().update('stream-response', '<li>update</li>');
+				break;
+
+			case 'remove':
+				ctx.turboStream().remove('stream-response');
+				break;
+
+			case 'before':
+				ctx.turboStream().before('stream-response', '<div id="before">before</div>');
+				break;
+
+			case 'after':
+				ctx.turboStream().before('stream-response', '<div id="after">after</div>');
+				break;
+
+			case 'refresh':
+				ctx.turboStream().refresh();
+				break;
+
+			default:
+				throw new Error(`Unknown action: ${ctx.request.body?.action}`);
+		}
+	}
+	else {
+		ctx.status = 501;
+	}
+}));
+
+// Start server.
+app.listen(3000);

package/test/end2end/tests/e2e.test.js

@@ -0,0 +1,96 @@
+
+import { test, expect } from '@playwright/test';
+
+test.describe('Turbo Frame', () => {
+
+	test('updates turbo frame', async ({ page }) => {
+		await page.goto('/test');
+
+		const responsePromise = page.waitForResponse('/frame', { timeout: 3000 });
+		await page.getByTestId('test-1-link').click();
+		const response = await responsePromise;
+
+		await expect(page.locator('#test-1')).toContainText('afterclick');
+	});
+
+});
+
+test.describe('Turbo Stream', () => {
+
+	test.beforeEach(async ({ page }) => {
+		await page.addInitScript(() => {
+			window.addEventListener('turbo:render', e => {
+				window.TURBO_RENDER_EVENT = e.detail.renderMethod;
+			});
+		});
+
+		await page.goto('/test');
+	});
+
+	test('action: append', async ({ page }) => {
+		await page.locator('#select').selectOption('append');
+		await page.locator('#submit').click();
+		await expect(page.locator('ul#stream-response > li')).toContainText([
+			'initial', 
+			'append'
+		]);
+	});
+
+	test('action: prepend', async ({ page }) => {
+		await page.locator('#select').selectOption('prepend');
+		await page.locator('#submit').click();
+		await expect(page.locator('ul#stream-response > li')).toContainText([
+			'prepend',
+			'initial'
+		]);
+	});
+
+	test('action: replace', async ({ page }) => {
+		await page.locator('#select').selectOption('replace');
+		await page.locator('#submit').click();
+		await expect(page.locator('div#stream-response')).toContainText('replace');
+	});
+
+	test('action: update', async ({ page }) => {
+		await page.locator('#select').selectOption('update');
+		await page.locator('#submit').click();
+		await expect(page.locator('ul#stream-response > li')).toHaveCount(1);
+		await expect(page.locator('ul#stream-response > li')).toContainText('update');
+	});
+
+	test('action: remove', async ({ page }) => {
+		await page.locator('#select').selectOption('remove');
+		await page.locator('#submit').click();
+		await expect(page.locator('#stream-response')).toHaveCount(0);
+	});
+
+	test('action: before', async ({ page }) => {
+		await page.locator('#select').selectOption('before');
+		await page.locator('#submit').click();
+		await expect(page.locator('#before')).toHaveCount(1);
+		await expect(page.locator('#before')).toContainText('before');
+	});
+
+	test('action: after', async ({ page }) => {
+		await page.locator('#select').selectOption('after');
+		await page.locator('#submit').click();
+		await expect(page.locator('#after')).toHaveCount(1);
+		await expect(page.locator('#after')).toContainText('after');
+	});
+
+	test('action: refresh', async ({ page }) => {
+		const func = page.waitForFunction(() => (window.TURBO_RENDER_EVENT === 'replace'), { timeout: 3000 });
+
+		await page.locator('#select').selectOption('refresh');
+		await page.locator('#submit').click();
+		await func;
+
+		await expect(page.locator('#select')).toHaveValue('append');
+	});
+
+	test('async (SSE)', async ({ page }) => {
+		await page.locator('#sse').click();
+		await expect(page.locator('#sse-response')).toContainText('sse-sent');
+	});
+
+});