Visual regression testing by diffing screenshots of components

[andraz]

Does Bit Harmony support visual regression testing (like chromatic.com)? If not, are you planning to add the support for visual diffing?

Source images (screenshots of components) are already getting rendered by your system, seen as thumbnails below components, so it shouldn't be a big leap to extend them with a diff-snapshot (to be shown for example in the version list).

This would enable the system to automatically warn our designers when there were detected real-world render changes - do they expect them or did the last deploy break something?

The warning system should also apply to the whole tree of inheritance.

i.e.: a junior hardcoding !important red color to an uncooperative button (🔨 development) to forcefully make it work with his project A would break the blue menu in project B, where they are depending on the same button component's transparent background - inheriting blue color of project B's menu.

Having a way to recursively re-render whole tree of detected changes to all higher level components would be a great way to see the "blast area" of our unintended consequences of low level component changes.

tl:dr; Component might build fine and render pixel perfect in our project inheriting it, but we regressed another project we do not even know about (or have access to) in the process. How to detect this situation?