Now that Kitten¹ is rather stable, I’ve decided to write some regression tests before refactoring to add class-based route/component support (in addition to the current—easy to get started with/use—function-based workflow).
I tried using Playwright but it’s quite heavy and not quite right for my needs (Kitten is more than just a server and I need control of it during testing). ~100 lines of code later, I have something that works well using tape and JSDOM :)
![Screenshot of terminal (iTerm on macOS) showing a split-pane layout with code on the left and the results of an `npm run -s t` command on the right.
The results on the right:
🍌️ All tests passing!
Total 8
Passing 8
Failing 0
Duration 2.15 secs
The code on the left:
// @ts-check
import test from 'tape'
import { getDocument } from './helpers/Browser.js'
import { Kitten } from './helpers/Kitten.js'
async function testNthDocumentLoad (t, n) {
const document = await getDocument(t, 'https://localhost')
t.equal(document.title, 'Kitten count example', 'Title is set')
const paragraphs = document.getElementsByTagName('p')
t.equal(paragraphs.length, 1, 'There is one paragraph tag')
t.equal(paragraphs[0]?.innerHTML, '🐱️'.repeat(n), 'Expected number of kittens found')
}
test('kitten count', async t => {
// Start Kitten.
const kitten = await Kitten.serverRunningAt({
path: 'examples/kitten-count',
log: false
})
// Load the document twice and test that the general
// structure and kitten count are as we expect them to be.
await testNthDocumentLoad(t, 1)
await testNthDocumentLoad(t, 2)
// Stop Kitten.
await kitten.stop()
t.end()
})](https://friendica.hellquist.eu/photo/preview/640/3315802 "Screenshot of terminal (iTerm on macOS) showing a split-pane layout with code on the left and the results of an `npm run -s t` command on the right.
The results on the right:
🍌️ All tests passing!
Total 8
Passing 8
Failing 0
Duration 2.15 secs
The code on the left:
// @ts-check
import test from 'tape'
import { getDocument } from './helpers/Browser.js'
import { Kitten } from './helpers/Kitten.js'
async function testNthDocumentLoad (t, n) {
const document = await getDocument(t, 'https://localhost')
t.equal(document.title, 'Kitten count example', 'Title is set')
const paragraphs = document.getElementsByTagName('p')
t.equal(paragraphs.length, 1, 'There is one paragraph tag')
t.equal(paragraphs[0]?.innerHTML, '🐱️'.repeat(n), 'Expected number of kittens found')
}
test('kitten count', async t => {
// Start Kitten.
const kitten = await Kitten.serverRunningAt({
path: 'examples/kitten-count',
log: false
})
// Load the document twice and test that the general
// structure and kitten count are as we expect them to be.
await testNthDocumentLoad(t, 1)
await testNthDocumentLoad(t, 2)
// Stop Kitten.
await kitten.stop()
t.end()
})")
Aral Balkan
in reply to Aral Balkan • • •PS. This is the Browser helper:
codeberg.org/kitten/app/src/br…
And this is the Kitten process helper:
codeberg.org/kitten/app/src/br…
The only thing I’ll eventually need to add is a WebSocket helper so I can mock Kitten’s htmx¹/Streaming HTML² requests and that should give me pretty good coverage without having to resort to orchestrating actual browsers.
(Also, the unit tests are in quite a dismal state so there’s lots to do.)
¹ kitten.small-web.org/tutorials…
² kitten.small-web.org/tutorials…
#Kitten #htmx #testing
app/tests/helpers/Browser.js at regression-tests
Codeberg.org