From 462352e609102d137df1ce45220cd5b54d9b3bd4 Mon Sep 17 00:00:00 2001
From: Spencer Ahrens <sahrens@fb.com>
Date: Tue, 21 Mar 2017 22:18:57 -0700
Subject: [PATCH] add jest snapshot tests

Reviewed By: yungsters

Differential Revision: D4726519

fbshipit-source-id: 1ae98743cdb89acb2708d84073527015dbeee906
---
 .../Lists/__tests__/FlatList-test.js          |  64 ++++
 .../Lists/__tests__/SectionList-test.js       |  67 +++++
 .../__snapshots__/FlatList-test.js.snap       | 247 +++++++++++++++
 .../__snapshots__/SectionList-test.js.snap    | 281 ++++++++++++++++++
 4 files changed, 659 insertions(+)
 create mode 100644 Libraries/CustomComponents/Lists/__tests__/FlatList-test.js
 create mode 100644 Libraries/CustomComponents/Lists/__tests__/SectionList-test.js
 create mode 100644 Libraries/CustomComponents/Lists/__tests__/__snapshots__/FlatList-test.js.snap
 create mode 100644 Libraries/CustomComponents/Lists/__tests__/__snapshots__/SectionList-test.js.snap

diff --git a/Libraries/CustomComponents/Lists/__tests__/FlatList-test.js b/Libraries/CustomComponents/Lists/__tests__/FlatList-test.js
new file mode 100644
index 000000000..945e5f64e
--- /dev/null
+++ b/Libraries/CustomComponents/Lists/__tests__/FlatList-test.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ */
+'use strict';
+
+jest.disableAutomock();
+
+const React = require('React');
+const ReactTestRenderer = require('react-test-renderer');
+
+const FlatList = require('FlatList');
+
+describe('FlatList', () => {
+  it('renders simple list', () => {
+    const component = ReactTestRenderer.create(
+      <FlatList
+        data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
+        renderItem={({item}) => <item value={item.key} />}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+  it('renders empty list', () => {
+    const component = ReactTestRenderer.create(
+      <FlatList
+        data={[]}
+        renderItem={({item}) => <item value={item.key} />}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+  it('renders null list', () => {
+    const component = ReactTestRenderer.create(
+      <FlatList
+        data={undefined}
+        renderItem={({item}) => <item value={item.key} />}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+  it('renders all the bells and whistles', () => {
+    const component = ReactTestRenderer.create(
+      <FlatList
+        ItemSeparatorComponent={() => <separator />}
+        ListFooterComponent={() => <footer />}
+        ListHeaderComponent={() => <header />}
+        data={new Array(5).fill().map((_, ii) => ({id: String(ii)}))}
+        keyExtractor={(item, index) => item.id}
+        getItemLayout={({index}) => ({length: 50, offset: index * 50})}
+        numColumns={2}
+        refreshing={false}
+        onRefresh={jest.fn()}
+        renderItem={({item}) => <item value={item.id} />}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/Libraries/CustomComponents/Lists/__tests__/SectionList-test.js b/Libraries/CustomComponents/Lists/__tests__/SectionList-test.js
new file mode 100644
index 000000000..945e66026
--- /dev/null
+++ b/Libraries/CustomComponents/Lists/__tests__/SectionList-test.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ */
+'use strict';
+
+jest.disableAutomock();
+
+const React = require('React');
+const ReactTestRenderer = require('react-test-renderer');
+
+const SectionList = require('SectionList');
+
+describe('SectionList', () => {
+  it('renders empty list', () => {
+    const component = ReactTestRenderer.create(
+      <SectionList
+        sections={[]}
+        renderItem={({item}) => <item value={item.key} />}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+  it('rendering empty section headers is fine', () => {
+    const component = ReactTestRenderer.create(
+      <SectionList
+        sections={[{key: 's1', data: [{key: 'i1'}, {key: 'i2'}]}]}
+        renderItem={({item}) => <item value={item.key} />}
+        renderSectionHeader={() => null}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+  it('renders all the bells and whistles', () => {
+    const component = ReactTestRenderer.create(
+      <SectionList
+        ItemSeparatorComponent={() => <defaultItemSeparator />}
+        ListFooterComponent={() => <footer />}
+        ListHeaderComponent={() => <header />}
+        SectionSeparatorComponent={() => <sectionSeparator />}
+        sections={[
+          {
+            renderItem: ({item}) => <itemForSection1 value={item.id} />,
+            key: '1st Section',
+            keyExtractor: (item, index) => item.id,
+            SeparatorComponent: () => <itemSeparatorForSection1 />,
+            data: [{id: 'i1s1'}, {id: 'i2s1'}],
+          },
+          {
+            key: '2nd Section',
+            data: [{key: 'i1s2'}, {key: 'i2s2'}],
+          },
+        ]}
+        refreshing={false}
+        onRefresh={jest.fn()}
+        renderItem={({item}) => <defaultItem value={item.key} />}
+        renderSectionHeader={({section}) => <sectionHeader value={section.key} />}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/Libraries/CustomComponents/Lists/__tests__/__snapshots__/FlatList-test.js.snap b/Libraries/CustomComponents/Lists/__tests__/__snapshots__/FlatList-test.js.snap
new file mode 100644
index 000000000..cafff5223
--- /dev/null
+++ b/Libraries/CustomComponents/Lists/__tests__/__snapshots__/FlatList-test.js.snap
@@ -0,0 +1,247 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FlatList renders all the bells and whistles 1`] = `
+<RCTScrollView
+  ItemSeparatorComponent={[Function]}
+  ListFooterComponent={[Function]}
+  ListHeaderComponent={[Function]}
+  data={
+    Array [
+      Object {
+        "id": "0",
+      },
+      Object {
+        "id": "1",
+      },
+      Object {
+        "id": "2",
+      },
+      Object {
+        "id": "3",
+      },
+      Object {
+        "id": "4",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  getItemLayout={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  numColumns={2}
+  onContentSizeChange={[Function]}
+  onEndReached={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onRefresh={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onViewableItemsChanged={undefined}
+  refreshControl={
+    <RefreshControlMock
+      onRefresh={[Function]}
+      refreshing={false}
+    />
+  }
+  refreshing={false}
+  removeClippedSubviews={true}
+  renderItem={[Function]}
+  renderScrollComponent={[Function]}
+  scrollEventThrottle={50}
+  shouldItemUpdate={[Function]}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <RCTRefreshControl />
+  <View>
+    <View
+      onLayout={[Function]}
+    >
+      <header />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
+      }
+    >
+      <item
+        value="0"
+      />
+      <item
+        value="1"
+      />
+    </View>
+    <separator />
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
+      }
+    >
+      <item
+        value="2"
+      />
+      <item
+        value="3"
+      />
+    </View>
+    <separator />
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
+      }
+    >
+      <item
+        value="4"
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <footer />
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`FlatList renders empty list 1`] = `
+<RCTScrollView
+  data={Array []}
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  numColumns={1}
+  onContentSizeChange={[Function]}
+  onEndReached={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onViewableItemsChanged={undefined}
+  removeClippedSubviews={true}
+  renderItem={[Function]}
+  renderScrollComponent={[Function]}
+  scrollEventThrottle={50}
+  shouldItemUpdate={[Function]}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View />
+</RCTScrollView>
+`;
+
+exports[`FlatList renders null list 1`] = `
+<RCTScrollView
+  data={undefined}
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  numColumns={1}
+  onContentSizeChange={[Function]}
+  onEndReached={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onViewableItemsChanged={undefined}
+  removeClippedSubviews={true}
+  renderItem={[Function]}
+  renderScrollComponent={[Function]}
+  scrollEventThrottle={50}
+  shouldItemUpdate={[Function]}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View />
+</RCTScrollView>
+`;
+
+exports[`FlatList renders simple list 1`] = `
+<RCTScrollView
+  data={
+    Array [
+      Object {
+        "key": "i1",
+      },
+      Object {
+        "key": "i2",
+      },
+      Object {
+        "key": "i3",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  numColumns={1}
+  onContentSizeChange={[Function]}
+  onEndReached={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onViewableItemsChanged={undefined}
+  removeClippedSubviews={true}
+  renderItem={[Function]}
+  renderScrollComponent={[Function]}
+  scrollEventThrottle={50}
+  shouldItemUpdate={[Function]}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View>
+    <View
+      onLayout={[Function]}
+    >
+      <item
+        value="i1"
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <item
+        value="i2"
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <item
+        value="i3"
+      />
+    </View>
+  </View>
+</RCTScrollView>
+`;
diff --git a/Libraries/CustomComponents/Lists/__tests__/__snapshots__/SectionList-test.js.snap b/Libraries/CustomComponents/Lists/__tests__/__snapshots__/SectionList-test.js.snap
new file mode 100644
index 000000000..5b4f27b3d
--- /dev/null
+++ b/Libraries/CustomComponents/Lists/__tests__/__snapshots__/SectionList-test.js.snap
@@ -0,0 +1,281 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SectionList rendering empty section headers is fine 1`] = `
+<RCTScrollView
+  ItemSeparatorComponent={undefined}
+  data={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "i1",
+          },
+          Object {
+            "key": "i2",
+          },
+        ],
+        "key": "s1",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  isItemSticky={[Function]}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReached={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onViewableItemsChanged={undefined}
+  removeClippedSubviews={true}
+  renderItem={[Function]}
+  renderScrollComponent={[Function]}
+  renderSectionHeader={[Function]}
+  scrollEventThrottle={50}
+  sections={
+    Array [
+      Object {
+        "data": Array [
+          Object {
+            "key": "i1",
+          },
+          Object {
+            "key": "i2",
+          },
+        ],
+        "key": "s1",
+      },
+    ]
+  }
+  shouldItemUpdate={[Function]}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View>
+    <View
+      onLayout={[Function]}
+    />
+    <View
+      onLayout={[Function]}
+    >
+      <View>
+        <item
+          value="i1"
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <View>
+        <item
+          value="i2"
+        />
+      </View>
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`SectionList renders all the bells and whistles 1`] = `
+<RCTScrollView
+  ItemSeparatorComponent={undefined}
+  ListFooterComponent={[Function]}
+  ListHeaderComponent={[Function]}
+  SectionSeparatorComponent={[Function]}
+  data={
+    Array [
+      Object {
+        "SeparatorComponent": [Function],
+        "data": Array [
+          Object {
+            "id": "i1s1",
+          },
+          Object {
+            "id": "i2s1",
+          },
+        ],
+        "key": "1st Section",
+        "keyExtractor": [Function],
+        "renderItem": [Function],
+      },
+      Object {
+        "data": Array [
+          Object {
+            "key": "i1s2",
+          },
+          Object {
+            "key": "i2s2",
+          },
+        ],
+        "key": "2nd Section",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  isItemSticky={[Function]}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReached={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onRefresh={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onViewableItemsChanged={undefined}
+  refreshControl={
+    <RefreshControlMock
+      onRefresh={[Function]}
+      refreshing={false}
+    />
+  }
+  refreshing={false}
+  removeClippedSubviews={true}
+  renderItem={[Function]}
+  renderScrollComponent={[Function]}
+  renderSectionHeader={[Function]}
+  scrollEventThrottle={50}
+  sections={
+    Array [
+      Object {
+        "SeparatorComponent": [Function],
+        "data": Array [
+          Object {
+            "id": "i1s1",
+          },
+          Object {
+            "id": "i2s1",
+          },
+        ],
+        "key": "1st Section",
+        "keyExtractor": [Function],
+        "renderItem": [Function],
+      },
+      Object {
+        "data": Array [
+          Object {
+            "key": "i1s2",
+          },
+          Object {
+            "key": "i2s2",
+          },
+        ],
+        "key": "2nd Section",
+      },
+    ]
+  }
+  shouldItemUpdate={[Function]}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <RCTRefreshControl />
+  <View>
+    <View
+      onLayout={[Function]}
+    >
+      <header />
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <sectionHeader
+        value="1st Section"
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <View>
+        <itemForSection1
+          value="i1s1"
+        />
+        <itemSeparatorForSection1 />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <View>
+        <itemForSection1
+          value="i2s1"
+        />
+        <sectionSeparator />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <sectionHeader
+        value="2nd Section"
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <View>
+        <defaultItem
+          value="i1s2"
+        />
+        <defaultItemSeparator />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <View>
+        <defaultItem
+          value="i2s2"
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <footer />
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`SectionList renders empty list 1`] = `
+<RCTScrollView
+  ItemSeparatorComponent={undefined}
+  data={Array []}
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  isItemSticky={[Function]}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReached={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onViewableItemsChanged={undefined}
+  removeClippedSubviews={true}
+  renderItem={[Function]}
+  renderScrollComponent={[Function]}
+  scrollEventThrottle={50}
+  sections={Array []}
+  shouldItemUpdate={[Function]}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View />
+</RCTScrollView>
+`;