feat: add complete E2E Todo app

bahmutov · bahmutov · commit 5dc65fb2423c · 2017-12-29T00:51:45.000-05:00
diff --git a/.travis.yml b/.travis.yml
@@ -12,6 +12,9 @@ node_js:
 before_install:
   - npm install cypress hyperapp
 script:
+  # build full apps
+  - npm run build
+  # test everything
   - npm test -- --record
 after_success:
   - npm run semantic-release || true
diff --git a/actions/index.js b/actions/index.js
@@ -9,7 +9,7 @@ export const toggle = ({ id, done }) => state => {
   // as much as you want
   return {
     todos: state.todos.map(
-      t => (t.id === id ? Cypress._.merge({}, t, { done }) : t)
+      t => (t.id === id ? Object.assign({}, t, { done }) : t)
     )
   }
 }
diff --git a/apps/todo-app.js b/apps/todo-app.js
@@ -0,0 +1,34 @@
+// import { h, app } from 'hyperapp'
+import { TodoList } from '../components/todo-list'
+import { toggle } from '../actions'
+
+const { h, app } = window.hyperapp
+
+// notice how much this application looks like TodoList "unit" test
+// in cypress/integration/todo-list-spec.js
+
+console.log('starting todo app')
+const state = {
+  todos: [
+    {
+      id: 1,
+      value: 'Write HyperApp',
+      done: false
+    },
+    {
+      id: 2,
+      value: 'Test it using Cypress',
+      done: false
+    }
+  ]
+}
+const actions = { toggle }
+const view = (state, actions) =>
+  // renders TodoList component, passing
+  // current state and actions
+  h(TodoList, {
+    todos: state.todos,
+    toggle: actions.toggle
+  })
+
+app(state, actions, view, document.getElementById('app'))
diff --git a/apps/todo.html b/apps/todo.html
@@ -0,0 +1,5 @@
+<body>
+  <div id="app"></div>
+  <script src="https://unpkg.com/hyperapp@1.0.0"></script>
+  <script src="todo-app-bundle.umd.js"></script>
+</body>
diff --git a/components/todo-list.js b/components/todo-list.js
@@ -11,6 +11,6 @@ export const TodoList = ({ todos, toggle }) =>
       { class: 'todo-list' },
       // for each todo object, call TodoItem view function,
       // combining todo with toggle action and passing as properties object
-      todos.map(todo => h(TodoItem, Cypress._.merge({}, todo, { toggle })))
+      todos.map(todo => h(TodoItem, Object.assign({}, todo, { toggle })))
     )
   ])
diff --git a/cypress/integration/todo-app.js b/cypress/integration/todo-app.js
@@ -0,0 +1,8 @@
+/* eslint-env mocha */
+describe('Todo App E2E', () => {
+  beforeEach(() => {
+    cy.visit('apps/todo.html')
+  })
+
+  it('works', () => {})
+})
diff --git a/package.json b/package.json
@@ -62,7 +62,9 @@
     "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"
+    "semantic-release": "semantic-action pre && npm publish && semantic-action post",
+    "build": "npm run build:todo-app",
+    "build:todo-app": "microbundle -i apps/todo-app.js -o apps/todo-app-bundle.js --format umd --compress false"
   },
   "release": {
     "analyzeCommits": "simple-commit-message",
@@ -76,6 +78,7 @@
     "git-issues": "1.3.1",
     "github-post-release": "1.13.1",
     "license-checker": "15.0.0",
+    "microbundle": "0.2.4",
     "mocha": "4.0.1",
     "nsp": "3.1.0",
     "pre-git": "3.17.0",

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ export const toggle = ({ id, done }) => state => {`
`9`	`9`	`// as much as you want`
`10`	`10`	`return {`
`11`	`11`	`todos: state.todos.map(`
`12`		`- t => (t.id === id ? Cypress._.merge({}, t, { done }) : t)`
	`12`	`+ t => (t.id === id ? Object.assign({}, t, { done }) : t)`
`13`	`13`	`)`
`14`	`14`	`}`
`15`	`15`	`}`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +<body>
 +  <div id="app"></div>
 +  <script src="https://unpkg.com/[email protected]"></script>
 +  <script src="todo-app-bundle.umd.js"></script>
 +</body>
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,6 @@ export const TodoList = ({ todos, toggle }) =>`
`11`	`11`	`{ class: 'todo-list' },`
`12`	`12`	`// for each todo object, call TodoItem view function,`
`13`	`13`	`// combining todo with toggle action and passing as properties object`
`14`		`- todos.map(todo => h(TodoItem, Cypress._.merge({}, todo, { toggle })))`
	`14`	`+ todos.map(todo => h(TodoItem, Object.assign({}, todo, { toggle })))`
`15`	`15`	`)`
`16`	`16`	`])`