feat: spy on window.alert close #6

Author: bahmutov

README.md

@@ -12,7 +12,7 @@
 
 - [ ] some DOM events are not working when running all tests at once [#4](https://github.com/bahmutov/cypress-react-unit-test/issues/4)
 - [x] cannot mock server XHR for injected components [#5](https://github.com/bahmutov/cypress-react-unit-test/issues/5)
-- [ ] cannot spy on `window.alert` [#6](https://github.com/bahmutov/cypress-react-unit-test/issues/6)
+- [x] cannot spy on `window.alert` [#6](https://github.com/bahmutov/cypress-react-unit-test/issues/6)
 
 ## Install
 
@@ -116,6 +116,7 @@ All components are in [src](src) folder. All tests are in [cypress/integration](
 * [stateless-spec.js](cypress/integration/stateless-spec.js) shows testing a stateless component from [stateless.jsx](src/stateless.jsx)
 * [transpiled-spec.js](cypress/integration/stateless-spec.js) shows testing a component with class properties syntax from [transpiled.jsx](src/stateless.jsx)
 * [users-spec.js](cypress/integration/users-spec.js) shows how to observe XHR requests, mock server responses for component [users.jsx](src/users.jsx)
+* [alert-spec.js](cypress/integration/alert-spec.js) shows how to spy on `window.alert` calls from your component [stateless-alert.jsx](src/stateless-alert.jsx)
 
 ## Large examples
 

cypress/integration/alert-spec.js

@@ -7,7 +7,7 @@ describe('Stateless alert', () => {
   beforeEach(() => {
     const spy = cy.spy().as('alert')
     cy.on('window:alert', spy)
-    mount(<HelloWorld name="Alert" />)
+    mount(<HelloWorld name='Alert' />)
   })
 
   it('shows link', () => {
@@ -18,6 +18,6 @@ describe('Stateless alert', () => {
     cy.contains('Say Hi').click()
     // spy on window:alert is never called
     // https://github.com/bahmutov/cypress-react-unit-test/issues/6
-    // cy.get('@alert').should('have.been.calledOnce')
+    cy.get('@alert').should('have.been.calledOnce')
   })
 })

lib/index.js

@@ -43,6 +43,11 @@ function setXMLHttpRequest (w) {
   return w
 }
 
+function setAlert (w) {
+  window.alert = w.alert
+  return w
+}
+
 /* eslint-env mocha */
 export const mount = jsx => {
   // include React and ReactDOM from CDN to force DOM to register all DOM event listeners
@@ -61,6 +66,7 @@ export const mount = jsx => {
 
   cy.window({log: false})
     .then(setXMLHttpRequest)
+    .then(setAlert)
     .its('ReactDOM.render')
     .then(render => {
       Cypress._component = render(jsx, document.getElementById('app'))