chore(test-app): add TypeScript tests

Author: fathyb

packages/core/src/index.ts

@@ -1,3 +1,4 @@
 import { Analytics } from './analytics'
 
 export default new Analytics.Client()
+export { Analytics }

packages/test-app/e2e/main.spec.js

@@ -20,7 +20,7 @@ if (CIRCLE_WORKFLOW_ID) {
 		await element(by.text('Flush')).tap()
 
 		await Promise.all(
-			require('../calls.json').map(([type, ...args]) =>
+			require('../src/calls.json').map(([type, ...args]) =>
 				hasMatchingCall(type, ...args)
 			)
 		)

packages/test-app/generate.sh

@@ -10,28 +10,27 @@ rm -rf project
 
 yarn react-native init project
 
-cp -r App.js calls.json project/
+cp -r src/* project/
 cd project
+rm App.js
+
+sed -i -e "s/SEGMENT_WRITE_TOKEN/$SEGMENT_WRITE_TOKEN/g" App.tsx
+sed -i -e "s/CIRCLE_WORKFLOW_ID/$CIRCLE_WORKFLOW_ID/g" App.tsx
 
 build_dir=$pwd/../integrations/build
+counter=0
 
 for integration in `cd $build_dir && echo @segment/*`; do
+    counter=$((counter+1))
     install_command+=" file:$build_dir/$integration"
-    integrations_require+="require('$integration'),"
+    integrations_require+="import integration_$counter from '$integration';"
+    integrations_require+="SEGMENT_INTEGRATIONS.push(integration_$counter);"
 done
 
-yarn add $install_command @babel/runtime
+echo -e $integrations_require >> App.tsx
 
-cat << EOF >> App.js
-buildId = '$CIRCLE_WORKFLOW_ID'
-
-analytics
-  .setup('$SEGMENT_WRITE_TOKEN', {
-    using: [$integrations_require],
-    debug: true
-  })
-  .then(() => console.log('Analytics ready'))
-  .catch(err => console.error('Analytics error', err))
-EOF
+yarn add $install_command @babel/runtime
+yarn add typescript react-native-typescript-transformer @types/{react,react-native} --dev
+yarn tsc
 
 ../android-workaround.js

packages/test-app/src/App.tsx

@@ -0,0 +1,94 @@
+import React, { Component } from 'react'
+import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native'
+import analytics, { Analytics } from '@segment/analytics-react-native'
+
+type Call = ['identify' | 'track', string, {}]
+
+const calls: Call[] = require('./calls.json')
+
+const Button = ({ title, onPress }: { title: string; onPress: () => void }) => (
+  <TouchableOpacity style={styles.button} onPress={onPress}>
+    <Text style={styles.text}>{title}</Text>
+  </TouchableOpacity>
+)
+
+const screenHome = () => analytics.screen('Home')
+
+const flush = () => analytics.flush()
+
+const pizzaEaten = () => analytics.track('Pizza Eaten')
+
+const trackOrder = () => {
+  analytics.track('Order Completed')
+  analytics.track('Order Cancelled', {
+    order_id: 323
+  })
+  analytics.identify('userIdOnly')
+  analytics.identify('userId', {
+    age: 32
+  })
+  analytics.alias('newlyAliasedId')
+  analytics.screen('User Login Screen', {
+    method: 'google'
+  })
+}
+
+const buildId = 'CIRCLE_WORKFLOW_ID'
+
+const testSuite = () =>
+  calls.forEach(([call, name, props = {}]) =>
+    analytics[call](name, {
+      ...props,
+      buildId
+    })
+  )
+
+export default class App extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Image
+          source={{ uri: 'https://i.imgur.com/GrCdId0.png' }}
+          resizeMode="contain"
+          style={{
+            margin: 50,
+            width: 240,
+            height: 160
+          }}
+        />
+        <Button title="Screen: Home" onPress={screenHome} />
+        <Button title="Track: Order Complete" onPress={trackOrder} />
+        <Button title="Flush" onPress={flush} />
+        <Button title="Track: Pizza Eaten" onPress={pizzaEaten} />
+        <Button title="Launch test suite" onPress={testSuite} />
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  button: {
+    margin: 20
+  },
+  text: {
+    color: '#FBFAF9'
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    backgroundColor: '#32A75D'
+  }
+})
+
+const SEGMENT_INTEGRATIONS: Analytics.Integration[] = []
+
+setTimeout(() => {
+  analytics
+    .setup('SEGMENT_WRITE_TOKEN', {
+      debug: true,
+      using: SEGMENT_INTEGRATIONS
+    })
+    .then(() => console.log('Analytics ready'))
+    .catch(err => console.error(err))
+})

packages/test-app/calls.json renamed to packages/test-app/src/calls.json

@@ -0,0 +1,8 @@
+module.exports = {
+	getTransformModulePath() {
+		return require.resolve('react-native-typescript-transformer')
+	},
+	getSourceExts() {
+		return ['ts', 'tsx']
+	}
+}

packages/test-app/src/rn-cli.config.js

@@ -0,0 +1,12 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "outDir": "build",
+    "lib": ["es2015"],
+    "typeRoots": ["node_modules/@types"]
+  },
+  "include": ["./App.tsx"]
+}