From 093c172d16732ba8d01faa313e0af99d26902205 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Fri, 7 Sep 2018 12:15:53 -0400
Subject: getting there

---
 .../59/frontend/__tests__/CartCount.test.js        | 21 ++++++
 .../59/frontend/__tests__/Item.test.js             | 39 +++++++++++
 .../__tests__/__snapshots__/CartCount.test.js.snap | 79 ++++++++++++++++++++++
 .../__tests__/__snapshots__/Item.test.js.snap      | 58 ++++++++++++++++
 4 files changed, 197 insertions(+)
 create mode 100755 stepped-solutions/59/frontend/__tests__/CartCount.test.js
 create mode 100755 stepped-solutions/59/frontend/__tests__/Item.test.js
 create mode 100755 stepped-solutions/59/frontend/__tests__/__snapshots__/CartCount.test.js.snap
 create mode 100755 stepped-solutions/59/frontend/__tests__/__snapshots__/Item.test.js.snap

(limited to 'stepped-solutions/59/frontend/__tests__')

diff --git a/stepped-solutions/59/frontend/__tests__/CartCount.test.js b/stepped-solutions/59/frontend/__tests__/CartCount.test.js
new file mode 100755
index 0000000..8ace3da
--- /dev/null
+++ b/stepped-solutions/59/frontend/__tests__/CartCount.test.js
@@ -0,0 +1,21 @@
+import { shallow, mount } from 'enzyme';
+import toJSON from 'enzyme-to-json';
+import CartCount from '../components/CartCount';
+
+describe('<CartCount/>', () => {
+  it('renders', () => {
+    shallow(<CartCount count={10} />);
+  });
+
+  it('matches the snapshot', () => {
+    const wrapper = shallow(<CartCount count={11} />);
+    expect(toJSON(wrapper)).toMatchSnapshot();
+  });
+
+  it('updates via props', () => {
+    const wrapper = shallow(<CartCount count={50} />);
+    expect(toJSON(wrapper)).toMatchSnapshot();
+    wrapper.setProps({ count: 10 });
+    expect(toJSON(wrapper)).toMatchSnapshot();
+  });
+});
diff --git a/stepped-solutions/59/frontend/__tests__/Item.test.js b/stepped-solutions/59/frontend/__tests__/Item.test.js
new file mode 100755
index 0000000..692b913
--- /dev/null
+++ b/stepped-solutions/59/frontend/__tests__/Item.test.js
@@ -0,0 +1,39 @@
+import ItemComponent from '../components/Item';
+import { shallow, mount } from 'enzyme';
+import toJSON from 'enzyme-to-json';
+
+const fakeItem = {
+  id: 'ABC123',
+  title: 'A Cool Item',
+  price: 4000,
+  description: 'This item is really cool!',
+  image: 'dog.jpg',
+  largeImage: 'largedog.jpg',
+};
+
+describe('<Item/>', () => {
+  it('renders and matches the snapshot', () => {
+    const wrapper = shallow(<ItemComponent item={fakeItem} />);
+    expect(toJSON(wrapper)).toMatchSnapshot();
+  });
+  // it('renders the image properly', () => {
+  //   const wrapper = shallow(<ItemComponent item={fakeItem} />);
+  //   const img = wrapper.find('img');
+  //   expect(img.props().src).toBe(fakeItem.image);
+  //   expect(img.props().alt).toBe(fakeItem.title);
+  // });
+  // it('renders the pricetag and title', () => {
+  //   const wrapper = shallow(<ItemComponent item={fakeItem} />);
+  //   const PriceTag = wrapper.find('PriceTag');
+  //   expect(PriceTag.children().text()).toBe('$50');
+  //   expect(wrapper.find('Title a').text()).toBe(fakeItem.title);
+  // });
+  // it('renders out the buttons properly', () => {
+  //   const wrapper = shallow(<ItemComponent item={fakeItem} />);
+  //   const buttonList = wrapper.find('.buttonList');
+  //   expect(buttonList.children()).toHaveLength(3);
+  //   expect(buttonList.find('Link')).toHaveLength(1);
+  //   expect(buttonList.find('AddToCart').exists()).toBe(true);
+  //   expect(buttonList.find('DeleteItem').exists()).toBe(true);
+  // });
+});
diff --git a/stepped-solutions/59/frontend/__tests__/__snapshots__/CartCount.test.js.snap b/stepped-solutions/59/frontend/__tests__/__snapshots__/CartCount.test.js.snap
new file mode 100755
index 0000000..92ee89a
--- /dev/null
+++ b/stepped-solutions/59/frontend/__tests__/__snapshots__/CartCount.test.js.snap
@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CartCount/> matches the snapshot 1`] = `
+<CartCount__AnimationStyles>
+  <TransitionGroup
+    childFactory={[Function]}
+    component="div"
+  >
+    <CSSTransition
+      className="count"
+      classNames="count"
+      key="11"
+      timeout={
+        Object {
+          "enter": 400,
+          "exit": 400,
+        }
+      }
+      unmountOnExit={true}
+    >
+      <CartCount__Dot>
+        11
+      </CartCount__Dot>
+    </CSSTransition>
+  </TransitionGroup>
+</CartCount__AnimationStyles>
+`;
+
+exports[`<CartCount/> updates via props 1`] = `
+<CartCount__AnimationStyles>
+  <TransitionGroup
+    childFactory={[Function]}
+    component="div"
+  >
+    <CSSTransition
+      className="count"
+      classNames="count"
+      key="50"
+      timeout={
+        Object {
+          "enter": 400,
+          "exit": 400,
+        }
+      }
+      unmountOnExit={true}
+    >
+      <CartCount__Dot>
+        50
+      </CartCount__Dot>
+    </CSSTransition>
+  </TransitionGroup>
+</CartCount__AnimationStyles>
+`;
+
+exports[`<CartCount/> updates via props 2`] = `
+<CartCount__AnimationStyles>
+  <TransitionGroup
+    childFactory={[Function]}
+    component="div"
+  >
+    <CSSTransition
+      className="count"
+      classNames="count"
+      key="10"
+      timeout={
+        Object {
+          "enter": 400,
+          "exit": 400,
+        }
+      }
+      unmountOnExit={true}
+    >
+      <CartCount__Dot>
+        10
+      </CartCount__Dot>
+    </CSSTransition>
+  </TransitionGroup>
+</CartCount__AnimationStyles>
+`;
diff --git a/stepped-solutions/59/frontend/__tests__/__snapshots__/Item.test.js.snap b/stepped-solutions/59/frontend/__tests__/__snapshots__/Item.test.js.snap
new file mode 100755
index 0000000..70e4aa8
--- /dev/null
+++ b/stepped-solutions/59/frontend/__tests__/__snapshots__/Item.test.js.snap
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Item/> renders and matches the snapshot 1`] = `
+<ItemStyles__Item>
+  <img
+    alt="A Cool Item"
+    src="dog.jpg"
+  />
+  <Title>
+    <Link
+      href={
+        Object {
+          "pathname": "/item",
+          "query": Object {
+            "id": "ABC123",
+          },
+        }
+      }
+    >
+      <a>
+        A Cool Item
+      </a>
+    </Link>
+  </Title>
+  <PriceTag>
+    $40
+  </PriceTag>
+  <p>
+    This item is really cool!
+  </p>
+  <div
+    className="buttonList"
+  >
+    <Link
+      href={
+        Object {
+          "pathname": "update",
+          "query": Object {
+            "id": "ABC123",
+          },
+        }
+      }
+    >
+      <a>
+        Edit ✏️
+      </a>
+    </Link>
+    <AddToCart
+      id="ABC123"
+    />
+    <DeleteItem
+      id="ABC123"
+    >
+      Delete This Item
+    </DeleteItem>
+  </div>
+</ItemStyles__Item>
+`;
-- 
cgit v1.3