Introduce e2e tests via Detox (#51)

* account listing works

* got a few tests working

* OMG IT WORKS

* account creation and switching is tested too

* added cricleci config

* fix circleci config

* remove travis config

* update circleci config

* fix config.yml identation

* add required build steps

* fix typo

* update cache keys

* ignore shim.js

* rename jobs

* update node scripts

* fix unit tests

* fixed unit tests

* fix tests on latest version of node 9

* change structure

* use workspaces instead of cache
pull/83/head
Bruno Barbieri 5 years ago committed by GitHub
parent c77d523fa9
commit 191aea6de9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 121
      .circleci/config.yml
  2. 1
      .prettierignore
  3. 10
      .travis.yml
  4. 5
      .vscode/settings.json
  5. 12
      app/components/AccountDetails/index.js
  6. 18
      app/components/AccountList/index.js
  7. 2
      app/components/AccountOverview/__snapshots__/index.test.js.snap
  8. 4
      app/components/AccountOverview/index.js
  9. 2
      app/components/App/index.js
  10. 26
      app/components/Asset/__snapshots__/index.test.js.snap
  11. 12
      app/components/Asset/index.js
  12. 84
      app/components/Collectibles/__snapshots__/index.test.js.snap
  13. 12
      app/components/Collectibles/index.js
  14. 262
      app/components/CreatePassword/__snapshots__/index.test.js.snap
  15. 106
      app/components/CreatePassword/index.js
  16. 6
      app/components/CreatePassword/index.test.js
  17. 290
      app/components/ImportFromSeed/__snapshots__/index.test.js.snap
  18. 115
      app/components/ImportFromSeed/index.js
  19. 1
      app/components/LockScreen/__snapshots__/index.test.js.snap
  20. 2
      app/components/LockScreen/index.js
  21. 200
      app/components/Login/__snapshots__/index.test.js.snap
  22. 56
      app/components/Login/index.js
  23. 1
      app/components/Navbar/index.js
  24. 2
      app/components/NavbarLeftButton/index.js
  25. 4
      app/components/NavbarTitle/index.js
  26. 2
      app/components/NetworkSettings/index.js
  27. 2
      app/components/SeedWords/__snapshots__/index.test.js.snap
  28. 11
      app/components/SeedWords/index.js
  29. 2
      app/components/Settings/index.js
  30. 84
      app/components/Tokens/__snapshots__/index.test.js.snap
  31. 12
      app/components/Tokens/index.js
  32. 278
      app/components/Transactions/__snapshots__/index.test.js.snap
  33. 30
      app/components/Transactions/index.js
  34. 2
      app/components/Wallet/index.js
  35. 7
      app/reducers/index.js
  36. 8
      e2e/config.json
  37. 38
      e2e/create-password.spec.js
  38. 20
      e2e/init.js
  39. 94
      e2e/wallet.spec.js
  40. 292
      package-lock.json
  41. 40
      package.json

@ -0,0 +1,121 @@
aliases:
- &restore-cache
keys:
- v1.0.0-{{ .Branch }}-{{ checksum "package.json" }}
- v1.0.0-{{ .Branch }}
- &save-cache
key: v1.0.0-{{ .Branch }}-{{ checksum "package.json" }}
paths:
- node_modules
- &install-node-dependencies
|
npm install
defaults: &defaults
working_directory: ~/MetaMask
jobs:
prep-deps:
<<: *defaults
docker:
- image: circleci/node:9
steps:
- checkout
- restore_cache: *restore-cache
- run: *install-node-dependencies
- persist_to_workspace:
root: .
paths:
- node_modules
- save_cache: *save-cache
lint:
<<: *defaults
docker:
- image: circleci/node:9
steps:
- checkout
- attach_workspace:
at: .
- run: npm run lint
test-unit:
<<: *defaults
docker:
- image: circleci/node:9
steps:
- checkout
- attach_workspace:
at: .
- run: npm run test:unit
- persist_to_workspace:
root: .
paths:
- coverage
test-e2e-ios:
<<: *defaults
macos:
xcode: "9.2"
dependencies:
pre:
steps:
- checkout
- attach_workspace:
at: .
- run:
name: Load dependencies
command:
|
brew update
brew tap wix/brew
brew install --HEAD applesimutils
npm install -g detox-cli
- run: npm run test:e2e:ios
test-coverage:
<<: *defaults
docker:
- image: circleci/node:9
steps:
- checkout
- attach_workspace:
at: .
- run: npm install -g codecov
- run: codecov
all-tests-pass:
docker:
- image: circleci/node:9
steps:
- run:
name: All Tests Passed
command: echo 'weew - everything passed!'
workflows:
version: 2
ful_test:
jobs:
- prep-deps
- lint:
requires:
- prep-deps
- test-unit:
requires:
- prep-deps
- test-e2e-ios:
requires:
- prep-deps
- all-tests-pass:
requires:
- lint
- test-unit
- test-e2e-ios
- upload-coverage:
requires:
- test-unit

@ -9,3 +9,4 @@ node_modules
package-lock.json
package.json
app/util/blockies.js
/shim.js

@ -1,10 +0,0 @@
language: node_js
node_js: "node"
install:
- travis_retry npm install -g codecov
- travis_retry npm install
script:
- npm run prettier
- npm run lint
- npm run test
- codecov

@ -0,0 +1,5 @@
{
"yaml.schemas": {
"file:///Users/bruno/.vscode/extensions/gizmos.docs-yaml-0.1.5/schemas/toc.schema.json": "/toc\\.yml/i"
}
}

@ -24,7 +24,7 @@ const styles = StyleSheet.create({
paddingBottom: 15,
paddingLeft: 10,
paddingRight: 10,
fontSize: 14,
fontSize: 13,
borderRadius: 10,
...fontStyles.normal
},
@ -57,9 +57,15 @@ class AccountDetails extends Component {
render() {
const { selectedAddress } = this.props;
return (
<View style={styles.wrapper}>
<View style={styles.wrapper} testID={'account-details-screen'}>
<Text style={styles.text}>Public Address</Text>
<TextInput value={selectedAddress} selectTextOnFocus style={styles.address} editable={false} />
<TextInput
value={selectedAddress}
selectTextOnFocus
style={styles.address}
editable={false}
testID={'public-address-input'}
/>
<View style={styles.qrCode}>
<QRCode value={selectedAddress} size={250} bgColor={colors.fontPrimary} fgColor={colors.white} />
</View>

@ -71,7 +71,11 @@ class AccountList extends Component {
/**
* A string representing the selected address => account
*/
selectedAddress: PropTypes.string
selectedAddress: PropTypes.string,
/**
* The navigator object
*/
navigation: PropTypes.object
};
state = {
@ -117,6 +121,10 @@ class AccountList extends Component {
openAccountSettings = () => false;
closeSideBar = () => {
this.props.navigation.closeDrawer();
};
renderAccounts() {
const { accounts } = this.props;
return Object.keys(accounts).map((key, i) => {
@ -143,12 +151,14 @@ class AccountList extends Component {
render() {
return (
<SafeAreaView style={styles.wrapper}>
<Text style={styles.title}>My Accounts</Text>
<SafeAreaView style={styles.wrapper} testID={'account-list'}>
<Text testID={'account-list-title'} style={styles.title} onPress={this.closeSideBar}>
My Accounts
</Text>
<View style={styles.accountsWrapper}>{this.renderAccounts()}</View>
<View style={styles.footer}>
<Button style={[styles.icon, styles.left]} onPress={this.addAccount}>
<Icon name="plus" size={30} color={colors.fontSecondary} />
<Icon name="plus" testID={'add-account-button'} size={30} color={colors.fontSecondary} />
</Button>
<Button style={[styles.icon, styles.right]} onPress={this.openAccountSettings}>
<Icon name="cog" size={30} color={colors.fontSecondary} />

@ -11,6 +11,7 @@ exports[`AccountOverview should render correctly 1`] = `
"paddingTop": 20,
}
}
testID="account-overview"
>
<Component
style={
@ -66,6 +67,7 @@ exports[`AccountOverview should render correctly 1`] = `
<TouchableOpacity
activeOpacity={0.2}
onPress={[Function]}
testID="account-qr-button"
>
<QRCode
bgColor="#333333"

@ -74,14 +74,14 @@ export default class AccountOverview extends Component {
} = this.props;
return (
<View style={styles.wrapper}>
<View style={styles.wrapper} testID={'account-overview'}>
<View style={styles.row}>
<View style={styles.left}>
<Text style={styles.label}>{name}</Text>
<Text style={styles.amountFiat}>${balanceFiat}</Text>
</View>
<View style={styles.right}>
<TouchableOpacity onPress={this.goToAccountDetails}>
<TouchableOpacity onPress={this.goToAccountDetails} testID={'account-qr-button'}>
<QRCode value={address} size={60} bgColor={colors.fontPrimary} fgColor={colors.white} />
<Text style={styles.address}>{`${address.substr(0, 4)}...${address.substr(-4)}`}</Text>
</TouchableOpacity>

@ -49,6 +49,8 @@ export default class App extends Component {
if (existingUser !== null) {
this.mounted && this.setState({ existingUser: true });
this.unlockKeychain();
} else {
this.setState({ locked: false });
}
AppState.addEventListener('change', this.handleAppStateChange);

@ -10,18 +10,22 @@ exports[`Asset should render correctly 1`] = `
}
>
<Component
style={
Object {
"height": 280,
}
}
testID="asset"
>
<AssetOverview
asset={Object {}}
/>
</Component>
<Component>
<Transactions />
<Component
style={
Object {
"height": 280,
}
}
>
<AssetOverview
asset={Object {}}
/>
</Component>
<Component>
<Transactions />
</Component>
</Component>
</ScrollView>
`;

@ -46,11 +46,13 @@ export default class Asset extends Component {
} = this.props;
return (
<ScrollView style={styles.wrapper}>
<View style={styles.assetOverviewWrapper}>
<AssetOverview asset={navigation && params} />
</View>
<View>
<Transactions />
<View testID={'asset'}>
<View style={styles.assetOverviewWrapper}>
<AssetOverview asset={navigation && params} />
</View>
<View>
<Transactions />
</View>
</View>
</ScrollView>
);

@ -10,58 +10,62 @@ exports[`Collectibles should render correctly 1`] = `
}
>
<Component
style={
Object {
"alignItems": "center",
"backgroundColor": "#FFFFFF",
"flex": 1,
"justifyContent": "center",
"marginTop": 80,
}
}
testID="collectibles"
>
<Component
style={
Object {
"color": "#AAAAAA",
"fontFamily": "Roboto",
"fontSize": 20,
"fontWeight": "400",
"alignItems": "center",
"backgroundColor": "#FFFFFF",
"flex": 1,
"justifyContent": "center",
"marginTop": 80,
}
}
>
You don't have any collectibles!
<Component
style={
Object {
"color": "#AAAAAA",
"fontFamily": "Roboto",
"fontSize": 20,
"fontWeight": "400",
}
}
>
You don't have any collectibles!
</Component>
</Component>
</Component>
<TouchableOpacity
activeOpacity={0.2}
style={
Object {
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "center",
"marginTop": 20,
}
}
>
<Icon
allowFontScaling={false}
color="#007aff"
name="plus"
size={16}
/>
<Component
<TouchableOpacity
activeOpacity={0.2}
style={
Object {
"color": "#007aff",
"fontFamily": "Roboto",
"fontSize": 15,
"fontWeight": "400",
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "center",
"marginTop": 20,
}
}
>
ADD COLLECTIBLES
</Component>
</TouchableOpacity>
<Icon
allowFontScaling={false}
color="#007aff"
name="plus"
size={16}
/>
<Component
style={
Object {
"color": "#007aff",
"fontFamily": "Roboto",
"fontSize": 15,
"fontWeight": "400",
}
}
>
ADD COLLECTIBLES
</Component>
</TouchableOpacity>
</Component>
</ScrollView>
`;

@ -127,11 +127,13 @@ export default class Collectibles extends Component {
render() {
return (
<ScrollView style={styles.wrapper}>
{this.props.assets && this.props.assets.length ? this.renderList() : this.renderEmpty()}
<TouchableOpacity style={styles.add}>
<Icon name="plus" size={16} color={colors.primary} />
<Text style={styles.addText}>ADD COLLECTIBLES</Text>
</TouchableOpacity>
<View testID={'collectibles'}>
{this.props.assets && this.props.assets.length ? this.renderList() : this.renderEmpty()}
<TouchableOpacity style={styles.add}>
<Icon name="plus" size={16} color={colors.primary} />
<Text style={styles.addText}>ADD COLLECTIBLES</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
}

@ -12,169 +12,177 @@ exports[`CreatePassword should render correctly 1`] = `
}
>
<Component
style={
Object {
"alignItems": "center",
"justifyContent": "center",
"marginTop": 100,
}
}
>
<Image
resizeMethod="auto"
source={
Object {
"testUri": "../../../app/images/fox.png",
}
}
style={
Object {
"height": 100,
"width": 100,
}
}
/>
</Component>
<Component
style={
Object {
"color": "#1B344D",
"fontFamily": "Roboto",
"fontSize": 35,
"fontWeight": "500",
"justifyContent": "center",
"marginBottom": 20,
"marginTop": 20,
"textAlign": "center",
}
}
>
Create Password
</Component>
<Component
style={
Object {
"marginBottom": 10,
}
}
testID="create-password-screen"
>
<Component
style={
Object {
"fontSize": 16,
"marginBottom": 10,
"marginTop": 10,
"alignItems": "center",
"justifyContent": "center",
"marginTop": 100,
}
}
>
New Password (min 8 chars)
<Image
resizeMethod="auto"
source={
Object {
"testUri": "../../../app/images/fox.png",
}
}
style={
Object {
"height": 100,
"width": 100,
}
}
/>
</Component>
<TextInput
allowFontScaling={true}
onChangeText={[Function]}
placeholder=""
secureTextEntry={true}
<Component
style={
Object {
"borderColor": "#CCCCCC",
"borderRadius": 4,
"borderWidth": 1,
"color": "#1B344D",
"fontFamily": "Roboto",
"fontSize": 20,
"fontWeight": "400",
"padding": 10,
"fontSize": 35,
"fontWeight": "500",
"justifyContent": "center",
"marginBottom": 20,
"marginTop": 20,
"textAlign": "center",
}
}
underlineColorAndroid="#CCCCCC"
value=""
/>
</Component>
<Component
style={
Object {
"marginBottom": 10,
}
}
>
>
Create Password
</Component>
<Component
style={
Object {
"fontSize": 16,
"marginBottom": 10,
"marginTop": 10,
}
}
>
Confirm Password
<Component
style={
Object {
"fontSize": 16,
"marginBottom": 10,
"marginTop": 10,
}
}
>
New Password (min 8 chars)
</Component>
<TextInput
allowFontScaling={true}
onChangeText={[Function]}
placeholder=""
secureTextEntry={true}
style={
Object {
"borderColor": "#CCCCCC",
"borderRadius": 4,
"borderWidth": 1,
"fontFamily": "Roboto",
"fontSize": 20,
"fontWeight": "400",
"padding": 10,
}
}
testID="input-password"
underlineColorAndroid="#CCCCCC"
value=""
/>
</Component>
<TextInput
allowFontScaling={true}
onChangeText={[Function]}
placeholder=""
secureTextEntry={true}
<Component
style={
Object {
"borderColor": "#CCCCCC",
"borderRadius": 4,
"borderWidth": 1,
"fontFamily": "Roboto",
"fontSize": 20,
"fontWeight": "400",
"padding": 10,
"marginBottom": 10,
}
}
underlineColorAndroid="#CCCCCC"
value=""
/>
</Component>
<Component
style={
Object {
"marginTop": 20,
}
}
>
<Button
containerStyle={
Object {
"backgroundColor": "#f7861ce6",
"borderRadius": 4,
"flex": 1,
"height": 50,
"justifyContent": "center",
>
<Component
style={
Object {
"fontSize": 16,
"marginBottom": 10,
"marginTop": 10,
}
}
}
onPress={[Function]}
>
Confirm Password
</Component>
<TextInput
allowFontScaling={true}
onChangeText={[Function]}
placeholder=""
secureTextEntry={true}
style={
Object {
"borderColor": "#CCCCCC",
"borderRadius": 4,
"borderWidth": 1,
"fontFamily": "Roboto",
"fontSize": 20,
"fontWeight": "400",
"padding": 10,
}
}
testID="input-password-confirm"
underlineColorAndroid="#CCCCCC"
value=""
/>
</Component>
<Component
style={
Object {
"color": "#FFFFFF",
"fontFamily": "Roboto",
"fontWeight": "500",
"marginTop": 20,
}
}
>
CREATE
</Button>
</Component>
<Component
style={
Object {
"marginTop": 40,
}
}
>
<Button
onPress={[Function]}
<Button
containerStyle={
Object {
"backgroundColor": "#f7861ce6",
"borderRadius": 4,
"flex": 1,
"height": 50,
"justifyContent": "center",
}
}
onPress={[Function]}
style={
Object {
"color": "#FFFFFF",
"fontFamily": "Roboto",
"fontWeight": "500",
}
}
testID="submit"
>
CREATE
</Button>
</Component>
<Component
style={
Object {
"color": "#999999",
"fontFamily": "Roboto",
"fontWeight": "400",
"marginTop": 40,
}
}
>
Import with seed phrase
</Button>
<Button
onPress={[Function]}
style={
Object {
"color": "#999999",
"fontFamily": "Roboto",
"fontWeight": "400",
}
}
testID="import-seed-button"
>
Import with seed phrase
</Button>
</Component>
</Component>
</ScrollView>
</Screen>

@ -1,17 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
ActivityIndicator,
ScrollView,
Switch,
Alert,
Text,
View,
TextInput,
StyleSheet,
Platform,
Image
} from 'react-native';
import { ActivityIndicator, ScrollView, Alert, Text, View, TextInput, StyleSheet, Platform, Image } from 'react-native';
import Button from 'react-native-button';
import * as Keychain from 'react-native-keychain'; // eslint-disable-line import/no-namespace
@ -164,58 +153,61 @@ export default class CreatePassword extends Component {
onPressImport = () => this.props.toggleImportFromSeed();
onBiometryChoiceChange = value => {
this.setState({ biometryChoice: value });
};
render() {
return (
<Screen>
<ScrollView style={styles.wrapper}>
<View style={styles.logoWrapper}>
<Image source={require('../../images/fox.png')} style={styles.image} resizeMethod={'auto'} />
</View>
<Text style={styles.title}>Create Password</Text>
<View style={styles.field}>
<Text style={styles.label}>New Password (min 8 chars)</Text>
<TextInput
style={styles.input}
value={this.state.password}
onChangeText={val => this.setState({ password: val })} // eslint-disable-line react/jsx-no-bind
secureTextEntry
placeholder={''}
underlineColorAndroid={colors.borderColor}
/>
</View>
<View style={styles.field}>
<Text style={styles.label}>Confirm Password</Text>
<TextInput
style={styles.input}
value={this.state.confirmPassword}
onChangeText={val => this.setState({ confirmPassword: val })} // eslint-disable-line react/jsx-no-bind
secureTextEntry
placeholder={''}
underlineColorAndroid={colors.borderColor}
/>
</View>
{this.state.biometryType && (
<View testID={'create-password-screen'}>
<View style={styles.logoWrapper}>
<Image
source={require('../../images/fox.png')}
style={styles.image}
resizeMethod={'auto'}
/>
</View>
<Text style={styles.title}>Create Password</Text>
<View style={styles.field}>
<Text style={styles.label}>Enable {this.state.biometryType}</Text>
<Switch onValueChange={this.onBiometryChoiceChange} value={this.state.biometryChoice} />
<Text style={styles.label}>New Password (min 8 chars)</Text>
<TextInput
style={styles.input}
value={this.state.password}
onChangeText={val => this.setState({ password: val })} // eslint-disable-line react/jsx-no-bind
secureTextEntry
placeholder={''}
underlineColorAndroid={colors.borderColor}
testID={'input-password'}
/>
</View>
<View style={styles.field}>
<Text style={styles.label}>Confirm Password</Text>
<TextInput
style={styles.input}
value={this.state.confirmPassword}
onChangeText={val => this.setState({ confirmPassword: val })} // eslint-disable-line react/jsx-no-bind
secureTextEntry
placeholder={''}
underlineColorAndroid={colors.borderColor}
testID={'input-password-confirm'}
/>
</View>
)}
{this.props.error && <Text style={styles.errorMsg}>{this.props.error}</Text>}
<View style={styles.ctaWrapper}>
<Button style={styles.ctaText} containerStyle={styles.cta} onPress={this.onPressCreate}>
{this.props.loading ? <ActivityIndicator size="small" color="white" /> : 'CREATE'}
</Button>
</View>
<View style={styles.footer}>
<Button style={styles.seed} onPress={this.onPressImport}>
Import with seed phrase
</Button>
{this.props.error && <Text style={styles.errorMsg}>{this.props.error}</Text>}
<View style={styles.ctaWrapper}>
<Button
style={styles.ctaText}
containerStyle={styles.cta}
onPress={this.onPressCreate}
testID={'submit'}
>
{this.props.loading ? <ActivityIndicator size="small" color="white" /> : 'CREATE'}
</Button>
</View>
<View style={styles.footer}>
<Button style={styles.seed} onPress={this.onPressImport} testID={'import-seed-button'}>
Import with seed phrase
</Button>
</View>
</View>
</ScrollView>
</Screen>

@ -1,10 +1,14 @@
jest.useFakeTimers();
import React from 'react';
import { shallow } from 'enzyme';
import CreatePassword from './';
describe('CreatePassword', () => {
it('should render correctly', () => {
const wrapper = shallow(<CreatePassword />);
const wrapper = shallow(
<CreatePassword onPasswordSaved={null} loading={false} error={null} toggleImportFromSeed={null} />
);
expect(wrapper).toMatchSnapshot();
});
});

@ -12,193 +12,201 @@ exports[`ImportFromSeed should render correctly 1`] = `
}
>
<Component
style={
Object {
"alignItems": "center",
"justifyContent": "center",
"marginTop": 50,
}
}
testID="import-from-seed-screen"
>
<Image
resizeMethod="auto"
source={
Object {
"testUri": "../../../app/images/fox.png",
}
}
<Component
style={
Object {
"height": 100,
"width": 100,
"alignItems": "center",
"justifyContent": "center",
"marginTop": 50,
}
}
/>
</Component>
<Component
style={
Object {
"color": "#1B344D",
"fontFamily": "Roboto",
"fontSize": 25,
"fontWeight": "500",
"justifyContent": "center",
"marginBottom": 20,
"marginTop": 20,
"textAlign": "center",
}
}
>
Import from seed
</Component>
<TextInput
allowFontScaling={true}
multiline={true}
numberOfLines={3}
onChangeText={[Function]}
placeholder="Enter your seed phrase here"
style={
Object {
"backgroundColor": "#FFFFFF",
"borderRadius": 10,
"fontFamily": "Roboto",
"fontSize": 20,
"fontWeight": "400",
"height": 110,
"marginBottom": 10,
"marginTop": 10,
"paddingBottom": 20,
"paddingLeft": 20,
"paddingRight": 20,
"paddingTop": 20,
}
}
underlineColorAndroid="transparent"
/>
<Component
style={
Object {
"marginBottom": 10,
}
}
>
>
<Image
resizeMethod="auto"
source={
Object {
"testUri": "../../../app/images/fox.png",
}
}
style={
Object {
"height": 100,
"width": 100,
}
}
/>
</Component>
<Component
style={
Object {
"fontSize": 16,
"marginBottom": 10,
"marginTop": 10,
"color": "#1B344D",
"fontFamily": "Roboto",
"fontSize": 25,
"fontWeight": "500",
"justifyContent": "center",
"marginBottom": 20,
"marginTop": 20,
"textAlign": "center",
}
}
>
New Password (min 8 chars)
Import from seed
</Component>
<TextInput
allowFontScaling={true}
multiline={true}
numberOfLines={3}
onChangeText={[Function]}
placeholder=""
secureTextEntry={true}
placeholder="Enter your seed phrase here"
style={
Object {
"borderColor": "#CCCCCC",
"borderRadius": 4,
"borderWidth": 1,
"backgroundColor": "#FFFFFF",
"borderRadius": 10,
"fontFamily": "Roboto",
"fontSize": 20,
"fontWeight": "400",
"padding": 10,
"height": 110,
"marginBottom": 10,
"marginTop": 10,
"paddingBottom": 20,
"paddingLeft": 20,
"paddingRight": 20,
"paddingTop": 20,
}
}
underlineColorAndroid="#CCCCCC"
value=""
testID="input-seed-phrase"
underlineColorAndroid="transparent"
/>
</Component>
<Component
style={
Object {
"marginBottom": 10,
}
}
>
<Component
style={
Object {
"fontSize": 16,
"marginBottom": 10,
"marginTop": 10,
}
}
>
Confirm Password
<Component
style={
Object {
"fontSize": 16,
"marginBottom": 10,
"marginTop": 10,
}
}
>
New Password (min 8 chars)
</Component>
<TextInput
allowFontScaling={true}
onChangeText={[Function]}
placeholder=""
secureTextEntry={true}
style={
Object {
"borderColor": "#CCCCCC",
"borderRadius": 4,
"borderWidth": 1,
"fontFamily": "Roboto",
"fontSize": 20,
"fontWeight": "400",
"padding": 10,
}
}
testID="input-password"
underlineColorAndroid="#CCCCCC"
value=""
/>
</Component>
<TextInput
allowFontScaling={true}
onChangeText={[Function]}
placeholder=""
secureTextEntry={true}
<Component
style={
Object {
"borderColor": "#CCCCCC",
"borderRadius": 4,
"borderWidth": 1,
"fontFamily": "Roboto",
"fontSize": 20,
"fontWeight": "400",
"padding": 10,
"marginBottom": 10,
}
}
underlineColorAndroid="#CCCCCC"
value=""
/>
</Component>
<Component
style={
Object {
"marginTop": 20,
}
}
>
<Button
containerStyle={
Object {
"backgroundColor": "#f7861ce6",
"borderRadius": 4,
"flex": 1,
"height": 50,
"justifyContent": "center",
>
<Component
style={
Object {
"fontSize": 16,
"marginBottom": 10,
"marginTop": 10,
}
}
}
onPress={[Function]}
>
Confirm Password
</Component>
<TextInput
allowFontScaling={true}
onChangeText={[Function]}
placeholder=""
secureTextEntry={true}
style={
Object {
"borderColor": "#CCCCCC",
"borderRadius": 4,
"borderWidth": 1,
"fontFamily": "Roboto",
"fontSize": 20,
"fontWeight": "400",
"padding": 10,
}
}
testID="input-password-confirm"
underlineColorAndroid="#CCCCCC"
value=""
/>
</Component>
<Component
style={
Object {
"color": "#FFFFFF",
"fontFamily": "Roboto",
"fontWeight": "500",
"marginTop": 20,
}
}
>
IMPORT
</Button>
</Component>
<Component
style={
Object {
"marginTop": 40,
}
}
>
<Button
onPress={[Function]}
<Button
containerStyle={
Object {
"backgroundColor": "#f7861ce6",
"borderRadius": 4,
"flex": 1,
"height": 50,
"justifyContent": "center",
}
}
onPress={[Function]}
style={
Object {
"color": "#FFFFFF",
"fontFamily": "Roboto",
"fontWeight": "500",
}
}
testID="submit"
>
IMPORT
</Button>
</Component>
<Component
style={
Object {
"color": "#999999",
"fontFamily": "Roboto",
"fontWeight": "400",
"marginTop": 40,
}
}
>
Cancel
</Button>
<Button
onPress={[Function]}
style={
Object {
"color": "#999999",
"fontFamily": "Roboto",
"fontWeight": "400",
}
}
>
Cancel
</Button>
</Component>
</Component>
</ScrollView>
</Screen>

@ -1,17 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
ActivityIndicator,
ScrollView,
Switch,
Alert,
Text,
View,
TextInput,
StyleSheet,
Platform,
Image
} from 'react-native';
import { ActivityIndicator, ScrollView, Alert, Text, View, TextInput, StyleSheet, Platform, Image } from 'react-native';
import Button from 'react-native-button';
import * as Keychain from 'react-native-keychain'; // eslint-disable-line import/no-namespace
@ -204,58 +193,66 @@ export default class ImportFromSeed extends Component {
return (
<Screen>
<ScrollView style={styles.wrapper}>
<View style={styles.logoWrapper}>
<Image source={require('../../images/fox.png')} style={styles.image} resizeMethod={'auto'} />
</View>
<Text style={styles.title}>Import from seed</Text>
<TextInput
value={this.state.seedWords}
numberOfLines={3}
multiline
style={styles.seedPhrase}
placeholder={'Enter your seed phrase here'}
onChangeText={this.onSeedWordsChange}
/>
<View style={styles.field}>
<Text style={styles.label}>New Password (min 8 chars)</Text>
<TextInput
style={styles.input}
value={this.state.password}
onChangeText={this.onPasswordChange}
secureTextEntry
placeholder={''}
underlineColorAndroid={colors.borderColor}
/>
</View>
<View style={styles.field}>
<Text style={styles.label}>Confirm Password</Text>
<View testID={'import-from-seed-screen'}>
<View style={styles.logoWrapper}>
<Image
source={require('../../images/fox.png')}
style={styles.image}
resizeMethod={'auto'}
/>
</View>
<Text style={styles.title}>Import from seed</Text>
<TextInput
style={styles.input}
value={this.state.confirmPassword}
onChangeText={this.onPasswordConfirmChange}
secureTextEntry
placeholder={''}
underlineColorAndroid={colors.borderColor}
value={this.state.seedWords}
numberOfLines={3}
multiline
style={styles.seedPhrase}
placeholder={'Enter your seed phrase here'}
onChangeText={this.onSeedWordsChange}
testID={'input-seed-phrase'}
/>
</View>
{this.state.biometryType && (
<View style={styles.field}>
<Text style={styles.label}>Enable {this.state.biometryType}</Text>
<Switch onValueChange={this.onBiometryChoiceChange} value={this.state.biometryChoice} />
<Text style={styles.label}>New Password (min 8 chars)</Text>
<TextInput
style={styles.input}
value={this.state.password}
onChangeText={this.onPasswordChange}
secureTextEntry
placeholder={''}
underlineColorAndroid={colors.borderColor}
testID={'input-password'}
/>
</View>
<View style={styles.field}>
<Text style={styles.label}>Confirm Password</Text>
<TextInput
style={styles.input}
value={this.state.confirmPassword}
onChangeText={this.onPasswordConfirmChange}
secureTextEntry
placeholder={''}
underlineColorAndroid={colors.borderColor}
testID={'input-password-confirm'}
/>
</View>
)}
{this.props.error && <Text style={styles.errorMsg}>{this.props.error}</Text>}
<View style={styles.ctaWrapper}>
<Button style={styles.ctaText} containerStyle={styles.cta} onPress={this.onPressImport}>
{this.props.loading ? <ActivityIndicator size="small" color="white" /> : 'IMPORT'}
</Button>
</View>
<View style={styles.footer}>
<Button style={styles.seed} onPress={this.onCancel}>
Cancel
</Button>
{this.props.error && <Text style={styles.errorMsg}>{this.props.error}</Text>}
<View style={styles.ctaWrapper}>
<Button
style={styles.ctaText}
containerStyle={styles.cta}
onPress={this.onPressImport}
testID={'submit'}
>
{this.props.loading ? <ActivityIndicator size="small" color="white" /> : 'IMPORT'}
</Button>
</View>
<View style={styles.footer}>
<Button style={styles.seed} onPress={this.onCancel}>
Cancel
</Button>
</View>
</View>
</ScrollView>
</Screen>

@ -11,6 +11,7 @@ exports[`LockScreen should render correctly 1`] = `
"justifyContent": "center",
}
}
testID="lock-screen"
>
<Image
resizeMethod="auto"

@ -23,7 +23,7 @@ export default class LockScreen extends Component {
render() {
return (
<Screen>
<View style={styles.wrapper}>
<View style={styles.wrapper} testID={'lock-screen'}>
<Image source={require('../../images/fox.png')} style={styles.image} resizeMethod={'auto'} />
</View>
</Screen>