Test machine has empty state history after tests finish

[bahmutov]

The Cypress test seems to drive the app using test model correctly. I can see events going according to the path. But when the tests finish, the test model collects state history, which is empty

Here is the problem: we really have 2 state machines:

1. the first machine is created by the application and is in its code

// src/toggle.js
// https://github.com/bahmutov/xstate-test-with-cypress-example/blob/37134b193ee8418738b35b0abf534c4ea1cf658c/src/toggle.js
import React from 'react'
import { interpret } from 'xstate'
import { toggleMachine } from './model'

export default class Toggle extends React.Component {
  state = {
    current: toggleMachine.initialState
  }

  service = interpret(toggleMachine).onTransition(current => {
    console.log('app: transition, current is', current)
    this.setState({ current })
  })
...

2. The second machine is the one the test uses to create its model and then drive along each path.

// cypress/integration/toggle-spec.js
// https://github.com/bahmutov/xstate-test-with-cypress-example/blob/master/cypress/integration/toggle-spec.js
import { createModel } from '@xstate/test'
import { toggleMachine } from '../../src/model'

const toggleModel = createModel(toggleMachine).withEvents({
  TOGGLE: {
    exec: () => {
      console.log('test toggle model TOGGLE')
      debugger
      cy.log('clicking button')
      cy.get('button').click()
    }
  }
})
...

So while we drive along the test machine we don't know what states the application state machine set. I am thinking we could either

1. replace application's state machine at the start of the test (during cy.visit) with test state machine
2. or copy state history from application's state machine after each test finishes back to the test state machine so that after all tests finish we know what has been covered

[bahmutov]

I kind of solved this, but I don't know why this works really - and the sequence of commands is wrong in the command log

import { Machine } from 'xstate'

export const toggleMachine = Machine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: {
      on: {
        TOGGLE: 'active'
      },
      meta: {
        test: () => {
          console.log('model meta test')
          return new Promise(resolve => {
            cy.contains('button', 'Off')
              .should('be.visible')
              .then(() => {
                resolve()
                return null
              })
          })
        }
      }
    },
    active: {
      on: {
        TOGGLE: 'inactive'
      },
      meta: {
        test: () => {
          console.log('model meta test')
          return new Promise(resolve => {
            cy.contains('button', 'On')
              .should('be.visible')
              .then(() => {
                resolve()
                return null
              })
          })
        }
      }
    }
  }
})

Notice how clicking on the button is in the "After" section - I could not get it to work from path.test() promise for some reason yet.

[davidkpiano]

The tests (under meta.test) and the actions (under [event].exec) both need to be async, and should not resolve until they have actually finished the async task.

Not sure how to do this manually with Cypress yet; it's different than how it normally works.

[chit786]

@bahmutov looking forward to hear more on this. kudos to your efforts!

I also stumbled upon this thread after reading @davidkpiano state machines article and faced same issue with cypress.

[Akshaya2312]

davidkpiano/xstate-test-demo#6