WIP: add snapshots for mocked and unmocked components (#24554)

Summary:
Per a conversation with TheSavior, in #24538, this adds snapshot tests for all components whose mocks will be addressed in that PR. Shallow and deep snapshots are included.

[General] [Added] - Snapshots
Pull Request resolved: #24554

Differential Revision: D15062197

Pulled By: cpojer

fbshipit-source-id: 70ddbaa5e6d1d2c0fd1130ab04c458d9c49d0ee8

Libraries/Components/ActivityIndicator/__tests__/ActivityIndicator-test.js

@@ -15,7 +15,7 @@ const React = require('React');
 const ActivityIndicator = require('ActivityIndicator');
 const render = require('../../../../jest/renderer');
 
-describe('ActivityIndicator', () => {
+describe('<ActivityIndicator />', () => {
   it('should set displayName to prevent <Component /> regressions', () => {
     expect(ActivityIndicator.displayName).toBe('ActivityIndicator');
   });

Libraries/Components/ActivityIndicator/__tests__/__snapshots__/ActivityIndicator-test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ActivityIndicator should render as <ActivityIndicator> when mocked 1`] = `
+exports[`<ActivityIndicator /> should render as <ActivityIndicator> when mocked 1`] = `
 <ActivityIndicator
   animating={true}
   color="#0000ff"
@@ -9,7 +9,7 @@ exports[`ActivityIndicator should render as <ActivityIndicator> when mocked 1`]
 />
 `;
 
-exports[`ActivityIndicator should render as <View> when not mocked 1`] = `
+exports[`<ActivityIndicator /> should render as <View> when not mocked 1`] = `
 <View
   style={
     Object {
@@ -35,7 +35,7 @@ exports[`ActivityIndicator should render as <View> when not mocked 1`] = `
 </View>
 `;
 
-exports[`ActivityIndicator should shallow render as <ActivityIndicator> when mocked 1`] = `
+exports[`<ActivityIndicator /> should shallow render as <ActivityIndicator> when mocked 1`] = `
 <ActivityIndicator
   animating={true}
   color="#0000ff"
@@ -44,7 +44,7 @@ exports[`ActivityIndicator should shallow render as <ActivityIndicator> when moc
 />
 `;
 
-exports[`ActivityIndicator should shallow render as <ForwardRef(ActivityIndicator)> when not mocked 1`] = `
+exports[`<ActivityIndicator /> should shallow render as <ForwardRef(ActivityIndicator)> when not mocked 1`] = `
 <ForwardRef(ActivityIndicator)
   animating={true}
   color="#0000ff"

Libraries/Components/DatePicker/__tests__/DatePickerIOS-test.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @emails oncall+react_native
+ * @flow
+ */
+
+'use strict';
+
+const React = require('React');
+const DatePickerIOS = require('DatePickerIOS');
+const render = require('../../../../jest/renderer');
+
+describe('DatePickerIOS', () => {
+  it('should render as <View> when mocked', () => {
+    const instance = render.create(
+      <DatePickerIOS
+        date={new Date(1555883690956)}
+        mode="date"
+        onDateChange={jest.fn()}
+      />,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+
+  it('should shallow render as <DatePickerIOS> when mocked', () => {
+    const output = render.shallow(
+      <DatePickerIOS
+        date={new Date(1555883690956)}
+        mode="date"
+        onDateChange={jest.fn()}
+      />,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should shallow render as <DatePickerIOS> when not mocked', () => {
+    jest.dontMock('DatePickerIOS');
+
+    const output = render.shallow(
+      <DatePickerIOS
+        date={new Date(1555883690956)}
+        mode="date"
+        onDateChange={jest.fn()}
+      />,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should render as <View> when not mocked', () => {
+    jest.dontMock('DatePickerIOS');
+
+    const instance = render.create(
+      <DatePickerIOS
+        date={new Date(1555883690956)}
+        mode="date"
+        onDateChange={jest.fn()}
+      />,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+});

Libraries/Components/DatePicker/__tests__/__snapshots__/DatePickerIOS-test.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DatePickerIOS should render as <View> when mocked 1`] = `
+<View>
+  <RCTDatePicker
+    date={1555883690956}
+    mode="date"
+    onChange={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "height": 216,
+      }
+    }
+  />
+</View>
+`;
+
+exports[`DatePickerIOS should render as <View> when not mocked 1`] = `
+<View>
+  <RCTDatePicker
+    date={1555883690956}
+    mode="date"
+    onChange={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "height": 216,
+      }
+    }
+  />
+</View>
+`;
+
+exports[`DatePickerIOS should shallow render as <DatePickerIOS> when mocked 1`] = `
+<DatePickerIOS
+  date={2019-04-21T21:54:50.956Z}
+  mode="date"
+  onDateChange={[MockFunction]}
+/>
+`;
+
+exports[`DatePickerIOS should shallow render as <DatePickerIOS> when not mocked 1`] = `
+<DatePickerIOS
+  date={2019-04-21T21:54:50.956Z}
+  mode="date"
+  onDateChange={[MockFunction]}
+/>
+`;

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -21,7 +21,6 @@ const nullthrows = require('nullthrows');
 
 const DrawerConsts = UIManager.getViewManagerConfig('AndroidDrawerLayout')
   .Constants;
-
 const dismissKeyboard = require('dismissKeyboard');
 const AndroidDrawerLayoutNativeComponent = require('AndroidDrawerLayoutNativeComponent');
 

Libraries/Components/DrawerAndroid/__tests__/DrawerAndroid-test.js

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @emails oncall+react_native
+ * @flow
+ */
+
+'use strict';
+
+const React = require('React');
+// $FlowFixMe
+const DrawerLayoutAndroid = require('../DrawerLayoutAndroid.android');
+const View = require('View');
+
+const render = require('../../../../jest/renderer');
+
+describe('<DrawerLayoutAndroid />', () => {
+  it('should render as <DrawerLayoutAndroid> when mocked', () => {
+    const instance = render.create(
+      <DrawerLayoutAndroid
+        drawerWidth={300}
+        drawerPosition={DrawerLayoutAndroid.positions.Left}
+        renderNavigationView={() => <View />}
+      />,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+
+  it('should shallow render as <DrawerLayoutAndroid> when mocked', () => {
+    const output = render.shallow(
+      <DrawerLayoutAndroid
+        drawerWidth={300}
+        drawerPosition={DrawerLayoutAndroid.positions.Left}
+        renderNavigationView={() => <View />}
+      />,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should shallow render as <DrawerLayoutAndroid> when not mocked', () => {
+    jest.dontMock('DrawerLayoutAndroid');
+
+    const output = render.shallow(
+      <DrawerLayoutAndroid
+        drawerWidth={300}
+        drawerPosition={DrawerLayoutAndroid.positions.Left}
+        renderNavigationView={() => <View />}
+      />,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should render as <DrawerLayoutAndroid> when not mocked', () => {
+    jest.dontMock('DrawerLayoutAndroid');
+
+    const instance = render.create(
+      <DrawerLayoutAndroid
+        drawerWidth={300}
+        drawerPosition={DrawerLayoutAndroid.positions.Left}
+        renderNavigationView={() => <View />}
+      />,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+});

Libraries/Components/DrawerAndroid/__tests__/__snapshots__/DrawerAndroid-test.js.snap

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DrawerLayoutAndroid /> should render as <DrawerLayoutAndroid> when mocked 1`] = `
+<AndroidDrawerLayout
+  drawerBackgroundColor="white"
+  drawerPosition={10}
+  drawerWidth={300}
+  onDrawerClose={[Function]}
+  onDrawerOpen={[Function]}
+  onDrawerSlide={[Function]}
+  onDrawerStateChanged={[Function]}
+  renderNavigationView={[Function]}
+  style={
+    Array [
+      Object {
+        "elevation": 16,
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "position": "absolute",
+          "top": 0,
+        },
+        Object {
+          "backgroundColor": "white",
+          "width": 300,
+        },
+      ]
+    }
+  >
+    <View />
+  </View>
+</AndroidDrawerLayout>
+`;
+
+exports[`<DrawerLayoutAndroid /> should render as <DrawerLayoutAndroid> when not mocked 1`] = `
+<AndroidDrawerLayout
+  drawerBackgroundColor="white"
+  drawerPosition={10}
+  drawerWidth={300}
+  onDrawerClose={[Function]}
+  onDrawerOpen={[Function]}
+  onDrawerSlide={[Function]}
+  onDrawerStateChanged={[Function]}
+  renderNavigationView={[Function]}
+  style={
+    Array [
+      Object {
+        "elevation": 16,
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "position": "absolute",
+          "top": 0,
+        },
+        Object {
+          "backgroundColor": "white",
+          "width": 300,
+        },
+      ]
+    }
+  >
+    <View />
+  </View>
+</AndroidDrawerLayout>
+`;
+
+exports[`<DrawerLayoutAndroid /> should shallow render as <DrawerLayoutAndroid> when mocked 1`] = `
+<DrawerLayoutAndroid
+  drawerBackgroundColor="white"
+  drawerPosition={10}
+  drawerWidth={300}
+  renderNavigationView={[Function]}
+/>
+`;
+
+exports[`<DrawerLayoutAndroid /> should shallow render as <DrawerLayoutAndroid> when not mocked 1`] = `
+<DrawerLayoutAndroid
+  drawerBackgroundColor="white"
+  drawerPosition={10}
+  drawerWidth={300}
+  renderNavigationView={[Function]}
+/>
+`;