Skip to content

Instantly share code, notes, and snippets.

@laduke
Last active September 19, 2019 16:49
Show Gist options
  • Save laduke/4ae57d83d40ca0465857cb824bb508ca to your computer and use it in GitHub Desktop.
Save laduke/4ae57d83d40ca0465857cb824bb508ca to your computer and use it in GitHub Desktop.
@xstate/test and vhs-tape
#!/usr/bin/env node
var budo = require('budo')
budo('./test.js', {
live: true,
port: 8000,
open: true
})
.on('connect', function (ev) {
console.log('Server running on %s', ev.uri)
})
.on('update', function (buffer) {
console.log('bundle - %d bytes', buffer.length)
})
#!/usr/bin/env sh
budo --live --open test.js
{
"name": "vhs-tape-xstate-test",
"version": "0.0.1",
"main": "main.js",
"bin": "./bin.js",
"scripts": {
"test": "vhs-tape test.js",
"start": "budo --live --open test.js"
},
"devDependencies": {},
"dependencies": {
"@xstate/test": "^0.1.0",
"budo": "^11.6.3",
"hui": "^1.2.7",
"vhs-tape": "^3.3.0",
"xstate": "^4.7.0-rc3"
}
}
const vhs = require('vhs-tape')
const MorphComponent = require('hui/morph')
const html = require('hui/html')
const { Machine, interpret } = require('xstate')
const { createModel } = require('@xstate/test')
const toggleMachine = Machine({
id: 'toggle',
initial: 'inactive',
states: {
inactive: {
on: {
TOGGLE: 'active'
},
meta: {
test: async t => {
const input = t.element.querySelector('input')
t.notOk(input.checked, 'inactive -> not checked')
}
}
},
active: {
on: {
TOGGLE: 'inactive'
},
meta: {
test: async t => {
const input = t.element.querySelector('input')
t.ok(input.checked, 'active -> checked')
}
}
}
}
})
class Example extends MorphComponent {
constructor (machine) {
super()
this._machine = machine
this._machine
.onTransition(state => {
if (state.changed) {
this.render()
}
})
.start()
}
createElement () {
const checked = this._machine.state.matches('active')
// it won't pass if you send the wrong event
// <div onclick=${() => this._machine.send('BOGGLE')}>
return html`
<div onclick=${() => this._machine.send('TOGGLE')}>
<input type="checkbox" checked=${checked} />
</div>
`
}
onunload () {
this._machine.stop()
}
}
vhs.slow('toggle', async t => {
const toggleModel = createModel(toggleMachine).withEvents({
TOGGLE: {
exec: async t => {
await t.click('div')
}
}
})
const testPlans = toggleModel.getShortestPathPlans()
// const testPlans = toggleModel.getSimplePathPlans()
const exampleComponent = new Example(interpret(toggleMachine))
t.element.appendChild(exampleComponent.element)
await t.onload(exampleComponent.element)
for await (const plan of testPlans) {
for await (const path of plan.paths) {
await path.test(t)
}
}
t.error(toggleModel.testCoverage(), 'it should have full coverage')
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment