How to use @xstate/graph - 8 common examples

/// 
import { videoMachine, audioMachine } from '../../src/machines.js'
import { getSimplePaths, getShortestPaths } from '@xstate/graph'
import { map, compose, pipe, lensPath, view, curry } from 'ramda'

const videoSimplePaths = getSimplePaths(videoMachine)
const audioSimplePaths = getSimplePaths(audioMachine)
const videoShortestPaths = getShortestPaths(videoMachine)
const audioShortestPaths = getShortestPaths(audioMachine)

const videoStateList = Object.keys(videoSimplePaths)
const audioStateList = Object.keys(audioSimplePaths)
const machineName = lensPath(['tree', 'stateNode', 'config', 'id'])
const currentMachine = (state) => view(machineName, state) === 'videoMachine' ? videoMachine : audioMachine
const selectSimpleVideoPaths = (currentState) => videoSimplePaths[currentState].paths[0]
const selectSimpleAudioPaths = (currentState) => audioSimplePaths[currentState].paths[0]
const reload = () => cy.reload()
const appIsReady = () => cy.get('video').should('be.visible')
const changeTab = (newTab) => () => cy.get(`button[id="${newTab}"`).click()
const changeToAudioTab = changeTab('audioTab')
const checkTransition = ({ state, event }) => {
	cy.log(`checking transition from ${state.value} due to ${event.type}`)
	// if there are paths[x].state.actions[y] then have Hyperapp and XState run the action(s) for us
	// Optionally we could drive the machine from here too
	if (state.actions.length > 0) {

/// 
import { videoMachine, audioMachine } from '../../src/machines.js'
import { getSimplePaths, getShortestPaths } from '@xstate/graph'
import { map, compose, pipe, lensPath, view, curry } from 'ramda'

const videoSimplePaths = getSimplePaths(videoMachine)
const audioSimplePaths = getSimplePaths(audioMachine)
const videoShortestPaths = getShortestPaths(videoMachine)
const audioShortestPaths = getShortestPaths(audioMachine)

const videoStateList = Object.keys(videoSimplePaths)
const audioStateList = Object.keys(audioSimplePaths)
const machineName = lensPath(['tree', 'stateNode', 'config', 'id'])
const currentMachine = (state) => view(machineName, state) === 'videoMachine' ? videoMachine : audioMachine
const selectSimpleVideoPaths = (currentState) => videoSimplePaths[currentState].paths[0]
const selectSimpleAudioPaths = (currentState) => audioSimplePaths[currentState].paths[0]
const reload = () => cy.reload()
const appIsReady = () => cy.get('video').should('be.visible')
const changeTab = (newTab) => () => cy.get(`button[id="${newTab}"`).click()
const changeToAudioTab = changeTab('audioTab')
const checkTransition = ({ state, event }) => {
	cy.log(`checking transition from ${state.value} due to ${event.type}`)
	// if there are paths[x].state.actions[y] then have Hyperapp and XState run the action(s) for us
	// Optionally we could drive the machine from here too

/// 
import { videoMachine, audioMachine } from '../../src/machines.js'
import { getSimplePaths, getShortestPaths } from '@xstate/graph'
import { map, compose, pipe, lensPath, view, curry } from 'ramda'

const videoSimplePaths = getSimplePaths(videoMachine)
const audioSimplePaths = getSimplePaths(audioMachine)
const videoShortestPaths = getShortestPaths(videoMachine)
const audioShortestPaths = getShortestPaths(audioMachine)

const videoStateList = Object.keys(videoSimplePaths)
const audioStateList = Object.keys(audioSimplePaths)
const machineName = lensPath(['tree', 'stateNode', 'config', 'id'])
const currentMachine = (state) => view(machineName, state) === 'videoMachine' ? videoMachine : audioMachine
const selectSimpleVideoPaths = (currentState) => videoSimplePaths[currentState].paths[0]
const selectSimpleAudioPaths = (currentState) => audioSimplePaths[currentState].paths[0]
const reload = () => cy.reload()
const appIsReady = () => cy.get('video').should('be.visible')
const changeTab = (newTab) => () => cy.get(`button[id="${newTab}"`).click()
const changeToAudioTab = changeTab('audioTab')
const checkTransition = ({ state, event }) => {
	cy.log(`checking transition from ${state.value} due to ${event.type}`)
	// if there are paths[x].state.actions[y] then have Hyperapp and XState run the action(s) for us

/// 
import { videoMachine, audioMachine } from '../../src/machines.js'
import { getSimplePaths, getShortestPaths } from '@xstate/graph'
import { map, compose, pipe, lensPath, view, curry } from 'ramda'

const videoSimplePaths = getSimplePaths(videoMachine)
const audioSimplePaths = getSimplePaths(audioMachine)
const videoShortestPaths = getShortestPaths(videoMachine)
const audioShortestPaths = getShortestPaths(audioMachine)

const videoStateList = Object.keys(videoSimplePaths)
const audioStateList = Object.keys(audioSimplePaths)
const machineName = lensPath(['tree', 'stateNode', 'config', 'id'])
const currentMachine = (state) => view(machineName, state) === 'videoMachine' ? videoMachine : audioMachine
const selectSimpleVideoPaths = (currentState) => videoSimplePaths[currentState].paths[0]
const selectSimpleAudioPaths = (currentState) => audioSimplePaths[currentState].paths[0]
const reload = () => cy.reload()
const appIsReady = () => cy.get('video').should('be.visible')
const changeTab = (newTab) => () => cy.get(`button[id="${newTab}"`).click()
const changeToAudioTab = changeTab('audioTab')
const checkTransition = ({ state, event }) => {
	cy.log(`checking transition from ${state.value} due to ${event.type}`)

public getShortestPathPlans(
    options?: Partial>
  ): Array> {
    const shortestPaths = getShortestPaths(this.machine, {
      ...options,
      events: getEventSamples(this.options.events)
    }) as StatePathsMap;

    return this.getTestPlans(shortestPaths);
  }

public getSimplePathPlans(
    options?: Partial>
  ): Array> {
    const simplePaths = getSimplePaths(this.machine, {
      ...options,
      events: getEventSamples(this.options.events)
    }) as StatePathsMap;

    return this.getTestPlans(simplePaths);
  }

public getCoverage(): { stateNodes: Record } {
    const stateNodes = getStateNodes(this.machine);
    const coverage = {
      stateNodes: stateNodes.reduce((acc, stateNode) => {
        acc[stateNode.id] = 0;
        return acc;
      }, {})
    };

    for (const key of this.coverage.stateNodes.keys()) {
      coverage.stateNodes[key] = this.coverage.stateNodes.get(key);
    }

    return coverage;
  }

import React from 'react';
import { storiesOf } from '@storybook/react';
import { FeedbackScreen, feedbackMachine } from '../src/cheat/App';
import '../src/index.scss';
import { getShortestPaths } from '@xstate/graph';

const stories = storiesOf('Feedback', module);

const shortestPaths = getShortestPaths(feedbackMachine);

Object.keys(shortestPaths).forEach(key => {
  const { state } = shortestPaths[key];

  stories.add(key, () => (
     {}} />
  ));
});