Skip to content

Commit

Permalink
add tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@tjzel
tjzel committed Sep 26, 2023
1 parent a7c88db commit 8b8abbb
Showing 1 changed file with 113 additions and 61 deletions.
174 changes: 113 additions & 61 deletions __typetests__/common.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,49 +317,87 @@ function DerivedValueTest() {
}

// useAnimatedScrollHandler
function AnimatedScrollHandlerTest() {
const translationY = useSharedValue(0);
const scrollHandler = useAnimatedScrollHandler((event) => {
translationY.value = event.contentOffset.y;
function AnimatedScrollHandlerTest1() {
const CustomScrollView = Animated.createAnimatedComponent(ScrollView);
const CustomFlatList = Animated.createAnimatedComponent(FlatList);
const scrollHandler1 = useAnimatedScrollHandler((event) => {
console.log(event.contentOffset.x);
console.log(event.eventName);
});
// We allow using colors in useAnimatedStyle but it's not a part
// of a public API hence we expect an error here.
// @ts-expect-error color cannot be a number
const stylez = useAnimatedStyle(() => {
return {
color: 'red',
backgroundColor: 0x00ff00,
transform: [
{
translateY: translationY.value,
},
{
rotate: `${Math.PI}rad`,
},
],
};
});
// @ts-expect-error Valid rotation is a string (either radians or degrees)
const style2 = useAnimatedStyle(() => {
return {
transform: [
{
rotate: Math.PI,
},
],
};
const scrollHandler2 = useAnimatedScrollHandler({
onScroll: (event) => {
console.log(event.contentOffset.x);
console.log(event.eventName);
},
// @ts-expect-error Properly detects wrong event name.
onWrongEvent: (event) => {
console.log(event.contentOffset.x);
console.log(event.eventName);
},
});
// @ts-expect-error color cannot be an object
const style3 = useAnimatedStyle(() => {
return {
color: {},
};

return (
<>
<Animated.ScrollView onScroll={scrollHandler1} />
<Animated.ScrollView onScroll={scrollHandler2} />
<CustomScrollView onScroll={scrollHandler1} />
<CustomScrollView onScroll={scrollHandler2} />
<Animated.FlatList
onScroll={scrollHandler1}
data={[]}
renderItem={null}
/>
<Animated.FlatList
onScroll={scrollHandler2}
data={[]}
renderItem={null}
/>
<CustomFlatList onScroll={scrollHandler1} data={[]} renderItem={null} />
<CustomFlatList onScroll={scrollHandler2} data={[]} renderItem={null} />
</>
);
}

function AnimatedScrollHandlerTest2() {
const CustomScrollView = Animated.createAnimatedComponent(ScrollView);
const CustomFlatList = Animated.createAnimatedComponent(FlatList);
const scrollHandler = useAnimatedScrollHandler(
// @ts-expect-error `event` is a `ReanimatedEvent`.
(event: NativeSyntheticEvent<NativeScrollEvent>) => {
// @ts-expect-error `event` is a `ReanimatedEvent`.
console.log(event.contentOffset.x);
// @ts-expect-error `event` is a `ReanimatedEvent`.
console.log(event.eventName);
}
);
return (
<>
<Animated.ScrollView onScroll={scrollHandler} />
<CustomScrollView onScroll={scrollHandler} />
<Animated.FlatList onScroll={scrollHandler} data={[]} renderItem={null} />
<CustomFlatList onScroll={scrollHandler} data={[]} renderItem={null} />
</>
);
}

function AnimatedScrollHandlerTest3() {
const CustomScrollView = Animated.createAnimatedComponent(ScrollView);
const CustomFlatList = Animated.createAnimatedComponent(FlatList);

const x = useSharedValue(0);
// This cast works because it's narrowing.
const scrollHandler = useAnimatedScrollHandler((event: NativeScrollEvent) => {
console.log(event.contentOffset.x);
// @ts-expect-error This gives error because of the cast.
console.log(event.eventName);
});
return (
<View style={styles.container}>
<Animated.View style={[styles.box, stylez]} />
<Animated.ScrollView onScroll={scrollHandler} scrollEventThrottle={16} />
</View>
<>
<Animated.ScrollView onScroll={scrollHandler} />
<CustomScrollView onScroll={scrollHandler} />
<Animated.FlatList onScroll={scrollHandler} data={[]} renderItem={null} />
<CustomFlatList onScroll={scrollHandler} data={[]} renderItem={null} />
</>
);
}

Expand Down Expand Up @@ -1289,7 +1327,7 @@ function testSetGestureState() {
Test Animated style
*/

function TestUseAnimatedStyleStyle1() {
function TestUseAnimatedStyle1() {
const sv = useSharedValue(0);
const animatedStyle = useAnimatedStyle(() => {
return {
Expand All @@ -1299,7 +1337,7 @@ function TestUseAnimatedStyleStyle1() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle2() {
function TestUseAnimatedStyle2() {
const sv = useSharedValue(true);
// @ts-expect-error properly detects illegal type
const animatedStyle = useAnimatedStyle(() => {
Expand All @@ -1310,15 +1348,15 @@ function TestUseAnimatedStyleStyle2() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle3() {
function TestUseAnimatedStyle3() {
const sv = useSharedValue({ width: 0 });
const animatedStyle = useAnimatedStyle(() => {
return sv.value;
});
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle4() {
function TestUseAnimatedStyle4() {
const sv = useSharedValue({ width: true });
// @ts-expect-error properly detects illegal type
const animatedStyle = useAnimatedStyle(() => {
Expand All @@ -1327,7 +1365,7 @@ function TestUseAnimatedStyleStyle4() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle5() {
function TestUseAnimatedStyle5() {
const animatedStyle = useAnimatedStyle(() => {
return {
transform: [{ translateX: 0 }],
Expand All @@ -1336,7 +1374,7 @@ function TestUseAnimatedStyleStyle5() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle6() {
function TestUseAnimatedStyle6() {
// @ts-expect-error properly detects illegal type
const animatedStyle = useAnimatedStyle(() => {
return {
Expand All @@ -1346,7 +1384,7 @@ function TestUseAnimatedStyleStyle6() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle7() {
function TestUseAnimatedStyle7() {
const sv = useSharedValue(0);
const animatedStyle = useAnimatedStyle(() => {
return {
Expand All @@ -1356,7 +1394,7 @@ function TestUseAnimatedStyleStyle7() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle8() {
function TestUseAnimatedStyle8() {
const sv = useSharedValue(0);
// @ts-expect-error properly detects illegal type
const animatedStyle = useAnimatedStyle(() => {
Expand All @@ -1367,7 +1405,7 @@ function TestUseAnimatedStyleStyle8() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle9() {
function TestUseAnimatedStyle9() {
const sv = useSharedValue({ translateX: 0 });
const animatedStyle = useAnimatedStyle(() => {
return {
Expand All @@ -1377,7 +1415,7 @@ function TestUseAnimatedStyleStyle9() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle10() {
function TestUseAnimatedStyle10() {
const sv = useSharedValue({ rotate: 0 });
// @ts-expect-error properly detects illegal type
const animatedStyle = useAnimatedStyle(() => {
Expand All @@ -1388,7 +1426,7 @@ function TestUseAnimatedStyleStyle10() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle11() {
function TestUseAnimatedStyle11() {
const sv = useSharedValue([{ translateX: 0 }]);
const animatedStyle = useAnimatedStyle(() => {
return {
Expand All @@ -1398,7 +1436,7 @@ function TestUseAnimatedStyleStyle11() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle12() {
function TestUseAnimatedStyle12() {
const sv = useSharedValue([{ rotate: 0 }]);
// @ts-expect-error properly detects illegal type
const animatedStyle = useAnimatedStyle(() => {
Expand All @@ -1409,7 +1447,7 @@ function TestUseAnimatedStyleStyle12() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle13() {
function TestUseAnimatedStyle13() {
const sv = useSharedValue(0);
const animatedStyle = useAnimatedStyle(() => {
return {
Expand All @@ -1423,7 +1461,7 @@ function TestUseAnimatedStyleStyle13() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle14() {
function TestUseAnimatedStyle14() {
const sv = useSharedValue(0);

// @ts-expect-error properly detects illegal type
Expand All @@ -1438,7 +1476,7 @@ function TestUseAnimatedStyleStyle14() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle15() {
function TestUseAnimatedStyle15() {
const sv = useSharedValue({ width: 0, height: 0 });

const animatedStyle = useAnimatedStyle(() => {
Expand All @@ -1450,7 +1488,7 @@ function TestUseAnimatedStyleStyle15() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle16() {
function TestUseAnimatedStyle16() {
const sv = useSharedValue({ width: 0 });

// @ts-expect-error properly detects illegal type
Expand All @@ -1463,7 +1501,7 @@ function TestUseAnimatedStyleStyle16() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle17() {
function TestUseAnimatedStyle17() {
const sv = useSharedValue({ shadowOffset: { width: 0, height: 0 } });
const animatedStyle = useAnimatedStyle(() => {
return {
Expand All @@ -1473,7 +1511,7 @@ function TestUseAnimatedStyleStyle17() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle18() {
function TestUseAnimatedStyle18() {
const sv = useSharedValue({ shadowOffset: { width: 0 } });
// @ts-expect-error properly detects illegal type
const animatedStyle = useAnimatedStyle(() => {
Expand All @@ -1484,7 +1522,7 @@ function TestUseAnimatedStyleStyle18() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle19() {
function TestUseAnimatedStyle19() {
const animatedStyle = useAnimatedStyle(() => {
return {
flexWrap: 'wrap',
Expand All @@ -1494,7 +1532,7 @@ function TestUseAnimatedStyleStyle19() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle20() {
function TestUseAnimatedStyle20() {
const animatedStyle = useAnimatedStyle(() => {
return {
flexWrap: 'wrap' as const,
Expand All @@ -1503,7 +1541,7 @@ function TestUseAnimatedStyleStyle20() {
return <Animated.View style={animatedStyle} />;
}

function TestUseAnimatedStyleStyle21() {
function TestUseAnimatedStyle21() {
const animatedStyle = useAnimatedStyle(() => {
return {
overflow: 'scroll',
Expand All @@ -1520,7 +1558,7 @@ function TestUseAnimatedStyleStyle21() {
);
}

function TestUseAnimatedStyleStyle22() {
function TestUseAnimatedStyle22() {
const animatedStyle = useAnimatedStyle(() => {
return {
overflow: 'hidden',
Expand All @@ -1535,6 +1573,14 @@ function TestUseAnimatedStyleStyle22() {
);
}

function TestUseAnimatedStyle23() {
const animatedStyle = useAnimatedStyle(() => ({
// @ts-expect-error Passing a number here will work,
// but we don't allow for it as a part of API.
backgroundColor: 0x000000,
}));
}

function TestInlineStyles1() {
const animatedIndex = useSharedValue(0);
const backgroundColor = useDerivedValue(() => {
Expand Down Expand Up @@ -1730,6 +1776,12 @@ function TestInlineStyles24() {
);
}

function TestInlineStyles25() {
// @ts-expect-error Passing a number here will work,
// but we don't allow for it as a part of API.
return <Animated.View style={{ backgroundColor: 0x000000 }} />;
}

// test style prop of Animated components

declare const RNStyle: ViewStyle;
Expand Down

0 comments on commit 8b8abbb

Please sign in to comment.