WIP: base for #4883

__tests__/wocky/formValidation.test.ts

@@ -0,0 +1,107 @@
+import validate from 'validate.js'
+import {Profile} from '../../src/wocky'
+
+declare module 'validate.js' {
+  // tslint:disable-next-line
+  interface ValidateJS {
+    Promise: any
+  }
+}
+
+const obj = {
+  id: '1',
+  firstName: 'Jenny',
+  lastName: 'Ong',
+  handle: 'jeenee',
+  email: 'jenny@jenny.com',
+}
+
+validate.validators.usernameUniqueValidator = value => {
+  // if (!value) return new validate.Promise(res => res());
+  return new validate.Promise(resolve => {
+    resolve()
+  })
+}
+
+describe('form validation', () => {
+  // it('happy path - English', async () => {
+  //   const profile = Profile.create(obj)
+  //   await profile.validate()
+  //   expect(profile.isValid).toBeTruthy()
+  // })
+
+  // it('handle with underscore', async () => {
+  //   const profile = Profile.create({...obj, handle: 'jee_nee'})
+  //   await profile.validate()
+  //   expect(profile.isValid).toBeTruthy()
+  // })
+
+  it('short handle', async () => {
+    const profile = Profile.create({...obj, handle: 'je'})
+    await profile.validate()
+    expect(profile.isValid).toBeFalsy()
+    expect(profile.errors).toStrictEqual({
+      handle: ['Handle must be 3 - 16 characters'],
+    })
+  })
+
+  it('hyphenated handle', async () => {
+    const profile = Profile.create({...obj, handle: 'hyphen-boy'})
+    await profile.validate()
+    expect(profile.isValid).toBeFalsy()
+    expect(profile.errors).toStrictEqual({
+      handle: ['Handle can only contain alphanumeric characters and _'],
+    })
+  })
+
+  it('handle with non Rmonan characters', async () => {
+    const profile = Profile.create({...obj, handle: '😀 -boy'})
+    await profile.validate()
+    expect(profile.isValid).toBeFalsy()
+    expect(profile.errors).toStrictEqual({
+      handle: ['Handle can only contain alphanumeric characters and _'],
+    })
+  })
+
+  it('first name starts with space', async () => {
+    const profile = Profile.create({...obj, firstName: ' Eric'})
+    await profile.validate()
+    expect(profile.isValid).toBeFalsy()
+    expect(profile.errors).toStrictEqual({
+      firstName: ['First name is invalid'],
+    })
+  })
+
+  it('first name ends with space', async () => {
+    const profile = Profile.create({...obj, firstName: 'Eric '})
+    await profile.validate()
+    expect(profile.isValid).toBeFalsy()
+    expect(profile.errors).toStrictEqual({
+      firstName: ['First name can only contain alphabet characters'],
+    })
+  })
+
+  // it('first name with apostrophe', async () => {
+  //   const obj = {firstName: "Eric'apostrophe"}
+  //   const result = await validateProfile(obj)
+  //   expect(result).toStrictEqual(obj)
+  // })
+
+  // it('first name with numbers', async () => {
+  //   const obj = {firstName: 'Eric1234Kirkham'}
+  //   const result = await validateProfile(obj)
+  //   expect(result).toStrictEqual(obj)
+  // })
+
+  // it('first name with non-English characters', async () => {
+  //   const obj = {firstName: 'ÚБ見'}
+  //   const result = await validateProfile(obj)
+  //   expect(result).toStrictEqual(obj)
+  // })
+
+  // it('accepts short first name', async () => {
+  //   const obj = {firstName: 'T'}
+  //   const result = await validateProfile(obj)
+  //   expect(result).toStrictEqual(obj)
+  // })
+})

__tests__/wocky/support/setup.js

@@ -1,3 +1,12 @@
 process.env.NODE_ENV = 'test'
 global.__DEV__ = true
 global.WebSocket = require('websocket').w3cwebsocket
+
+jest.mock('../../../src/utils/logger', () => ({
+  log: console.log,
+  warn: console.warn,
+  error: console.error,
+  assert: console.assert,
+  persistLog: () => null,
+  notifyBugsnag: () => null,
+}))

__tests__/wocky/support/testuser.ts

@@ -14,15 +14,6 @@ const SERVER_NAME = 'testing'
 // tslint:disable:no-console
 const fs = require('fs')
 
-jest.mock('../../../src/utils/logger', () => ({
-  log: console.log,
-  warn: console.warn,
-  error: console.error,
-  assert: console.assert,
-  persistLog: () => null,
-  notifyBugsnag: () => null,
-}))
-
 function token(credentials: any) {
   const payload = {
     aud: 'Wocky',

src/components/FormTextInput.tsx

@@ -3,19 +3,29 @@ import {Image, View, TextInputProperties, TouchableOpacity, Platform} from 'reac
 import {k} from './Global'
 import {colors} from '../constants'
 import {observer} from 'mobx-react'
-import {ValidateItem} from '../utils/formValidation'
 import {RText, RTextInput, Separator} from './common'
 import Cell from './Cell'
+import {IWocky} from 'src/wocky'
+import {inject} from 'mobx-react'
 
 interface IProps extends TextInputProperties {
   icon?: any
   label: string
-  store?: ValidateItem
+  name: string
+  wocky?: IWocky
   imageStyle?: any
 }
 
+@observer
+@inject('wocky')
 export class FormTextInput extends React.Component<IProps> {
   input: any
+  errorMessage: string = ''
+
+  constructor(props) {
+    super(props)
+    alert(props.wocky)
+  }
 
   focus = () => {
     this.input.focus()
@@ -26,7 +36,7 @@ export class FormTextInput extends React.Component<IProps> {
   }
 
   render() {
-    const {icon, label, store, imageStyle} = this.props
+    const {icon, label, value, name, imageStyle} = this.props
 
     return (
       <>
@@ -66,7 +76,7 @@ export class FormTextInput extends React.Component<IProps> {
             autoCorrect={false}
             {...this.props}
           />
-          {Platform.OS === 'android' && !!store && !!store!.value && store!.value.length > 0 && (
+          {Platform.OS === 'android' && value.length > 0 && (
             <TouchableOpacity
               onPress={() => {
                 if (store) store.value = ''

src/components/MyAccount.tsx

@@ -16,7 +16,6 @@ import Cell from './Cell'
 import {FormTextInput} from './FormTextInput'
 import {colors} from '../constants'
 import {RText, Separator} from './common'
-import {ValidatableProfile} from '../utils/formValidation'
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'
 import {IWocky} from 'src/wocky'
 import {settings} from '../globals'
@@ -25,35 +24,18 @@ import Version from './Version'
 
 type Props = {
   wocky?: IWocky
-  profileValidationStore?: any
 }
 
-const MyAccount = inject(
-  'wocky',
-  'profileValidationStore'
-)(
-  observer(({wocky, profileValidationStore}: Props) => {
+const MyAccount = inject('wocky')(
+  observer(({wocky}: Props) => {
     const {profile} = wocky!
-
-    const [vProfile, setVProfile] = useState<ValidatableProfile | null>(null)
     const handle = useRef<FormTextInput>(null)
     const firstName = useRef<FormTextInput>(null)
     const lastName = useRef<FormTextInput>(null)
     const email = useRef<FormTextInput>(null)
     // const phone = useRef<FormTextInput>(null)
 
-    useEffect(() => {
-      if (profile) {
-        const vProf = new ValidatableProfile(profile)
-        setVProfile(vProf)
-        profileValidationStore.setProfile(vProf)
-
-        // set the "static" context
-        ;(MyAccount as any).profileValidationStore = profileValidationStore
-      }
-    }, [])
-
-    if (!profile || !vProfile) {
+    if (!profile) {
       // error('NULL PROFILE')
       return <View style={{flex: 1, backgroundColor: 'white'}} />
     }
@@ -73,7 +55,7 @@ const MyAccount = inject(
             <FormTextInput
               ref={handle}
               label="Username"
-              store={vProfile && vProfile.handle}
+              name="handle"
               autoCapitalize="none"
               icon={require('../../images/iconUsernameNew.png')}
               onSubmitEditing={() => firstName.current!.focus()}