add example: how to stub console.log (#346)

* add example: how to stub console.log

* Update Readme to include console example

* update circle.yml

add console build and missing window stubbing build

* remove extra cypress files that are unnecessary to show example

* replace stub with spy (it is not stubbing but only spying on call)

- formatting from eslint

* update test

* rename file

* add screenshot

* Delete snapshots.js

* Update README.md

Co-Authored-By: Gleb Bahmutov <gleb.bahmutov@gmail.com>


Co-authored-by: Jennifer Shehane <jennifer@cypress.io>
Co-authored-by: Gleb Bahmutov <gleb.bahmutov@gmail.com>

Author: 3 people

README.md

@@ -72,6 +72,7 @@ Recipe | Description
 [Stubbing `window.fetch`](./examples/stubbing-spying__window-fetch) | Use `cy.stub()` to control fetch requests
 [Stubbing methods called on `window`](./examples/stubbing-spying__window) | Use `cy.stub()` for methods called on `window`
 [Stubbing Google Analytics](./examples/stubbing-spying__google-analytics) | Use `cy.stub()` to test Google Analytics calls
+[Spying and stubbing methods on `console` object](./examples/stubbing-spying__console) | Use `cy.spy()` and `cy.stub()` on `console.log`
 
 ## Unit Testing
 

circle.yml

@@ -148,6 +148,10 @@ jobs:
     <<: *defaults
   stubbing-spying__google-analytics:
     <<: *defaults
+  stubbing-spying__window:
+    <<: *defaults
+  stubbing-spying__console:
+    <<: *defaults
   testing-dom__drag-drop:
     <<: *defaults
   testing-dom__form-interactions:
@@ -272,6 +276,12 @@ all_jobs: &all_jobs
   - stubbing-spying__window-fetch:
       requires:
         - build
+  - stubbing-spying__console:
+      requires:
+        - build
+  - stubbing-spying__window:
+      requires:
+        - build        
   - stubbing-spying__google-analytics:
       requires:
         - build
@@ -347,6 +357,8 @@ all_jobs: &all_jobs
         - stubbing-spying__functions
         - stubbing-spying__window-fetch
         - stubbing-spying__google-analytics
+        - stubbing-spying__window
+        - stubbing-spying__console
         - testing-dom__drag-drop
         - testing-dom__form-interactions
         - testing-dom__hover-hidden-elements

examples/stubbing-spying__console/README.md

@@ -0,0 +1,11 @@
+# Stubbing Console
+
+The spec file [cypress/integration/spec.js](cypress/integration/spec.js) shows how to spy on and stub methods of the `console` object.
+
+![Test example](images/console-example.png)
+
+## Learn more
+
+- [`cy.spy()`](https://on.cypress.io/spy)
+- [`cy.stub()`](https://on.cypress.io/stub)
+- [`cy.visit()`](https://on.cypress.io/visit)

examples/stubbing-spying__console/cypress.json

@@ -0,0 +1,5 @@
+{
+  "pluginsFile": false,
+  "supportFile": false,
+  "fixturesFolder": false
+}

examples/stubbing-spying__console/cypress/integration/spec.js

@@ -0,0 +1,44 @@
+/// <reference types="cypress" />
+context('Console', () => {
+  describe('spying on console.log', function () {
+    beforeEach(function () {
+      cy.visit('/index.html', {
+        onBeforeLoad (win) {
+          cy.spy(win.console, 'log').as('consoleLog')
+        },
+      })
+    })
+
+    it('calls console.log with expected text', function () {
+      cy.get('#console-log').click()
+      cy.get('@consoleLog').should('be.calledWith', 'Hello World!')
+    })
+  })
+
+  describe('stubbing console.log', function () {
+    let parameter
+
+    beforeEach(() => {
+      cy.visit('/index.html', {
+        onBeforeLoad (win) {
+          cy.stub(win.console, 'log', (x) => {
+            parameter = x
+          })
+        },
+      })
+    })
+
+    it('waits until stub has been executed and we get a value', function () {
+      cy.get('#console-log').click()
+      // We need to wait until the application calls "console.log"
+      // and our local closure variable "parameter" gets a value.
+      // Using "should(cb)" we force retrying the callback
+      // until all assertions inside pass, see:
+      // https://on.cypress.io/retry-ability
+      // https://on.cypress.io/should#Function
+      cy.should(() => {
+        expect(parameter).to.equal('Hello World!')
+      })
+    })
+  })
+})

examples/stubbing-spying__console/images/console-example.png

@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Stubbing Console</title>
+  </head>
+  <body>
+    <h1>My Application</h1>
+    <ul>
+      <li>
+        <button id="console-log">Log something</button>
+      </li>
+    </ul>
+
+    <script>
+      var btn = document.getElementById('console-log')
+
+      btn.addEventListener('click', function(event) {
+        // let's introduce an async behavior just for fun
+        setTimeout(() => {
+          console.log("Hello World!")
+        }, 500)
+      })
+    </script>
+  </body>
+</html>

examples/stubbing-spying__console/index.html

@@ -0,0 +1,10 @@
+{
+  "name": "stubbing-window",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "start": "echo",
+    "cypress:run": "../../node_modules/.bin/cypress run",
+    "cypress:open": "../../node_modules/.bin/cypress open"
+  }
+}