BREAKING - Improve JS transform validation, add tests

[janicduplessis]

This improves JS validations of the transform object and makes it a bit stricter (hence the breaking change). When moving transform objects parsing to native (#10658) the validations got out of sync a bit, this makes sure JS validations are the same or stricter than the native ones to make sure we get consistent errors across platforms.

See #12110 for an example of an error that now gets caught by JS validations.

Also added snapshot tests for the errors to make sure processTransform throws when passing invalid values. It only tests the validation since the object parsing is now done natively for iOS and Android.

Test plan
Test that there are no errors in UIExplorer
Run new unit tests

[mkonicek]

Do you have some example code this would break in practice?

The new validation looks reasonable, for example all of these had to be numbers in application code even before the improvement in this pull request, correct?

• translateX
• translateY
• scale
• scaleX
• scaleY

[mkonicek]

Should this be called transforms now?

[janicduplessis]

The prop in style is called transform so I guess this is fine, I just fixed the flow type as it was bad, flow didn't catch the error but it always was an array that is passed to this function.

[mkonicek]

Does this change the public API? Now people have to pass:

[{scale: 2}, {translateX: 10}]

Is it the same API as before? I'm confused because the Flow type changed from Object to Array<Object> but the PR description says this is only a breaking change because of stricter validation, not an API change.

And why not pass:

{scale: 2, translateX: 10}

I guess it's because the array defines the order of transforms?

[janicduplessis]

As per my previous reply, it doesn't change the API, just fix the flow type that was wrong. The array is effectively for the order of the transforms.

[janicduplessis]

#12110 is a real example of an error that now gets caught by these validations (only one prop per transform object). In this case it got caught by a new validation we added in the iOS implementation, so I want to make sure we validate everything in JS to avoid different errors on different platforms.

[janicduplessis]

The only new validation added is checks for the array size for transform and 1 prop per transform object (native ios already validated it but not android). The other change is just to also validate invalid transform props also in the validate function instead of relying on native to do it.

[mkonicek]

Thanks for the explanation! Shipping.

[facebook-github-bot]

@mkonicek has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[facebook-github-bot]

I tried to merge this pull request into the Facebook internal repo but some checks failed. To unblock yourself please check the following: Does this pull request pass all open source tests on GitHub? If not please fix those. Does the code still apply cleanly on top of GitHub master? If not can please rebase. In all other cases this means some internal test failed, for example a part of a fb app won't work with this pull request. I've added the Import Failed label to this pull request so it is easy for someone at fb to find the pull request and check what failed. If you don't see anyone comment in a few days feel free to comment mentioning one of the core contributors to the project so they get a notification.

[mkonicek]

@facebook-github-bot shipit

[facebook-github-bot]

@mkonicek has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.