@fluentui-react-native/experimental-shadow 0.2.18 → 0.2.20

package/src/__tests__/Shadow.test.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import { Shadow } from '../Shadow';
-import { useFluentTheme } from '@fluentui-react-native/framework';
+import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';
 import * as renderer from 'react-test-renderer';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import { Pressable } from '@fluentui-react-native/pressable';
 
+const backgroundColor = { backgroundColor: 'red' };
 interface ShadowTestProps {
   displayText: string;
   depth: string;
@@ -15,7 +16,7 @@ const TestShadow: React.FunctionComponent<ShadowTestProps> = (props: ShadowTestP
   const theme = useFluentTheme();
   return (
     <Shadow shadowToken={theme.shadows[props.depth]}>
-      <View>
+      <View style={backgroundColor}>
         <Text>{props.displayText}</Text>
       </View>
     </Shadow>
@@ -26,7 +27,22 @@ const TestPressableWithShadow: React.FunctionComponent = () => {
   const theme = useFluentTheme();
   return (
     <Shadow shadowToken={theme.shadows['shadow16']}>
-      <Pressable />
+      <Pressable style={backgroundColor} />
+    </Shadow>
+  );
+};
+
+interface ShadowOnChildViewWithProps {
+  childViewStyleProps: object;
+}
+
+const TestShadowOnChildViewWithProps: React.FunctionComponent<ShadowOnChildViewWithProps> = (props: ShadowOnChildViewWithProps) => {
+  const theme = useFluentTheme();
+  return (
+    <Shadow shadowToken={theme.shadows['shadow16']}>
+      <View style={mergeStyles(props.childViewStyleProps, backgroundColor)}>
+        <Text>{JSON.stringify(props.childViewStyleProps)}</Text>
+      </View>
     </Shadow>
   );
 };
@@ -104,6 +120,21 @@ describe('Shadow component tests', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('Shadow on a child with margin and padding', () => {
+    const tree = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ margin: 2, padding: 2 }} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Shadow on a child with border radius', () => {
+    const tree = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ borderRadius: 2 }} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Shadow on a child with border width', () => {
+    const tree = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ borderWidth: 2 }} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it('Shadow simple rendering does not invalidate styling', () => {
     checkRenderConsistency(() => <TestShadow displayText="Shadow render test" depth="shadow2" />, 2);
   });