Adding more component jest snapshots

demo/AppNavigator.js

@@ -1,25 +1,26 @@
 import { createStackNavigator, createAppContainer } from "react-navigation";
-import Home from "./screens/Home";
-import ListLands from "./screens/ListLands";
-import LandClaim from "./screens/LandClaim";
-import OnboardingHome from "./screens/OnboardingHome";
-import EthereumQuestion from "./screens/EthereumQuestion";
-import EthereumSignUp from "./screens/EthereumSignUp";
-import EthereumSignIn from "./screens/EthereumSignIn";
-import Colors from "@constants/Colors";
+
+import HomeScreen from "./screens/HomeScreen";
+import ListLandsScreen from "./screens/ListLandsScreen";
+import LandClaimScreen from "./screens/LandClaimScreen";
+import OnboardingHomeScreen from "./screens/OnboardingHomeScreen";
+import EthereumQuestionScreen from "./screens/EthereumQuestionScreen";
+import EthereumSignUpScreen from "./screens/EthereumSignUpScreen";
+import EthereumSignInScreen from "./screens/EthereumSignInScreen";
+import Colors from "@constants/Colors.js";
 
 const AppNavigator = createStackNavigator(
   {
-    Home,
-    ListLands,
-    LandClaim,
-    OnboardingHome,
-    EthereumQuestion,
-    EthereumSignUp,
-    EthereumSignIn,
+    HomeScreen,
+    ListLandsScreen,
+    LandClaimScreen,
+    OnboardingHomeScreen,
+    EthereumQuestionScreen,
+    EthereumSignUpScreen,
+    EthereumSignInScreen,
   },
   {
-    initialRouteName: "Home",
+    initialRouteName: "HomeScreen",
     defaultNavigationOptions: {
       headerStyle: {
         backgroundColor: Colors.headerBackgroundColor,

demo/components/presentational/EthereumQuestion.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Button, StyleSheet, View } from "react-native";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import LargeText from "./LargeText";
+import Colors from "@constants/Colors";
+
+export default function EthereumQuestion(props) {
+  return (
+    <View style={styles.container}>
+      <LargeText>{`Are you new to Ethereum?`}</LargeText>
+      <View style={styles.buttonView}>
+        <Button title="Yep" onPress={props.onSignUp} />
+      </View>
+      <View style={styles.buttonView}>
+        <Button title="Nope" onPress={props.onSignIn} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.backgroundColor,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonView: {
+    flexDirection: "row",
+    marginTop: responsiveHeight(4),
+  },
+});

demo/components/presentational/EthereumQuestion.test.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { shallow } from "enzyme";
+import EthereumQuestion from "./EthereumQuestion";
+
+describe("EthereumQuestion", () => {
+  it("renders the component", async () => {
+    expect(
+      shallow(<EthereumQuestion onSignUp={() => {}} onSignIn={() => {}} />)
+    ).toMatchSnapshot();
+  });
+});

demo/components/presentational/EthereumSignIn.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { Button, StyleSheet, View } from "react-native";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import LargeText from "./LargeText";
+import Colors from "@constants/Colors";
+
+export default function EthereumSignIn(props) {
+  return (
+    <View style={styles.container}>
+      <LargeText>{`Cool. Let's start by hooking this app with your wallet.`}</LargeText>
+      <View style={styles.buttonView}>
+        <Button title="Connect with WalletConnect" onPress={props.onConnect} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.backgroundColor,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonView: {
+    flexDirection: "row",
+    marginTop: responsiveHeight(5),
+  },
+});

demo/components/presentational/EthereumSignIn.test.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { shallow } from "enzyme";
+import EthereumSignIn from "./EthereumSignIn";
+
+describe("EthereumSignIn", () => {
+  it("renders the component", async () => {
+    expect(shallow(<EthereumSignIn onConnect={() => {}} />)).toMatchSnapshot();
+  });
+});

demo/screens/EthereumSignUp.js → demo/components/presentational/EthereumSignUp.js

@@ -1,13 +1,14 @@
 import React from "react";
 import { StyleSheet, KeyboardAvoidingView } from "react-native";
+import { responsiveHeight } from "react-native-responsive-dimensions";
 import { Header } from "react-navigation";
 import Colors from "@constants/Colors";
 import LargeText from "@presentational/LargeText";
 import EthereumSignUpForm from "@presentational/EthereumSignUpForm";
 
 export default class EthereumSignUp extends React.Component {
   render() {
-    const OFFSET = 20;
+    const OFFSET = responsiveHeight(3);
     return (
       <KeyboardAvoidingView
         keyboardVerticalOffset={Header.HEIGHT + OFFSET}

demo/components/presentational/EthereumSignUp.test.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { shallow } from "enzyme";
+import EthereumSignUp from "./EthereumSignUp";
+
+describe("EthereumSignUp", () => {
+  it("renders the component", async () => {
+    expect(shallow(<EthereumSignUp />)).toMatchSnapshot();
+  });
+});

demo/components/presentational/EthereumSignUpForm.js

@@ -1,5 +1,10 @@
 import React from "react";
 import { Button, StyleSheet, View, Text, TextInput } from "react-native";
+import {
+  responsiveHeight,
+  responsiveWidth,
+  responsiveFontSize,
+} from "react-native-responsive-dimensions";
 import { Account } from "tasit-sdk";
 
 export default class EthereumSignUpForm extends React.Component {
@@ -43,11 +48,15 @@ export default class EthereumSignUpForm extends React.Component {
 const styles = StyleSheet.create({
   userRow: { flexDirection: "row" },
   userInputView: { flex: 1, alignItems: "flex-end" },
-  userInput: { justifyContent: "flex-start", width: 90, fontSize: 20 },
+  userInput: {
+    justifyContent: "flex-start",
+    width: responsiveWidth(28),
+    fontSize: responsiveFontSize(3),
+  },
   ensView: { flex: 1 },
-  ensText: { justifyContent: "flex-end", fontSize: 20 },
+  ensText: { justifyContent: "flex-end", fontSize: responsiveFontSize(3) },
   buttonView: {
     flexDirection: "row",
-    marginTop: 30,
+    marginTop: responsiveHeight(5),
   },
 });

demo/components/presentational/Home.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Image, Button, StyleSheet, View } from "react-native";
+import LargeText from "./LargeText";
+import Colors from "@constants/Colors";
+
+export default function Home(props) {
+  return (
+    <View style={styles.container}>
+      <Image source={require("../../assets/images/icon.png")} />
+      <LargeText>{`Tasit`}</LargeText>
+      <Button title="Decentraland" onPress={props.onPress} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.backgroundColor,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

demo/components/presentational/Home.test.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Home from "./Home";
+
+describe("Home", () => {
+  it("renders the component", async () => {
+    expect(shallow(<Home onPress={() => {}} />)).toMatchSnapshot();
+  });
+});

demo/components/presentational/Land.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { Image, StyleSheet, View, Text } from "react-native";
+import { responsiveWidth } from "react-native-responsive-dimensions";
 
 export default function Land({ land }) {
   return (
@@ -15,6 +16,6 @@ export default function Land({ land }) {
 
 const styles = StyleSheet.create({
   landContainer: {
-    width: 224,
+    width: responsiveWidth(60),
   },
 });

demo/components/presentational/Land.test.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Land from "./Land";
+
+describe("Land", () => {
+  it("renders the component", async () => {
+    const land = {
+      id: -1,
+      name: "Not found",
+      img: require("../../assets/images/icon.png"),
+      priceMana: 0,
+      priceUsd: 0,
+    };
+    expect(shallow(<Land land={land} />)).toMatchSnapshot();
+  });
+});

demo/components/presentational/LandClaim.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { StyleSheet, View, Button } from "react-native";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import Land from "./Land";
+import Colors from "@constants/Colors";
+
+export default function LandClaim(props) {
+  return (
+    <View style={styles.container}>
+      <Land land={props.land} />
+      <View style={styles.buttonView}>
+        <Button
+          style={styles.claimButton}
+          title="Claim"
+          onPress={props.onClaim}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.backgroundColor,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonView: {
+    flexDirection: "row",
+    marginTop: responsiveHeight(5),
+  },
+});

demo/components/presentational/LandClaim.test.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { shallow } from "enzyme";
+import LandClaim from "./LandClaim";
+
+describe("LandClaim", () => {
+  it("renders the component", async () => {
+    expect(shallow(<LandClaim onClaim={() => {}} />)).toMatchSnapshot();
+  });
+});

demo/components/presentational/LandRow.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { StyleSheet, View, TouchableHighlight } from "react-native";
+import {
+  responsiveHeight,
+  responsiveWidth,
+} from "react-native-responsive-dimensions";
+import Land from "./Land";
+
+export default function LandRow(props) {
+  return (
+    <TouchableHighlight onPress={props.onPress}>
+      <View style={styles.row}>
+        <Land land={props.land} />
+      </View>
+    </TouchableHighlight>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    paddingTop: responsiveHeight(3),
+    paddingBottom: responsiveHeight(3),
+    paddingLeft: responsiveWidth(3),
+    paddingRight: responsiveWidth(3),
+    marginBottom: responsiveHeight(1),
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

demo/components/presentational/LandRow.test.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { shallow } from "enzyme";
+import LandRow from "./LandRow";
+
+describe("LandRow", () => {
+  it("renders the component", async () => {
+    expect(shallow(<LandRow />)).toMatchSnapshot();
+  });
+});

demo/components/presentational/LargeText.js

@@ -1,6 +1,9 @@
 import React from "react";
 import { StyleSheet, Text } from "react-native";
-import { responsiveHeight } from "react-native-responsive-dimensions";
+import {
+  responsiveHeight,
+  responsiveFontSize,
+} from "react-native-responsive-dimensions";
 import Colors from "@constants/Colors";
 
 export default function LargeText(props) {
@@ -10,7 +13,7 @@ export default function LargeText(props) {
 const styles = StyleSheet.create({
   text: {
     padding: responsiveHeight(2),
-    fontSize: 30,
+    fontSize: responsiveFontSize(4),
     textAlign: "center",
     fontWeight: "bold",
     color: Colors.textColor,

demo/components/presentational/LargeText.test.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { shallow } from "enzyme";
+import LargeText from "./LargeText";
+
+describe("LargeText", () => {
+  it("renders the component", async () => {
+    expect(shallow(<LargeText />)).toMatchSnapshot();
+  });
+});

demo/components/presentational/ListLands.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { ListView, StyleSheet } from "react-native";
+import Colors from "@constants/Colors";
+
+export default function ListLands(props) {
+  return (
+    <ListView
+      style={styles.container}
+      dataSource={props.dataSource}
+      renderRow={props.renderRow}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.backgroundColor,
+  },
+});

demo/components/presentational/ListLands.test.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { shallow } from "enzyme";
+import ListLands from "./ListLands";
+
+describe("ListLands", () => {
+  it("renders the component", async () => {
+    expect(shallow(<ListLands />)).toMatchSnapshot();
+  });
+});