Come up with solution for flaky storyshots due to SVG animation
Every once in a while, I run across a visual_gitlab_integration
job that fails due to CSS or SVG animations being on the wrong keyframe. Generally retrying will work, but these problems will only become more common and more painful as we add more visual regression tests that deal with animations.
Perhaps there is a way we can fix these tests through a custom config when compiling for testing purposes. Maybe we can have something that recognizes when we are compiling for a "test" environment that will:
- duplicate the component 3 or 4 times
- set each SVG within the component to a state that is "frozen" in a certain animation timing offset
- perform a regression test against this group of duplicate components
This would have the added benefit of being able to visually inspect our animations within still images, as well as remove the flaky behavior.