Recipe.spec solution

src/App.js

@@ -13,6 +13,7 @@ class App extends Component {
           <div className="assignment" style={{ padding: '.5em' }}>
             <h2>Assignment: Implement a basic recipe blog</h2>
             <h4 style={{ color: '#F00' }}>Notice: Focus on TDD, do pair programming (1 writes failing test, 1 implements), styling is not important</h4>
+            <h4>Checkout <a href="http://airbnb.io/enzyme/docs/api/shallow.html" target="_blank">Enzyme</a> project documentation - a react testing library</h4>
             <ol>
               <li>Open <code>"./src/first.spec.js"</code> file and run <code>npm test</code> and look around</li>
               <li>Create <code>"./src/Recipe.spec.js"</code> and try to write a failing assertion about non-yet-existing <code>{'<Recipe />'}</code> component that should render "Yummy!"</li>

src/Recipe.spec.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+const Recipe = ({ title, created, ingredients, instructions }) => {
+  return (
+    <div>
+      <div className="header">
+        <h2>{title}</h2>
+        <span>{created}</span>
+      </div>
+      <div>
+        <div className="left-column">
+          <ul>{ingredients.map((item, idx) => <li key={idx}>{item}</li>)}</ul>
+        </div>
+        <div className="right-column">
+          <ul>{instructions.map((item, idx) => <li key={idx}>{item}</li>)}</ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+describe('Recipe', () => {
+  const recipe = {
+    title: 'Tasty foo bar!',
+    created: 'March 14 2017',
+    ingredients: [
+      '100g chocolate',
+      '200g flour',
+      '2 eggs'
+    ],
+    instructions: [
+      'Put everything into a bowl and mix',
+      'Bake on 200C for 20 minutes'
+    ]
+  };
+
+  describe('header', () => {
+    const getHeader = () => shallow(<Recipe {...recipe} />).find('.header');
+    it('should render a title into h2', () => {
+      const expected = recipe.title;
+      const actual = getHeader().find('h2').text();
+      expect(actual).toEqual(expected);
+    });
+
+    it('should render the create date into a span', () => {
+      const expected = recipe.created;
+      const actual = getHeader().find('span').text();
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe('main-section', () => {
+    it('should contain `left` column with list of ingredients', () => {
+      const wrapper = shallow(<Recipe {...recipe} />).find('.left-column li');
+      const actual = wrapper.map(node => node.text());
+      const expected = recipe.ingredients;
+      expect(actual).toEqual(expected);
+    });
+
+    it('should contain `right` column for instructions', () => {
+      const wrapper = shallow(<Recipe {...recipe} />).find('.right-column li');
+      const actual = wrapper.map(node => node.text());
+      const expected = recipe.instructions;
+      expect(actual).toEqual(expected);
+    });
+  });
+});