getting there

2 files changed, 89 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>
+`;