tutorial fixes

Author: ShMcK

README.md

@@ -101,7 +101,3 @@ const nextPokemon = state.pokemon.map(p => {
    pokemon: nextPokemon
  };
  ```
-
-##### Combine Reducers
-
-Create modular, composable reducers with `combineReducers`.

coderoad.json

@@ -231,36 +231,17 @@
       "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": "Return a new list of Pokemon after incrementing \"votes\" of the pokemon with the matching \"id\"",
+          "description": "Time to make the VOTE_UP action change the state. Return a new list of Pokemon after incrementing \"votes\" of the pokemon with the matching \"id\"\nCreate modular, composable reducers with `combineReducers`.",
           "tests": [
             "05/01"
           ],
           "actions": [
             "open('src/index.js')"
-          ]
-        },
-        {
-          "description": "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.",
-          "tests": [
-            "05/02"
-          ]
-        },
-        {
-          "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": [
-            "05/03"
           ],
           "hints": [
-            "return `Object.assign({}, { pokemon: nextPokemon });`"
+            "'Try this: `case VOTE_UP: const pokemon = state.pokemon.map(p => {`')@hint('If the pokemon.id matches the payload.id, increase the votes by one')\n@hint('Don't forget to return the new state')\n@hint('Try returning `return { pokemon };`')\n\n+ 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.\n@test('05/02')\n@hint('Try this: `const initialState = Object.freeze({ ... })`')\n\n+ 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`\n@test('05/03')\n@hint('return `Object.assign({}, state, { pokemon: nextPokemon });`')\n\n\n## Combine Reducer"
           ]
-        }
-      ],
-      "onPageComplete": "Now that you have an idea of how reducers work. Next we can look at how to create multiple, modular reducers."
-    },
-    {
-      "title": "Combine Reducers",
-      "description": "Create modular, composable reducers with `combineReducers`.",
-      "tasks": [
+        },
         {
           "description": "create a new `const reducers` and set it equal to \"reducer\". Pass \"reducers\" into your store for now, instead of \"reducer\". We'll use combineReducers shortly, but let's not break the app yet.",
           "tests": [

package.json

@@ -20,6 +20,6 @@
     "testSuffix": ".js"
   },
   "dependencies": {
-    "mocha-coderoad": "0.9.1"
+    "mocha-coderoad": "0.10.0"
   }
 }

tutorial/02/01.js

@@ -6,6 +6,7 @@ chai.use(spies);
 let spy = chai.spy.on(console, 'log');
 
 const indexJs = require('BASE/src/index.js');
+const store = indexJs.__get__('store');
 
 describe('01 Redux', () => {
 

tutorial/02/03.js

@@ -1,5 +1,3 @@
-const store = indexJs.__get__('store');
-
 describe('03 store', () => {
 
   it('isn\'t defined. `const store`', () => {

tutorial/02/04.js

@@ -1,7 +1,7 @@
 describe('04 log store', () => {
 
   it('isn\'t logged to the console. `console.log(store)`', () => {
-    expect(spy).to.have.been.called();
+    expect(spy).to.have.been.called.with(store);
   });
 
 });

tutorial/02/06.js

@@ -1,26 +1,13 @@
-describe('06 log initialState', () => {
+describe('06 initialState', () => {
 
-  it('isn\'t logged to the console.', () => {
+  const initialState = indexJs.__get__('initialState');
 
-    const initialState = {
-      pokemon: [{
-        id: 1,
-        name: 'Luvdisc',
-        description: 'This heart-shaped POKéMON earned its name by swimming after loving couples it spotted in the ocean’s waves.',
-        votes: 3
-      }, {
-        id: 2,
-        name: 'Trubbish',
-        description: 'Wanting more garbage, they follow people who litter. They always belch poison gas.',
-        votes: 2
-      }, {
-        id: 3,
-        name: 'Stunfisk',
-        description: 'Its skin is very hard, so it is unhurt even if stepped on by sumo wrestlers. It smiles when transmitting electricity.',
-        votes: 0
-      }]
-    };
+  it('should be above the store', () => {
+    expect(initialState).to.not.be.undefined;
+    expect(store.getState()).to.deep.equal(initialState);
+  });
 
+  it('isn\'t logged to the console.', () => {
     expect(spy).to.have.been.called.with(initialState);
   });
 

tutorial/05/index.md

@@ -16,15 +16,20 @@ const nextPokemon = state.pokemon.map(p => {
  };
  ```
 
-+ Return a new list of Pokemon after incrementing "votes" of the pokemon with the matching "id"
++ Time to make the VOTE_UP action change the state. Return a new list of Pokemon after incrementing "votes" of the pokemon with the matching "id"
 @test('05/01')
 @action(open('src/index.js'))
+@hint('Try this: `case VOTE_UP: const pokemon = state.pokemon.map(p => {`')
+@hint('If the pokemon.id matches the payload.id, increase the votes by one')
+@hint('Don't forget to return the new state')
+@hint('Try returning `return { pokemon };`')
 
 + 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')
+@hint('Try this: `const initialState = Object.freeze({ ... })`')
 
 + 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 });`')
+@hint('return `Object.assign({}, state, { 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/06/index.md

@@ -1,8 +1,6 @@
 ## Combine Reducers
 Create modular, composable reducers with `combineReducers`.
 
-
-
 + create a new `const reducers` and set it equal to "reducer". Pass "reducers" into your store for now, instead of "reducer". We'll use combineReducers shortly, but let's not break the app yet.
 @test('06/01')
 @action(open('src/index.js'))

tutorial/07/05.js

@@ -1,17 +1,15 @@
 describe('05 import', () => {
 
-  // read index.js path for regexing for import and moved files
-  const indexJsPath = resolve(process.env.DIR, 'index.js');
-  const indexJsFinal = readFileSync(indexJsPath, 'utf8');
-
   it('`voteUp` from "./pokemon" in "index.js"', () => {
-    const regex = /import\s?\{\s?(.+,?\s?|voteUp,?\s?|sortByPopularity,?\s?)+\s?\}\s?from\s?[\"\']\.?\/?pokemon(\/index(\.js)?)?[\"\'];?/m;
-    expect(indexJsFinal).to.match(regex);
+    const voteUp = indexJs.__get__('voteUp');
+    expect(voteUp).to.not.be.undefined;
+    expect(typeof voteUp).to.equal('function');
   });
 
   it('`default as pokemon` from "./pokemon" in "index.js"', () => {
-    const regex = /import\s?\{\s?(.+,?\s?|default as pokemon,?\s?|sortByPopularity,?\s?)+\s?\}\s?from\s?[\"\']\.?\/?pokemon(\/index(\.js)?)?[\"\'];?/m;
-    expect(indexJsFinal).to.match(regex);
+    const pokemon = indexJs.__get__('pokemon');
+    expect(pokemon).to.not.be.undefined;
+    expect(typeof pokemon).to.equal('function');
   });
 
 });