Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding more component jest snapshots #30

Merged
merged 25 commits into from
Dec 19, 2018
Merged

Adding more component jest snapshots #30

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
2c3000d
refs #22
marcelomorgado Dec 18, 2018
7fda7ae
Merge branch 'develop' into feature/snapshots
pcowgill Dec 18, 2018
e5732e4
Merge pull request #7 from pcowgill/feature/snapshots
marcelomorgado Dec 18, 2018
ceed977
Screen/Presentational components refactoring
marcelomorgado Dec 18, 2018
59ed95d
Screens components snapshot update
marcelomorgado Dec 18, 2018
0cf20ba
Presentational components tests & snapshots
marcelomorgado Dec 18, 2018
60ce394
Bug fix
marcelomorgado Dec 18, 2018
2926d9c
Merge branch 'feature/snapshots' of https://github.com/marcelomorgado…
marcelomorgado Dec 18, 2018
2ad694f
Merge branch 'develop' of https://github.com/tasitlabs/tasit into fea…
marcelomorgado Dec 18, 2018
4ec934a
Merge branch 'develop' into feature/snapshots
pcowgill Dec 18, 2018
1170dc4
Update demo/components/presentational/EthereumQuestion.js
pcowgill Dec 19, 2018
a4290da
Update demo/components/presentational/EthereumSignIn.js
pcowgill Dec 19, 2018
8416143
Update demo/components/presentational/Home.js
pcowgill Dec 19, 2018
f3c0081
Update demo/components/presentational/LandClaim.js
pcowgill Dec 19, 2018
bf976c4
Update demo/components/presentational/ListLands.js
pcowgill Dec 19, 2018
17daf30
Update demo/components/presentational/OnboardingHome.js
pcowgill Dec 19, 2018
aac14c4
Update demo/screens/EthereumQuestionScreen.js
pcowgill Dec 19, 2018
2646ea3
Update demo/screens/EthereumSignInScreen.js
pcowgill Dec 19, 2018
f8f6a47
Update demo/screens/EthereumSignUpScreen.js
pcowgill Dec 19, 2018
02b6958
Update demo/screens/HomeScreen.js
pcowgill Dec 19, 2018
94db968
Update demo/screens/LandClaimScreen.js
pcowgill Dec 19, 2018
bd354cc
Update demo/screens/OnboardingHomeScreen.js
pcowgill Dec 19, 2018
f8f718c
Removing old components (without Screen suffix).
marcelomorgado Dec 19, 2018
47f3899
react-native-responsive-dimensions
marcelomorgado Dec 19, 2018
951427b
Update snapshots of components affected by responsive-dimentions
marcelomorgado Dec 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions demo/screens/EthereumQuestion.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";
import NavigationTestUtils from "react-navigation/NavigationTestUtils";
import { shallow } from "enzyme";
import EthereumQuestion from "./EthereumQuestion";

describe("EthereumQuestion", () => {
jest.useFakeTimers();
beforeEach(() => {
NavigationTestUtils.resetInternalState();
});

it("renders the component", async () => {
expect(shallow(<EthereumQuestion />)).toMatchSnapshot();
});
});
15 changes: 15 additions & 0 deletions demo/screens/EthereumSignIn.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";
import NavigationTestUtils from "react-navigation/NavigationTestUtils";
import { shallow } from "enzyme";
import EthereumSignIn from "./EthereumSignIn";

describe("EthereumSignIn", () => {
jest.useFakeTimers();
beforeEach(() => {
NavigationTestUtils.resetInternalState();
});

it("renders the component", async () => {
expect(shallow(<EthereumSignIn />)).toMatchSnapshot();
});
});
15 changes: 15 additions & 0 deletions demo/screens/EthereumSignUp.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";
import NavigationTestUtils from "react-navigation/NavigationTestUtils";
import { shallow } from "enzyme";
import EthereumSignUp from "./EthereumSignUp";

describe("EthereumSignUp", () => {
jest.useFakeTimers();
beforeEach(() => {
NavigationTestUtils.resetInternalState();
});

it("renders the component", async () => {
expect(shallow(<EthereumSignUp />)).toMatchSnapshot();
});
});
15 changes: 15 additions & 0 deletions demo/screens/Home.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";
import NavigationTestUtils from "react-navigation/NavigationTestUtils";
import { shallow } from "enzyme";
import Home from "./Home";

describe("Home", () => {
jest.useFakeTimers();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most pure, functional presentational components won't need to useFakeTimers, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, you are right.

beforeEach(() => {
NavigationTestUtils.resetInternalState();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@marcelomorgado I think for any screens that also happen to be presentational (that don't have any internal state or lifecycle hooks), we probably don't need to import NavigationTestUtils and use resetInternalState, right?

On that topic, would it be easier to keep track of which screens are presentational if we moved most of their content to a presentational component and then made the "screen" just render that presentational component? I'm inclined to say yes.

Copy link
Contributor Author

@marcelomorgado marcelomorgado Dec 18, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right.

Yes, make sense.
Some questions:

  1. Make sense use Screen suffix on file names to avoid name duplication (ex.: screen/ListLandsScreen.js and components/presentational/ListLands.js)?
  2. Is to do that with all screen components?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. I like that suffix idea.
  2. Yeah, I think we might as well do this with all screen components.

Thanks!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @pcowgill what do you think?

EthereumQuestionScreen

import React from "react";
import EthereumQuestion from "../components/presentational/EthereumQuestion";

export default class EthereumQuestionScreen extends React.Component {
  render() {
    return (
      <EthereumQuestion
        onSignUp={() => this.props.navigation.navigate("EthereumSignUp")}
        onSignIn={() => this.props.navigation.navigate("EthereumSignIn")}
      />
    );
  }
}

EthereumQuestion

import React from "react";
import { Button, StyleSheet, View } from "react-native";
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: 20,
  },
});

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great!

Copy link
Member

@pcowgill pcowgill Dec 18, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feel free to make changes like this one throughout the repo

});

it("renders the component", async () => {
expect(shallow(<Home />)).toMatchSnapshot();
});
});
16 changes: 16 additions & 0 deletions demo/screens/LandClaim.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";
import NavigationTestUtils from "react-navigation/NavigationTestUtils";
import { shallow } from "enzyme";
import LandClaim from "./LandClaim";

describe("LandClaim", () => {
jest.useFakeTimers();
beforeEach(() => {
NavigationTestUtils.resetInternalState();
});

it("renders the component", async () => {
const navigation = { getParam: jest.fn() };
pcowgill marked this conversation as resolved.
Show resolved Hide resolved
expect(shallow(<LandClaim navigation={navigation} />)).toMatchSnapshot();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the snapshot / test split would be more readable if there were a presentational component for most of the jsx in LandClaim that had a shallow snapshot test with no navigation mock, and then this screen shallow-rendered itself with the name of that component like it does now, but the snapshot would be much smaller.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I agree. 👍

});
});
15 changes: 15 additions & 0 deletions demo/screens/ListLands.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";
import NavigationTestUtils from "react-navigation/NavigationTestUtils";
import { shallow } from "enzyme";
import ListLands from "./ListLands";

describe("EthereumQuestion", () => {
jest.useFakeTimers();
beforeEach(() => {
NavigationTestUtils.resetInternalState();
});

it("renders the component", async () => {
expect(shallow(<ListLands />)).toMatchSnapshot();
});
});
15 changes: 15 additions & 0 deletions demo/screens/OnboardingHome.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";
import NavigationTestUtils from "react-navigation/NavigationTestUtils";
import { shallow } from "enzyme";
import OnboardingHome from "./OnboardingHome";

describe("OnboardingHome", () => {
jest.useFakeTimers();
beforeEach(() => {
NavigationTestUtils.resetInternalState();
});

it("renders the component", async () => {
expect(shallow(<OnboardingHome />)).toMatchSnapshot();
});
});
44 changes: 44 additions & 0 deletions demo/screens/__snapshots__/EthereumQuestion.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EthereumQuestion renders the component 1`] = `
<Component
style={
Object {
"alignItems": "center",
"backgroundColor": "#fff",
"flex": 1,
"justifyContent": "center",
}
}
>
<LargeText>
Are you new to Ethereum?
</LargeText>
<Component
style={
Object {
"flexDirection": "row",
"marginTop": 20,
}
}
>
<Button
onPress={[Function]}
title="Yep"
/>
</Component>
<Component
style={
Object {
"flexDirection": "row",
"marginTop": 20,
}
}
>
<Button
onPress={[Function]}
title="Nope"
/>
</Component>
</Component>
`;
31 changes: 31 additions & 0 deletions demo/screens/__snapshots__/EthereumSignIn.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EthereumSignIn renders the component 1`] = `
<Component
style={
Object {
"alignItems": "center",
"backgroundColor": "#fff",
"flex": 1,
"justifyContent": "center",
}
}
>
<LargeText>
Cool. Let's start by hooking this app with your wallet.
</LargeText>
<Component
style={
Object {
"flexDirection": "row",
"marginTop": 30,
}
}
>
<Button
onPress={[Function]}
title="Connect with WalletConnect"
/>
</Component>
</Component>
`;
22 changes: 22 additions & 0 deletions demo/screens/__snapshots__/EthereumSignUp.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EthereumSignUp renders the component 1`] = `
<KeyboardAvoidingView
behavior="padding"
enabled={true}
keyboardVerticalOffset={84}
style={
Object {
"alignItems": "center",
"backgroundColor": "#fff",
"flex": 1,
"justifyContent": "center",
}
}
>
<LargeText>
Cool. Let's start by picking your Tasit username.
</LargeText>
<EthereumSignUpForm />
</KeyboardAvoidingView>
`;
25 changes: 25 additions & 0 deletions demo/screens/__snapshots__/Home.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Home renders the component 1`] = `
<Component
style={
Object {
"alignItems": "center",
"backgroundColor": "#fff",
"flex": 1,
"justifyContent": "center",
}
}
>
<Component
source={1}
/>
<LargeText>
Tasit
</LargeText>
<Button
onPress={[Function]}
title="Decentraland"
/>
</Component>
`;
29 changes: 29 additions & 0 deletions demo/screens/__snapshots__/LandClaim.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`LandClaim renders the component 1`] = `
<Component
style={
Object {
"alignItems": "center",
"backgroundColor": "#fff",
"flex": 1,
"justifyContent": "center",
}
}
>
<Land />
<Component
style={
Object {
"flexDirection": "row",
"marginTop": 30,
}
}
>
<Button
onPress={[Function]}
title="Claim"
/>
</Component>
</Component>
`;
14 changes: 14 additions & 0 deletions demo/screens/__snapshots__/ListLands.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EthereumQuestion renders the component 1`] = `
<ListViewMock
renderRow={[Function]}
renderScrollComponent={[MockFunction]}
style={
Object {
"backgroundColor": "#fff",
"flex": 1,
}
}
/>
`;
34 changes: 34 additions & 0 deletions demo/screens/__snapshots__/OnboardingHome.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`OnboardingHome renders the component 1`] = `
<Component
style={
Object {
"alignItems": "center",
"backgroundColor": "#fff",
"flex": 1,
"justifyContent": "center",
}
}
>
<Component
source={1}
/>
<LargeText>
Let's get you set up with a secure way to store this land!
</LargeText>
<Component
style={
Object {
"flexDirection": "row",
"marginTop": 30,
}
}
>
<Button
onPress={[Function]}
title="Get started"
/>
</Component>
</Component>
`;