Skip to content

Commit cbf4915

Browse files
CavanWaggCavanWagg
committed
continued Apollo Client Mutation testing: signup test
1 parent 2d63f71 commit cbf4915

4 files changed

Lines changed: 200 additions & 63 deletions

File tree

‎frontend/__tests__/Signup.test.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { mount } from 'enzyme';
2+
import wait from 'waait';
3+
import toJSON from 'enzyme-to-json';
4+
import { MockedProvider } from 'react-apollo/test-utils';
5+
import { ApolloConsumer } from 'react-apollo';
6+
import Signup, { SIGNUP_MUTATION } from '../components/Signup';
7+
import { CURRENT_USER_QUERY } from '../components/User';
8+
import { fakeUser } from '../lib/testUtils';
9+
10+
function type(wrapper, name, value) {
11+
wrapper.find(`input[name="${name}"]`).simulate('change', {
12+
target: { name, value },
13+
});
14+
}
15+
16+
const me = fakeUser();
17+
const mocks = [
18+
// signup mock mutation
19+
{
20+
request: {
21+
query: SIGNUP_MUTATION,
22+
variables: {
23+
name: me.name,
24+
email: me.email,
25+
password: 'wes',
26+
},
27+
},
28+
result: {
29+
data: {
30+
signup: {
31+
__typename: 'User',
32+
id: 'abc123',
33+
email: me.email,
34+
name: me.name,
35+
},
36+
},
37+
},
38+
},
39+
// current user query mock
40+
{
41+
request: { query: CURRENT_USER_QUERY },
42+
result: { data: { me } },
43+
},
44+
];
45+
46+
describe('<Signup/>', () => {
47+
it('renders and matches snapshot', async () => {
48+
const wrapper = mount(
49+
<MockedProvider>
50+
<Signup />
51+
</MockedProvider>
52+
);
53+
expect(toJSON(wrapper.find('form'))).toMatchSnapshot();
54+
});
55+
56+
it('calls the mutation properly', async () => {
57+
let apolloClient;
58+
const wrapper = mount(
59+
<MockedProvider mocks={mocks}>
60+
<ApolloConsumer>
61+
{client => {
62+
apolloClient = client;
63+
return <Signup />;
64+
}}
65+
</ApolloConsumer>
66+
</MockedProvider>
67+
);
68+
await wait();
69+
wrapper.update();
70+
type(wrapper, 'name', me.name);
71+
type(wrapper, 'email', me.email);
72+
type(wrapper, 'password', 'wes');
73+
wrapper.update();
74+
wrapper.find('form').simulate('submit');
75+
await wait();
76+
// query the user out of the apollo client
77+
const user = await apolloClient.query({ query: CURRENT_USER_QUERY });
78+
expect(user.data.me).toMatchObject(me);
79+
});
80+
});

‎frontend/__tests__/__snapshots__/Signup.test.js.snap‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<Signup/> renders and matches snapshot 1`] = `
4+
<form
5+
className="Form-sc-1xszr8q-0 krRxky"
6+
method="post"
7+
onSubmit={[Function]}
8+
>
9+
<fieldset
10+
aria-busy={false}
11+
disabled={false}
12+
>
13+
<h2>
14+
Sign Up for An Account
15+
</h2>
16+
<DisplayError
17+
error={Object {}}
18+
/>
19+
<label
20+
htmlFor="email"
21+
>
22+
Email
23+
<input
24+
name="email"
25+
onChange={[Function]}
26+
placeholder="email"
27+
type="email"
28+
value=""
29+
/>
30+
</label>
31+
<label
32+
htmlFor="name"
33+
>
34+
Name
35+
<input
36+
name="name"
37+
onChange={[Function]}
38+
placeholder="name"
39+
type="text"
40+
value=""
41+
/>
42+
</label>
43+
<label
44+
htmlFor="password"
45+
>
46+
Password
47+
<input
48+
name="password"
49+
onChange={[Function]}
50+
placeholder="password"
51+
type="password"
52+
value=""
53+
/>
54+
</label>
55+
<button
56+
type="submit"
57+
>
58+
Sign Up!
59+
</button>
60+
</fieldset>
61+
</form>
62+
`;

‎frontend/components/Signup.js‎

Lines changed: 53 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,7 @@ import Error from './ErrorMessage';
66
import { CURRENT_USER_QUERY } from './User';
77

88
const SIGNUP_MUTATION = gql`
9-
mutation SIGNUP_MUTATION(
10-
$email: String!
11-
$name: String!
12-
$password: String!
13-
) {
9+
mutation SIGNUP_MUTATION($email: String!, $name: String!, $password: String!) {
1410
signup(email: $email, name: $name, password: $password) {
1511
id
1612
email
@@ -19,11 +15,11 @@ const SIGNUP_MUTATION = gql`
1915
}
2016
`;
2117

22-
export default class Signup extends Component {
18+
class Signup extends Component {
2319
state = {
2420
name: '',
2521
email: '',
26-
password: ''
22+
password: '',
2723
};
2824
saveToState = e => {
2925
this.setState({ [e.target.name]: e.target.value });
@@ -35,61 +31,57 @@ export default class Signup extends Component {
3531
variables={this.state}
3632
refetchQueries={[{ query: CURRENT_USER_QUERY }]}
3733
>
38-
{(signup, { error, loading }) => {
39-
return (
40-
// form elements are get by default, change to post
41-
<Form
42-
method="post"
43-
onSubmit={async e => {
44-
e.preventDefault();
45-
//capture result and if okay clear form.
46-
e.preventDefault();
47-
const res = await signup();
48-
this.setState({ name: '', email: '', password: '' });
49-
}}
50-
>
51-
{/* disable the form and show a loading indicator while things are
52-
happening */}
53-
<fieldset disabled={loading} aria-busy={loading}>
54-
<h2>Sign Up for an Account </h2>
55-
<Error error={error} />
56-
<label htmlFor="email">
57-
Email
58-
<input
59-
type="text"
60-
type="email"
61-
name="email"
62-
placeholder="email"
63-
value={this.state.email}
64-
onChange={this.saveToState}
65-
/>
66-
</label>
67-
<label htmlFor="name">
68-
Name
69-
<input
70-
type="text"
71-
name="name"
72-
placeholder="name"
73-
value={this.state.name}
74-
onChange={this.saveToState}
75-
/>
76-
</label>
77-
<label htmlFor="password">
78-
Password
79-
<input
80-
type="password"
81-
name="password"
82-
placeholder="password"
83-
value={this.state.password}
84-
onChange={this.saveToState}
85-
/>
86-
</label>
87-
<button type="submit">Sign up</button>
88-
</fieldset>
89-
</Form>
90-
);
91-
}}
34+
{(signup, { error, loading }) => (
35+
<Form
36+
method="post"
37+
onSubmit={async e => {
38+
e.preventDefault();
39+
await signup();
40+
this.setState({ name: '', email: '', password: '' });
41+
}}
42+
>
43+
<fieldset disabled={loading} aria-busy={loading}>
44+
<h2>Sign Up for An Account</h2>
45+
<Error error={error} />
46+
<label htmlFor="email">
47+
Email
48+
<input
49+
type="email"
50+
name="email"
51+
placeholder="email"
52+
value={this.state.email}
53+
onChange={this.saveToState}
54+
/>
55+
</label>
56+
<label htmlFor="name">
57+
Name
58+
<input
59+
type="text"
60+
name="name"
61+
placeholder="name"
62+
value={this.state.name}
63+
onChange={this.saveToState}
64+
/>
65+
</label>
66+
<label htmlFor="password">
67+
Password
68+
<input
69+
type="password"
70+
name="password"
71+
placeholder="password"
72+
value={this.state.password}
73+
onChange={this.saveToState}
74+
/>
75+
</label>
76+
77+
<button type="submit">Sign Up!</button>
78+
</fieldset>
79+
</Form>
80+
)}
9281
</Mutation>
9382
);
9483
}
9584
}
85+
86+
export default Signup;
87+
export { SIGNUP_MUTATION };

‎frontend/components/User.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ const CURRENT_USER_QUERY = gql`
99
email
1010
name
1111
permissions
12+
orders {
13+
id
14+
}
1215
cart {
1316
id
1417
quantity
@@ -31,8 +34,8 @@ const User = props => (
3134
);
3235

3336
User.propTypes = {
34-
children: PropTypes.func.isRequired
37+
children: PropTypes.func.isRequired,
3538
};
3639

3740
export default User;
38-
export { CURRENT_USER_QUERY };
41+
export { CURRENT_USER_QUERY };

0 commit comments

Comments
 (0)