Merge pull request #292 from xmtp/cv/adding-tests-easier

Modal for selecting subset of tests

example/src/LaunchScreen.tsx

@@ -7,6 +7,7 @@ import * as XMTP from 'xmtp-react-native-sdk'
 import { useXmtp } from 'xmtp-react-native-sdk'
 
 import { NavigationParamList } from './Navigation'
+import { TestCategory } from './TestScreen'
 import { supportedCodecs } from './contentTypes/contentTypes'
 import { useSavedKeys } from './hooks'
 
@@ -17,6 +18,9 @@ export default function LaunchScreen(
   this: any,
   { navigation }: NativeStackScreenProps<NavigationParamList, 'launch'>
 ) {
+  const [selectedTest, setSelectedTest] = useState<TestCategory>(
+    TestCategory.all
+  )
   const [selectedNetwork, setSelectedNetwork] = useState<
     'dev' | 'local' | 'production'
   >('dev')
@@ -65,6 +69,13 @@ export default function LaunchScreen(
     { key: 1, label: 'false' },
   ]
 
+  const testOptions = Object.entries(TestCategory).map(
+    ([key, value], index) => ({
+      key: index,
+      label: value,
+    })
+  )
+
   useEffect(() => {
     ;(async () => {
       if (signer) {
@@ -80,29 +91,25 @@ export default function LaunchScreen(
   return (
     <ScrollView>
       <Text style={styles.title}>Automated Tests</Text>
-      <View key="run-tests" style={{ margin: 16 }}>
-        <Button
-          title="Run All Unit Tests"
-          onPress={() => navigation.navigate('test', { testSelection: 'all' })}
-          accessibilityLabel="Unit-tests"
-        />
-      </View>
-      <View key="run-group-tests" style={{ margin: 16 }}>
-        <Button
-          title="Run Group Unit Tests"
-          onPress={() =>
-            navigation.navigate('test', { testSelection: 'groups' })
-          }
-          accessibilityLabel="Unit-group-tests"
+      <View style={styles.row}>
+        <Text style={styles.label}>Select Test:</Text>
+        <ModalSelector
+          data={testOptions}
+          selectStyle={styles.modalSelector}
+          initValueTextStyle={styles.modalSelectText}
+          selectTextStyle={styles.modalSelectText}
+          backdropPressToClose
+          initValue={selectedTest}
+          onChange={(option) => setSelectedTest(option.label as TestCategory)}
         />
       </View>
-      <View key="run-created-at-tests" style={{ margin: 16 }}>
+      <View key="run-tests" style={{ margin: 16 }}>
         <Button
-          title="Run Created At Unit Tests"
+          title={`Run Selected Tests: ${selectedTest}`}
           onPress={() =>
-            navigation.navigate('test', { testSelection: 'createdAt' })
+            navigation.navigate('test', { testSelection: selectedTest })
           }
-          accessibilityLabel="Unit-created-at-tests"
+          accessibilityLabel="Unit-tests"
         />
       </View>
       <View style={styles.divider} />

example/src/Navigation.tsx

@@ -1,8 +1,9 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { TestCategory } from './TestScreen'
 
 export type NavigationParamList = {
   launch: undefined
-  test: { testSelection?: 'groups' | 'createdAt' | 'all' }
+  test: { testSelection: TestCategory }
   home: undefined
   group: { id: string }
   conversation: { topic: string }

example/src/TestScreen.tsx

@@ -4,7 +4,8 @@ import { View, Text, Button, ScrollView } from 'react-native'
 
 import { createdAtTests } from './tests/createdAtTests'
 import { groupTests } from './tests/groupTests'
-import { tests, Test } from './tests/tests'
+import { Test } from './tests/test-utils'
+import { tests } from './tests/tests'
 
 type Result = 'waiting' | 'running' | 'success' | 'failure' | 'error'
 
@@ -98,26 +99,38 @@ function TestView({
   )
 }
 
+export enum TestCategory {
+  all = 'all',
+  tests = 'tests',
+  group = 'group',
+  createdAt = 'createdAt',
+}
+
 export default function TestScreen(): JSX.Element {
   const [completedTests, setCompletedTests] = useState<number>(0)
   const route = useRoute()
   const params = route.params as {
-    testSelection: 'groups' | 'createdAt' | 'all'
+    testSelection: TestCategory
   }
   const allTests = tests.concat(groupTests).concat(createdAtTests)
   let activeTests, title
   switch (params.testSelection) {
-    case 'groups':
+    case TestCategory.all:
+      activeTests = allTests
+      title = 'All Unit Tests'
+      break
+    case TestCategory.tests:
+      activeTests = tests
+      title = 'Original Unit Tests'
+      break
+    case TestCategory.group:
       activeTests = groupTests
       title = 'Group Unit Tests'
       break
-    case 'createdAt':
+    case TestCategory.createdAt:
       activeTests = createdAtTests
       title = 'Created At Unit Tests'
       break
-    default:
-      activeTests = allTests
-      title = 'All Unit Tests'
   }
 
   return (

example/src/tests/createdAtTests.ts

@@ -1,4 +1,4 @@
-import { Test, assert, delayToPropogate, isIos } from './tests'
+import { Test, assert, delayToPropogate, isIos } from './test-utils'
 import {
   Client,
   Conversation,

example/src/tests/groupTests.ts

@@ -1,7 +1,7 @@
 import RNFS from 'react-native-fs'
 import { DecodedMessage } from 'xmtp-react-native-sdk/lib/DecodedMessage'
 
-import { Test, assert, delayToPropogate, isIos } from './tests'
+import { Test, assert, delayToPropogate, isIos } from './test-utils'
 import {
   Client,
   Conversation,

example/src/tests/test-utils.ts

@@ -0,0 +1,37 @@
+import { Platform } from 'expo-modules-core'
+import { Client } from 'xmtp-react-native-sdk'
+
+export type Test = {
+  name: string
+  run: () => Promise<boolean>
+}
+
+export function isIos() {
+  return Platform.OS === 'ios'
+}
+
+export async function delayToPropogate(milliseconds = 100): Promise<void> {
+  // delay avoid clobbering
+  return new Promise((r) => setTimeout(r, milliseconds))
+}
+
+export function assert(condition: boolean, msg: string) {
+  if (!condition) {
+    throw new Error(msg)
+  }
+}
+
+export async function createClients(
+  numClients: number
+): Promise<Client<any>[]> {
+  const clients = []
+  for (let i = 0; i < numClients; i++) {
+    clients.push(
+      await Client.createRandom({
+        env: 'local',
+        enableAlphaMls: true,
+      })
+    )
+  }
+  return clients
+}

example/src/tests/tests.ts

@@ -1,10 +1,10 @@
 import { FramesClient } from '@xmtp/frames-client'
 import { content } from '@xmtp/proto'
-import { Platform } from 'expo-modules-core'
 import ReactNativeBlobUtil from 'react-native-blob-util'
 import { TextEncoder, TextDecoder } from 'text-encoding'
 import { DecodedMessage } from 'xmtp-react-native-sdk/lib/DecodedMessage'
 
+import { Test, assert, delayToPropogate } from './test-utils'
 import {
   Query,
   JSContentCodec,
@@ -62,28 +62,7 @@ class NumberCodec implements JSContentCodec<NumberRef> {
   }
 }
 
-export type Test = {
-  name: string
-  run: () => Promise<boolean>
-}
-
 export const tests: Test[] = []
-
-export function assert(condition: boolean, msg: string) {
-  if (!condition) {
-    throw new Error(msg)
-  }
-}
-
-export async function delayToPropogate(): Promise<void> {
-  // delay 1s to avoid clobbering
-  return new Promise((r) => setTimeout(r, 100))
-}
-
-export function isIos() {
-  return Platform.OS === 'ios'
-}
-
 function test(name: string, perform: () => Promise<boolean>) {
   tests.push({ name, run: perform })
 }