summaryrefslogtreecommitdiffstats
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/__tests__/AddToCart.test.js8
-rw-r--r--frontend/__tests__/Order.test.js16
-rw-r--r--frontend/__tests__/SingleItem.test.js20
-rw-r--r--frontend/__tests__/__snapshots__/Order.test.js.snap262
-rw-r--r--frontend/__tests__/mockMang.js13
-rw-r--r--frontend/components/AddToCart.js3
-rw-r--r--frontend/components/Nav.js11
-rw-r--r--frontend/components/Order.js4
8 files changed, 303 insertions, 34 deletions
diff --git a/frontend/__tests__/AddToCart.test.js b/frontend/__tests__/AddToCart.test.js
index 2285b3b..f049152 100644
--- a/frontend/__tests__/AddToCart.test.js
+++ b/frontend/__tests__/AddToCart.test.js
@@ -10,13 +10,17 @@ const currentUser = {
describe('<AddtoCart/>', () => {
it('renders and matches snapshot', () => {
- const wrapper = shallow(<AddToCart id="abc123" addToCart={() => {}} currentUser={currentUser} />);
+ const wrapper = shallow(
+ <AddToCart id="abc123" addToCart={() => {}} currentUser={currentUser} />
+ );
expect(toJSON(wrapper)).toMatchSnapshot();
});
it('adds an item to the cart', () => {
const addToCart = jest.fn(() => Promise.resolve());
- const wrapper = shallow(<AddToCart id="abc123" addToCart={addToCart} currentUser={currentUser} />);
+ const wrapper = shallow(
+ <AddToCart id="abc123" addToCart={addToCart} currentUser={currentUser} />
+ );
wrapper.simulate('click');
expect(addToCart).toHaveBeenCalled();
expect(addToCart).toHaveBeenCalledWith({ variables: { id: 'abc123' } });
diff --git a/frontend/__tests__/Order.test.js b/frontend/__tests__/Order.test.js
new file mode 100644
index 0000000..6bcf0b9
--- /dev/null
+++ b/frontend/__tests__/Order.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import wait from 'waait';
+import toJSON from 'enzyme-to-json';
+import Order from '../components/Order';
+import mountOptions from './mockMang';
+
+describe('<Order/>', () => {
+ it('Renders with Proper Data', async () => {
+ const wrapper = mount(<Order id="123" />, mountOptions);
+ await wait();
+ wrapper.update();
+ const order = wrapper.find('[data-test="order"]');
+ expect(toJSON(order)).toMatchSnapshot();
+ });
+});
diff --git a/frontend/__tests__/SingleItem.test.js b/frontend/__tests__/SingleItem.test.js
index 313784e..3fe3943 100644
--- a/frontend/__tests__/SingleItem.test.js
+++ b/frontend/__tests__/SingleItem.test.js
@@ -1,19 +1,13 @@
import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { mount } from 'enzyme';
import wait from 'waait';
import toJSON from 'enzyme-to-json';
import SingleItem from '../components/SingleItem';
-import { ApolloProvider } from 'react-apollo';
-import mockClient from './mockMang';
-import { SINGLE_ITEM_QUERY } from '../queries/queries';
+import mountOptions from './mockMang';
describe('<SingleItem/>', () => {
it('Renders with Proper Data', async () => {
- const wrapper = mount(
- <ApolloProvider client={mockClient.client}>
- <SingleItem id="123" />
- </ApolloProvider>
- );
+ const wrapper = mount(<SingleItem id="123" />, mountOptions);
await wait();
wrapper.update();
@@ -21,11 +15,7 @@ describe('<SingleItem/>', () => {
expect(toJSON(Item)).toMatchSnapshot();
});
- it('Errors with a not found Item', async () => {
- const wrapper = mount(
- <ApolloProvider client={mockClient.client}>
- <SingleItem id="123" />
- </ApolloProvider>
- );
+ xit('Errors with a not found Item', async () => {
+ const wrapper = mount(<SingleItem id="123" />, mountOptions);
});
});
diff --git a/frontend/__tests__/__snapshots__/Order.test.js.snap b/frontend/__tests__/__snapshots__/Order.test.js.snap
new file mode 100644
index 0000000..21b9c35
--- /dev/null
+++ b/frontend/__tests__/__snapshots__/Order.test.js.snap
@@ -0,0 +1,262 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Order/> Renders with Proper Data 1`] = `
+Array [
+ <styled.div
+ data-test="order"
+ >
+ <div
+ className="sc-bwzfXH wJijb"
+ data-test="order"
+ >
+ <SideEffect(Head)>
+ <Head />
+ </SideEffect(Head)>
+ <p>
+ <span>
+ Order Id:
+ </span>
+ <span>
+ 3a430a73-c9e9-4bcc-b46a-41618965ffea
+ </span>
+ </p>
+ <p>
+ <span>
+ Charge
+ </span>
+ <span>
+ Hello World
+ </span>
+ </p>
+ <p>
+ <span>
+ Date
+ </span>
+ <span>
+ May 13, 2014 12:53 PM
+ </span>
+ </p>
+ <p>
+ <span>
+ Order Total
+ </span>
+ <span>
+ $24.04
+ </span>
+ </p>
+ <p>
+ <span>
+ Item Count
+ </span>
+ <span>
+ 2
+ </span>
+ </p>
+ <div
+ className="items"
+ >
+ <div
+ className="order-item"
+ key="f17558f5-7760-4116-acd2-76da805ab010"
+ >
+ <img
+ alt="Ut assumenda sint"
+ src="dog.jpg"
+ />
+ <div
+ className="item-details"
+ >
+ <h2>
+
+ Ut assumenda sint
+
+ </h2>
+ <p>
+ Qty:
+ 8
+ </p>
+ <p>
+ Each:
+ $500
+ </p>
+ <p>
+ Subtotal:
+ $4,000
+ </p>
+ <p>
+ SubTotal:
+ Exercitationem omnis laborum exercitationem est sapiente laudantium. Assumenda quasi adipisci mollitia iste itaque omnis.
+ </p>
+ <p>
+ Exercitationem omnis laborum exercitationem est sapiente laudantium. Assumenda quasi adipisci mollitia iste itaque omnis.
+ </p>
+ </div>
+ </div>
+ <div
+ className="order-item"
+ key="f05cef40-52ca-4dca-b480-7618d01ced82"
+ >
+ <img
+ alt="Similique temporibus"
+ src="dog.jpg"
+ />
+ <div
+ className="item-details"
+ >
+ <h2>
+
+ Similique temporibus
+
+ </h2>
+ <p>
+ Qty:
+ 9
+ </p>
+ <p>
+ Each:
+ $500
+ </p>
+ <p>
+ Subtotal:
+ $4,500
+ </p>
+ <p>
+ SubTotal:
+ Sapiente soluta corporis commodi. Nisi cum ducimus. Doloremque maiores esse atque et.
+ </p>
+ <p>
+ Sapiente soluta corporis commodi. Nisi cum ducimus. Doloremque maiores esse atque et.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </styled.div>,
+ <div
+ className="sc-bwzfXH wJijb"
+ data-test="order"
+ >
+ <SideEffect(Head)>
+ <Head />
+ </SideEffect(Head)>
+ <p>
+ <span>
+ Order Id:
+ </span>
+ <span>
+ 3a430a73-c9e9-4bcc-b46a-41618965ffea
+ </span>
+ </p>
+ <p>
+ <span>
+ Charge
+ </span>
+ <span>
+ Hello World
+ </span>
+ </p>
+ <p>
+ <span>
+ Date
+ </span>
+ <span>
+ May 13, 2014 12:53 PM
+ </span>
+ </p>
+ <p>
+ <span>
+ Order Total
+ </span>
+ <span>
+ $24.04
+ </span>
+ </p>
+ <p>
+ <span>
+ Item Count
+ </span>
+ <span>
+ 2
+ </span>
+ </p>
+ <div
+ className="items"
+ >
+ <div
+ className="order-item"
+ key="f17558f5-7760-4116-acd2-76da805ab010"
+ >
+ <img
+ alt="Ut assumenda sint"
+ src="dog.jpg"
+ />
+ <div
+ className="item-details"
+ >
+ <h2>
+
+ Ut assumenda sint
+
+ </h2>
+ <p>
+ Qty:
+ 8
+ </p>
+ <p>
+ Each:
+ $500
+ </p>
+ <p>
+ Subtotal:
+ $4,000
+ </p>
+ <p>
+ SubTotal:
+ Exercitationem omnis laborum exercitationem est sapiente laudantium. Assumenda quasi adipisci mollitia iste itaque omnis.
+ </p>
+ <p>
+ Exercitationem omnis laborum exercitationem est sapiente laudantium. Assumenda quasi adipisci mollitia iste itaque omnis.
+ </p>
+ </div>
+ </div>
+ <div
+ className="order-item"
+ key="f05cef40-52ca-4dca-b480-7618d01ced82"
+ >
+ <img
+ alt="Similique temporibus"
+ src="dog.jpg"
+ />
+ <div
+ className="item-details"
+ >
+ <h2>
+
+ Similique temporibus
+
+ </h2>
+ <p>
+ Qty:
+ 9
+ </p>
+ <p>
+ Each:
+ $500
+ </p>
+ <p>
+ Subtotal:
+ $4,500
+ </p>
+ <p>
+ SubTotal:
+ Sapiente soluta corporis commodi. Nisi cum ducimus. Doloremque maiores esse atque et.
+ </p>
+ <p>
+ Sapiente soluta corporis commodi. Nisi cum ducimus. Doloremque maiores esse atque et.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>,
+]
+`;
diff --git a/frontend/__tests__/mockMang.js b/frontend/__tests__/mockMang.js
index 5a98c6a..7d65cd7 100644
--- a/frontend/__tests__/mockMang.js
+++ b/frontend/__tests__/mockMang.js
@@ -4,7 +4,7 @@ import casual from 'casual';
import PropTypes from 'prop-types';
// seed it so we get consistent results
-casual.seed(123);
+casual.seed(777);
const typeDefs = importSchema('../backend/src/schema.graphql');
@@ -13,10 +13,21 @@ const typeDefs = importSchema('../backend/src/schema.graphql');
const mocks = {
ID: () => casual.uuid,
+ DateTime: () => new Date(1400000000000),
+ Int: () => casual.integer(400, 5500),
+ OrderItem: () => ({
+ quantity: casual.integer(1, 10),
+ image: 'dog.jpg',
+ title: casual.title,
+ description: casual.description,
+ price: () => 50000,
+ }),
Item: () => ({
title: casual.title,
description: casual.description,
price: () => 50000,
+ image: 'dog.jpg',
+ largeImage: 'large-dog.jpg',
}),
User: () => ({
email: casual.email,
diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
index 01f9dc1..eead8f0 100644
--- a/frontend/components/AddToCart.js
+++ b/frontend/components/AddToCart.js
@@ -9,11 +9,8 @@ class AddToCart extends Component {
};
update = (proxy, payload) => {
- console.log('Updating!');
- console.log(payload);
const newCartItem = payload.data.addToCart;
const data = proxy.readQuery({ query: CURRENT_USER_QUERY });
- console.log(newCartItem);
const existingIndex = data.me.cart.findIndex(cartItem => cartItem.id === newCartItem.id);
if (existingIndex >= 0) {
diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js
index a0bed90..acfdfd1 100644
--- a/frontend/components/Nav.js
+++ b/frontend/components/Nav.js
@@ -99,17 +99,6 @@ class Nav extends React.Component {
<a>My Account</a>
</Link>
<Signout />
- {/* <UIContext>
- {context => (
- <button onClick={context.toggle}>
- My Cart
- <CartCount
- className="cart-count"
- count={me.cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0)}
- />
- </button>
- )}
- </UIContext> */}
<ApolloConsumer>
{cache => (
<button onClick={() => cache.writeData({ data: { cartOpen: true } })}>
diff --git a/frontend/components/Order.js b/frontend/components/Order.js
index f6743fa..0a71b18 100644
--- a/frontend/components/Order.js
+++ b/frontend/components/Order.js
@@ -4,7 +4,7 @@ import { format } from 'date-fns';
import Head from 'next/head';
import PropTypes from 'prop-types';
import styled from 'styled-components';
-import { SINGLE_ORDER_QUERY } from '../queries';
+import { SINGLE_ORDER_QUERY } from '../queries/queries';
import formatMoney from '../lib/formatMoney';
import Dump from './Dump';
import Error from './ErrorMessage';
@@ -62,7 +62,7 @@ class Order extends Component {
if (error) return <Error error={error} refetch={refetch} />;
const order = data.order;
return (
- <OrderStyles>
+ <OrderStyles data-test="order">
<Head>
<title>Sick Fits - Order {order.id}</title>
</Head>

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