From c9baa47e33cddf604ac318324132570a44c57bd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rub=C3=A9n=20Norte?= Date: Thu, 18 Jun 2026 03:48:26 -0700 Subject: [PATCH] Migrate StyleSheet pure-logic Jest tests to Fantom Summary: Migrates the pure-logic StyleSheet unit tests from regular Jest (`-test.js`) to Fantom (`-itest.js`), so they run on Hermes inside the real React Native runtime, the same engine that runs this code in production. Migrated files (all style-processing utilities that run on the client at runtime): `flattenStyle`, `processAspectRatio`, `processBackgroundPosition`, `processBackgroundRepeat`, `processBackgroundSize`, `processFilter`, `processFontVariant`, `processTransform`, `processTransformOrigin`, `setNormalizedColorAlpha`, `splitLayoutProps`. Notable adaptations: - `toThrowErrorMatchingSnapshot()` and `toThrowErrorMatchingInlineSnapshot()` are not available in Fantom, so they were replaced with `toThrow('')`, preserving the exact error messages that were previously captured in snapshots. - Removed the now-obsolete file snapshots for `processAspectRatio`, `processTransform`, and `processTransformOrigin`. - `toMatchInlineSnapshot` (used by `splitLayoutProps`) is supported by Fantom and was kept unchanged. Changelog: [Internal] Differential Revision: D108759084 --- .../processAspectRatio-test.js.snap | 13 -- .../processTransform-test.js.snap | 39 ----- .../processTransformOrigin-test.js.snap | 5 - ...tenStyle-test.js => flattenStyle-itest.js} | 2 +- ...io-test.js => processAspectRatio-itest.js} | 21 ++- ....js => processBackgroundPosition-itest.js} | 3 +- ...st.js => processBackgroundRepeat-itest.js} | 3 +- ...test.js => processBackgroundSize-itest.js} | 3 +- ...sFilter-test.js => processFilter-itest.js} | 2 + ...nt-test.js => processFontVariant-itest.js} | 2 +- .../__tests__/processTransform-itest.js | 151 ++++++++++++++++++ .../__tests__/processTransform-test.js | 151 ------------------ ...est.js => processTransformOrigin-itest.js} | 41 ++--- ...st.js => setNormalizedColorAlpha-itest.js} | 1 + ...rops-test.js => splitLayoutProps-itest.js} | 1 + 15 files changed, 188 insertions(+), 250 deletions(-) delete mode 100644 packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processAspectRatio-test.js.snap delete mode 100644 packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processTransform-test.js.snap delete mode 100644 packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processTransformOrigin-test.js.snap rename packages/react-native/Libraries/StyleSheet/__tests__/{flattenStyle-test.js => flattenStyle-itest.js} (98%) rename packages/react-native/Libraries/StyleSheet/__tests__/{processAspectRatio-test.js => processAspectRatio-itest.js} (70%) rename packages/react-native/Libraries/StyleSheet/__tests__/{processBackgroundPosition-test.js => processBackgroundPosition-itest.js} (99%) rename packages/react-native/Libraries/StyleSheet/__tests__/{processBackgroundRepeat-test.js => processBackgroundRepeat-itest.js} (99%) rename packages/react-native/Libraries/StyleSheet/__tests__/{processBackgroundSize-test.js => processBackgroundSize-itest.js} (98%) rename packages/react-native/Libraries/StyleSheet/__tests__/{processFilter-test.js => processFilter-itest.js} (99%) rename packages/react-native/Libraries/StyleSheet/__tests__/{processFontVariant-test.js => processFontVariant-itest.js} (95%) create mode 100644 packages/react-native/Libraries/StyleSheet/__tests__/processTransform-itest.js delete mode 100644 packages/react-native/Libraries/StyleSheet/__tests__/processTransform-test.js rename packages/react-native/Libraries/StyleSheet/__tests__/{processTransformOrigin-test.js => processTransformOrigin-itest.js} (73%) rename packages/react-native/Libraries/StyleSheet/__tests__/{setNormalizedColorAlpha-test.js => setNormalizedColorAlpha-itest.js} (94%) rename packages/react-native/Libraries/StyleSheet/__tests__/{splitLayoutProps-test.js => splitLayoutProps-itest.js} (94%) diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processAspectRatio-test.js.snap b/packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processAspectRatio-test.js.snap deleted file mode 100644 index 2c6ddd3490d..00000000000 --- a/packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processAspectRatio-test.js.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`processAspectRatio should not accept invalid formats 1`] = `"aspectRatio must either be a number, a ratio string or \`auto\`. You passed: 0a"`; - -exports[`processAspectRatio should not accept invalid formats 2`] = `"aspectRatio must either be a number, a ratio string or \`auto\`. You passed: 1 / 1 1"`; - -exports[`processAspectRatio should not accept invalid formats 3`] = `"aspectRatio must either be a number, a ratio string or \`auto\`. You passed: auto 1/1"`; - -exports[`processAspectRatio should not accept non string truthy types 1`] = `"aspectRatio must either be a number, a ratio string or \`auto\`. You passed: () => {}"`; - -exports[`processAspectRatio should not accept non string truthy types 2`] = `"aspectRatio must either be a number, a ratio string or \`auto\`. You passed: 1,2,3"`; - -exports[`processAspectRatio should not accept non string truthy types 3`] = `"aspectRatio must either be a number, a ratio string or \`auto\`. You passed: [object Object]"`; diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processTransform-test.js.snap b/packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processTransform-test.js.snap deleted file mode 100644 index 119c7344a13..00000000000 --- a/packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processTransform-test.js.snap +++ /dev/null @@ -1,39 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`processTransform validation should throw on invalid transform property 1`] = `"Invalid transform translateW: {\\"translateW\\":10}"`; - -exports[`processTransform validation should throw on invalid transform property 2`] = `"Invalid transform translateW: {\\"translateW\\":10}"`; - -exports[`processTransform validation should throw on object with multiple properties 1`] = `"You must specify exactly one property per transform object. Passed properties: {\\"scale\\":0.5,\\"translateY\\":10}"`; - -exports[`processTransform validation should throw when not passing an array to an array prop 1`] = `"Transform with key of matrix must have an array as the value: {\\"matrix\\":\\"not-a-matrix\\"}"`; - -exports[`processTransform validation should throw when not passing an array to an array prop 2`] = `"Transform with key of translate must have an array as the value: {\\"translate\\":10}"`; - -exports[`processTransform validation should throw when passing a matrix of the wrong size 1`] = `"Matrix transform must have a length of 9 (2d) or 16 (3d). Provided matrix has a length of 4: {\\"matrix\\":[1,1,1,1]}"`; - -exports[`processTransform validation should throw when passing a matrix of the wrong size 2`] = `"Matrix transform must have a length of 9 (2d) or 16 (3d). Provided matrix has a length of 4: {\\"matrix\\":[1,1,1,1]}"`; - -exports[`processTransform validation should throw when passing a perspective of 0 1`] = `"Transform with key of \\"perspective\\" cannot be zero: {\\"perspective\\":0}"`; - -exports[`processTransform validation should throw when passing a translate of the wrong size 1`] = `"Transform with key translate must be an array of length 2 or 3, found 1: {\\"translate\\":[1]}"`; - -exports[`processTransform validation should throw when passing a translate of the wrong size 2`] = `"Transform with key translate must be an array of length 2 or 3, found 4: {\\"translate\\":[1,1,1,1]}"`; - -exports[`processTransform validation should throw when passing a translate of the wrong size 3`] = `"Transform with key translate must be an string with 1 or 2 parameters, found 4: translate(1px, 1px, 1px, 1px)"`; - -exports[`processTransform validation should throw when passing an Animated.Value 1`] = `"You passed an Animated.Value to a normal component. You need to wrap that component in an Animated. For example, replace by ."`; - -exports[`processTransform validation should throw when passing an invalid angle prop 1`] = `"Transform with key of \\"rotate\\" must be a string: {\\"rotate\\":10}"`; - -exports[`processTransform validation should throw when passing an invalid angle prop 2`] = `"Transform with key of \\"rotate\\" must be a string: {\\"rotate\\":10}"`; - -exports[`processTransform validation should throw when passing an invalid angle prop 3`] = `"Rotate transform must be expressed in degrees (deg) or radians (rad): {\\"skewX\\":\\"10drg\\"}"`; - -exports[`processTransform validation should throw when passing an invalid angle prop 4`] = `"Rotate transform must be expressed in degrees (deg) or radians (rad): {\\"skewX\\":\\"10drg\\"}"`; - -exports[`processTransform validation should throw when passing an invalid value to a number prop 1`] = `"Transform with key of \\"translateY\\" must be number or a percentage. Passed value: {\\"translateY\\":\\"20deg\\"}."`; - -exports[`processTransform validation should throw when passing an invalid value to a number prop 2`] = `"Transform with key of \\"scale\\" must be a number: {\\"scale\\":{\\"x\\":10,\\"y\\":10}}"`; - -exports[`processTransform validation should throw when passing an invalid value to a number prop 3`] = `"Transform with key of \\"perspective\\" must be a number: {\\"perspective\\":[]}"`; diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processTransformOrigin-test.js.snap b/packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processTransformOrigin-test.js.snap deleted file mode 100644 index 8d6455d0b55..00000000000 --- a/packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processTransformOrigin-test.js.snap +++ /dev/null @@ -1,5 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`processTransformOrigin validation only accepts three values 1`] = `"Transform origin must have exactly 3 values."`; - -exports[`processTransformOrigin validation only accepts three values 2`] = `"Transform origin must have exactly 3 values."`; \ No newline at end of file diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/flattenStyle-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/flattenStyle-itest.js similarity index 98% rename from packages/react-native/Libraries/StyleSheet/__tests__/flattenStyle-test.js rename to packages/react-native/Libraries/StyleSheet/__tests__/flattenStyle-itest.js index e380443585b..784de067478 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/flattenStyle-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/flattenStyle-itest.js @@ -8,7 +8,7 @@ * @format */ -'use strict'; +import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; const flattenStyle = require('../flattenStyle').default; const StyleSheet = require('../StyleSheet').default; diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processAspectRatio-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processAspectRatio-itest.js similarity index 70% rename from packages/react-native/Libraries/StyleSheet/__tests__/processAspectRatio-test.js rename to packages/react-native/Libraries/StyleSheet/__tests__/processAspectRatio-itest.js index d4fd8cf122d..2caf20f6cdc 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processAspectRatio-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processAspectRatio-itest.js @@ -8,6 +8,7 @@ * @format */ +import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; import processAspectRatio from '../processAspectRatio'; describe('processAspectRatio', () => { @@ -41,9 +42,15 @@ describe('processAspectRatio', () => { }); it('should not accept invalid formats', () => { - expect(() => processAspectRatio('0a')).toThrowErrorMatchingSnapshot(); - expect(() => processAspectRatio('1 / 1 1')).toThrowErrorMatchingSnapshot(); - expect(() => processAspectRatio('auto 1/1')).toThrowErrorMatchingSnapshot(); + expect(() => processAspectRatio('0a')).toThrow( + 'aspectRatio must either be a number, a ratio string or `auto`. You passed: 0a', + ); + expect(() => processAspectRatio('1 / 1 1')).toThrow( + 'aspectRatio must either be a number, a ratio string or `auto`. You passed: 1 / 1 1', + ); + expect(() => processAspectRatio('auto 1/1')).toThrow( + 'aspectRatio must either be a number, a ratio string or `auto`. You passed: auto 1/1', + ); }); it('should ignore non string falsy types', () => { @@ -57,8 +64,12 @@ describe('processAspectRatio', () => { it('should not accept non string truthy types', () => { const invalidThings = [() => {}, [1, 2, 3], {}]; for (const thing of invalidThings) { - // $FlowExpectedError[incompatible-type] - expect(() => processAspectRatio(thing)).toThrowErrorMatchingSnapshot(); + expect(() => + // $FlowExpectedError[incompatible-type] + processAspectRatio(thing), + ).toThrow( + `aspectRatio must either be a number, a ratio string or \`auto\`. You passed: ${String(thing)}`, + ); } }); }); diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundPosition-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundPosition-itest.js similarity index 99% rename from packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundPosition-test.js rename to packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundPosition-itest.js index 16b4968233d..c8d7a6049b3 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundPosition-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundPosition-itest.js @@ -8,8 +8,7 @@ * @format */ -'use strict'; - +import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; import processBackgroundPosition from '../processBackgroundPosition'; describe('processBackgroundPosition', () => { diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundRepeat-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundRepeat-itest.js similarity index 99% rename from packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundRepeat-test.js rename to packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundRepeat-itest.js index 586bc433a22..0bbad8c6aec 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundRepeat-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundRepeat-itest.js @@ -8,8 +8,7 @@ * @format */ -'use strict'; - +import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; import processBackgroundRepeat from '../processBackgroundRepeat'; describe('processBackgroundRepeat', () => { diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundSize-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundSize-itest.js similarity index 98% rename from packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundSize-test.js rename to packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundSize-itest.js index a985732868a..82cd5c66ba7 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundSize-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundSize-itest.js @@ -8,8 +8,7 @@ * @format */ -'use strict'; - +import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; import processBackgroundSize from '../processBackgroundSize'; describe('processBackgroundSize', () => { diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-itest.js similarity index 99% rename from packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js rename to packages/react-native/Libraries/StyleSheet/__tests__/processFilter-itest.js index a80a62c963d..213f375d9a7 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-itest.js @@ -10,6 +10,8 @@ 'use strict'; +import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; + import type {FilterFunction} from '../StyleSheetTypes'; import processColor from '../processColor'; diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processFontVariant-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processFontVariant-itest.js similarity index 95% rename from packages/react-native/Libraries/StyleSheet/__tests__/processFontVariant-test.js rename to packages/react-native/Libraries/StyleSheet/__tests__/processFontVariant-itest.js index 0c93e06a921..2474777f286 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processFontVariant-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processFontVariant-itest.js @@ -8,7 +8,7 @@ * @format */ -'use strict'; +import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; const processFontVariant = require('../processFontVariant').default; diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processTransform-itest.js b/packages/react-native/Libraries/StyleSheet/__tests__/processTransform-itest.js new file mode 100644 index 00000000000..83f94d7a3cd --- /dev/null +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processTransform-itest.js @@ -0,0 +1,151 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow strict-local + * @format + */ + +import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; + +const processTransform = require('../processTransform').default; + +describe('processTransform', () => { + describe('validation', () => { + it('should accept an empty array', () => { + processTransform([]); + }); + + it('should accept an empty string', () => { + processTransform(''); + }); + + it('should accept a simple valid transform', () => { + processTransform([ + {scale: 0.5}, + {translateX: 10}, + {translateY: 20}, + {rotate: '10deg'}, + ]); + processTransform( + 'scale(0.5) translateX(10px) translateY(20px) rotate(10deg)', + ); + }); + + it('should accept a percentage translate transform', () => { + processTransform([{translateY: '20%'}, {translateX: '10%'}]); + processTransform('translateX(10%)'); + }); + + it('should throw on object with multiple properties', () => { + expect(() => processTransform([{scale: 0.5, translateY: 10}])).toThrow( + 'You must specify exactly one property per transform object. Passed properties: {"scale":0.5,"translateY":10}', + ); + }); + + it('should throw on invalid transform property', () => { + expect(() => processTransform([{translateW: 10}])).toThrow( + 'Invalid transform translateW: {"translateW":10}', + ); + expect(() => processTransform('translateW(10)')).toThrow( + 'Invalid transform translateW: {"translateW":10}', + ); + }); + + it('should throw when not passing an array to an array prop', () => { + expect(() => processTransform([{matrix: 'not-a-matrix'}])).toThrow( + 'Transform with key of matrix must have an array as the value: {"matrix":"not-a-matrix"}', + ); + expect(() => processTransform([{translate: 10}])).toThrow( + 'Transform with key of translate must have an array as the value: {"translate":10}', + ); + }); + + 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)'); + processTransform([ + {matrix: [1, 1, 1, 1, 1, 1, 1, 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]}])).toThrow( + 'Matrix transform must have a length of 9 (2d) or 16 (3d). Provided matrix has a length of 4: {"matrix":[1,1,1,1]}', + ); + expect(() => processTransform('matrix(1, 1, 1, 1)')).toThrow( + 'Matrix transform must have a length of 9 (2d) or 16 (3d). Provided matrix has a length of 4: {"matrix":[1,1,1,1]}', + ); + }); + + it('should accept a valid translate', () => { + processTransform([{translate: [1, 1]}]); + processTransform('translate(1px)'); + processTransform('translate(1px, 1px)'); + processTransform([{translate: [1, 1, 1]}]); + }); + + it('should throw when passing a translate of the wrong size', () => { + expect(() => processTransform([{translate: [1]}])).toThrow( + 'Transform with key translate must be an array of length 2 or 3, found 1: {"translate":[1]}', + ); + expect(() => processTransform([{translate: [1, 1, 1, 1]}])).toThrow( + 'Transform with key translate must be an array of length 2 or 3, found 4: {"translate":[1,1,1,1]}', + ); + expect(() => processTransform('translate(1px, 1px, 1px, 1px)')).toThrow( + 'Transform with key translate must be an string with 1 or 2 parameters, found 4: translate(1px, 1px, 1px, 1px)', + ); + }); + + it('should throw when passing an invalid value to a number prop', () => { + expect(() => processTransform([{translateY: '20deg'}])).toThrow( + 'Transform with key of "translateY" must be number or a percentage. Passed value: {"translateY":"20deg"}.', + ); + expect(() => processTransform([{scale: {x: 10, y: 10}}])).toThrow( + 'Transform with key of "scale" must be a number: {"scale":{"x":10,"y":10}}', + ); + expect(() => processTransform([{perspective: []}])).toThrow( + 'Transform with key of "perspective" must be a number: {"perspective":[]}', + ); + }); + + it('should throw when passing a perspective of 0', () => { + expect(() => processTransform([{perspective: 0}])).toThrow( + 'Transform with key of "perspective" cannot be zero: {"perspective":0}', + ); + }); + + it('should accept an angle in degrees or radians', () => { + processTransform([{skewY: '10deg'}]); + processTransform('skewY(10deg)'); + processTransform([{rotateX: '1.16rad'}]); + processTransform('rotateX(1.16rad)'); + }); + + it('should throw when passing an invalid angle prop', () => { + expect(() => processTransform([{rotate: 10}])).toThrow( + 'Transform with key of "rotate" must be a string: {"rotate":10}', + ); + expect(() => processTransform('rotate(10)')).toThrow( + 'Transform with key of "rotate" must be a string: {"rotate":10}', + ); + expect(() => processTransform([{skewX: '10drg'}])).toThrow( + 'Rotate transform must be expressed in degrees (deg) or radians (rad): {"skewX":"10drg"}', + ); + expect(() => processTransform('skewX(10drg)')).toThrow( + 'Rotate transform must be expressed in degrees (deg) or radians (rad): {"skewX":"10drg"}', + ); + }); + + it('should throw when passing an Animated.Value', () => { + expect(() => processTransform([{rotate: {getValue: () => {}}}])).toThrow( + 'You passed an Animated.Value to a normal component. You need to wrap that component in an Animated. For example, replace by .', + ); + }); + }); +}); diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processTransform-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processTransform-test.js deleted file mode 100644 index 5feafd9725a..00000000000 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processTransform-test.js +++ /dev/null @@ -1,151 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow strict-local - * @format - */ - -'use strict'; - -const processTransform = require('../processTransform').default; - -describe('processTransform', () => { - describe('validation', () => { - it('should accept an empty array', () => { - processTransform([]); - }); - - it('should accept an empty string', () => { - processTransform(''); - }); - - it('should accept a simple valid transform', () => { - processTransform([ - {scale: 0.5}, - {translateX: 10}, - {translateY: 20}, - {rotate: '10deg'}, - ]); - processTransform( - 'scale(0.5) translateX(10px) translateY(20px) rotate(10deg)', - ); - }); - - it('should accept a percentage translate transform', () => { - processTransform([{translateY: '20%'}, {translateX: '10%'}]); - processTransform('translateX(10%)'); - }); - - 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(); - 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)'); - processTransform([ - {matrix: [1, 1, 1, 1, 1, 1, 1, 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(); - expect(() => - processTransform('matrix(1, 1, 1, 1)'), - ).toThrowErrorMatchingSnapshot(); - }); - - it('should accept a valid translate', () => { - processTransform([{translate: [1, 1]}]); - processTransform('translate(1px)'); - processTransform('translate(1px, 1px)'); - 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(); - expect(() => - processTransform('translate(1px, 1px, 1px, 1px)'), - ).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('skewY(10deg)'); - processTransform([{rotateX: '1.16rad'}]); - processTransform('rotateX(1.16rad)'); - }); - - it('should throw when passing an invalid angle prop', () => { - expect(() => - processTransform([{rotate: 10}]), - ).toThrowErrorMatchingSnapshot(); - expect(() => - processTransform('rotate(10)'), - ).toThrowErrorMatchingSnapshot(); - expect(() => - processTransform([{skewX: '10drg'}]), - ).toThrowErrorMatchingSnapshot(); - expect(() => - processTransform('skewX(10drg)'), - ).toThrowErrorMatchingSnapshot(); - }); - - it('should throw when passing an Animated.Value', () => { - expect(() => - processTransform([{rotate: {getValue: () => {}}}]), - ).toThrowErrorMatchingSnapshot(); - }); - }); -}); diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js similarity index 73% rename from packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-test.js rename to packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js index 73664279753..976060faab2 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js @@ -8,6 +8,7 @@ * @format */ +import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; import processTransformOrigin from '../processTransformOrigin'; describe('processTransformOrigin', () => { @@ -15,10 +16,10 @@ describe('processTransformOrigin', () => { it('only accepts three values', () => { expect(() => { processTransformOrigin([]); - }).toThrowErrorMatchingSnapshot(); + }).toThrow('Transform origin must have exactly 3 values.'); expect(() => { processTransformOrigin(['50%', '50%']); - }).toThrowErrorMatchingSnapshot(); + }).toThrow('Transform origin must have exactly 3 values.'); }); it('should transform a string', () => { @@ -65,34 +66,22 @@ describe('processTransformOrigin', () => { it('should not allow specifying same position twice', () => { expect(() => { processTransformOrigin('top top'); - }).toThrowErrorMatchingInlineSnapshot( - `"Could not parse transform-origin: top top"`, - ); + }).toThrow('Could not parse transform-origin: top top'); expect(() => { processTransformOrigin('right right'); - }).toThrowErrorMatchingInlineSnapshot( - `"Transform-origin right can only be used for x-position"`, - ); + }).toThrow('Transform-origin right can only be used for x-position'); expect(() => { processTransformOrigin('bottom bottom'); - }).toThrowErrorMatchingInlineSnapshot( - `"Could not parse transform-origin: bottom bottom"`, - ); + }).toThrow('Could not parse transform-origin: bottom bottom'); expect(() => { processTransformOrigin('left left'); - }).toThrowErrorMatchingInlineSnapshot( - `"Transform-origin left can only be used for x-position"`, - ); + }).toThrow('Transform-origin left can only be used for x-position'); expect(() => { processTransformOrigin('top bottom'); - }).toThrowErrorMatchingInlineSnapshot( - `"Could not parse transform-origin: top bottom"`, - ); + }).toThrow('Could not parse transform-origin: top bottom'); expect(() => { processTransformOrigin('left right'); - }).toThrowErrorMatchingInlineSnapshot( - `"Transform-origin right can only be used for x-position"`, - ); + }).toThrow('Transform-origin right can only be used for x-position'); }); it('should handle three values', () => { @@ -113,22 +102,16 @@ describe('processTransformOrigin', () => { it('should enforce two value ordering', () => { expect(() => { processTransformOrigin('top 30%'); - }).toThrowErrorMatchingInlineSnapshot( - `"Could not parse transform-origin: top 30%"`, - ); + }).toThrow('Could not parse transform-origin: top 30%'); }); it('should not allow percents for z-position', () => { expect(() => { processTransformOrigin('top 30% 30%'); - }).toThrowErrorMatchingInlineSnapshot( - `"Could not parse transform-origin: top 30% 30%"`, - ); + }).toThrow('Could not parse transform-origin: top 30% 30%'); expect(() => { processTransformOrigin('top 30% center'); - }).toThrowErrorMatchingInlineSnapshot( - `"Could not parse transform-origin: top 30% center"`, - ); + }).toThrow('Could not parse transform-origin: top 30% center'); }); }); }); diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/setNormalizedColorAlpha-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/setNormalizedColorAlpha-itest.js similarity index 94% rename from packages/react-native/Libraries/StyleSheet/__tests__/setNormalizedColorAlpha-test.js rename to packages/react-native/Libraries/StyleSheet/__tests__/setNormalizedColorAlpha-itest.js index 03ab1e957f1..434139c0db0 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/setNormalizedColorAlpha-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/setNormalizedColorAlpha-itest.js @@ -8,6 +8,7 @@ * @format */ +import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; import normalizeColor from '../normalizeColor'; import setNormalizedColorAlpha from '../setNormalizedColorAlpha'; diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/splitLayoutProps-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/splitLayoutProps-itest.js similarity index 94% rename from packages/react-native/Libraries/StyleSheet/__tests__/splitLayoutProps-test.js rename to packages/react-native/Libraries/StyleSheet/__tests__/splitLayoutProps-itest.js index 4b2a49aa420..75b494fa41d 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/splitLayoutProps-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/splitLayoutProps-itest.js @@ -8,6 +8,7 @@ * @format */ +import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment'; import splitLayoutProps from '../splitLayoutProps'; test('splits style objects', () => {