Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to test conditional transitions? #49

Closed
hally9k opened this issue May 2, 2018 · 6 comments · Fixed by #54
Closed

How to test conditional transitions? #49

hally9k opened this issue May 2, 2018 · 6 comments · Fixed by #54
Labels

Comments

@hally9k
Copy link

hally9k commented May 2, 2018

How can I set the extendedState for a guarded transition in my testing fixtures?

@davidkpiano
Copy link
Contributor

I'm working on a solution for that in xstate currently, so once that's done (likely in 3.3) I'll make a PR to upgrade the tests to handle conditional transitions in react-automata.

@MicheleBertoli
Copy link
Owner

Thank you very much @hally9k @davidkpiano.

react-automata is already passing the fixtures to xstate's transition as a third parameter (see here and here).
However, xstate's getShortestPaths doesn't seem to return states guarded by conditions (see here).

For example:

const statechart = {
  initial: 'a',
  states: {
    a: {
      on: {
        EVENT: {
          b: {
            cond: extState => extState.shouldPass,
          },
        },
      },
    },
    b: {},
  },
}
const machine = Machine(statechart)
const paths = getShortestPaths(machine)

// { '"a"': [] }

@davidkpiano
Copy link
Contributor

@MicheleBertoli Can you open an issue so I can track it?

@MicheleBertoli
Copy link
Owner

Sure @davidkpiano, here it is: statelyai/xstate#100.
Thank you very much!

@MicheleBertoli
Copy link
Owner

Given the following statechart:

const statechart = {
  initial: 'a',
  states: {
    a: {
      on: {
        EVENT: {
          b: {
            cond: extState => extState.shouldPass,
          },
        },
      },
    },
    b: {},
  },
}

and the following component:

const Cond = () => (
  <React.Fragment>
    <State value="a">A</State>
    <State value="b">B</State>
  </React.Fragment>
)

it's now possible to write a test that passes the condition:

test('pass', () => {
  const extendedState = {
    shouldPass: true,
  }
  const fixtures = {
    a: {
      EVENT: extendedState,
    },
  }

  testStatechart({ statechart, fixtures, extendedState }, Cond)
})
exports[`cond pass: a 1`] = `"A"`;
exports[`cond pass: b 1`] = `"B"`;

and one that doesn't:

test('fail', () => {
  testStatechart({ statechart }, Cond)
})
exports[`cond fail: a 1`] = `"A"`;

Thank you very much, @hally9k @davidkpiano.

@hally9k
Copy link
Author

hally9k commented Jun 18, 2018

This is SUPER awesome. Go team!!! This was the one thing holding our project back from full adoption. Let's go!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants