summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--frontend/__tests__/Cart.test.js25
-rw-r--r--frontend/__tests__/CreateItem.test.js2
-rw-r--r--frontend/__tests__/Nav.test.js14
-rw-r--r--frontend/__tests__/Order.test.js2
-rw-r--r--frontend/__tests__/Pagination.test.js112
-rw-r--r--frontend/__tests__/ResetRequest.test.js1
-rw-r--r--frontend/__tests__/Signup.test.js2
-rw-r--r--frontend/__tests__/SingleItem.test.js1
-rw-r--r--frontend/__tests__/__snapshots__/Cart.test.js.snap9
-rw-r--r--frontend/__tests__/__snapshots__/Pagination.test.js.snap21
-rw-r--r--frontend/__tests__/__snapshots__/ResetRequest.test.js.snap26
-rw-r--r--frontend/components/Cart.js7
-rw-r--r--frontend/components/CreateItem.js4
-rw-r--r--frontend/components/Pagination.js8
-rw-r--r--frontend/components/ResetRequest.js2
-rw-r--r--frontend/queries/queries.js4
16 files changed, 126 insertions, 114 deletions
diff --git a/frontend/__tests__/Cart.test.js b/frontend/__tests__/Cart.test.js
index a215869..f782708 100644
--- a/frontend/__tests__/Cart.test.js
+++ b/frontend/__tests__/Cart.test.js
@@ -5,8 +5,8 @@ import mountOptions from '../lib/testUtils';
import wait from 'waait';
import Cart from '../components/Cart';
import { MockedProvider } from 'react-apollo/test-utils';
-import { fakeCart, fakeUser } from '../lib/testUtils';
-import { CURRENT_USER_QUERY } from '../queries/queries';
+import { fakeCartItem, fakeUser } from '../lib/testUtils';
+import { CURRENT_USER_QUERY, LOCAL_STATE_QUERY } from '../queries/queries';
const mocks = [
{
@@ -15,26 +15,31 @@ const mocks = [
data: {
me: {
...fakeUser(),
- cart: fakeCart(),
+ cart: [fakeCartItem()],
},
},
},
},
+ {
+ request: { query: LOCAL_STATE_QUERY },
+ result: {
+ data: {
+ cartOpen: true,
+ },
+ },
+ },
];
describe('<Cart/>', () => {
- // TODO fix this one
- expect('wes').toBe('fixed');
it('renders', async () => {
const wrapper = mount(
<MockedProvider mocks={mocks}>
<Cart />
</MockedProvider>
);
- console.log(wrapper.debug());
- // await wait();
- // wrapper.update();
- // expect(toJSON(wrapper.find('header'))).toMatchSnapshot();
- // expect(wrapper.find('CartItem')).toHaveLength(2);
+ await wait();
+ wrapper.update();
+ expect(toJSON(wrapper.find('header'))).toMatchSnapshot();
+ expect(wrapper.find('CartItem')).toHaveLength(1);
});
});
diff --git a/frontend/__tests__/CreateItem.test.js b/frontend/__tests__/CreateItem.test.js
index 035f172..37e5121 100644
--- a/frontend/__tests__/CreateItem.test.js
+++ b/frontend/__tests__/CreateItem.test.js
@@ -126,7 +126,7 @@ describe('<Createitem/>', () => {
// it submits and matches the mocks
wrapper.find('form').simulate('submit');
// it routes to the item page
- await wait();
+ await wait(50);
expect(Router.router.push).toHaveBeenCalled();
expect(Router.router.push).toHaveBeenCalledWith({ pathname: '/item', query: { id: '123' } });
});
diff --git a/frontend/__tests__/Nav.test.js b/frontend/__tests__/Nav.test.js
index 65f5eac..ab8a139 100644
--- a/frontend/__tests__/Nav.test.js
+++ b/frontend/__tests__/Nav.test.js
@@ -1,20 +1,16 @@
import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { mount } from 'enzyme';
import toJSON from 'enzyme-to-json';
+import wait from 'waait';
+import Router from 'next/router';
import Nav from '../components/Nav';
import { MockedProvider } from 'react-apollo/test-utils';
-import { fakeUser, fakeOrder } from './testUtils';
+import { fakeUser } from '../lib/testUtils';
import { CURRENT_USER_QUERY } from '../queries/queries';
-import wait from 'waait';
-// Mock the router
-import Router from 'next/router';
+// Mock the router
Router.router = { push() {} };
-const currentUserLoggedOut = {
- refetch() {},
-};
-
const loggedOutMocks = [
{
request: { query: CURRENT_USER_QUERY },
diff --git a/frontend/__tests__/Order.test.js b/frontend/__tests__/Order.test.js
index 14522f4..c74e384 100644
--- a/frontend/__tests__/Order.test.js
+++ b/frontend/__tests__/Order.test.js
@@ -34,7 +34,7 @@ describe('<Order/>', () => {
<Order id="123" />
</MockedProvider>
);
- await wait(10);
+ await wait(50);
wrapper.update();
const order = wrapper.find('div[data-test="order"]');
expect(toJSON(order)).toMatchSnapshot();
diff --git a/frontend/__tests__/Pagination.test.js b/frontend/__tests__/Pagination.test.js
index 4aa590e..6be60c1 100644
--- a/frontend/__tests__/Pagination.test.js
+++ b/frontend/__tests__/Pagination.test.js
@@ -3,61 +3,95 @@ import { shallow, mount } from 'enzyme';
import toJSON from 'enzyme-to-json';
import Pagination from '../components/Pagination';
import { MockedProvider } from 'react-apollo/test-utils';
+import wait from 'waait';
import { fakeItem } from '../lib/testUtils';
import { ALL_ITEMS_QUERY } from '../queries/queries';
-const data = {
- itemsConnection: { aggregate: { count: 18 } },
- items: [fakeItem()],
-};
+import Router from 'next/router';
-describe('<Pagination/>', () => {
- fit('displays loading message', () => {
- const mocks = [
- {
- request: { query: ALL_ITEMS_QUERY, variables: { skip: 0 } },
- delay: 50,
- result: { data },
+Router.router = { push() {} };
+
+function makeMocksFor(length) {
+ return [
+ {
+ request: { query: ALL_ITEMS_QUERY, variables: { skip: 0, first: 4 } },
+ result: {
+ data: {
+ itemsConnection: {
+ // TODO what are these typenames ????
+ __typename: 'aggregate',
+ aggregate: {
+ count: length,
+ __typename: 'count',
+ },
+ },
+ // items: [fakeItem()],
+ items: Array.from({ length }, (_, i) => fakeItem({ id: `item${i}` })),
+ },
},
- ];
+ },
+ ];
+}
+describe('<Pagination/>', () => {
+ it('displays loading message', async () => {
const wrapper = mount(
- <MockedProvider mocks={mocks}>
+ <MockedProvider mocks={makeMocksFor(1)}>
<Pagination page={1} />
</MockedProvider>
);
- console.log(wrapper.debug());
- // expect(toJSON(wrapper)).toMatchSnapshot();
+ await wait();
+ wrapper.update();
+ expect(toJSON(wrapper.find('div[data-test="pagination"]'))).toMatchSnapshot();
});
- it('renders pagination for 18 items', () => {
- const wrapper = shallow(<Pagination loading={false} page={1} itemsQuery={fakeQuery} />);
- expect(toJSON(wrapper)).toMatchSnapshot();
- expect(wrapper.find('.totalPages').text()).toEqual('2');
+ it('renders pagination for 18 items', async () => {
+ const wrapper = mount(
+ <MockedProvider mocks={makeMocksFor(18)}>
+ <Pagination page={1} />
+ </MockedProvider>
+ );
+ await wait();
+ wrapper.update();
+ expect(wrapper.find('.totalPages').text()).toEqual('5');
});
- it('renders pagination for 28 items', () => {
- const fakeQuery2 = {
- itemsConnection: { aggregate: { count: 28 } },
- };
- const wrapper = shallow(<Pagination loading={false} page={1} itemsQuery={fakeQuery2} />);
- expect(wrapper.find('.totalPages').text()).toEqual('4');
+ it('disables prev button on first page', async () => {
+ const wrapper = mount(
+ <MockedProvider mocks={makeMocksFor(18)}>
+ <Pagination page={1} />
+ </MockedProvider>
+ );
+ await wait();
+ wrapper.update();
+ // first page
+ expect(wrapper.find('a.prev').prop('aria-disabled')).toEqual(true);
+ expect(wrapper.find('a.next').prop('aria-disabled')).toEqual(false);
});
- it('disables and enables next/prev buttons', () => {
- const fakeQuery3 = {
- itemsConnection: { aggregate: { count: 100 } },
- };
- const wrapper = shallow(<Pagination loading={false} page={1} itemsQuery={fakeQuery} />);
+ it('disables next button on last page', async () => {
+ const wrapper = mount(
+ <MockedProvider mocks={makeMocksFor(18)}>
+ <Pagination page={5} />
+ </MockedProvider>
+ );
+ await wait();
+ wrapper.update();
+ // first page
+ expect(wrapper.find('a.prev').prop('aria-disabled')).toEqual(false);
+ expect(wrapper.find('a.next').prop('aria-disabled')).toEqual(true);
+ });
- expect(wrapper.find('a.prev').props()['aria-disabled']).toEqual(true);
- expect(wrapper.find('a.next').props()['aria-disabled']).toEqual(false);
- wrapper.setProps({ page: 2 });
- expect(wrapper.find('a.prev').props()['aria-disabled']).toEqual(false);
- expect(wrapper.find('a.next').props()['aria-disabled']).toEqual(true);
- // when in the middle, both should work
- wrapper.setProps({ itemsQuery: fakeQuery3, page: 3 });
- expect(wrapper.find('a.prev').props()['aria-disabled']).toEqual(false);
- expect(wrapper.find('a.next').props()['aria-disabled']).toEqual(false);
+ it('enables all buttons on a middle page', async () => {
+ const wrapper = mount(
+ <MockedProvider mocks={makeMocksFor(18)}>
+ <Pagination page={2} />
+ </MockedProvider>
+ );
+ await wait();
+ wrapper.update();
+ // first page
+ expect(wrapper.find('a.prev').prop('aria-disabled')).toEqual(false);
+ expect(wrapper.find('a.next').prop('aria-disabled')).toEqual(false);
});
});
diff --git a/frontend/__tests__/ResetRequest.test.js b/frontend/__tests__/ResetRequest.test.js
index c7d8012..4f21911 100644
--- a/frontend/__tests__/ResetRequest.test.js
+++ b/frontend/__tests__/ResetRequest.test.js
@@ -81,6 +81,7 @@ describe('<ResetRequest/>', () => {
wrapper.find('form').simulate('submit');
await wait();
} catch (e) {
+ console.log('CAUGHT');
console.log(e);
}
// expect(async () => {
diff --git a/frontend/__tests__/Signup.test.js b/frontend/__tests__/Signup.test.js
index b6994a6..8f475f7 100644
--- a/frontend/__tests__/Signup.test.js
+++ b/frontend/__tests__/Signup.test.js
@@ -87,7 +87,7 @@ describe('<Signup/>', () => {
wrapper.update();
wrapper.find('form').simulate('submit');
- await wait();
+ await wait(5);
expect(localStorage.getItem('token')).toBe('tok123');
});
});
diff --git a/frontend/__tests__/SingleItem.test.js b/frontend/__tests__/SingleItem.test.js
index 3494f44..f362e58 100644
--- a/frontend/__tests__/SingleItem.test.js
+++ b/frontend/__tests__/SingleItem.test.js
@@ -59,7 +59,6 @@ describe('<SingleItem/>', () => {
wrapper.update();
const Item = wrapper.find('[data-test="graphql-error"]');
- console.log(Item.debug());
expect(toJSON(Item)).toMatchSnapshot();
});
});
diff --git a/frontend/__tests__/__snapshots__/Cart.test.js.snap b/frontend/__tests__/__snapshots__/Cart.test.js.snap
index 426bef2..28011dc 100644
--- a/frontend/__tests__/__snapshots__/Cart.test.js.snap
+++ b/frontend/__tests__/__snapshots__/Cart.test.js.snap
@@ -7,7 +7,7 @@ exports[`<Cart/> renders 1`] = `
title="close"
>
<button
- className="sc-EHOje jytiuo"
+ className="sc-bZQynM julgib"
onClick={[Function]}
title="close"
>
@@ -16,17 +16,16 @@ exports[`<Cart/> renders 1`] = `
</styled.button>
<styled.h3>
<h3
- className="sc-ifAKCX imryuh"
+ className="sc-EHOje ixXoOG"
>
- Miss Tillman Mitchell
+ Miss Coleman Berge
's Cart.
</h3>
</styled.h3>
<p>
You have
- 2
+ 1
item
- s
in your cart.
</p>
</header>
diff --git a/frontend/__tests__/__snapshots__/Pagination.test.js.snap b/frontend/__tests__/__snapshots__/Pagination.test.js.snap
index 34fc655..2ecd98a 100644
--- a/frontend/__tests__/__snapshots__/Pagination.test.js.snap
+++ b/frontend/__tests__/__snapshots__/Pagination.test.js.snap
@@ -1,7 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`<Pagination/> renders pagination for 18 items 1`] = `
-<styled.div>
+exports[`<Pagination/> displays loading message 1`] = `
+<div
+ className="sc-bdVaJa ijYKGd"
+ data-test="pagination"
+>
<Link
href={
Object {
@@ -11,11 +14,12 @@ exports[`<Pagination/> renders pagination for 18 items 1`] = `
},
}
}
- prefetch={true}
>
<a
aria-disabled={true}
className="prev"
+ href="items?page=0"
+ onClick={[Function]}
>
←Prev
</a>
@@ -30,12 +34,12 @@ exports[`<Pagination/> renders pagination for 18 items 1`] = `
<strong
className="totalPages"
>
- 2
+ 1
</strong>
</p>
<p>
<strong>
- 18
+ 1
</strong>
Items Total
</p>
@@ -48,14 +52,15 @@ exports[`<Pagination/> renders pagination for 18 items 1`] = `
},
}
}
- prefetch={true}
>
<a
- aria-disabled={false}
+ aria-disabled={true}
className="next"
+ href="items?page=2"
+ onClick={[Function]}
>
Next →
</a>
</Link>
-</styled.div>
+</div>
`;
diff --git a/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap b/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap
index 6afa68c..f93486b 100644
--- a/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap
+++ b/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap
@@ -31,29 +31,3 @@ exports[`<ResetRequest/> renders and matches snapshot 1`] = `
</fieldset>
</form>
`;
-
-exports[`<ResetRequest/> renders errors 1`] = `
-<DisplayError
- error={
- Object {
- "message": "Shit!",
- }
- }
->
- <styled.div>
- <div
- className="sc-bwzfXH flKeYn"
- >
- <p>
- <strong>
- Shoot!
- </strong>
- Shit!
- <button>
- Try Again
- </button>
- </p>
- </div>
- </styled.div>
-</DisplayError>
-`;
diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js
index 26f1015..8d57c33 100644
--- a/frontend/components/Cart.js
+++ b/frontend/components/Cart.js
@@ -6,6 +6,7 @@ import formatMoney from '../lib/formatMoney';
import CartItem from './CartItem';
import { CURRENT_USER_QUERY, LOCAL_STATE_QUERY, TOGGLE_CART_MUTATION } from '../queries/queries';
import calcTotalPrice from '../lib/calcTotalPrice';
+import Error from './ErrorMessage';
const CartStyles = styled.div`
padding: 20px;
@@ -78,9 +79,11 @@ const Cart = props => (
{toggle => (
<Query query={LOCAL_STATE_QUERY}>
{({ data }) => (
- <Query query={CURRENT_USER_QUERY}>
+ <Query query={CURRENT_USER_QUERY} data-test="cart">
{({ data: { me }, error, loading }) => {
- if (loading || error || !me) return null;
+ if (loading) return <p>Loading...</p>;
+ if (error) return <Error error={error} />;
+ if (!me) return <p>Please Sign In!</p>;
return (
<CartStyles open={data.cartOpen}>
<header>
diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js
index 3dd929f..2aabb5b 100644
--- a/frontend/components/CreateItem.js
+++ b/frontend/components/CreateItem.js
@@ -48,8 +48,8 @@ class CreateItem extends Component {
<Mutation
mutation={CREATE_ITEM_MUTATION}
variables={this.state}
- // TODO - update all items
- // refetchQueries={[{ query: ALL_ITEMS_QUERY }]}
+ // TODO - update all items
+ // refetchQueries={[{ query: ALL_ITEMS_QUERY }]}
>
{(createItem, { loading, error }) => (
<Form
diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js
index 39de901..1432746 100644
--- a/frontend/components/Pagination.js
+++ b/frontend/components/Pagination.js
@@ -33,15 +33,14 @@ const PaginationStyles = styled.div`
const Pagination = props => (
<Query query={ALL_ITEMS_QUERY}>
{({ data, loading, error }) => {
- console.log(error);
- if (loading) return null;
+ if (loading || error) return null;
const { aggregate } = data.itemsConnection;
const { page } = props;
const pages = Math.ceil(aggregate.count / perPage);
+ // TODO prefetch this
return (
- <PaginationStyles>
+ <PaginationStyles data-test="pagination">
<Link
- prefetch
href={{
pathname: 'items',
query: { page: page - 1 },
@@ -58,7 +57,6 @@ const Pagination = props => (
<strong>{aggregate.count}</strong> Items Total
</p>
<Link
- prefetch
href={{
pathname: 'items',
query: { page: page + 1 },
diff --git a/frontend/components/ResetRequest.js b/frontend/components/ResetRequest.js
index 67ab787..d25e94a 100644
--- a/frontend/components/ResetRequest.js
+++ b/frontend/components/ResetRequest.js
@@ -17,8 +17,6 @@ class ResetRequest extends React.Component {
onSubmit={async e => {
e.preventDefault();
const res = await resetMutation();
- console.log('HEYY');
- console.log(res);
}}
data-test="ResetRequest"
>
diff --git a/frontend/queries/queries.js b/frontend/queries/queries.js
index cbfa065..4fff3ae 100644
--- a/frontend/queries/queries.js
+++ b/frontend/queries/queries.js
@@ -87,12 +87,12 @@ export const ALL_ITEMS_QUERY = gql`
# Import the Fragment
${itemDetails}
query AllItemsQuery($skip: Int = 0, $first: Int = ${perPage}) {
- itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) @connection(key: "itemsConnection") {
+ itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) {
aggregate {
count
}
}
- items(orderBy: createdAt_DESC, first: $first, skip: $skip) @connection(key: "items") {
+ items(orderBy: createdAt_DESC, first: $first, skip: $skip) {
...itemDetails
}
}

Want to contribute? Host your changes somewhere and send me the link: jan (at) sydanviita.fi. Also, check out my website.


forge.jan.systems — powered by cgit