feat: wrap actions in Cypress command queue, close #2

This makes running actions seem very natural and avoids `cy.then`
blocks.

```js
Cypress.main.toggle()
cy.get('.toggle').should('be.checked')
// because actions inside Cypress.main are queued into the
// Cypress command queue first we can just call them
// the toggle below will happen AFTER the toggle check above
// has already passed
Cypress.main.toggle()
cy.get('.toggle').should('not.be.checked')
```

Author: bahmutov

README.md

@@ -49,8 +49,14 @@ beforeEach(() => {
 
 ```js
 Cypress.main.setName('Joe')
-expect(Cypress.main._getState().name).to.equal('Joe')
+Cypress.main._getState().its('name').should('equal', 'Joe')
+Cypress.main.setAge(37)
+Cypress.main._getState().should('deep.equal', {
+  name: 'Joe',
+  age: 37
+})
 ```
+Note: the `Cypress.main` wraps returned Hyperapp actions with `cy.then` to queue the calls through the Cypress command queue. Thus the above code looks synchronous, but in reality there could be DOM updates, network calls, etc, and it still works.
 
 ## Use
 

cypress/integration/hello-world-component-spec.js

@@ -44,11 +44,6 @@ describe('HelloYou', () => {
     Cypress.main.setName('Great Person!')
     // mount function adds utility method to get the
     // current state object
-    expect(Cypress.main._getState().name).to.equal('Great Person!')
-  })
-
-  it('mutates state', () => {
-    Cypress.main.setName('Great Person!')
-    expect(state).to.not.equal(Cypress.main._getState())
+    Cypress.main._getState().its('name').should('equal', 'Great Person!')
   })
 })

cypress/integration/todo-item-spec.js

@@ -27,10 +27,7 @@ describe('TodoItem', () => {
   })
 
   it('is unchecked for unfinished item', () => {
-    cy
-      .get('.toggle')
-      .should('have.length', 1)
-      .should('not.be.checked')
+    cy.get('.toggle').should('have.length', 1).should('not.be.checked')
   })
 
   it('toggles item on click', () => {
@@ -39,27 +36,29 @@ describe('TodoItem', () => {
   })
 
   it('changes state on click', () => {
-    cy
-      .get('.todo')
-      .click()
-      .then(() => {
-        expect(Cypress.main._getState()).to.deep.equal({
-          done: true,
-          value: 'Try HyperApp'
-        })
-      })
+    cy.get('.todo').click()
+    Cypress.main._getState().should('deep.equal', {
+      done: true,
+      value: 'Try HyperApp'
+    })
+
+    // click again
+    cy.get('.todo').click()
+    Cypress.main._getState().should('deep.equal', {
+      done: false,
+      value: 'Try HyperApp'
+    })
   })
 
   it('changes state by invoking action', () => {
     // the component's actions are referenced in Cypress.main
     Cypress.main.toggle()
     cy.get('.toggle').should('be.checked')
-    // the action happens synchronously
-    // but Cypress commands are queued
-    // thus toggle again only after previous cy.get... has passed
-    cy.then(() => {
-      Cypress.main.toggle()
-    })
+    // because actions inside Cypress.main are queued into the
+    // Cypress command queue first we can just call them
+    // the toggle below will happen AFTER the toggle check above
+    // has already passed
+    Cypress.main.toggle()
     cy.get('.toggle').should('not.be.checked')
   })
 })

src/index.js

@@ -21,7 +21,25 @@ export const mount = (state, actions, view) => {
     .its('hyperapp.app')
     .then(app => {
       const el = document.getElementById('app')
-      Cypress.main = app(state, actions, view, el)
+      const main = app(state, actions, view, el)
+
+      // wrap every hyper action with `cy.then` to
+      // make sure it goes through the Cypress command queue
+      // allows things like the example below to just work
+      //   Cypress.main.setText('foo')
+      //   cy.contains('foo')
+      //   Cypress.main.setText('bar')
+      //   cy.contains('bar')
+      Cypress.main = {}
+      Object.keys(main).forEach(name => {
+        const action = main[name]
+        Cypress.main[name] = function queueAction () {
+          // should we log arguments?
+          cy.log(`action: ${name}`)
+          return cy.then(() => action.apply(null, arguments))
+        }
+      })
+
       return Cypress.main
     })