summaryrefslogtreecommitdiffstats
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/README.md2
-rw-r--r--frontend/__tests__/EditUser.test.js7
-rw-r--r--frontend/__tests__/SingleItem.test.js54
-rw-r--r--frontend/__tests__/__snapshots__/SingleItem.test.js.snap44
-rw-r--r--frontend/__tests__/mockMang.js13
-rw-r--r--frontend/components/ErrorMessage.js4
-rw-r--r--frontend/components/SingleItem.js10
-rw-r--r--frontend/queries/queries.js8
8 files changed, 107 insertions, 35 deletions
diff --git a/frontend/README.md b/frontend/README.md
index 0791dfe..6c2bd84 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -32,8 +32,6 @@ Yeti
Keep your brie and bevies chilly. Heavy-duty insulation ensures cold temperatures persist. A self-stopping hinge and Yeti-tough details are durable. Non-slip rubber feet keep your drinks and snacks orderly through whitewater or rough approaches to the picnic site.
-
-
Test Order:
FormatMoney
diff --git a/frontend/__tests__/EditUser.test.js b/frontend/__tests__/EditUser.test.js
index f4aabfc..c68267f 100644
--- a/frontend/__tests__/EditUser.test.js
+++ b/frontend/__tests__/EditUser.test.js
@@ -9,7 +9,7 @@ const currentUser = {
me: {
name: 'Wes Bos',
},
- refetch() { },
+ refetch() {},
};
describe('<EditUser/>', () => {
@@ -43,17 +43,18 @@ describe('<EditUser/>', () => {
mutation.client.mutate = jest.fn();
const nameInput = wrapper.find('[name="name"]');
nameInput.simulate('change', { target: { name: 'name', value: 'Scott' } });
- wrapper.find('form').simulate('submit', { preventDefault() { } });
+ wrapper.find('form').simulate('submit', { preventDefault() {} });
expect(mutation.client.mutate).toHaveBeenCalledWithVariables({ name: 'Scott' });
});
- it.only('refetches the current user after an update', async () => {
+ it('refetches the current user after an update', async () => {
const { wrapper } = mountWithApollo(<EditUser />);
await wait();
wrapper.update();
const query = wrapper.find('Query').instance();
const mutation = wrapper.find('Mutation').instance();
console.log(mutation.props.mutation);
+ expect('wes').toBe('finished with this one');
// wrapper.find('form').simulate('submit', { preventDefault() {} });
// expect(query.client.reFetchObservableQueries).toHaveBeenCalled();
});
diff --git a/frontend/__tests__/SingleItem.test.js b/frontend/__tests__/SingleItem.test.js
index ade9727..8625e80 100644
--- a/frontend/__tests__/SingleItem.test.js
+++ b/frontend/__tests__/SingleItem.test.js
@@ -3,19 +3,63 @@ import { mount } from 'enzyme';
import wait from 'waait';
import toJSON from 'enzyme-to-json';
import SingleItem from '../components/SingleItem';
-import mountOptions from './mockMang';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { SINGLE_ITEM_QUERY } from '../queries/queries';
+import { fakeItem } from './mockMang';
+
+const data = {
+ items: [fakeItem()],
+};
describe('<SingleItem/>', () => {
it('Renders with Proper Data', async () => {
- const wrapper = mount(<SingleItem id="123" />, mountOptions);
- await wait();
- wrapper.update();
+ const mocks = [
+ {
+ request: { query: SINGLE_ITEM_QUERY, variables: { id: '123' } },
+ delay: 50,
+ result: { data },
+ },
+ ];
+ const wrapper = mount(
+ <MockedProvider mocks={mocks}>
+ <SingleItem id="123" />
+ </MockedProvider>
+ );
+ // Check for loading state
+ expect(wrapper.text()).toContain('Loading...');
+ // wait for response and refresh
+ await wait(55);
+ wrapper.update();
+ // Grab the peice we wnat
const Item = wrapper.find('[data-test="SingleItem"]');
+ // snapshot it!
expect(toJSON(Item)).toMatchSnapshot();
});
it('Errors with a not found Item', async () => {
- expect('wes').toBe('able to replicate an error');
+ const mocks = [
+ {
+ request: { query: SINGLE_ITEM_QUERY, variables: { id: '123' } },
+ delay: 50,
+ // we can return data and an error
+ result: { data, errors: [{ message: 'Item not found!' }] },
+ // or just an error!
+ // error: new Error('offline!'),
+ },
+ ];
+ const wrapper = mount(
+ <MockedProvider mocks={mocks}>
+ <SingleItem id="123" />
+ </MockedProvider>
+ );
+
+ // wait for response
+ await wait(55);
+ wrapper.update();
+
+ const Item = wrapper.find('[data-test="graphql-error"]');
+ console.log(Item.debug());
+ expect(toJSON(Item)).toMatchSnapshot();
});
});
diff --git a/frontend/__tests__/__snapshots__/SingleItem.test.js.snap b/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
index 09eb52b..4d75565 100644
--- a/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
+++ b/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
@@ -1,5 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`<SingleItem/> Errors with a not found Item 1`] = `
+<p
+ data-test="graphql-error"
+>
+ <strong>
+ Shoot!
+ </strong>
+ Item not found!
+ <button>
+ Try Again
+ </button>
+</p>
+`;
+
exports[`<SingleItem/> Renders with Proper Data 1`] = `
Array [
<styled.div
@@ -9,33 +23,32 @@ Array [
className="sc-bwzfXH dFvSZo"
data-test="SingleItem"
>
- <DisplayError />
<img
- alt="Facilis corporis"
- src="large-dog.jpg"
+ alt="dogs are best"
+ src="dog.jpg"
/>
<div
className="details"
>
<h2>
Viewing
- Facilis corporis
+ dogs are best
</h2>
<p>
- Quidem praesentium magnam. Error molestiae laborum est possimus assumenda aut enim iure. Ut explicabo iure vitae occaecati officia iure nisi.
+ dogs
</p>
<Link
href={
Object {
- "pathname": "/admin/update",
+ "pathname": "/update",
"query": Object {
- "id": "5505a740-e67e-4e17-958f-46760116bcd2",
+ "id": "123",
},
}
}
>
<a
- href="/admin/update?id=5505a740-e67e-4e17-958f-46760116bcd2"
+ href="/update?id=123"
onClick={[Function]}
>
Edit ✏️
@@ -48,33 +61,32 @@ Array [
className="sc-bwzfXH dFvSZo"
data-test="SingleItem"
>
- <DisplayError />
<img
- alt="Facilis corporis"
- src="large-dog.jpg"
+ alt="dogs are best"
+ src="dog.jpg"
/>
<div
className="details"
>
<h2>
Viewing
- Facilis corporis
+ dogs are best
</h2>
<p>
- Quidem praesentium magnam. Error molestiae laborum est possimus assumenda aut enim iure. Ut explicabo iure vitae occaecati officia iure nisi.
+ dogs
</p>
<Link
href={
Object {
- "pathname": "/admin/update",
+ "pathname": "/update",
"query": Object {
- "id": "5505a740-e67e-4e17-958f-46760116bcd2",
+ "id": "123",
},
}
}
>
<a
- href="/admin/update?id=5505a740-e67e-4e17-958f-46760116bcd2"
+ href="/update?id=123"
onClick={[Function]}
>
Edit ✏️
diff --git a/frontend/__tests__/mockMang.js b/frontend/__tests__/mockMang.js
index 15fc42c..375973c 100644
--- a/frontend/__tests__/mockMang.js
+++ b/frontend/__tests__/mockMang.js
@@ -37,6 +37,17 @@ const mocks = {
}),
};
+const fakeItem = () => ({
+ __typename: 'Item',
+ id: '123',
+ price: 5000,
+ user: null,
+ image: 'dog-small.jpg',
+ title: 'dogs are best',
+ description: 'dogs',
+ largeImage: 'dog.jpg',
+});
+
const resolvers = {
// Query: {
// cartOpen: () => true,
@@ -70,4 +81,4 @@ const mountWithApollo = Component => {
export default mountOptions;
-export { mocked, mountWithApollo };
+export { mocked, mountWithApollo, fakeItem };
diff --git a/frontend/components/ErrorMessage.js b/frontend/components/ErrorMessage.js
index c73a2b7..5da8d2a 100644
--- a/frontend/components/ErrorMessage.js
+++ b/frontend/components/ErrorMessage.js
@@ -23,7 +23,7 @@ const DisplayError = ({ error, refetch }) => {
if (error.networkError && error.networkError.result && error.networkError.result.errors.length) {
return error.networkError.result.errors.map((error, i) => (
<StyledError key={i}>
- <p>
+ <p data-test="graphql-error">
<strong>Shoot!</strong>
{error.message.replace('GraphQL error: ', '')}
</p>
@@ -32,7 +32,7 @@ const DisplayError = ({ error, refetch }) => {
}
return (
<StyledError>
- <p>
+ <p data-test="graphql-error">
<strong>Shoot!</strong>
{error.message.replace('GraphQL error: ', '')}
<button onClick={refetch}>Try Again</button>
diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js
index a7f9d27..4550b84 100644
--- a/frontend/components/SingleItem.js
+++ b/frontend/components/SingleItem.js
@@ -1,9 +1,9 @@
import { Query } from 'react-apollo';
import PropTypes from 'prop-types';
import { SINGLE_ITEM_QUERY } from '../queries/queries';
-import Dump from './Dump';
import styled from 'styled-components';
import Link from 'next/link';
+import Dump from './Dump';
import Error from './ErrorMessage';
const SingleItemStyles = styled.div`
@@ -22,19 +22,19 @@ const SingleItemStyles = styled.div`
const SingleItem = props => (
<Query query={SINGLE_ITEM_QUERY} variables={{ id: props.id }}>
- {({ data: { items }, loading, error }) => {
+ {({ data, loading, error }) => {
if (loading) return <p>Loading...</p>;
- const [item] = items;
+ if (error) return <Error error={error} />;
+ const [item] = data.items;
return (
<SingleItemStyles data-test="SingleItem">
- <Error error={error} />
<img src={item.largeImage || item.image} alt={item.title} />
<div className="details">
<h2>Viewing {item.title}</h2>
<p>{item.description}</p>
<Link
href={{
- pathname: '/admin/update',
+ pathname: '/update',
query: { id: item.id },
}}
>
diff --git a/frontend/queries/queries.js b/frontend/queries/queries.js
index 22f77fb..b6d8207 100644
--- a/frontend/queries/queries.js
+++ b/frontend/queries/queries.js
@@ -106,7 +106,13 @@ export const SINGLE_ITEM_QUERY = gql`
email
name
}
- ...itemDetails
+ # TODO Swap with fragment once apollo is fixed
+ id
+ title
+ price
+ description
+ image
+ largeImage
}
}
`;

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