* Copyright (c) 2024 Huawei Technologies Co., Ltd.
*
* This source code is licensed under the MIT license found in the
* LICENSE-MIT file in the root directory of this source tree.
*/
import { StyleSheet, Text, View } from 'react-native';
import { TestSuite, TestCase } from '@rnoh/testerino';
export function TransformTest() {
return (
<TestSuite name="Transform">
<TestCase itShould="Show boxes with different scaling">
<View style={styles.wrapper}>
<View style={styles.box}>
<Text style={styles.text}>Original Object</Text>
</View>
<View
style={[
styles.box,
{
transform: [{ scale: 2 }],
},
]}>
<Text style={styles.text}>Scale by 2</Text>
</View>
<View
style={[
styles.box,
{
transform: [{ scaleX: 2 }],
},
]}>
<Text style={styles.text}>ScaleX by 2</Text>
</View>
<View
style={[
styles.box,
{
transform: [{ scaleY: 2 }],
},
]}>
<Text style={styles.text}>ScaleY by 2</Text>
</View>
</View>
</TestCase>
<TestCase itShould="Show boxes with different rotations">
<View style={styles.wrapper}>
<View style={styles.box}>
<Text style={styles.text}>Original Object</Text>
</View>
<View
style={[
styles.box,
{
transform: [{ rotate: '45deg' }],
},
]}>
<Text style={styles.text}>Rotate by 45 deg</Text>
</View>
<View
style={[
styles.box,
{
transform: [{ rotateX: '45deg' }, { rotateZ: '45deg' }],
},
]}>
<Text style={styles.text}>Rotate X&Z by 45 deg</Text>
</View>
<View
style={[
styles.box,
{
transform: [{ rotateY: '45deg' }, { rotateZ: '45deg' }],
},
]}>
<Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
</View>
</View>
</TestCase>
<TestCase itShould="Show boxes with different skews [fails]">
<View style={styles.wrapper}>
<View style={styles.box}>
<Text style={styles.text}>Original Object</Text>
</View>
<View
style={[
styles.box,
{
transform: [{ skewX: '45deg' }],
},
]}>
<Text style={styles.text}>SkewX by 45 deg</Text>
</View>
<View
style={[
styles.box,
{
transform: [{ skewY: '45deg' }],
},
]}>
<Text style={styles.text}>SkewY by 45 deg</Text>
</View>
<View
style={[
styles.box,
{
transform: [{ skewX: '30deg' }, { skewY: '30deg' }],
},
]}>
<Text style={styles.text}>Skew X&Y by 30 deg</Text>
</View>
</View>
</TestCase>
<TestCase itShould="Show boxes translated by 20 dp (half of box size)">
<View style={styles.wrapper}>
<View style={styles.box}>
<Text style={styles.text}>Original Object</Text>
</View>
<View
style={[
styles.box,
{
transform: [{ translateX: -20 }],
},
]}>
<Text style={styles.text}>TranslateX by -20 </Text>
</View>
<View
style={[
styles.box,
{
transform: [{ translateY: 20 }],
},
]}>
<Text style={styles.text}>TranslateY by 20 </Text>
</View>
</View>
</TestCase>
</TestSuite>
);
}
const styles = StyleSheet.create({
box: {
height: 40,
width: 40,
borderRadius: 5,
marginHorizontal: 25,
marginVertical: 25,
backgroundColor: '#61dafb',
justifyContent: 'center',
},
wrapper: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
},
text: {
fontSize: 6,
margin: 8,
fontWeight: 'bold',
textAlign: 'center',
color: '#000',
height: '100%',
},
});
