Support e2e test - webdriverio (#2975)

* move e2e testapp and test to package/E2ETest

* fix fail to create link if node_modules doesn't exist

Author: licanhua

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>)
+  }
+}