chore: add toggle action and test

Author: bahmutov

README.md

@@ -70,6 +70,7 @@ Start Cypress using `$(npm bin)/cypress open` and execute the spec. You have ful
 
 * [src/index.js](src/index.js) the main file implementing `mount`
 * [components](components) different Hyper components for testing
+* [actions](actions) pure actions functions used from components and tests
 * [cypress/integration](cypress/integration) example spec files showing  various test situations
 
 See video of tests running on CI on the project's [Cypress Dashboard][cypress dashboard url]
@@ -81,6 +82,11 @@ See video of tests running on CI on the project's [Cypress Dashboard][cypress da
 - [single TodoItem component](cypress/integration/todo-item-spec.js)
 - [entire TodoList component](cypress/integration/todo-list-spec.js)
 
+## Package scripts
+
+* `npm run cy:open` starts Cypress GUI, which is great for TDD mode
+* `npm run cy:run` runs Cypress headlessly, testing all specs. Same command [runs on CI](.travis.yml) with additional `--record` argument to record the run and send to the [Cypress Dashboard][cypress dashboard url]
+
 ### Small print
 
 Author: Gleb Bahmutov <[email protected]> © 2017

actions/index.js

@@ -0,0 +1,15 @@
+// common pure actions for different components AND tests
+
+export const toggle = ({ id, done }) => state => {
+  // poor man's find and toggle todo, can be really shortened
+  // with Ramda or other functional libraries.
+
+  // Luckily such pure functions are
+  // SUPER SIMPLE to test and refactor
+  // as much as you want
+  return {
+    todos: state.todos.map(
+      t => (t.id === id ? Cypress._.merge({}, t, { done }) : t)
+    )
+  }
+}

components/todo-item.js

@@ -3,9 +3,11 @@ import { h } from 'hyperapp'
 // TodoItem component from
 // https://github.com/hyperapp/hyperapp/blob/master/docs/concepts/components.md
 export const TodoItem = ({ id, value, done, toggle }) => {
+  done = Boolean(done)
+
   const onclick = e =>
     toggle({
-      value: done,
+      done: !done,
       id
     })
 

cypress/integration/todo-list-spec.js

@@ -1,5 +1,6 @@
 import { h } from 'hyperapp'
 import { TodoList } from '../../components/todo-list'
+import { toggle } from '../../actions'
 import { mount } from '../..'
 
 /* eslint-env mocha */
@@ -27,11 +28,9 @@ describe('TodoList', () => {
       }
     ]
   }
+  // reuse toggle action in the test - why not?
   const actions = {
-    // TODO implement toggle
-    toggle: () => state => {
-      throw new Error('Toggle not implemented yet')
-    }
+    toggle
   }
   const view = (state, actions) =>
     // renders TodoList component, passing
@@ -71,7 +70,7 @@ describe('TodoList', () => {
       .should('not.be.checked')
   })
 
-  it.skip('completes todo by clicking', () => {
+  it('completes todo by clicking', () => {
     cy.contains('.todo-list .todo', 'Profit').click()
     cy
       .contains('.todo-list .todo', 'Profit')

package.json

@@ -58,7 +58,8 @@
     "secure": "nsp check",
     "size": "t=\"$(npm pack .)\"; wc -c \"${t}\"; tar tvf \"${t}\"; rm \"${t}\";",
     "test": "cypress run",
-    "e2e": "cypress open",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run",
     "unit": "mocha src/*-spec.js",
     "unused-deps": "dependency-check --unused --no-dev .",
     "semantic-release": "semantic-action pre && npm publish && semantic-action post"