Support e2e test - webdriverio

packages/E2ETest/.eslintignore

@@ -0,0 +1,7 @@
+**/node_modules
+wdio
+app
+wdio.conf.js
+hasteImpl.js
+metro.config.js
+postinstall.js

packages/E2ETest/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = { 
+  extends: "@react-native-community",
+  rules:{ 
+    "react-native/no-inline-styles" : 0,
+  }
+};

packages/E2ETest/.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+/windows/ReactUWPTestApp/Generated Files/
+/build
+reports

packages/E2ETest/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/E2ETest/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "useTabs": false,      
+    "printWidth": 80,      
+    "tabWidth": 2,         
+    "singleQuote": true,  
+    "trailingComma": "es5"    
+}

packages/E2ETest/README.md

@@ -0,0 +1,3 @@
+# E2ETest project
+
+This package is not published, and is just used to verify a standalone app

packages/E2ETest/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "ReactUWPTestApp",
+  "displayName": "ReactUWPTestApp"
+}

packages/E2ETest/app/Consts.ts

@@ -0,0 +1,21 @@
+export const APP_NAME = 'ReactUWPTestApp';
+
+// Framework
+export const SEARCH_BUTTON = 'SearchButton';
+export const HOME_BUTTON = '_HomeButton';
+export const REACT_CONTROL_ERROR_TEST_ID = 'ReactControlErrorMessage';
+
+// UnknownTestPage
+export const UNKNOWN_TESTPAGE = 'UnknownTestPage';
+
+// TextInputTestPage
+export const TEXTINPUT_TESTPAGE = 'TextInputTestPage';
+
+export const TEXTINPUT_ON_TEXTINPUT = 'TextInput';
+
+// LoginTestPage
+export const LOGIN_TESTPAGE = 'LoginTestPage';
+export const USERNAME_ON_LOGIN = 'UserName';
+export const PASSWORD_ON_LOGIN = 'Password';
+export const SUBMIT_ON_LOGIN = 'Submit';
+export const LOGINRESULT_ON_LOGIN = 'Result';

packages/E2ETest/app/LoginTestPage.tsx

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import React, { useState } from 'react';
+import { Text, TextInput, View, StyleSheet, TouchableOpacity } from 'react-native';
+import { USERNAME_ON_LOGIN, PASSWORD_ON_LOGIN, SUBMIT_ON_LOGIN, LOGINRESULT_ON_LOGIN } from './Consts';
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20
+  },
+  input: {
+    height: 40,
+    backgroundColor: 'rgba(225,225,225,0.2)',
+    marginBottom: 10,
+    padding: 10,
+    color: '#fff'
+  },
+  buttonContainer: {
+    backgroundColor: '#2980b6',
+    paddingVertical: 15
+  },
+  buttonText: {
+    color: '#fff',
+    textAlign: 'center',
+    fontWeight: '700'
+  }
+});
+
+export function LoginTestPage() {
+  const [loginState, setLoginState] = useState('');
+  const [userName, setUserName] = useState('');
+
+  const onPress = () => {
+    if (userName === 'username') {
+      setLoginState('Success')
+    } else {
+      setLoginState('Fail');
+    }
+  };
+  return (
+    <View>
+      <TextInput style={styles.input}
+        placeholder='Email or Mobile Num'
+        placeholderTextColor='rgba(225,225,225,0.7)'
+        testID={USERNAME_ON_LOGIN}
+        onChange={(text) => { setUserName(text.nativeEvent.text) }} />
+
+      <TextInput style={styles.input}
+        placeholder='Password'
+        testID={PASSWORD_ON_LOGIN}
+        placeholderTextColor='rgba(225,225,225,0.7)'
+        secureTextEntry />
+
+      <TouchableOpacity style={styles.buttonContainer}
+        testID={SUBMIT_ON_LOGIN}
+        onPress={onPress}>
+        <Text style={styles.buttonText}>LOGIN</Text>
+      </TouchableOpacity>
+
+      <Text testID={LOGINRESULT_ON_LOGIN}>{loginState}</Text>
+    </View >);
+}

packages/E2ETest/app/TestApp.tsx

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import React, { useState } from "react";
+import TestPages, { ITestPage } from './TestPages'
+import { TouchableOpacity, Text, View, TextInput, FlatList, Button, StyleSheet } from 'react-native'
+import { SEARCH_BUTTON, HOME_BUTTON } from './Consts'
+
+
+interface TestPageListProps {
+  onNavigateTo: (pageTestId: string) => void,
+  testPages: ITestPage[]
+}
+
+function TestPageList(props: TestPageListProps) {
+  const [filter, setFilter] = useState("");
+
+  const _renderItem = ({ item }: {item: ITestPage}) => (
+    <TouchableOpacity onPress={() => { props.onNavigateTo(item.testId) }} testID={item.testId}>
+      <View>
+        <Text>{item.description}</Text>
+      </View>
+    </TouchableOpacity >
+  );
+
+  const data = props.testPages.filter((item: ITestPage) => !filter || (item.testId && item.testId.includes(filter)) || (item.description && item.description.includes(filter)))
+
+  return (
+    <View>
+      <TextInput placeholder='Search test page' onChangeText={(text) => setFilter(text)} value={filter} testID={SEARCH_BUTTON} />
+      <FlatList<ITestPage> data={data} renderItem={_renderItem} keyExtractor={(item) => item.testId}/>
+    </View>)
+}
+
+interface TestPageDetailProps {
+  testPage: ITestPage
+}
+
+function TestPageDetail(props: TestPageDetailProps) {
+  return <props.testPage.content />
+}
+
+interface HeaderProps {
+  onNavigateTo: (pageTestId: string) => void,
+  description: string
+}
+
+function Header(props: HeaderProps) {
+  return (
+    <View style={styles.headerContainer}>
+      <View style={styles.header}>
+        <View style={styles.headerCenter}>
+          <Text style={styles.title}>{props.description}</Text>
+        </View>
+        <Button title='Home' onPress={() => { props.onNavigateTo('') }} testID={HOME_BUTTON} />
+      </View>
+    </View>);
+}
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#96969A',
+  },
+  header: {
+    height: 40,
+    flexDirection: 'row'
+  },
+  headerLeft: {},
+  headerCenter: {
+    flex: 1,
+    position: 'absolute',
+    top: 7,
+    left: 0,
+    right: 0
+  },
+  title: {
+    fontSize: 19,
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+  testPageContainer: {
+    flex: 1
+  }
+});
+
+
+export default function TestApp() {
+  const [toPageTestId, setToPageTestId] = useState("");
+
+  const _onNavigateTo = (pageTestId: string) => { setToPageTestId(pageTestId) };
+
+  if (toPageTestId.length > 0) {
+    const page = TestPages.filter(testPage => testPage.testId === toPageTestId)[0];
+    return (
+      <View style={styles.testPageContainer}>
+        <Header onNavigateTo={() => { _onNavigateTo('') }} description={page.description} />
+        <TestPageDetail testPage={page} />
+      </View>)
+  } else {
+    return (
+      <View style={styles.testPageContainer}>
+        <Header onNavigateTo={() => { }} description='Home' />
+        <TestPageList testPages={TestPages} onNavigateTo={(testPageId) => { _onNavigateTo(testPageId) }} />
+      </View>)
+  }
+}

packages/E2ETest/app/TestPages.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import * as React from 'react';
+import { TextInputTestPage } from './TextInputTestPage';
+import { UnknownPage } from './UnknownPage';
+import { TEXTINPUT_TESTPAGE, UNKNOWN_TESTPAGE, LOGIN_TESTPAGE } from './Consts';
+import { LoginTestPage } from './LoginTestPage';
+
+export interface ITestPage {
+  testId: string;
+  description: string;
+  content: React.FC | typeof React.Component;
+}
+
+const TestPages: ITestPage[] = [
+  {
+    testId: TEXTINPUT_TESTPAGE,
+    description: 'TextInput Test Page',
+    content: TextInputTestPage,
+  },
+  {
+    testId: LOGIN_TESTPAGE,
+    description: 'Login Test Page',
+    content: LoginTestPage,
+  },
+  {
+    testId: UNKNOWN_TESTPAGE,
+    description: 'Unknown Page',
+    content: UnknownPage,
+  },
+];
+
+export default TestPages;

packages/E2ETest/app/TextInputTestPage.tsx

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import React from 'react';
+import {Text, TextInput, View} from 'react-native';
+import {TEXTINPUT_ON_TEXTINPUT} from './Consts';
+
+interface ITextInputTestPageState {
+  curText: string;
+  prevText: string;
+  prev2Text: string;
+  prev3Text: string;
+}
+
+export class TextInputTestPage extends React.Component<
+  {},
+  ITextInputTestPageState
+> {
+  public state = {
+    curText: '<No Event>',
+    prevText: '<No Event>',
+    prev2Text: '<No Event>',
+    prev3Text: '<No Event>',
+  };
+
+  public updateText = (text: string) => {
+    this.setState(state => {
+      return {
+        curText: text,
+        prevText: state.curText,
+        prev2Text: state.prevText,
+        prev3Text: state.prev2Text,
+      };
+    });
+  };
+
+  public render() {
+    return (
+      <View>
+        <TextInput
+          style={{height: 32}}
+          testID={TEXTINPUT_ON_TEXTINPUT}
+          placeholder="Enter text to see events"
+          onFocus={() => this.updateText('onFocus')}
+          onBlur={() => this.updateText('onBlur')}
+          onChange={event =>
+            this.updateText('onChange text: ' + event.nativeEvent.text)
+          }
+          onEndEditing={event =>
+            this.updateText('onEndEditing text: ' + event.nativeEvent.text)
+          }
+          onSubmitEditing={event =>
+            this.updateText('onSubmitEditing text: ' + event.nativeEvent.text)
+          }
+          onSelectionChange={event => {
+            this.updateText(
+              'onSelectionChange range: ' +
+                event.nativeEvent.selection.start +
+                ',' +
+                event.nativeEvent.selection.end,
+            );
+          }}
+          onKeyPress={event => {
+            this.updateText('onKeyPress key: ' + event.nativeEvent.key);
+          }}
+        />
+        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+          <Text testID="CurText">curText: {this.state.curText}</Text>
+          <Text testID="PrevText">prev: {this.state.prevText}</Text>
+          <Text testID="Prev2Text">prev2: {this.state.prev2Text})</Text>
+          <Text testID="Prev3Text">prev3: {this.state.prev3Text}</Text>
+        </View>
+      </View>
+    );
+  }
+}

packages/E2ETest/app/UnknownPage.tsx

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import {Text} from 'react-native'
+import React from 'react';
+
+export function UnknownPage() {
+  return (<Text>Unknown</Text>)
+}

packages/E2ETest/app/index.ts

@@ -0,0 +1,5 @@
+import TestApp from './TestApp';
+import { AppRegistry } from 'react-native';
+import { APP_NAME } from './Consts';
+
+AppRegistry.registerComponent(APP_NAME, () => TestApp);