react-native/Libraries/StyleSheet/__tests__/processTransform-test.js
Janic Duplessis 0ed31eb3d6 BREAKING - Improve JS transform validation, add tests
Summary:
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
Closes https://github.com/facebook/react-native/pull/12115

Differential Revision: D4488933

Pulled By: mkonicek

fbshipit-source-id: a714e6175b2892284a44c870506165099efec1ed
2017-02-02 06:28:31 -08:00

87 lines
3.2 KiB
JavaScript

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
'use strict';
jest.disableAutomock();
const processTransform = require('processTransform');
describe('processTransform', () => {
describe('validation', () => {
it('should accept an empty array', () => {
processTransform([]);
});
it('should accept a simple valid transform', () => {
processTransform([
{scale: 0.5},
{translateX: 10},
{translateY: 20},
{rotate: '10deg'},
]);
});
it('should throw on object with multiple properties', () => {
expect(() => processTransform([{scale: 0.5, translateY: 10}])).toThrowErrorMatchingSnapshot();
});
it('should throw on invalid transform property', () => {
expect(() => processTransform([{translateW: 10}])).toThrowErrorMatchingSnapshot();
});
it('should throw when not passing an array to an array prop', () => {
expect(() => processTransform([{matrix: 'not-a-matrix'}])).toThrowErrorMatchingSnapshot();
expect(() => processTransform([{translate: 10}])).toThrowErrorMatchingSnapshot();
});
it('should accept a valid matrix', () => {
processTransform([{matrix: [1, 1, 1, 1, 1, 1, 1, 1, 1]}]);
processTransform([{matrix: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]}]);
});
it('should throw when passing a matrix of the wrong size', () => {
expect(() => processTransform([{matrix: [1, 1, 1, 1]}])).toThrowErrorMatchingSnapshot();
});
it('should accept a valid translate', () => {
processTransform([{translate: [1, 1]}]);
processTransform([{translate: [1, 1, 1]}]);
});
it('should throw when passing a translate of the wrong size', () => {
expect(() => processTransform([{translate: [1]}])).toThrowErrorMatchingSnapshot();
expect(() => processTransform([{translate: [1, 1, 1, 1]}])).toThrowErrorMatchingSnapshot();
});
it('should throw when passing an invalid value to a number prop', () => {
expect(() => processTransform([{translateY: '20deg'}])).toThrowErrorMatchingSnapshot();
expect(() => processTransform([{scale: {x: 10, y: 10}}])).toThrowErrorMatchingSnapshot();
expect(() => processTransform([{perspective: []}])).toThrowErrorMatchingSnapshot();
});
it('should throw when passing a perspective of 0', () => {
expect(() => processTransform([{perspective: 0}])).toThrowErrorMatchingSnapshot();
});
it('should accept an angle in degrees or radians', () => {
processTransform([{skewY: '10deg'}]);
processTransform([{rotateX: '1.16rad'}]);
});
it('should throw when passing an invalid angle prop', () => {
expect(() => processTransform([{rotate: 10}])).toThrowErrorMatchingSnapshot();
expect(() => processTransform([{skewX: '10drg'}])).toThrowErrorMatchingSnapshot();
});
it('should throw when passing an Animated.Value', () => {
expect(() => processTransform([{rotate: {getValue: () => {}}}])).toThrowErrorMatchingSnapshot();
});
});
});