@xstate/test and vhs-tape

README.md

Testing out a test thing

• https://github.com/hyperdivision/vhs-tape
• https://github.com/hyperdivision/hui
• https://github.com/davidkpiano/xstate/tree/master/packages/xstate-test
• https://github.com/davidkpiano/xstate

bin.js

#!/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)
  })

bin.sh

#!/usr/bin/env sh

budo --live --open test.js

package.json

{
  "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"
  }
}

test.js

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')
})