1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
import React from 'react';
import { mount } from 'enzyme';
import toJSON from 'enzyme-to-json';
import Router from 'next/router';
import { MockedProvider } from 'react-apollo/test-utils';
import CreateItem, { CREATE_ITEM_MUTATION } from '../components/CreateItem';
import wait from 'waait';
import { fakeItem } from '../lib/testUtils';
const dogImage = 'https://dog.com/dog.jpg';
// Mock fetch to resolve data
global.fetch = jest.fn().mockResolvedValue({
json: () => ({
secure_url: dogImage,
eager: [{ secure_url: dogImage }],
}),
});
describe('<Createitem/>', () => {
it('renders and matches snapshot', () => {
const wrapper = mount(
<MockedProvider>
<CreateItem />
</MockedProvider>
);
const form = wrapper.find('form[data-test]');
expect(toJSON(form)).toMatchSnapshot();
});
it('uploads a file when changed', async () => {
const wrapper = mount(
<MockedProvider>
<CreateItem />
</MockedProvider>
);
const component = wrapper.find('CreateItem').instance();
const input = wrapper.find('input[type="file"]');
// internally this does some setState() calls
input.simulate('change', { currentTarget: { files: ['fakedog.jpg'] } });
await wait(0);
expect(component.state.image).toEqual(dogImage);
expect(component.state.largeImage).toEqual(dogImage);
});
it('handles state updating', async () => {
const wrapper = mount(
<MockedProvider>
<CreateItem />
</MockedProvider>
);
wrapper.find('#title').simulate('change', { target: { value: 'Testing', name: 'title' } });
wrapper.find('#price').simulate('change', {
target: {
value: 50000,
name: 'price',
type: 'number',
},
});
wrapper.find('#description').simulate('change', {
target: {
value: 'This is a really nice item',
name: 'description',
},
});
const component = wrapper.find('CreateItem').instance();
expect(component.state).toMatchObject({
title: 'Testing',
description: 'This is a really nice item',
image: '',
largeImage: '',
price: 50000,
});
});
it('creates an item when form is submitted', async () => {
const item = fakeItem();
const mocks = [
{
request: {
query: CREATE_ITEM_MUTATION,
variables: {
title: item.title,
description: item.description,
image: '',
largeImage: '',
price: item.price,
},
},
result: {
data: {
createItem: {
...fakeItem(),
__typeName: 'Item',
},
},
},
},
];
const wrapper = mount(
<MockedProvider mocks={mocks}>
<CreateItem />
</MockedProvider>
);
wrapper.find('#title').simulate('change', { target: { value: item.title, name: 'title' } });
wrapper.find('#price').simulate('change', {
target: {
value: item.price,
name: 'price',
type: 'number',
},
});
wrapper.find('#description').simulate('change', {
target: {
value: item.description,
name: 'description',
},
});
Router.router = { push: jest.fn() };
// it submits and matches the mocks
wrapper.find('form').simulate('submit');
// it routes to the item page
await wait(50);
expect(Router.router.push).toHaveBeenCalled();
expect(Router.router.push).toHaveBeenCalledWith({ pathname: '/item', query: { id: '123' } });
});
});
|
