It will be great to use @storybook/addon-interactions to automate some more complex animations that goes one after another.
There is no point to use @storybook/testing-library for Pixi stories (as it simulates events over the dom elements), but steps logic can be used.
There is one problem that is a blocker to use interactions - how to get a Pixi Container (our component) that is returned from a story.
Default Storybook interactions are using canvasElement which contains rendered component, but it is a DOM element (see docs sample https://storybook.js.org/docs/react/essentials/interactions).
This DOM element is useless for us as we need an object/component returned from a story, so we can trigger certain animation method from it. Sadly, Storybook doesn't provide a way to get a value returned from a story render process.
Bellow is workaround I have made to handle this problem:
1) Create a decorator to store story render result:
export const storyResultDecorator = (story, context) => {
// storyResult is the value returned from your Story render
const storyResult = story();
// store story result into context.canvasElement so it can be get from there in the interaction
context.canvasElement.storyResult = storyResult;
// return story result as is
return storyResult;
};
2) Add decorator to .storybook/preview.ts
export const decorators = [storyResultDecorator]; // can gave more decorators
3) Create a story with interaction (do not forget to add animateAction func to a BunnyDemo, in my case it was changing a rotation direction)
It will be great to use
@storybook/addon-interactions
to automate some more complex animations that goes one after another.There is no point to use
@storybook/testing-library
for Pixi stories (as it simulates events over the dom elements), butsteps
logic can be used.There is one problem that is a blocker to use interactions - how to get a Pixi Container (our component) that is returned from a story. Default Storybook interactions are using canvasElement which contains rendered component, but it is a DOM element (see docs sample https://storybook.js.org/docs/react/essentials/interactions).
This DOM element is useless for us as we need an object/component returned from a story, so we can trigger certain animation method from it. Sadly, Storybook doesn't provide a way to get a value returned from a story render process.
Bellow is workaround I have made to handle this problem:
1) Create a decorator to store story render result:
2) Add decorator to
.storybook/preview.ts
3) Create a story with interaction (do not forget to add
animateAction
func to a BunnyDemo, in my case it was changing a rotation direction)Maybe there is a better way to get Story render result in the interaction? Feel free to suggest.