add snapshots for mocked and unmocked components part 2 (#24593)

Summary:
Per conversation with TheSavior, in #24538, this adds snapshot tests for more components. Shallow and deep snapshots are included.

[General] [Added] - Snapshots
Pull Request resolved: https://github.com/facebook/react-native/pull/24593

Differential Revision: D15082831

Pulled By: TheSavior

fbshipit-source-id: bc7f27317e2fd0bad133f4ba4d81996d08a12c44

Libraries/Components/MaskedView/__tests__/MaskedViewIOS-test.js

@@ -0,0 +1,81 @@
+/**
+ * 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 Text = require('Text');
+const View = require('View');
+const MaskedViewIOS = require('MaskedViewIOS');
+
+const render = require('../../../../jest/renderer');
+
+describe('<MaskedViewIOS />', () => {
+  it('should render as <RCTMaskedView> when mocked', () => {
+    const instance = render.create(
+      <MaskedViewIOS
+        maskElement={
+          <View>
+            <Text>Basic Mask</Text>
+          </View>
+        }>
+        <View />
+      </MaskedViewIOS>,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+
+  it('should shallow render as <MaskedViewIOS> when mocked', () => {
+    const output = render.shallow(
+      <MaskedViewIOS
+        maskElement={
+          <View>
+            <Text>Basic Mask</Text>
+          </View>
+        }>
+        <View />
+      </MaskedViewIOS>,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should shallow render as <MaskedViewIOS> when not mocked', () => {
+    jest.dontMock('MaskedViewIOS');
+
+    const output = render.shallow(
+      <MaskedViewIOS
+        maskElement={
+          <View>
+            <Text>Basic Mask</Text>
+          </View>
+        }>
+        <View />
+      </MaskedViewIOS>,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should render as <RCTMaskedView> when not mocked', () => {
+    jest.dontMock('MaskedViewIOS');
+
+    const instance = render.create(
+      <MaskedViewIOS
+        maskElement={
+          <View>
+            <Text>Basic Mask</Text>
+          </View>
+        }>
+        <View />
+      </MaskedViewIOS>,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+});

Libraries/Components/MaskedView/__tests__/__snapshots__/MaskedViewIOS-test.js.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<MaskedViewIOS /> should render as <RCTMaskedView> when mocked 1`] = `
+<RCTMaskedView>
+  <View
+    pointerEvents="none"
+    style={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View>
+      <Text>
+        Basic Mask
+      </Text>
+    </View>
+  </View>
+  <View />
+</RCTMaskedView>
+`;
+
+exports[`<MaskedViewIOS /> should render as <RCTMaskedView> when not mocked 1`] = `
+<RCTMaskedView>
+  <View
+    pointerEvents="none"
+    style={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View>
+      <Text>
+        Basic Mask
+      </Text>
+    </View>
+  </View>
+  <View />
+</RCTMaskedView>
+`;
+
+exports[`<MaskedViewIOS /> should shallow render as <MaskedViewIOS> when mocked 1`] = `
+<MaskedViewIOS
+  maskElement={
+    <View>
+      <Text>
+        Basic Mask
+      </Text>
+    </View>
+  }
+>
+  <View />
+</MaskedViewIOS>
+`;
+
+exports[`<MaskedViewIOS /> should shallow render as <MaskedViewIOS> when not mocked 1`] = `
+<MaskedViewIOS
+  maskElement={
+    <View>
+      <Text>
+        Basic Mask
+      </Text>
+    </View>
+  }
+>
+  <View />
+</MaskedViewIOS>
+`;

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

@@ -0,0 +1,63 @@
+/**
+ * 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 Picker = require('../Picker');
+
+const render = require('../../../../jest/renderer');
+
+describe('<Picker />', () => {
+  it('should render as <View> when mocked', () => {
+    const instance = render.create(
+      <Picker selectedValue="foo" onValueChange={jest.fn()}>
+        <Picker.Item label="foo" value="foo" />
+        <Picker.Item label="bar" value="bar" />
+      </Picker>,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+
+  it('should shallow render as <Picker> when mocked', () => {
+    const output = render.shallow(
+      <Picker selectedValue="foo" onValueChange={jest.fn()}>
+        <Picker.Item label="foo" value="foo" />
+        <Picker.Item label="bar" value="bar" />
+      </Picker>,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should shallow render as <Picker> when not mocked', () => {
+    jest.dontMock('Picker');
+
+    const output = render.shallow(
+      <Picker selectedValue="foo" onValueChange={jest.fn()}>
+        <Picker.Item label="foo" value="foo" />
+        <Picker.Item label="bar" value="bar" />
+      </Picker>,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should render as <View> when not mocked', () => {
+    jest.dontMock('Picker');
+
+    const instance = render.create(
+      <Picker selectedValue="foo" onValueChange={jest.fn()}>
+        <Picker.Item label="foo" value="foo" />
+        <Picker.Item label="bar" value="bar" />
+      </Picker>,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Picker /> should render as <View> when mocked 1`] = `
+<View>
+  <RCTPicker
+    items={
+      Array [
+        Object {
+          "label": "foo",
+          "textColor": undefined,
+          "value": "foo",
+        },
+        Object {
+          "label": "bar",
+          "textColor": undefined,
+          "value": "bar",
+        },
+      ]
+    }
+    onChange={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    selectedIndex={0}
+    style={
+      Array [
+        Object {
+          "height": 216,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`<Picker /> should render as <View> when not mocked 1`] = `
+<View>
+  <RCTPicker
+    items={
+      Array [
+        Object {
+          "label": "foo",
+          "textColor": undefined,
+          "value": "foo",
+        },
+        Object {
+          "label": "bar",
+          "textColor": undefined,
+          "value": "bar",
+        },
+      ]
+    }
+    onChange={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    selectedIndex={0}
+    style={
+      Array [
+        Object {
+          "height": 216,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`<Picker /> should shallow render as <Picker> when mocked 1`] = `
+<Picker
+  mode="dialog"
+  onValueChange={[MockFunction]}
+  selectedValue="foo"
+>
+  <PickerItem
+    label="foo"
+    value="foo"
+  />
+  <PickerItem
+    label="bar"
+    value="bar"
+  />
+</Picker>
+`;
+
+exports[`<Picker /> should shallow render as <Picker> when not mocked 1`] = `
+<Picker
+  mode="dialog"
+  onValueChange={[MockFunction]}
+  selectedValue="foo"
+>
+  <PickerItem
+    label="foo"
+    value="foo"
+  />
+  <PickerItem
+    label="bar"
+    value="bar"
+  />
+</Picker>
+`;

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

@@ -0,0 +1,52 @@
+/**
+ * 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 ProgressBarAndroid = require('../ProgressBarAndroid.android');
+
+const render = require('../../../../jest/renderer');
+
+describe('<ProgressBarAndroid />', () => {
+  it('should render as <ProgressBarAndroid> when mocked', () => {
+    const instance = render.create(
+      <ProgressBarAndroid styleAttr="Horizontal" />,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+
+  it('should shallow render as <ForwardRef(ProgressBarAndroid)> when mocked', () => {
+    const output = render.shallow(
+      <ProgressBarAndroid styleAttr="Horizontal" />,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should shallow render as <ForwardRef(ProgressBarAndroid)> when not mocked', () => {
+    jest.dontMock('ProgressBarAndroid');
+
+    const output = render.shallow(
+      <ProgressBarAndroid styleAttr="Horizontal" />,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should render as <ProgressBarAndroid> when not mocked', () => {
+    jest.dontMock('ProgressBarAndroid');
+
+    const instance = render.create(
+      <ProgressBarAndroid styleAttr="Horizontal" />,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ProgressBarAndroid /> should render as <ProgressBarAndroid> when mocked 1`] = `
+<AndroidProgressBar
+  animating={true}
+  indeterminate={true}
+  styleAttr="Horizontal"
+/>
+`;
+
+exports[`<ProgressBarAndroid /> should render as <ProgressBarAndroid> when not mocked 1`] = `
+<AndroidProgressBar
+  animating={true}
+  indeterminate={true}
+  styleAttr="Horizontal"
+/>
+`;
+
+exports[`<ProgressBarAndroid /> should shallow render as <ForwardRef(ProgressBarAndroid)> when mocked 1`] = `
+<ForwardRef(ProgressBarAndroid)
+  animating={true}
+  indeterminate={true}
+  styleAttr="Horizontal"
+/>
+`;
+
+exports[`<ProgressBarAndroid /> should shallow render as <ForwardRef(ProgressBarAndroid)> when not mocked 1`] = `
+<ForwardRef(ProgressBarAndroid)
+  animating={true}
+  indeterminate={true}
+  styleAttr="Horizontal"
+/>
+`;

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

@@ -0,0 +1,43 @@
+/**
+ * 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 ProgressViewIOS = require('../ProgressViewIOS');
+
+const render = require('../../../../jest/renderer');
+
+describe('<ProgressViewIOS />', () => {
+  it('should render as <RCTProgressView> when mocked', () => {
+    const instance = render.create(<ProgressViewIOS progress={90} />);
+    expect(instance).toMatchSnapshot();
+  });
+
+  it('should shallow render as <ForwardRef(ProgressViewIOS)> when mocked', () => {
+    const output = render.shallow(<ProgressViewIOS progress={90} />);
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should shallow render as <ForwardRef(ProgressViewIOS)> when not mocked', () => {
+    jest.dontMock('ProgressViewIOS');
+
+    const output = render.shallow(<ProgressViewIOS progress={90} />);
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should render as <RCTProgressView> when not mocked', () => {
+    jest.dontMock('ProgressViewIOS');
+
+    const instance = render.create(<ProgressViewIOS progress={90} />);
+    expect(instance).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ProgressViewIOS /> should render as <RCTProgressView> when mocked 1`] = `
+<RCTProgressView
+  progress={90}
+  style={
+    Array [
+      Object {
+        "height": 2,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`<ProgressViewIOS /> should render as <RCTProgressView> when not mocked 1`] = `
+<RCTProgressView
+  progress={90}
+  style={
+    Array [
+      Object {
+        "height": 2,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`<ProgressViewIOS /> should shallow render as <ForwardRef(ProgressViewIOS)> when mocked 1`] = `
+<ForwardRef(ProgressViewIOS)
+  progress={90}
+/>
+`;
+
+exports[`<ProgressViewIOS /> should shallow render as <ForwardRef(ProgressViewIOS)> when not mocked 1`] = `
+<ForwardRef(ProgressViewIOS)
+  progress={90}
+/>
+`;

Libraries/Modal/__tests__/Modal-test.js

@@ -0,0 +1,60 @@
+/**
+ * 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 View = require('View');
+const Modal = require('../Modal');
+
+const render = require('../../../jest/renderer');
+
+describe('<Modal />', () => {
+  it('should render as <Modal> when mocked', () => {
+    const instance = render.create(
+      <Modal>
+        <View />
+      </Modal>,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+
+  it('should shallow render as <Component> when mocked', () => {
+    const output = render.shallow(
+      <Modal>
+        <View />
+      </Modal>,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should shallow render as <Modal> when not mocked', () => {
+    jest.dontMock('Modal');
+
+    const output = render.shallow(
+      <Modal>
+        <View />
+      </Modal>,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should render as <RCTModalHostView> when not mocked', () => {
+    jest.dontMock('Modal');
+
+    const instance = render.create(
+      <Modal>
+        <View />
+      </Modal>,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+});

Libraries/Modal/__tests__/__snapshots__/Modal-test.js.snap

@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Modal /> should render as <Modal> when mocked 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  visible={true}
+>
+  <View />
+</Modal>
+`;
+
+exports[`<Modal /> should render as <RCTModalHostView> when not mocked 1`] = `
+<RCTModalHostView
+  animationType="none"
+  hardwareAccelerated={false}
+  identifier={1}
+  onStartShouldSetResponder={[Function]}
+  presentationStyle="fullScreen"
+  style={
+    Object {
+      "position": "absolute",
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "top": 0,
+        },
+        Object {
+          "backgroundColor": "white",
+        },
+      ]
+    }
+  >
+    <View
+      pointerEvents="box-none"
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <View
+        collapsable={true}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <View />
+      </View>
+    </View>
+  </View>
+</RCTModalHostView>
+`;
+
+exports[`<Modal /> should shallow render as <Component> when mocked 1`] = `
+<Component
+  hardwareAccelerated={false}
+  visible={true}
+>
+  <View />
+</Component>
+`;
+
+exports[`<Modal /> should shallow render as <Modal> when not mocked 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  visible={true}
+>
+  <View />
+</Modal>
+`;