Unit testing (#32)

* add testing lib

* remove coverage folder from git

* finished basic test setup

* fix tests typescript and import paths

* add first snapshot

* testing utils

* rename test files; update script flags; ++tests

* testing utils functions

* testing downloadAndResize wip

* remove download test

* specify unwanted coverage paths;
remove update snapshots flag

* fix strings tests

* testing downloadAndResize method

* increasing testing

* fixing snapshots wip

* fixed shell mobile snapshot

* adding snapshots for the screens

* fix onboard snapshot

* fix typescript issues

* fix TabsSelector snapshot

* Account for testing device's locale in ago() tests

* Remove platform detection on regex

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 659 insertions, 0 deletions

diff --git a/__tests__/view/shell/mobile/__snapshots__/Composer.test.tsx.snap b/__tests__/view/shell/mobile/__snapshots__/Composer.test.tsx.snap
new file mode 100644
index 000000000..6ced9871b
--- /dev/null
+++ b/__tests__/view/shell/mobile/__snapshots__/Composer.test.tsx.snap
@@ -0,0 +1,659 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Composer renders correctly 1`] = `
+<View
+  collapsable={false}
+  style={
+    Object {
+      "backgroundColor": "#fff",
+      "bottom": 0,
+      "paddingTop": 24,
+      "position": "absolute",
+      "top": 0,
+      "transform": Array [
+        Object {
+          "translateY": 844,
+        },
+      ],
+      "width": "100%",
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#fff",
+          "flex": 1,
+          "flexDirection": "column",
+          "height": "100%",
+          "padding": 15,
+          "paddingBottom": 0,
+        },
+        Object {
+          "paddingBottom": 0,
+        },
+      ]
+    }
+  >
+    <RCTSafeAreaView
+      emulateUnlessSupported={true}
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "height": 55,
+            "paddingBottom": 10,
+            "paddingHorizontal": 5,
+          }
+        }
+      >
+        <View
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#000000",
+                },
+                Array [
+                  Object {
+                    "color": "#0085ff",
+                  },
+                  Object {
+                    "fontSize": 18,
+                  },
+                ],
+              ]
+            }
+          >
+            Cancel
+          </Text>
+        </View>
+        <View
+          style={
+            Object {
+              "flex": 1,
+            }
+          }
+        />
+        <View
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "opacity": 1,
+            }
+          }
+        >
+          <BVLinearGradient
+            colors={
+              Array [
+                4292542719,
+                4294901882,
+              ]
+            }
+            endPoint={
+              Object {
+                "x": 1,
+                "y": 1,
+              }
+            }
+            locations={null}
+            startPoint={
+              Object {
+                "x": 0,
+                "y": 0,
+              }
+            }
+            style={
+              Object {
+                "borderRadius": 20,
+                "paddingHorizontal": 20,
+                "paddingVertical": 6,
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#000000",
+                  },
+                  Array [
+                    Object {
+                      "color": "#ffffff",
+                    },
+                    Object {
+                      "fontSize": 16,
+                    },
+                    Object {
+                      "fontWeight": "bold",
+                    },
+                  ],
+                ]
+              }
+            >
+              Reply
+            </Text>
+          </BVLinearGradient>
+        </View>
+      </View>
+      <RCTScrollView
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <View>
+          <View
+            style={
+              Object {
+                "borderTopColor": "#e4e2e2",
+                "borderTopWidth": 1,
+                "flexDirection": "row",
+                "paddingBottom": 16,
+                "paddingTop": 16,
+              }
+            }
+          >
+            <RNSVGSvgView
+              align="xMidYMid"
+              bbHeight={50}
+              bbWidth={50}
+              focusable={false}
+              height={50}
+              meetOrSlice={0}
+              minX={0}
+              minY={0}
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  Object {
+                    "flex": 0,
+                    "height": 50,
+                    "width": 50,
+                  },
+                ]
+              }
+              vbHeight={100}
+              vbWidth={100}
+              width={50}
+            >
+              <RNSVGGroup>
+                <RNSVGDefs>
+                  <RNSVGLinearGradient
+                    gradient={
+                      Array [
+                        0,
+                        -16742913,
+                        1,
+                        -14631929,
+                      ]
+                    }
+                    gradientTransform={null}
+                    gradientUnits={0}
+                    name="grad"
+                    x1="0"
+                    x2="1"
+                    y1="0"
+                    y2="1"
+                  />
+                </RNSVGDefs>
+                <RNSVGCircle
+                  cx="50"
+                  cy="50"
+                  fill={
+                    Array [
+                      1,
+                      "grad",
+                    ]
+                  }
+                  propList={
+                    Array [
+                      "fill",
+                    ]
+                  }
+                  r="50"
+                />
+                <RNSVGText
+                  content={null}
+                  dx={Array []}
+                  dy={Array []}
+                  fill={4294967295}
+                  font={
+                    Object {
+                      "fontSize": "50",
+                      "fontWeight": "bold",
+                      "textAnchor": "middle",
+                    }
+                  }
+                  propList={
+                    Array [
+                      "fill",
+                    ]
+                  }
+                  rotate={Array []}
+                  x={
+                    Array [
+                      "50",
+                    ]
+                  }
+                  y={
+                    Array [
+                      "67",
+                    ]
+                  }
+                >
+                  <RNSVGTSpan
+                    content="A"
+                    dx={Array []}
+                    dy={Array []}
+                    font={Object {}}
+                    rotate={Array []}
+                    x={Array []}
+                    y={Array []}
+                  />
+                </RNSVGText>
+              </RNSVGGroup>
+            </RNSVGSvgView>
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                  "paddingLeft": 13,
+                  "paddingRight": 8,
+                }
+              }
+            >
+              <Text
+                onLongPress={[Function]}
+                onPress={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000000",
+                    },
+                    Array [
+                      Object {
+                        "fontSize": 16,
+                      },
+                      Object {
+                        "fontWeight": "bold",
+                      },
+                      Object {
+                        "color": "#000000",
+                      },
+                    ],
+                  ]
+                }
+              >
+                Alice
+              </Text>
+              <Text
+                numberOfLines={6}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000000",
+                    },
+                    Array [
+                      Object {
+                        "fontSize": 16,
+                      },
+                      Object {
+                        "lineHeight": 20.8,
+                      },
+                      Object {
+                        "color": "#000000",
+                      },
+                    ],
+                  ]
+                }
+              >
+                Captain, maybe we ought to turn on the searchlights now. No… that’s just what they’ll be expecting us to do.
+              </Text>
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "borderTopColor": "#e4e2e2",
+                  "borderTopWidth": 1,
+                  "flexDirection": "row",
+                  "paddingTop": 16,
+                },
+                Object {
+                  "flex": 1,
+                },
+              ]
+            }
+          >
+            <RNSVGSvgView
+              align="xMidYMid"
+              bbHeight={50}
+              bbWidth={50}
+              focusable={false}
+              height={50}
+              meetOrSlice={0}
+              minX={0}
+              minY={0}
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  Object {
+                    "flex": 0,
+                    "height": 50,
+                    "width": 50,
+                  },
+                ]
+              }
+              vbHeight={100}
+              vbWidth={100}
+              width={50}
+            >
+              <RNSVGGroup>
+                <RNSVGDefs>
+                  <RNSVGLinearGradient
+                    gradient={
+                      Array [
+                        0,
+                        -1292135,
+                        1,
+                        -2424577,
+                      ]
+                    }
+                    gradientTransform={null}
+                    gradientUnits={0}
+                    name="grad"
+                    x1="0"
+                    x2="1"
+                    y1="0"
+                    y2="1"
+                  />
+                </RNSVGDefs>
+                <RNSVGCircle
+                  cx="50"
+                  cy="50"
+                  fill={
+                    Array [
+                      1,
+                      "grad",
+                    ]
+                  }
+                  propList={
+                    Array [
+                      "fill",
+                    ]
+                  }
+                  r="50"
+                />
+                <RNSVGText
+                  content={null}
+                  dx={Array []}
+                  dy={Array []}
+                  fill={4294967295}
+                  font={
+                    Object {
+                      "fontSize": "50",
+                      "fontWeight": "bold",
+                      "textAnchor": "middle",
+                    }
+                  }
+                  propList={
+                    Array [
+                      "fill",
+                    ]
+                  }
+                  rotate={Array []}
+                  x={
+                    Array [
+                      "50",
+                    ]
+                  }
+                  y={
+                    Array [
+                      "67",
+                    ]
+                  }
+                >
+                  <RNSVGTSpan
+                    content="X"
+                    dx={Array []}
+                    dy={Array []}
+                    font={Object {}}
+                    rotate={Array []}
+                    x={Array []}
+                    y={Array []}
+                  />
+                </RNSVGText>
+              </RNSVGGroup>
+            </RNSVGSvgView>
+            <TextInput
+              multiline={true}
+              onChangeText={[Function]}
+              placeholder="Write your reply"
+              placeholderTextColor="#968d8d"
+              scrollEnabled={true}
+              style={
+                Object {
+                  "alignSelf": "flex-start",
+                  "color": "#000000",
+                  "flex": 1,
+                  "fontSize": 18,
+                  "marginLeft": 8,
+                  "padding": 5,
+                }
+              }
+            />
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#ffffff",
+            "borderTopColor": "#e4e2e2",
+            "borderTopWidth": 1,
+            "flexDirection": "row",
+            "paddingRight": 5,
+            "paddingVertical": 10,
+          }
+        }
+      >
+        <View
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 10,
+              "left": 10,
+              "right": 10,
+              "top": 10,
+            }
+          }
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "opacity": 1,
+              "paddingLeft": 5,
+            }
+          }
+        >
+          <
+            icon={
+              Array [
+                "far",
+                "image",
+              ]
+            }
+            size={24}
+            style={
+              Object {
+                "color": "#0085ff",
+              }
+            }
+          />
+        </View>
+        <View
+          style={
+            Object {
+              "flex": 1,
+            }
+          }
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+              },
+              Array [
+                Object {
+                  "marginRight": 10,
+                },
+                Object {
+                  "color": undefined,
+                },
+              ],
+            ]
+          }
+        >
+          256
+        </Text>
+        <View>
+          <View
+            indeterminateAnimationDuration={1000}
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "overflow": "hidden",
+                },
+                undefined,
+              ]
+            }
+          >
+            <RNSVGSvgView
+              bbHeight={30}
+              bbWidth={30}
+              collapsable={false}
+              focusable={false}
+              height={30}
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  Object {},
+                  Object {
+                    "flex": 0,
+                    "height": 30,
+                    "width": 30,
+                  },
+                ]
+              }
+              width={30}
+            >
+              <RNSVGGroup>
+                <RNSVGPath
+                  d="M15 2.5
+          A12.5 12.5 0 0 1 15 2.5"
+                  propList={
+                    Array [
+                      "stroke",
+                      "strokeWidth",
+                      "strokeLinecap",
+                    ]
+                  }
+                  stroke={4278221567}
+                  strokeLinecap={0}
+                  strokeWidth={3}
+                />
+                <RNSVGPath
+                  d="M15 0.5
+            a14.5 14.5 0 0 1 0 29
+            a14.5 14.5 0 0 1 0 -29"
+                  propList={
+                    Array [
+                      "stroke",
+                      "strokeWidth",
+                      "strokeLinecap",
+                    ]
+                  }
+                  stroke={4293190370}
+                  strokeLinecap={0}
+                  strokeWidth={1}
+                />
+              </RNSVGGroup>
+            </RNSVGSvgView>
+          </View>
+        </View>
+      </View>
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderTopColor": "#e4e2e2",
+            "borderTopWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 1334,
+          }
+        }
+      />
+    </RCTSafeAreaView>
+  </View>
+</View>
+`;