search

Financial-Times / x-dash

:x::heavy_minus_sign::newspaper: shared front-end components for FT.com and the FT Apps
https://financial-times.github.io/x-dash
38 stars 6 forks source link

investigate shallow rendering for snapshots #199

Open apaleslimghost opened 5 years ago

apaleslimghost commented 5 years ago

when we have components that depend on other components, we should ensure the dependency's snapshot changing doesn't affect the dependent. enzyme shallow rendering would solve this but make e.g. the teaser snapshots not particularly useful, because they're generated top level and most markup is generated by sub-components.

we could jest-mock all other @financial-times/x- components when testing a component, replacing it with something that returns the JSX used to render it shallow-render style. this could be tricky because we don't know looking at a module what things it exports are components.

(hat tip to @pavelpichrt for noticing this)

i-like-robots commented 5 years ago

As mentioned in #207 I think that if we're going to create sustainable components then it may be better to not couple them.

If we're going to encapsulate components effectively then it could be left to the implementer to provide the sub-components as arguments and your Storybook demos only render placeholders.

This may not always be practical, but it lessons the risks of boundaries between components being broken.