feat: spy on window.alert

Author: bahmutov

README.md

@@ -501,6 +501,10 @@ it('can display mock XHR response', () => {
 })
 ```
 
+### Spying on `window.alert`
+
+Calls to `window.alert` are automatically recorded, but do not show up. Instead you can spy on them, see [AlertMessage.vue](components/AlertMessage.vue) and its test [cypress/integration/alert-spec.js](cypress/integration/alert-spec.js)
+
 ## Bundling
 
 How do we load this Vue file into the testing code? Using webpack preprocessor.

components/AlertMessage.vue

@@ -0,0 +1,14 @@
+<template>
+    <button @click="handleClick">Alert me</button>
+</template>
+
+<script>
+  export default {
+    name: 'AlertMessage',
+    methods: {
+      handleClick() {
+        alert('Hello Vue')
+      }
+    }
+  }
+</script>

cypress/integration/alert-spec.js

@@ -0,0 +1,18 @@
+import AlertMessage from '../../components/AlertMessage.vue'
+const mountVue = require('../..')
+
+/* eslint-env mocha */
+describe('AlertMessage', () => {
+  beforeEach(mountVue(AlertMessage))
+  it('loads', () => {
+    cy.get('button').should('be.visible')
+  })
+
+  it('calls window.alert', () => {
+    const spy = cy.spy().as('alert')
+    cy.on('window:alert', spy)
+    cy.get('button').click()
+    cy.get('@alert').should('have.been.calledOnce')
+    cy.get('@alert').should('have.been.calledWith', 'Hello Vue')
+  })
+})

src/index.js

@@ -136,6 +136,11 @@ function setXMLHttpRequest (w) {
   return w
 }
 
+function setAlert (w) {
+  window.alert = w.alert
+  return w
+}
+
 // the double function allows mounting a component quickly
 // beforeEach(mountVue(component, options))
 const mountVue = (component, optionsOrProps = {}) => () => {
@@ -158,6 +163,7 @@ const mountVue = (component, optionsOrProps = {}) => () => {
   return cy
     .window({ log: false })
     .then(setXMLHttpRequest)
+    .then(setAlert)
     .its('Vue')
     .then(Vue => {
       installMixins(Vue, options)