Generated by XState Viz: https://xstate.js.org/viz

machine.js

const connectionMachine = Machine({
  id: 'connection',
  initial: 'testing',
  states: {
    testing: {
      invoke: {
        id: 'testing',
        src: 'test',
        onDone: [{
          target: 'unknown',
          cond(content, event) {
            return event.data === 'unknown'
          },
        }, {
          target: 'connected',
          cond(content, event) {
            return event.data === 'connected'
          }
        }, {
          target: 'disconnected',
          cond(content, event) {
            return event.data === 'disconnected'
          }
        }],
        onError: 'unknown'
      }
    },
    unknown: {
      id: 'unknown',
      invoke: {
        src: 'listen'
      },
    },
    connected: {
      id: 'connected',
      invoke: {
        src: 'listen'
      },
    },
    disconnected: {
      id: 'disconnected',
      invoke: {
        src: 'listen'
      },
    },        
  },
  on: {
    CONNECT: 'connected',
    DICCONNECT: 'disconnected',
    UNKNOWN: 'unknown',
    TEST: 'testing'
  }
}, {
  services: {
    test() {
      return new Promise((resolve, reject) => {
        if (Math.random() > 0.5) {
          resolve(Math.random() > 0.5?'disconnected':'connected')
        } else {
          reject()
        }
      })
    },
    listen: () => callback => {
      callback('unknown')
    }
  }
});