Element coverage 214 (#215)

* working test

* add recipe to circle list and readme

* actually add job to the circle workflow

* add wait-on utility if needed

* add public/index.html file

* ignore deferred.js in one of the recipes

* more assertions for failing codepen

* wait for url

* use Cy 3.1.3

* add manual wait

Author: bahmutov

README.md

@@ -209,6 +209,12 @@ Get around the lack of a `.hover()` command.
 - Use [`cy.request()`](https://on.cypress.io/api/request) to load a document into test iframe.
 - Test [HyperApp.js](https://hyperapp.js.org/) application through the DOM and through actions.
 
+### [Element Coverage](./examples/blogs__element-coverage)
+
+- Blog post [Element coverage](https://www.cypress.io/blog/2018/12/20/element-coverage/)
+- Overwrite several built-in Cypress commands like `cy.type` and `cy.click`
+- Draw elements after the tests finish
+
 ### [Testing Redux Store](./examples/blogs__testing-redux-store)
 
 - control application via DOM and check that Redux store has been properly updated

circle.yml

@@ -59,6 +59,8 @@ jobs:
     <<: *defaults
   blogs__e2e-snapshots:
     <<: *defaults
+  blogs__element-coverage:
+    <<: *defaults
   blogs__testing-redux-store:
     <<: *defaults
   blogs__vue-vuex-rest:
@@ -123,6 +125,9 @@ workflows:
       - blogs__e2e-snapshots:
           requires:
             - build
+      - blogs__element-coverage:
+          requires:
+            - build
       - blogs__testing-redux-store:
           requires:
             - build

examples/blogs__codepen-demo/cypress/integration/spec.js

@@ -1,3 +1,4 @@
+/// <reference types="cypress" />
 /* eslint-env mocha */
 /* global cy */
 // our Codepen has top level URL
@@ -18,12 +19,19 @@ describe('HyperApp Counter Codepen', () => {
       })
       .its('body')
       .then(html => {
+        cy.log('got document from url', iframeUrl)
+        cy.log('document length', html.length)
+        cy.wrap(html).its('length').should('be.greaterThan', 2000)
+
         cy.document().then(document => {
           cy.log('Writing HTML into test document')
           document.write(html)
           document.close()
         })
       })
+
+    cy.wait(1000)
+    cy.url().should('include', 'localhost:')
     cy.get('main').should('be.visible')
   })
 

examples/blogs__element-coverage/.env

@@ -0,0 +1,2 @@
+SKIP_PREFLIGHT_CHECK=true
+BROWSER=none

examples/blogs__element-coverage/README.md

@@ -0,0 +1,14 @@
+# Element coverage
+
+Code for blog post [Element coverage](https://www.cypress.io/blog/2018/12/20/element-coverage/)
+
+## Shows how to
+
+- overwrite several built-in Cypress commands in [cypress/support/commands.js](cypress/support/commands.js) to keep track of elements the test interacts with
+- draw elements after the tests finish
+
+![Elements](img/elements.png)
+
+## Development
+
+To make sure the server starts and builds the app _before_ the tests start on CI, [wait-on](https://github.com/jeffbski/wait-on#readme) utility is used to check on local port 3000 before running Cypress tests. See the NPM scripts in the [package.json](package.json) file.

examples/blogs__element-coverage/cypress.json

@@ -0,0 +1,10 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "ignoreTestFiles": [
+    "**/*.snap",
+    "**/__snapshot__/*"
+  ],
+  "env": {
+    "cypress-plugin-snapshots": {}
+  }
+}

examples/blogs__element-coverage/cypress/fixtures/example.json

@@ -0,0 +1,3 @@
+{
+  "example": "fixture"
+}

examples/blogs__element-coverage/cypress/integration/spec.js

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+/* eslint-env browser */
+beforeEach(() => {
+  cy.visit('/')
+})
+it('works', function () {
+  cy.get('.new-todo').type('first todo{enter}')
+  cy.get('.new-todo').type('second todo{enter}')
+  cy.get('.todo-list li').should('have.length', 2)
+    .first().find(':checkbox').check()
+
+  cy.contains('.filters a', 'Active').click()
+  cy.contains('.filters a', 'Active').should('have.class', 'selected')
+
+  cy.contains('.filters a', 'Completed').click()
+  cy.contains('.filters a', 'Completed').should('have.class', 'selected')
+
+  cy.contains('.filters a', 'All').click()
+  cy.contains('.filters a', 'All').should('have.class', 'selected')
+})

examples/blogs__element-coverage/cypress/plugins/index.js

@@ -0,0 +1,19 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/* eslint-disable no-unused-vars */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}
+/* eslint-enable no-unused-vars */

examples/blogs__element-coverage/cypress/support/commands.js

@@ -0,0 +1,80 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create the custom commands: 'createDefaultTodos'
+// and 'createTodo'.
+//
+// The commands.js file is a great place to
+// modify existing commands and create custom
+// commands for use throughout your tests.
+//
+// You can read more about custom commands here:
+// https://on.cypress.io/commands
+// ***********************************************
+
+/* eslint-env browser */
+
+// libraries that compute selectors compared in
+// https://github.com/fczbkk/css-selector-generator-benchmark
+const finder = require('@medv/finder').default
+
+before(() => {
+  window.testedSelectors = []
+})
+
+after(() => {
+  const selectors = Cypress._.uniq(window.testedSelectors)
+
+  // eslint-disable-next-line no-console
+  console.log('tested the following selectors:', selectors)
+
+  // shortcut to get application's window context
+  // without going through cy.window() command
+  const win = cy.state('window')
+
+  selectors.forEach((selector) => {
+    const el = win.document.querySelector(selector)
+
+    if (el) {
+      el.style.opacity = 1
+      el.style.border = '1px solid magenta'
+    }
+  })
+
+  // add pause if recording a video
+  // cy.wait(1000, { log: false })
+})
+
+const getSelector = ($el) => {
+  if ($el.attr('data-cy')) {
+    return `[data-cy=${$el.attr('data-cy')}]`
+  }
+
+  return finder($el[0], {
+    // a trick to point "finder" at the application's iframe
+    root: cy.state('window').document.body,
+  })
+}
+
+const rememberSelector = ($el) => {
+  const selector = getSelector($el)
+
+  window.testedSelectors.push(selector)
+}
+
+Cypress.Commands.overwrite('type', function (type, $el, text, options) {
+  rememberSelector($el)
+
+  return type($el, text, options)
+})
+
+Cypress.Commands.overwrite('check', function (check, $el, options) {
+  rememberSelector($el)
+
+  return check($el, options)
+})
+
+Cypress.Commands.overwrite('click', function (click, $el, options) {
+  rememberSelector($el)
+
+  return click($el, options)
+})

examples/blogs__element-coverage/cypress/support/defaults.js

@@ -0,0 +1,17 @@
+// ***********************************************
+// This example defaults.js shows you how to
+// customize the internal behavior of Cypress.
+//
+// The defaults.js file is a great place to
+// override defaults used throughout all tests.
+//
+// ***********************************************
+//
+// Cypress.Server.defaults({
+//   delay: 500,
+//   whitelist: function(xhr){}
+// })
+
+// Cypress.Cookies.defaults({
+//   whitelist: ["session_id", "remember_token"]
+// })

examples/blogs__element-coverage/cypress/support/index.js

@@ -0,0 +1,23 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your other 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/guides/configuration#section-global
+// ***********************************************************
+
+// Import commands.js and defaults.js
+// using ES2015 syntax:
+// import "./commands"
+// import "./defaults"
+
+// Alternatively you can use CommonJS syntax:
+require('./commands')
+require('./defaults')

examples/blogs__element-coverage/img/elements.png

@@ -0,0 +1,18 @@
+{
+  "name": "blogs__element-coverage",
+  "version": "1.0.0",
+  "description": "Showing elements the test has interacted with",
+  "private": true,
+  "scripts": {
+    "start": "../../node_modules/.bin/react-scripts start",
+    "wait-on": "../../node_modules/.bin/wait-on http://localhost:3000",
+    "cypress:run": "npm run wait-on && ../../node_modules/.bin/cypress run",
+    "cypress:open": "../../node_modules/.bin/cypress open"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

examples/blogs__element-coverage/package.json

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Redux TodoMVC Example</title>
+  </head>
+  <body>
+    <div class="todoapp" id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` in this folder.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>

examples/blogs__element-coverage/public/index.html

@@ -0,0 +1,9 @@
+import * as types from '../constants/ActionTypes'
+
+export const addTodo = text => ({ type: types.ADD_TODO, text })
+export const deleteTodo = id => ({ type: types.DELETE_TODO, id })
+export const editTodo = (id, text) => ({ type: types.EDIT_TODO, id, text })
+export const completeTodo = id => ({ type: types.COMPLETE_TODO, id })
+export const completeAllTodos = () => ({ type: types.COMPLETE_ALL_TODOS })
+export const clearCompleted = () => ({ type: types.CLEAR_COMPLETED })
+export const setVisibilityFilter = filter => ({ type: types.SET_VISIBILITY_FILTER, filter})

examples/blogs__element-coverage/src/actions/index.js

@@ -0,0 +1,45 @@
+import * as types from '../constants/ActionTypes'
+import * as actions from './index'
+
+describe('todo actions', () => {
+  it('addTodo should create ADD_TODO action', () => {
+    expect(actions.addTodo('Use Redux')).toEqual({
+      type: types.ADD_TODO,
+      text: 'Use Redux'
+    })
+  })
+
+  it('deleteTodo should create DELETE_TODO action', () => {
+    expect(actions.deleteTodo(1)).toEqual({
+      type: types.DELETE_TODO,
+      id: 1
+    })
+  })
+
+  it('editTodo should create EDIT_TODO action', () => {
+    expect(actions.editTodo(1, 'Use Redux everywhere')).toEqual({
+      type: types.EDIT_TODO,
+      id: 1,
+      text: 'Use Redux everywhere'
+    })
+  })
+
+  it('completeTodo should create COMPLETE_TODO action', () => {
+    expect(actions.completeTodo(1)).toEqual({
+      type: types.COMPLETE_TODO,
+      id: 1
+    })
+  })
+
+  it('completeAll should create COMPLETE_ALL action', () => {
+    expect(actions.completeAllTodos()).toEqual({
+      type: types.COMPLETE_ALL_TODOS
+    })
+  })
+
+  it('clearCompleted should create CLEAR_COMPLETED action', () => {
+    expect(actions.clearCompleted()).toEqual({
+      type: types.CLEAR_COMPLETED
+    })
+  })
+})

examples/blogs__element-coverage/src/actions/index.spec.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import Header from '../containers/Header'
+import MainSection from '../containers/MainSection'
+
+const App = () => (
+  <div>
+    <Header />
+    <MainSection />
+  </div>
+)
+
+export default App

examples/blogs__element-coverage/src/components/App.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { createRenderer } from 'react-test-renderer/shallow'
+import App from './App'
+import Header from '../containers/Header'
+import MainSection from '../containers/MainSection'
+
+
+const setup = propOverrides => {
+  const renderer = createRenderer()
+  renderer.render(<App />)
+  const output = renderer.getRenderOutput()
+  return output
+}
+
+describe('components', () => {
+  describe('Header', () => {
+    it('should render', () => {
+      const output = setup()
+      const [ header ] = output.props.children
+      expect(header.type).toBe(Header)
+    })
+  })
+  
+  describe('Mainsection', () => {
+    it('should render', () => {
+      const output = setup()
+      const [ , mainSection ] = output.props.children
+      expect(mainSection.type).toBe(MainSection)
+    })
+  })
+})