Add SafeAreaView tests

AppAndFlow · Nov 4, 2019 · e9c43a7 · e9c43a7
1 parent 71763ac
commit e9c43a7
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 11 deletions.
diff --git a/src/__tests__/__snapshots__/index-test.tsx.snap b/src/__tests__/__snapshots__/index-test.tsx.snap
@@ -138,3 +138,59 @@ exports[`SafeAreaProvider uses parent insets when available 1`] = `
   </RNCSafeAreaView>
 </RNCSafeAreaView>
 `;
+
+exports[`SafeAreaView can override padding styles 1`] = `
+<RNCSafeAreaView
+  onInsetsChange={[Function]}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "paddingBottom": 4,
+          "paddingLeft": 2,
+          "paddingRight": 3,
+          "paddingTop": 1,
+        },
+        Object {
+          "paddingTop": 0,
+        },
+      ]
+    }
+  >
+    <View />
+  </View>
+</RNCSafeAreaView>
+`;
+
+exports[`SafeAreaView renders 1`] = `
+<RNCSafeAreaView
+  onInsetsChange={[Function]}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "paddingBottom": 4,
+          "paddingLeft": 2,
+          "paddingRight": 3,
+          "paddingTop": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View />
+  </View>
+</RNCSafeAreaView>
+`;
diff --git a/src/__tests__/index-test.tsx b/src/__tests__/index-test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactTestRenderer from 'react-test-renderer';
 import { View } from 'react-native';
-import { SafeAreaProvider, useSafeArea } from '../index';
+import { SafeAreaProvider, SafeAreaView, useSafeArea } from '../index';
 import NativeSafeAreaView from '../NativeSafeAreaView';
 
 const PrintInsetsTestView = () => {
@@ -51,40 +51,40 @@ describe('SafeAreaProvider', () => {
     expect(component).toMatchSnapshot();
   });
 
-  it('uses parent insets when available', () => {
+  it('supports setting initial insets', () => {
     const component = ReactTestRenderer.create(
       <SafeAreaProvider
         initialSafeAreaInsets={{ top: 1, left: 2, right: 3, bottom: 4 }}
       >
-        <SafeAreaProvider>
-          <PrintInsetsTestView />
-        </SafeAreaProvider>
+        <PrintInsetsTestView />
       </SafeAreaProvider>,
     );
     expect(component).toMatchSnapshot();
   });
 
-  it('uses inner insets', () => {
+  it('uses parent insets when available', () => {
     const component = ReactTestRenderer.create(
       <SafeAreaProvider
         initialSafeAreaInsets={{ top: 1, left: 2, right: 3, bottom: 4 }}
       >
-        <SafeAreaProvider
-          initialSafeAreaInsets={{ top: 2, left: 3, right: 4, bottom: 5 }}
-        >
+        <SafeAreaProvider>
           <PrintInsetsTestView />
         </SafeAreaProvider>
       </SafeAreaProvider>,
     );
     expect(component).toMatchSnapshot();
   });
 
-  it('supports setting initial insets', () => {
+  it('uses inner insets', () => {
     const component = ReactTestRenderer.create(
       <SafeAreaProvider
         initialSafeAreaInsets={{ top: 1, left: 2, right: 3, bottom: 4 }}
       >
-        <PrintInsetsTestView />
+        <SafeAreaProvider
+          initialSafeAreaInsets={{ top: 2, left: 3, right: 4, bottom: 5 }}
+        >
+          <PrintInsetsTestView />
+        </SafeAreaProvider>
       </SafeAreaProvider>,
     );
     expect(component).toMatchSnapshot();
@@ -108,3 +108,31 @@ describe('SafeAreaProvider', () => {
     consoleErrorMock.mockRestore();
   });
 });
+
+describe('SafeAreaView', () => {
+  it('renders', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider
+        initialSafeAreaInsets={{ top: 1, left: 2, right: 3, bottom: 4 }}
+      >
+        <SafeAreaView>
+          <View />
+        </SafeAreaView>
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('can override padding styles', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider
+        initialSafeAreaInsets={{ top: 1, left: 2, right: 3, bottom: 4 }}
+      >
+        <SafeAreaView style={{ paddingTop: 0 }}>
+          <View />
+        </SafeAreaView>
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+});