getting there

3 files changed, 159 insertions, 0 deletions

diff --git a/stepped-solutions/60/frontend/__tests__/SingleItem.test.js b/stepped-solutions/60/frontend/__tests__/SingleItem.test.js
new file mode 100755
index 0000000..2963bde
--- /dev/null
+++ b/stepped-solutions/60/frontend/__tests__/SingleItem.test.js
@@ -0,0 +1,57 @@
+import { mount } from 'enzyme';
+import toJSON from 'enzyme-to-json';
+import wait from 'waait';
+import SingleItem, { SINGLE_ITEM_QUERY } from '../components/SingleItem';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { fakeItem } from '../lib/testUtils';
+
+describe('<SingleItem/>', () => {
+  it('renders with proper data', async () => {
+    const mocks = [
+      {
+        // when someone makes a request with this query and variable combo
+        request: { query: SINGLE_ITEM_QUERY, variables: { id: '123' } },
+        // return this fake data (mocked data)
+        result: {
+          data: {
+            item: fakeItem(),
+          },
+        },
+      },
+    ];
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <SingleItem id="123" />
+      </MockedProvider>
+    );
+    expect(wrapper.text()).toContain('Loading...');
+    await wait();
+    wrapper.update();
+    // console.log(wrapper.debug());
+    expect(toJSON(wrapper.find('h2'))).toMatchSnapshot();
+    expect(toJSON(wrapper.find('img'))).toMatchSnapshot();
+    expect(toJSON(wrapper.find('p'))).toMatchSnapshot();
+  });
+
+  it('Errors with a not found item', async () => {
+    const mocks = [
+      {
+        request: { query: SINGLE_ITEM_QUERY, variables: { id: '123' } },
+        result: {
+          errors: [{ message: 'Items Not Found!' }],
+        },
+      },
+    ];
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <SingleItem id="123" />
+      </MockedProvider>
+    );
+    await wait();
+    wrapper.update();
+    console.log(wrapper.debug());
+    const item = wrapper.find('[data-test="graphql-error"]');
+    expect(item.text()).toContain('Items Not Found!');
+    expect(toJSON(item)).toMatchSnapshot();
+  });
+});
diff --git a/stepped-solutions/60/frontend/__tests__/__snapshots__/SingleItem.test.js.snap b/stepped-solutions/60/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
new file mode 100755
index 0000000..2f41d4c
--- /dev/null
+++ b/stepped-solutions/60/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SingleItem/> Errors with a not found item 1`] = `
+<p
+  data-test="graphql-error"
+>
+  <strong>
+    Shoot!
+  </strong>
+  Items Not Found!
+</p>
+`;
+
+exports[`<SingleItem/> renders with proper data 1`] = `
+<h2>
+  Viewing 
+  dogs are best
+</h2>
+`;
+
+exports[`<SingleItem/> renders with proper data 2`] = `
+<img
+  alt="dogs are best"
+  src="dog.jpg"
+/>
+`;
+
+exports[`<SingleItem/> renders with proper data 3`] = `
+<p>
+  dogs
+</p>
+`;
diff --git a/stepped-solutions/60/frontend/components/SingleItem.js b/stepped-solutions/60/frontend/components/SingleItem.js
new file mode 100755
index 0000000..145b5ae
--- /dev/null
+++ b/stepped-solutions/60/frontend/components/SingleItem.js
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import gql from 'graphql-tag';
+import { Query } from 'react-apollo';
+import Error from './ErrorMessage';
+import styled from 'styled-components';
+import Head from 'next/head';
+
+const SingleItemStyles = styled.div`
+  max-width: 1200px;
+  margin: 2rem auto;
+  box-shadow: ${props => props.theme.bs};
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  min-height: 800px;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+  .details {
+    margin: 3rem;
+    font-size: 2rem;
+  }
+`;
+
+const SINGLE_ITEM_QUERY = gql`
+  query SINGLE_ITEM_QUERY($id: ID!) {
+    item(where: { id: $id }) {
+      id
+      title
+      description
+      largeImage
+    }
+  }
+`;
+class SingleItem extends Component {
+  render() {
+    return (
+      <Query
+        query={SINGLE_ITEM_QUERY}
+        variables={{
+          id: this.props.id,
+        }}
+      >
+        {({ error, loading, data }) => {
+          if (error) return <Error error={error} />;
+          if (loading) return <p>Loading...</p>;
+          if (!data.item) return <p>No Item Found for {this.props.id}</p>;
+          const item = data.item;
+          return (
+            <SingleItemStyles>
+              <Head>
+                <title>Sick Fits | {item.title}</title>
+              </Head>
+              <img src={item.largeImage} alt={item.title} />
+              <div className="details">
+                <h2>Viewing {item.title}</h2>
+                <p>{item.description}</p>
+              </div>
+            </SingleItemStyles>
+          );
+        }}
+      </Query>
+    );
+  }
+}
+
+export default SingleItem;
+export { SINGLE_ITEM_QUERY };