step 4 working with tests

ShMcK · ShMcK · commit 1adc1d3c8218 · 2016-08-02T14:29:04.000-07:00
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ A [CodeRoad](https://coderoad.github.io) tutorial for learning Redux.
 
 <!-- @import('01') -->
 <!-- @import('02') -->
-<!-- @import('04') -->
+<!-- @import('03') -->
 <!-- @import('05') -->
 <!-- @import('06') -->
 <!-- @import('07') -->
@@ -28,23 +28,13 @@ CodeRoad is an open-sourced interactive tutorial platform for the Atom Editor. L
 
 ## Outline
 
-##### Actions
+##### Reducer
 
-Events that change the data.
+The data transformation
 
-##### 1. Actions
 ```js
-const action = { type: 'ACTION_NAME' };
-```
-
-##### 2. Action Creators
-
-```js
-const actionName = () => ({ type: 'ACTION_NAME' });
-```
-
-##### 3. Action Types
-
-```js
-const ACTION_NAME = 'ACTION_NAME'
+const reducer = (state) => {
+  console.log(state);
+  return state;
+};
 ```
diff --git a/coderoad.json b/coderoad.json
@@ -1,59 +1,63 @@
 {
   "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('04') -->\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('05') -->\n<!-- @import('06') -->\n<!-- @import('07') -->\n<!-- @import('08') -->\n<!-- @import('09') -->"
   },
   "pages": [
     {
-      "title": "Actions",
-      "description": "Events that change the data.\n\n##### 1. Actions\n```js\nconst action = { type: 'ACTION_NAME' };\n```\n\n##### 2. Action Creators\n\n```js\nconst actionName = () => ({ type: 'ACTION_NAME' });\n```\n\n##### 3. Action Types\n\n```js\nconst ACTION_NAME = 'ACTION_NAME'\n```",
+      "title": "Reducer",
+      "description": "The data transformation\n\n```js\nconst reducer = (state) => {\n  console.log(state);\n  return state;\n};\n```",
       "tasks": [
         {
-          "description": "create an action called `voteUp`",
+          "description": "Extract the `state => state` function in create store, and call in a new function called \"reducer\".",
           "tests": [
-            "03/01"
+            "04/01"
           ],
           "actions": [
             "open('index.js')"
           ]
         },
         {
-          "description": "change `voteUp` into an action creator.",
+          "description": "Log the state inside of your reducer. What does it look like?",
           "tests": [
-            "03/02"
+            "04/02"
           ],
           "hints": [
-            "wrap your output object in round brackets",
-            "Try this: `const voteUp = () => ({ type: \"VOTE_UP\" });`"
+            "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": "add a param of `id` to your action creator",
+          "description": "Pass an action as a second param to the reducer",
           "tests": [
-            "03/03"
+            "04/03"
           ]
         },
         {
-          "description": "create an action type for `voteUp`",
-          "hints": [
-            "const VOTE_UP = \"VOTE_UP\""
-          ],
+          "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)`",
           "tests": [
-            "03/04"
+            "04/04"
           ]
         },
         {
-          "description": "Use the action type inside your `voteUp` action creator. Notice how your editor may autocomplete the action type.",
+          "description": "Create a `switch` statement and pass in `action.type`, the default return should return `state`",
           "tests": [
-            "03/05"
-          ],
-          "hints": [
-            "change \"VOTE_UP\" to use the constant VOTE_UP",
-            "Try this: `const voteUp = () => ({ type: VOTE_UP });`"
+            "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"
           ]
         }
-      ],
-      "onPageComplete": "Excellent! In the next unit we will look at how these actions can be used to transform data using a \"reducer\""
+      ]
     }
   ]
 }
diff --git a/tutorial/03/01.js b/tutorial/03/01.js
@@ -1,9 +1,4 @@
-var chai = require('chai');
-var spies = require('chai-spies');
-var expect = chai.expect;
-chai.use(spies);
-
-var spy = chai.spy.on(console, 'log');
+const expect = require('chai').expect;
 
 /// load('index.js')
 
diff --git a/tutorial/04/01.js b/tutorial/04/01.js
@@ -3,17 +3,25 @@ var spies = require('chai-spies');
 var expect = chai.expect;
 chai.use(spies);
 
-var spy = chai.spy.on(console, 'log');
+var log = chai.spy.on(console, 'log');
 
 /// load('index.js')
 
 describe('01 reducer', () => {
+
+  it('doesn\'t exist', () => {
+    expect(reducer).to.be.defined;
+  });
+
   it('doesn\'t take a "state" param', () => {
-    expect(reducer).to.have.length(1);
+    const regex = /state/;
+    const string = reducer.toString();
+    expect(string).to.match(regex);
   });
 
   it('doesn\'t return "state"', () => {
-    expect(reducer({ a: 1 }).to.deep.equal({ a: 1 });
+    expect(reducer('a', { type: 'ANY' })).to.equal('a');
+    expect(reducer(1, { type: 'ANY' })).to.equal(1);
   });
-  
+
 });
diff --git a/tutorial/04/02.js b/tutorial/04/02.js
@@ -1,3 +1,9 @@
 describe('02 reducer', () => {
 
+  it('doesn\'t have any console.log statements', () => {
+    const regex = /console.log\(/;
+    const string = reducer.toString();
+    expect(string).to.match(regex);
+  });
+
 });
diff --git a/tutorial/04/03.js b/tutorial/04/03.js
@@ -0,0 +1,13 @@
+describe('03 reducer', () => {
+
+  it('has a second param', () => {
+    expect(reducer).to.have.length(2);
+  });
+
+  it('has a second param called "action"', () => {
+    const regex = /action/;
+    const string = reducer.toString();
+    expect(string).to.match(regex);
+  });
+
+});
diff --git a/tutorial/04/04.js b/tutorial/04/04.js
@@ -0,0 +1,13 @@
+describe('04 console.log', () => {
+
+  it('should be called with state and action as in the example', () => {
+    const regex = / console.log\(\s?[\'\"]state:\s?[\'\"],\s?state,\s?[\'\"]action:\s?[\'\"],\s?action\s?\)/;
+    const string = reducer.toString();
+    expect(string).to.match(regex);
+  });
+
+  it('should be called with the state and dispatched action twice', () => {
+    expect(log).to.have.been.called.with('state: ', initialState, 'action: ', voteUp(2));
+  });
+
+});
diff --git a/tutorial/04/05.js b/tutorial/04/05.js
@@ -0,0 +1,15 @@
+describe('05 reducer', () => {
+
+  it('should have a switch statement', () => {
+    const regex = /switch/;
+    const string = reducer.toString();
+    expect(string).to.match(regex);
+  });
+
+  it('should switch on a "action.type"', () => {
+    const regex = /switch\s?\(\s?action.type\s?\)\s?\{/;
+    const string = reducer.toString();
+    expect(string).to.match(regex);
+  });
+
+});
diff --git a/tutorial/04/06.js b/tutorial/04/06.js
@@ -0,0 +1,13 @@
+describe('06 reducer switch statement', () => {
+
+  it('should have a default case', () => {
+    const regex = /default\:/;
+    const string = reducer.toString();
+    expect(string).to.match(regex);
+  });
+
+  it('should return the original "default" state', () => {
+    expect(reducer('a', { type: 'ANY' })).to.equal('a');
+  });
+
+});
diff --git a/tutorial/04/07.js b/tutorial/04/07.js
@@ -0,0 +1,13 @@
+describe('07 reducer switch statement', () => {
+
+  it('should have a case for VOTE_UP', () => {
+    const regex = /case VOTE_UP\:/;
+    const string = reducer.toString();
+    expect(string).to.match(regex);
+  });
+
+  it('should log the dispatched id (action.payload.id)', () => {
+    expect(log).to.be.called.with(2);
+  });
+
+});
diff --git a/tutorial/04/index.md b/tutorial/04/index.md
@@ -8,21 +8,33 @@ const reducer = (state) => {
 };
 ```
 
-+ Create a reducer and call it as the first param in your `createStore`
++ Extract the `state => state` function in create store, and call in a new function called "reducer".
 @test('04/01')
 @action(open('index.js'))
 
-+ Change the state
++ Log the state inside of your reducer. What does it look like?
 @test('04/02')
+@hint('Add a `console.log` statement inside of your reducer function')
+@hint('Try this:
+```js
+const reducer = (state) => {
+  console.log(state);
+  return state;
+};
+```
+')
 
-+ Pass an action to the reducer
++ Pass an action as a second param to the reducer
 @test('04/03')
 
-+ Dispatch two voteUp actions through the reducer: `store.dispatch(voteUp(2))`
++ 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)`
 @test('04/04')
 
 + Create a `switch` statement and pass in `action.type`, the default return should return `state`
 @test('04/05')
 
-+ add a switch case for `VOTE_UP`. Inside of it, console.log the `id` of the action passed in
++ 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.
+@test('04/07')
diff --git a/tutorial/05/01.js b/tutorial/05/01.js
@@ -0,0 +1,3 @@
+describe('01 pure function', () => {
+
+});
diff --git a/tutorial/05/02.js b/tutorial/05/02.js
@@ -0,0 +1,3 @@
+describe('02 pure function', () => {
+
+});
diff --git a/tutorial/tutorial.md b/tutorial/tutorial.md
@@ -2,10 +2,10 @@
 
 A [CodeRoad](https://coderoad.github.io) tutorial for learning Redux.
 
-@import('01')
-@import('02')
-@import('03')
-<!-- @import('04') -->
+<!-- @import('01') -->
+<!-- @import('02') -->
+<!-- @import('03') -->
+@import('04')
 <!-- @import('05') -->
 <!-- @import('06') -->
 <!-- @import('07') -->

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+describe('01 pure function', () => {`
	`2`	`+`
	`3`	`+});`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+describe('02 pure function', () => {`
	`2`	`+`
	`3`	`+});`