xstate-test-cypress
v1.5.0
Published
Utilities for adapting @xstate/test to work more easily with cypress 7+
Downloads
2
Maintainers
Readme
xstate-test-cypress
Utilities for adapting @xstate/test to work more easily with cypress 7+
Usage
Basic usage is as follows, for more complete usage with types refer to /cypress/integration/todo.spec.ts
and /cypress/components/*
folder for component testing example.
Note that testContext
is the object that you pass in to plan.test(...)
, it has no relation to the context of the machine.
import {
checkCoverage,
createCypressMachine,
createCypressModel,
simpleExecutePlan
} from 'xstate-test-cypress';
const testMachine = createCypressMachine(
{
states: {
parent: {
on: {
SIMPLE: 'other'
},
states: {
child: {
on: { CASES: 'other' }
}
}
},
other: {}
}
},
{
parent: (testContext) => cy.get('something').should('be.visible'),
'parent.child': (testContext) => {
cy.get('something').should('have.length', 2);
// Note that all these functions must return a Chainable
return cy.get('something-else').should('contain', 'some text');
}
}
);
const testModel = createCypressModel(testMachine, {
SIMPLE: () => cy.get('button').eq(0).click(),
CASES: {
cases: [{ value: 'Value one' }, { value: 'Value 2' }],
exec: (testContext, testCase) => {
testContext.someCounter += 1;
return cy.focused().clear().type(`${testCase.value}{enter}`);
}
}
});
context('example tests', () => {
simpleExecutePlan(testModel.getSimplePathPlans(), () => {
cy.visit('/');
return { someCounter: 1 };
});
checkCoverage(testModel);
});
context('updated tests', () => {
simpleExecutePlan(
testModel
.update(
{ other: () => cy.log('new state check') },
{ SIMPLE: () => cy.log('new event execution') }
)
.getSimplePathPlans(),
() => {
cy.visit('/');
return { someCounter: 1 };
}
);
checkCoverage(testModel);
});
Test application is forked from the TodoMVC site.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!