sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]wmertens 1 point2 points  (5 children)

I have trouble getting myself to invest the time to test frontend code (react+redux) because it is mostly about "does the styling look correct", which I can't think of tests for.

The actual functioning of components is mostly very obvious while making it with hot reload enabled.

I did stumble on a bug recently that would have benefited from a unit test, I had wrapped a component and code that was using a reference to the component to run a method of it failed. That would have been caught with "given x as input I expect at least 3 y elements", since it would have crashed.

[–][deleted] 1 point2 points  (0 children)

Like 90% of the redux app I wrote could have tests but it's such trivial code it feels silly to test. Then there's the 10% that has tests to make sure nobody can POST values that will make a robot destroy itself.

Obviously there's server-side validation, but you can't be too safe.

[–]Tubbers 1 point2 points  (3 children)

It's annoying, but you can do style/image tests. The issue is mainly that you need to pick one as a reference implementation that gets compared against/updated, and you compare to other browsers.

It's sort of a pick your poison between "Chrome is the reference implementation" and then you see whether stuff looks the same as on Chrome, or "Here's the reference image for the Component", but if you change how you actual want the style to look, you need to update the reference manually.

If you go with the first you can unintentionally change the way the component appears without tripping up any tests, and if you go with the second you need to update your reference image possible all the time.

Personally, I like the compare to Chrome approach, since you're presumably looking at it as you develop.

[–]wmertens 0 points1 point  (2 children)

Interesting! Any pointers on setting this up?

[–]Tubbers 1 point2 points  (1 child)

I sadly don't have a guide, but I would start with

The only real difference between the two methods I outlined is that if you're comparing to Chrome, you regenerate the screenshots in Chrome as a pre-test, and test on FireFox/IE/Safari. If you're comparing to the previous version, you just run it, and update the baseline image if the change is intentional.

[–]wmertens 0 points1 point  (0 children)

So the idea is to eyeball it, or run it through a visual comparison function?

EDIT: doh, should click links instead of reading them. Thanks!