Skip to content

Commit bad842e

Browse files
CavanWaggCavanWagg
committed
Testing Pagination
1 parent cac149a commit bad842e

7 files changed

Lines changed: 221 additions & 100 deletions

File tree

‎frontend/__tests__/Nav.test.js‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { mount } from 'enzyme';
22
import wait from 'waait';
3+
import toJSON from 'enzyme-to-json';
34
import Nav from '../components/Nav';
4-
import { CURRENT_USER_QUERY } from '../components/User'
5+
import { CURRENT_USER_QUERY } from '../components/User';
56
import { MockedProvider } from 'react-apollo/test-utils';
67
import { fakeUser, fakeCartItem } from '../lib/testUtils';
7-
import toJSON from 'enzyme-to-json';
88

99
const notSignedInMocks = [
1010
{
@@ -19,14 +19,15 @@ const signedInMocks = [
1919
result: { data: { me: fakeUser() } },
2020
},
2121
];
22+
2223
const signedInMocksWithCartItems = [
2324
{
2425
request: { query: CURRENT_USER_QUERY },
2526
result: {
2627
data: {
2728
me: {
2829
...fakeUser(),
29-
cart: [fakeCartItem(), fakeCartItem(), fakeCartItem()]
30+
cart: [fakeCartItem(), fakeCartItem(), fakeCartItem()],
3031
},
3132
},
3233
},
@@ -42,26 +43,23 @@ describe('<Nav/>', () => {
4243
);
4344
await wait();
4445
wrapper.update();
45-
46-
const nav = wrapper.find('[data-test="nav"]');
47-
48-
expect(toJSON(nav)).toMatchSnapshot()
46+
// console.log(wrapper.debug());
47+
const nav = wrapper.find('ul[data-test="nav"]');
48+
expect(toJSON(nav)).toMatchSnapshot();
4949
});
5050

5151
it('renders full nav when signed in', async () => {
5252
const wrapper = mount(
53-
<MockedProvider mocks={signedInMocksWithCartItems}>
53+
<MockedProvider mocks={signedInMocks}>
5454
<Nav />
5555
</MockedProvider>
56-
)
56+
);
5757
await wait();
5858
wrapper.update();
59-
console.log(wrapper.debug());
6059
const nav = wrapper.find('ul[data-test="nav"]');
6160
expect(nav.children().length).toBe(6);
6261
expect(nav.text()).toContain('Sign Out');
63-
// expect(toJSON(nav)).toMatchSnapshot()
64-
})
62+
});
6563

6664
it('renders the amount of items in the cart', async () => {
6765
const wrapper = mount(
@@ -74,5 +72,5 @@ describe('<Nav/>', () => {
7472
const nav = wrapper.find('[data-test="nav"]');
7573
const count = nav.find('div.count');
7674
expect(toJSON(count)).toMatchSnapshot();
77-
})
75+
});
7876
});

‎frontend/__tests__/Pagination.test.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { mount } from 'enzyme';
2+
import wait from 'waait';
3+
import toJSON from 'enzyme-to-json';
4+
import Router from 'next/router';
5+
import Pagination, { PAGINATION_QUERY } from '../components/Pagination';
6+
import { MockedProvider } from 'react-apollo/test-utils';
7+
8+
Router.router = {
9+
push() {},
10+
prefetch() {},
11+
};
12+
13+
function makeMocksFor(length) {
14+
return [
15+
{
16+
request: { query: PAGINATION_QUERY },
17+
result: {
18+
data: {
19+
itemsConnection: {
20+
__typename: 'aggregate',
21+
aggregate: {
22+
count: length,
23+
__typename: 'count',
24+
},
25+
},
26+
},
27+
},
28+
},
29+
];
30+
}
31+
32+
describe('<Pagination/>', () => {
33+
it('displays a loading message', () => {
34+
const wrapper = mount(
35+
<MockedProvider mocks={makeMocksFor(1)}>
36+
<Pagination page={1} />
37+
</MockedProvider>
38+
);
39+
const pagination = wrapper.find('[data-test="pagination"]');
40+
expect(wrapper.text()).toContain('Loading...');
41+
});
42+
43+
it('renders pagination for 18 items', async () => {
44+
const wrapper = mount(
45+
<MockedProvider mocks={makeMocksFor(18)}>
46+
<Pagination page={1} />
47+
</MockedProvider>
48+
);
49+
await wait();
50+
wrapper.update();
51+
expect(wrapper.find('.totalPages').text()).toEqual('5');
52+
const pagination = wrapper.find('div[data-test="pagination"]');
53+
expect(toJSON(pagination)).toMatchSnapshot();
54+
});
55+
56+
it('disables prev button on first page', async () => {
57+
const wrapper = mount(
58+
<MockedProvider mocks={makeMocksFor(18)}>
59+
<Pagination page={1} />
60+
</MockedProvider>
61+
);
62+
await wait();
63+
wrapper.update();
64+
expect(wrapper.find('a.prev').prop('aria-disabled')).toEqual(true);
65+
expect(wrapper.find('a.next').prop('aria-disabled')).toEqual(false);
66+
});
67+
it('disables next button on last page', async () => {
68+
const wrapper = mount(
69+
<MockedProvider mocks={makeMocksFor(18)}>
70+
<Pagination page={5} />
71+
</MockedProvider>
72+
);
73+
await wait();
74+
wrapper.update();
75+
expect(wrapper.find('a.prev').prop('aria-disabled')).toEqual(false);
76+
expect(wrapper.find('a.next').prop('aria-disabled')).toEqual(true);
77+
});
78+
it('enables all buttons on a middle page', async () => {
79+
const wrapper = mount(
80+
<MockedProvider mocks={makeMocksFor(18)}>
81+
<Pagination page={3} />
82+
</MockedProvider>
83+
);
84+
await wait();
85+
wrapper.update();
86+
expect(wrapper.find('a.prev').prop('aria-disabled')).toEqual(false);
87+
expect(wrapper.find('a.next').prop('aria-disabled')).toEqual(false);
88+
});
89+
});

‎frontend/__tests__/PleaseSignIn.test.js‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { mount } from 'enzyme';
22
import wait from 'waait';
33
import PleaseSignIn from '../components/PleaseSignIn';
4-
import { CURRENT_USER_QUERY } from '../components/User'
4+
import { CURRENT_USER_QUERY } from '../components/User';
55
import { MockedProvider } from 'react-apollo/test-utils';
66
import { fakeUser } from '../lib/testUtils';
77

@@ -20,7 +20,7 @@ const signedInMocks = [
2020
];
2121

2222
describe('<PleaseSignIn/>', () => {
23-
it('render the sign in dialog to logged out users', async () => {
23+
it('renders the sign in dialog to logged out users', async () => {
2424
const wrapper = mount(
2525
<MockedProvider mocks={notSignedInMocks}>
2626
<PleaseSignIn />
@@ -31,7 +31,8 @@ describe('<PleaseSignIn/>', () => {
3131
expect(wrapper.text()).toContain('Please Sign In before Continuing');
3232
const SignIn = wrapper.find('Signin');
3333
expect(SignIn.exists()).toBe(true);
34-
})
34+
});
35+
3536
it('renders the child component when the user is signed in', async () => {
3637
const Hey = () => <p>Hey!</p>;
3738
const wrapper = mount(
@@ -41,16 +42,10 @@ describe('<PleaseSignIn/>', () => {
4142
</PleaseSignIn>
4243
</MockedProvider>
4344
);
44-
// await, will put code at the end of the JS event callstack
45+
4546
await wait();
4647
wrapper.update();
47-
console.log(wrapper.debug());
48-
expect(wrapper.find('Hey').exists()).toBe(true);
48+
// expect(wrapper.find('Hey').exists()).toBe(true);
4949
expect(wrapper.contains(<Hey />)).toBe(true);
50-
5150
});
52-
53-
54-
})
55-
56-
51+
});

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

Lines changed: 20 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,31 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`<Nav/> renders a minimal nav when signed out 1`] = `
4-
Array [
5-
<NavStyles
6-
data-test="nav"
7-
>
8-
<ul
9-
className="NavStyles-sc-11c0d2g-0 cEOZYi"
10-
data-test="nav"
11-
>
12-
<Link
13-
href="/items"
14-
>
15-
<a
16-
href="/items"
17-
onClick={[Function]}
18-
>
19-
Shop
20-
</a>
21-
</Link>
22-
<Link
23-
href="/signup"
24-
>
25-
<a
26-
href="/signup"
27-
onClick={[Function]}
28-
>
29-
Sign In
30-
</a>
31-
</Link>
32-
</ul>
33-
</NavStyles>,
34-
<ul
35-
className="NavStyles-sc-11c0d2g-0 cEOZYi"
36-
data-test="nav"
4+
<ul
5+
className="NavStyles-sc-11c0d2g-0 cEOZYi"
6+
data-test="nav"
7+
>
8+
<Link
9+
href="/items"
3710
>
38-
<Link
11+
<a
3912
href="/items"
13+
onClick={[Function]}
4014
>
41-
<a
42-
href="/items"
43-
onClick={[Function]}
44-
>
45-
Shop
46-
</a>
47-
</Link>
48-
<Link
15+
Shop
16+
</a>
17+
</Link>
18+
<Link
19+
href="/signup"
20+
>
21+
<a
4922
href="/signup"
23+
onClick={[Function]}
5024
>
51-
<a
52-
href="/signup"
53-
onClick={[Function]}
54-
>
55-
Sign In
56-
</a>
57-
</Link>
58-
</ul>,
59-
]
25+
Sign In
26+
</a>
27+
</Link>
28+
</ul>
6029
`;
6130

6231
exports[`<Nav/> renders the amount of items in the cart 1`] = `

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<Pagination/> renders pagination for 18 items 1`] = `
4+
<div
5+
className="PaginationStyles-aduuar-0 ewJsCc"
6+
data-test="pagination"
7+
>
8+
<SideEffect(Head)>
9+
<Head />
10+
</SideEffect(Head)>
11+
<Link
12+
href={
13+
Object {
14+
"pathname": "items",
15+
"query": Object {
16+
"page": 0,
17+
},
18+
}
19+
}
20+
prefetch={true}
21+
>
22+
<a
23+
aria-disabled={true}
24+
className="prev"
25+
href="items?page=0"
26+
onClick={[Function]}
27+
>
28+
← Prev
29+
</a>
30+
</Link>
31+
<p>
32+
Page
33+
1
34+
of
35+
<span
36+
className="totalPages"
37+
>
38+
5
39+
</span>
40+
!
41+
</p>
42+
<p>
43+
18
44+
Items Total
45+
</p>
46+
<Link
47+
href={
48+
Object {
49+
"pathname": "items",
50+
"query": Object {
51+
"page": 2,
52+
},
53+
}
54+
}
55+
prefetch={true}
56+
>
57+
<a
58+
aria-disabled={false}
59+
className="next"
60+
href="items?page=2"
61+
onClick={[Function]}
62+
>
63+
Next →
64+
</a>
65+
</Link>
66+
</div>
67+
`;

0 commit comments

Comments
 (0)