diff --git a/packages/E2ETest/.eslintignore b/packages/E2ETest/.eslintignore new file mode 100644 index 00000000000..a7216be9e6e --- /dev/null +++ b/packages/E2ETest/.eslintignore @@ -0,0 +1,7 @@ +**/node_modules +wdio +app +wdio.conf.js +hasteImpl.js +metro.config.js +postinstall.js \ No newline at end of file diff --git a/packages/E2ETest/.eslintrc.js b/packages/E2ETest/.eslintrc.js new file mode 100644 index 00000000000..e23962f3715 --- /dev/null +++ b/packages/E2ETest/.eslintrc.js @@ -0,0 +1,6 @@ +module.exports = { + extends: "@react-native-community", + rules:{ + "react-native/no-inline-styles" : 0, + } +}; \ No newline at end of file diff --git a/packages/E2ETest/.gitignore b/packages/E2ETest/.gitignore new file mode 100644 index 00000000000..57c83308388 --- /dev/null +++ b/packages/E2ETest/.gitignore @@ -0,0 +1,4 @@ +/node_modules +/windows/ReactUWPTestApp/Generated Files/ +/build +reports \ No newline at end of file diff --git a/packages/E2ETest/.npmrc b/packages/E2ETest/.npmrc new file mode 100644 index 00000000000..9cf9495031e --- /dev/null +++ b/packages/E2ETest/.npmrc @@ -0,0 +1 @@ +package-lock=false \ No newline at end of file diff --git a/packages/E2ETest/.prettierrc.json b/packages/E2ETest/.prettierrc.json new file mode 100644 index 00000000000..1c8b452b7a8 --- /dev/null +++ b/packages/E2ETest/.prettierrc.json @@ -0,0 +1,7 @@ +{ + "useTabs": false, + "printWidth": 80, + "tabWidth": 2, + "singleQuote": true, + "trailingComma": "es5" +} \ No newline at end of file diff --git a/packages/E2ETest/README.md b/packages/E2ETest/README.md new file mode 100644 index 00000000000..0cf38b0e805 --- /dev/null +++ b/packages/E2ETest/README.md @@ -0,0 +1,3 @@ +# E2ETest project + +This package is not published, and is just used to verify a standalone app \ No newline at end of file diff --git a/packages/E2ETest/app.json b/packages/E2ETest/app.json new file mode 100644 index 00000000000..a4f07a51199 --- /dev/null +++ b/packages/E2ETest/app.json @@ -0,0 +1,4 @@ +{ + "name": "ReactUWPTestApp", + "displayName": "ReactUWPTestApp" +} \ No newline at end of file diff --git a/packages/E2ETest/app/Consts.ts b/packages/E2ETest/app/Consts.ts new file mode 100644 index 00000000000..d9c8046d5af --- /dev/null +++ b/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'; diff --git a/packages/E2ETest/app/LoginTestPage.tsx b/packages/E2ETest/app/LoginTestPage.tsx new file mode 100644 index 00000000000..7efa848b9f4 --- /dev/null +++ b/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 ( + + { setUserName(text.nativeEvent.text) }} /> + + + + + LOGIN + + + {loginState} + ); +} \ No newline at end of file diff --git a/packages/E2ETest/app/TestApp.tsx b/packages/E2ETest/app/TestApp.tsx new file mode 100644 index 00000000000..7dcbd59f15e --- /dev/null +++ b/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}) => ( + { props.onNavigateTo(item.testId) }} testID={item.testId}> + + {item.description} + + + ); + + const data = props.testPages.filter((item: ITestPage) => !filter || (item.testId && item.testId.includes(filter)) || (item.description && item.description.includes(filter))) + + return ( + + setFilter(text)} value={filter} testID={SEARCH_BUTTON} /> + data={data} renderItem={_renderItem} keyExtractor={(item) => item.testId}/> + ) +} + +interface TestPageDetailProps { + testPage: ITestPage +} + +function TestPageDetail(props: TestPageDetailProps) { + return +} + +interface HeaderProps { + onNavigateTo: (pageTestId: string) => void, + description: string +} + +function Header(props: HeaderProps) { + return ( + + + + {props.description} + +