React Components goals are a lot about getting a specific rendering from a custom markup
I'd expect to be able to easily check if the visual rendering is exactly what is expected regardless to what DOM structure and CSS properties had to be applied
As an example,
I'm trying a react-efl project from which I expect to render EFL views in HTML as they would have been rendered by the enlightenment engine. Testing what HTML node and CSS rules were generated quickly started to to look pointless, even more for text rendering. I want to be sure the interpretations I did of EFL EVAS vs CSS styling properties impact is right, and fix the CSS rule until the visual comparison is right.
My current inspiration is to use Headless Chrome + dom-to-image + Resemble.js.
Note that PhantomCSS looks much simpler to use but it is unmaintained in favor the the mentioned solution. I might still use PhantomCSS in first place.
Unfortunatelly, the issue is that if I add a npm run test:visual task, the best I could have is 2 different coverage files which will be really annoying for integration in CI with coveralls.
AMorgaut
commented
6 years ago
This issue is a:
Description
React Components goals are a lot about getting a specific rendering from a custom markup
I'd expect to be able to easily check if the visual rendering is exactly what is expected regardless to what DOM structure and CSS properties had to be applied
As an example,
I'm trying a react-efl project from which I expect to render EFL views in HTML as they would have been rendered by the enlightenment engine. Testing what HTML node and CSS rules were generated quickly started to to look pointless, even more for text rendering. I want to be sure the interpretations I did of EFL EVAS vs CSS styling properties impact is right, and fix the CSS rule until the visual comparison is right.
My current inspiration is to use Headless Chrome + dom-to-image + Resemble.js. Note that PhantomCSS looks much simpler to use but it is unmaintained in favor the the mentioned solution. I might still use PhantomCSS in first place.
Unfortunatelly, the issue is that if I add a
npm run test:visualtask, the best I could have is 2 different coverage files which will be really annoying for integration in CI with coveralls.