Step 5 outline and tests complete

Author: ShMcK

README.md

@@ -5,7 +5,7 @@ A [CodeRoad](https://coderoad.github.io) tutorial for learning Redux.
 <!-- @import('01') -->
 <!-- @import('02') -->
 <!-- @import('03') -->
-<!-- @import('05') -->
+<!-- @import('04') -->
 <!-- @import('06') -->
 <!-- @import('07') -->
 <!-- @import('08') -->
@@ -28,13 +28,21 @@ CodeRoad is an open-sourced interactive tutorial platform for the Atom Editor. L
 
 ## Outline
 
-##### Reducer
+##### Pure Functions
 
-The data transformation
+Reducers must be pure functions
 
+State is "read only".
+
+Notes
 ```js
-const reducer = (state) => {
-  console.log(state);
-  return state;
-};
-```
+const nextPokemon = state.pokemon.map(p => {
+    if (id === p.id) {
+      p.votes += 1;
+    }
+    return p;
+  });
+  return {
+   pokemon: nextPokemon
+ };
+ ```

coderoad.json

@@ -1,63 +1,36 @@
 {
   "info": {
     "title": "CodeRoad Redux JS Tutorial",
-    "description": "A [CodeRoad](https://coderoad.github.io) tutorial for learning Redux.\n\n<!-- @import('01') -->\n<!-- @import('02') -->\n<!-- @import('03') -->\n<!-- @import('05') -->\n<!-- @import('06') -->\n<!-- @import('07') -->\n<!-- @import('08') -->\n<!-- @import('09') -->"
+    "description": "A [CodeRoad](https://coderoad.github.io) tutorial for learning Redux.\n\n<!-- @import('01') -->\n<!-- @import('02') -->\n<!-- @import('03') -->\n<!-- @import('04') -->\n<!-- @import('06') -->\n<!-- @import('07') -->\n<!-- @import('08') -->\n<!-- @import('09') -->"
   },
   "pages": [
     {
-      "title": "Reducer",
-      "description": "The data transformation\n\n```js\nconst reducer = (state) => {\n  console.log(state);\n  return state;\n};\n```",
+      "title": "Pure Functions",
+      "description": "Reducers must be pure functions\n\nState is \"read only\".\n\nNotes\n```js\nconst nextPokemon = state.pokemon.map(p => {\n    if (id === p.id) {\n      p.votes += 1;\n    }\n    return p;\n  });\n  return {\n   pokemon: nextPokemon\n };\n ```",
       "tasks": [
         {
-          "description": "Extract the `state => state` function in create store, and call in a new function called \"reducer\".",
+          "description": "Return a new list of Pokemon after incrementing \"votes\" of the pokemon with the matching \"id\"",
           "tests": [
-            "04/01"
-          ],
-          "actions": [
-            "open('index.js')"
-          ]
-        },
-        {
-          "description": "Log the state inside of your reducer. What does it look like?",
-          "tests": [
-            "04/02"
-          ],
-          "hints": [
-            "Add a `console.log` statement inside of your reducer function",
-            "Try this:```js\nconst reducer = (state) => {\n  console.log(state);\n  return state;\n};\n```"
-          ]
-        },
-        {
-          "description": "Pass an action as a second param to the reducer",
-          "tests": [
-            "04/03"
+            "05/01"
           ]
         },
         {
-          "description": "Dispatch two voteUp actions through the reducer: `store.dispatch(voteUp(2))`. Change your log statement inside of your reducer to look like this: `console.log('state: ', state, 'action: ', action)`",
+          "description": "Let's make a test to see that we are truly returning a new state. Wrap your `initialState` object in a `Object.freeze`. Freeze makes an object unchangeable. And yet your reducer should still work.",
           "tests": [
-            "04/04"
+            "05/02"
           ]
         },
         {
-          "description": "Create a `switch` statement and pass in `action.type`, the default return should return `state`",
+          "description": "What if we were dealing with multiple keys on the state. We'd have to ensure that our changes return a complete new state each time. Use `Object.assign`",
           "tests": [
-            "04/05"
-          ]
-        },
-        {
-          "description": "The `switch` statement should have a `default` case that returns the state",
-          "tests": [
-            "04/06"
-          ]
-        },
-        {
-          "description": "add a switch case for `VOTE_UP`. For now, just console.log the `id` of the action passed in and return the default state again.",
-          "tests": [
-            "04/07"
+            "05/03"
+          ],
+          "hints": [
+            "return `Object.assign({}, { pokemon: nextPokemon });`"
           ]
         }
-      ]
+      ],
+      "onPageComplete": "Now that you have an idea of how reducers work. Next we can look at how to create multiple, modular reducers."
     }
   ]
 }

tutorial/04/index.md

@@ -36,5 +36,5 @@ const reducer = (state) => {
 + The `switch` statement should have a `default` case that returns the state
 @test('04/06')
 
-+ add a switch case for `VOTE_UP`. For now, just console.log the `id` of the action passed in and return the default state again.
++ add a switch case for `VOTE_UP`. For now, just console.log the `id` of the action passed in and return the default state again. Tip: destructuring: `const { id } = action.payload;`
 @test('04/07')

tutorial/05/01.js

@@ -1,3 +1,30 @@
-describe('01 pure function', () => {
+var expect = require('chai').expect;
+
+/// load('index.js')
+
+describe('01 the pure reducer', () => {
+
+  const testState = {
+    pokemon: [{
+      id: 99,
+      votes: 0,
+    }, {
+      id: 100,
+      votes: 0,
+    }, {
+      id: 101,
+      votes: 0,
+    }]
+  };
+
+  const testAction = ({ type: 'VOTE_UP', payload: { id: 100 } });
+
+  it('should have a reducer', () => {
+    expect(reducer).to.be.defined;
+  })
+
+  it('should increment the votes matching the id only', () => {
+    expect(reducer(testState, testAction).pokemon[1].votes).to.equal(1);
+  });
 
 });

tutorial/05/02.js

@@ -1,3 +1,7 @@
-describe('02 pure function', () => {
+describe('02 initialState', () => {
+
+  it('should be frozen', () => {
+    expect(Object.isFrozen(initialState)).to.be.true;
+  });
 
 });

tutorial/05/03.js

@@ -0,0 +1,15 @@
+describe('03 uses Object.assign', () => {
+
+  it('to return the modified state', () => {
+    const regex = /Object.assign/;
+    const string = reducer.toString();
+    expect(string).to.match(regex);
+  });
+
+  it('to target an empty object', () => {
+    const regex = /Object.assign\(\{\}\,/;
+    const string = reducer.toString();
+    expect(string).to.match(regex);
+  });
+
+});

tutorial/05/index.md

@@ -1,6 +1,9 @@
-# Pure Functions
+## Pure Functions
+Reducers must be pure functions
 
-05/01
+State is "read only".
+
+Notes
 ```js
 const nextPokemon = state.pokemon.map(p => {
     if (id === p.id) {
@@ -13,13 +16,14 @@ const nextPokemon = state.pokemon.map(p => {
  };
  ```
 
-+ Return a new list of Pokemon with the pokemon matching the id incrementing its votes by one
++ Return a new list of Pokemon after incrementing "votes" of the pokemon with the matching "id"
 @test('05/01')
 
-
-
-+ Use Object.assign
++ Let's make a test to see that we are truly returning a new state. Call `Object.freeze()` on your `initialState`. `freeze` makes an object immutable - meaning the object can not be changed. And yet your reducer should still work, since it returns a new state each call.
 @test('05/02')
+
++ What if we were dealing with multiple keys on the state. We'd have to ensure that our changes return a complete new state each time. Use `Object.assign`
+@test('05/03')
 @hint('return `Object.assign({}, { pokemon: nextPokemon });`')
 
-@onPageComplete('')
+@onPageComplete('Now that you have an idea of how reducers work. Next we can look at how to create multiple, modular reducers.')

tutorial/tutorial.md

@@ -2,11 +2,11 @@
 
 A [CodeRoad](https://coderoad.github.io) tutorial for learning Redux.
 
-<!-- @import('01') -->
-<!-- @import('02') -->
-<!-- @import('03') -->
+@import('01')
+@import('02')
+@import('03')
 @import('04')
-<!-- @import('05') -->
+@import('05')
 <!-- @import('06') -->
 <!-- @import('07') -->
 <!-- @import('08') -->