diff --git a/src/App.js b/src/App.js
index 53957b1..569bb4e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,6 +13,7 @@ class App extends Component {
Assignment: Implement a basic recipe blog
Notice: Focus on TDD, do pair programming (1 writes failing test, 1 implements), styling is not important
+
Checkout Enzyme project documentation - a react testing library
- Open
"./src/first.spec.js" file and run npm test and look around
- Create
"./src/Recipe.spec.js" and try to write a failing assertion about non-yet-existing {''} component that should render "Yummy!"
diff --git a/src/Recipe.spec.js b/src/Recipe.spec.js
new file mode 100644
index 0000000..a71886c
--- /dev/null
+++ b/src/Recipe.spec.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+const Recipe = ({ title, created, ingredients, instructions }) => {
+ return (
+
+
+
{title}
+ {created}
+
+
+
+
{ingredients.map((item, idx) => - {item}
)}
+
+
+
{instructions.map((item, idx) => - {item}
)}
+
+
+
+ );
+};
+
+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().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().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().find('.right-column li');
+ const actual = wrapper.map(node => node.text());
+ const expected = recipe.instructions;
+ expect(actual).toEqual(expected);
+ });
+ });
+});