fixes #35, add angular + api testing recipes (#36)

* fixes #35, add angular + api testing recipes

* start json server properly

Author: brian-mann

README.md

@@ -17,6 +17,8 @@ Recipe | Category | Description
 [Drag and Drop](#drag-and-drop) | Testing the DOM | Use `.trigger()` to test drag and drop
 [Typescript with Browserify](#typescript-with-browserify) | Preprocessors | Add typescript support with browserify
 [Typescript with Webpack](#typescript-with-webpack) | Preprocessors | Add typescript support with webpack
+[Direct Control of AngularJS](#direct-control-of-angularjs) | Blogs | Bypass the DOM and control AngularJS
+[E2E API Testing](#e2e-api-testing) | Blogs | Run your API Tests with a GUI
 [Stubbing Functions](#stubbing-functions) | Stubbing, Spying | Use `cy.stub()` to test function calls
 [Stubbing `window.fetch`](#stubbing-windowfetch) | Stubbing, Spying | Use `cy.stub()` to control fetch requests
 [Application Code](#application-code) | Unit Testing | Import and test your own application code
@@ -160,6 +162,19 @@ Get around the lack of a `.hover()` command.
 
 - Use [`@cypress/webpack-preprocessor`](https://github.com/cypress-io/cypress-webpack-preprocessor) to write Cypress tests in Typescript
 
+### [Direct Control of AngularJS](./examples/blogs__direct-control-angular)
+
+- [Blog article written here](https://www.cypress.io/blog/2017/11/15/Control-Angular-Application-From-E2E-Tests)
+- Programmatically control AngularJS
+- Bypass the DOM, update scopes directly
+- Create custom command for controlling services
+
+### [E2E API Testing](./examples/blogs__e2e-api-testing)
+
+- [Blog article written here](https://www.cypress.io/blog/2017/11/07/Add-GUI-to-Your-E2E-API-Tests)
+- Use `cy.request()` to perform API Testing
+- Use the Cypress GUI to help debug requests
+
 ### [Stubbing Functions](./examples/stubbing-spying__functions)
 
 - Use [`cy.stub()`](https://on.cypress.io/stub) to stub dependencies in a unit test.

examples/blogs__direct-control-angular/README.md

@@ -0,0 +1,11 @@
+# Direct Control AngularJS
+
+This is an example showing direct control of Angular 1.x application from Cypress.
+
+## Blog Post
+
+We wrote a [companion blog post](https://www.cypress.io/blog/2017/11/15/Control-Angular-Application-From-E2E-Tests) that provides more details and explanation of this recipe.
+
+Please read that if you'd like to understand more about programmatically controlling your Angular applications.
+
+![E2E tests closely controlling Angular application](img/angular-console.png)

examples/blogs__direct-control-angular/cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://todomvc.com/examples/angularjs"
+}

examples/blogs__direct-control-angular/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

examples/blogs__direct-control-angular/cypress/integration/spec.js

@@ -0,0 +1,174 @@
+describe('Angular TodoMVC', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('loads page', () => {
+    cy.title()
+      .should('include', 'AngularJS')
+      .and('include', 'TodoMVC')
+  })
+
+  it('adds a todo', () => {
+    cy.focused()
+      .type('new todo')
+      .type('{enter}')
+    cy.get('#todo-list')
+      .find('li')
+      .should('have.length', 1)
+      .first()
+      .contains('new todo')
+  })
+
+  it('can get angular library', () => {
+    cy.window()
+      .then(win => {
+        console.log('got app window object', win)
+        return win
+      })
+      .its('angular')
+      .then(ng => {
+        console.log('got angular object', ng.version)
+      })
+  })
+
+  const getAngular = () =>
+    cy.window()
+      .its('angular')
+
+  const getFirstTodoElement = () =>
+    cy.get('#todo-list')
+      .find('li')
+      .first()
+
+  const getElementScope = (selector) =>
+    cy.get(selector)
+      .then($el =>
+        getAngular()
+          .then(ng => ng.element($el).scope())
+      )
+
+  const getElementInjector = (selector) =>
+    cy.get(selector)
+      .then($el =>
+        getAngular()
+          .then(ng => ng.element($el).injector())
+      )
+
+  const addTodo = (text) =>
+    cy.focused()
+      .type(text)
+      .type('{enter}')
+
+  it('has todo object in scope', () => {
+    cy.focused()
+      .type('new todo')
+      .type('{enter}')
+
+    getElementScope('#todo-list li:first')
+      .its('todo')
+      .should('deep.equal', {
+        title: 'new todo',
+        completed: false
+      })
+  })
+
+  it('can get todo', () => {
+    const title = 'learn E2E testing with Cypress'
+    addTodo(title)
+
+    getElementScope('#todo-list li:first')
+      .its('todo')
+      .should('deep.equal', {
+        title,
+        completed: false
+      })
+  })
+
+  it('can change todo via Angular scope', () => {
+    const title = 'learn E2E testing with Cypress'
+    addTodo(title)
+
+    getElementScope('#todo-list li:first')
+      .its('todo')
+      .then(todo => {
+        todo.completed = true
+      })
+
+    getElementScope('#todo-list li:first')
+      .then(scope => {
+        // must run digest cycle so Angular
+        // updates DOM
+        scope.$apply()
+      })
+
+    // check UI - it should have been updated
+    cy.get('#todo-list li:first')
+      .find('input.toggle')
+      .should('be.checked')
+  })
+
+  it('set several todos at once', () => {
+    // home app handles missing "completed" property
+    const todos = [{
+      title: 'first todo'
+    }, {
+      title: 'second todo'
+    }, {
+      title: 'third todo'
+    }]
+
+    getElementScope('#todo-list')
+      .then(scope => {
+        scope.todos = todos
+        scope.$apply()
+      })
+
+    // we should have 3 elements in the list
+    cy.get('#todo-list li')
+      .should('have.length', 3)
+  })
+
+  it('shows completed items', () => {
+    // home app handles missing "completed" property
+    const todos = [{
+      title: 'first todo'
+    }, {
+      title: 'second todo',
+      completed: true
+    }, {
+      title: 'third todo'
+    }]
+
+    getElementScope('#todo-list')
+      .then(scope => {
+        scope.todos = todos
+        scope.$apply()
+      })
+
+    getElementInjector('#todo-list')
+      .then(injector => {
+        const store = injector.get('localStorage')
+        todos.forEach(t => store.insert(t))
+      })
+
+    cy.get('#filters')
+      .contains('Completed')
+      .click()
+
+    cy.get('#todo-list li')
+      .should('have.length', 1)
+  })
+
+  it('sets todo using addTodo scope method', () => {
+    getElementScope('#todo-list')
+      .then(scope => {
+        scope.newTodo = 'this is a todo'
+        scope.addTodo()
+        scope.$apply()
+      })
+
+    cy.get('#todo-list li')
+      .should('have.length', 1)
+  })
+})

examples/blogs__direct-control-angular/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

examples/blogs__direct-control-angular/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

examples/blogs__direct-control-angular/img/angular-console.png

@@ -0,0 +1,9 @@
+{
+  "name": "cypress-example-angular",
+  "version": "1.0.0",
+  "description": "Example showing direct control of Angular 1.x application from E2E tests",
+  "scripts": {
+    "cypress:run": "../../node_modules/.bin/cypress run",
+    "cypress:open": "../../node_modules/.bin/cypress open"
+  }
+}

examples/blogs__direct-control-angular/package.json

@@ -0,0 +1,11 @@
+# E2E API Testing
+
+This is an example of using Cypress to test REST APIs.
+
+## Blog Post
+
+We wrote a [companion blog post](https://www.cypress.io/blog/2017/11/07/Add-GUI-to-Your-E2E-API-Tests) that provides more details and explanation of this recipe.
+
+Please read that if you'd like to understand more about programmatically controlling your Angular applications.
+
+![API testing using Cypress](img/demo.png)

examples/blogs__e2e-api-testing/README.md

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:7081"
+}

examples/blogs__e2e-api-testing/cypress.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

examples/blogs__e2e-api-testing/cypress/fixtures/example.json

@@ -0,0 +1,86 @@
+// @ts-check
+/* eslint-env mocha */
+describe('todos API', () => {
+  /**
+   * @typedef {Object} Todo
+   * @property {number} id
+   * @property {string} task
+   */
+
+   /** @type {Todo[]} */
+  const initialItems = [
+    {
+      "id": 1,
+      "task": "read something"
+    },
+    {
+      "id": 2,
+      "task": "write something"
+    }
+  ]
+
+  const getItems = () =>
+    cy.request('/todos')
+      .its('body')
+
+  /** @type {(todo:Todo) => Cypress.Chainable} */
+  const add = item =>
+    cy.request('POST', '/todos', item)
+
+  const deleteItem = item =>
+    cy.request('DELETE', `/todos/${item.id}`)
+
+  const deleteAll = () =>
+    getItems()
+      .each(deleteItem)
+
+  const reset = () => {
+    deleteAll()
+    initialItems.forEach(add)
+  }
+
+  beforeEach(reset)
+  afterEach(reset)
+
+  it('returns JSON', () => {
+    cy.request('/todos')
+      .its('headers')
+      .its('content-type')
+      .should('include', 'application/json')
+  })
+
+  it('loads 2 items', () => {
+    cy.request('/todos')
+      .its('body')
+      .should('have.length', 2)
+  })
+
+  it('loads the initial items', () => {
+    getItems()
+      .should('deep.eq', initialItems)
+  })
+
+  it('returns id + task objects', () => {
+    getItems()
+      .each(value =>
+        expect(value).to.have.all.keys('id', 'task')
+      )
+  })
+
+  it('adds an item', () => {
+    const randomId = Cypress._.random(0, 10000)
+    const item = {id:randomId, task:'life'}
+
+    add(item)
+    cy.request(`/todos/${randomId}`)
+      .its('body')
+      .should('deep.eq', item)
+  })
+
+  it('deletes an item', () => {
+    const id = initialItems[0].id
+    cy.request('DELETE', `/todos/${id}`)
+    getItems()
+      .should('have.length', 1)
+  })
+})