show how components window is same as specs

Author: bahmutov

README.md

@@ -162,7 +162,7 @@ Spec | Description
 [fails-correctly](cypress/component/basic/fails-correctly) | Cypress test fails correctly when interacting with disabled elements
 [pure-component-spec.js](cypress/component/basic/pure-component.spec.js) | Tests stateless component
 [stateless-spec.js](cypress/component/basic/stateless-spec.js) | Passes Cypress stub to the component, confirms the component calls it on click
-[window-spec.js](cypress/component/basic/window-spec.js) | In the component test, the spec `window` and the application's `window` where the component is running should be the same object
+[window](cypress/component/basic/window) | In the component test, the spec `window` and the application's `window` where the component is running should be the same object
 [css](cypress/component/basic/css) | Shows that component with `import './Button.css'` works
 [css modules](cypress/component/basic/css-modules) | Shows that component that using css modules styles works
 [network](cypress/component/basic/network) | Confirms we can use `cy.route` to stub / spy on component's network calls

cypress/component/basic/window/README.md

@@ -0,0 +1,3 @@
+# window
+
+When running a component test, the spec's `window` and the component's `window` is the same object. See [spec.js](spec.js) and [component.js](component.js)

cypress/component/basic/window/component.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+export class Component extends React.Component {
+  constructor(props) {
+    super(props)
+    console.log(
+      'set window.counter to this component in window',
+      window.location.pathname,
+    )
+    window.component = this
+    // save the reference to the window object
+    // as "seen" by the component
+    window.componentsWindow = window
+  }
+
+  render() {
+    return <p>component</p>
+  }
+}

cypress/component/basic/window-spec.js renamed to cypress/component/basic/window/spec.js

@@ -1,21 +1,7 @@
 /// <reference types="cypress" />
 import React from 'react'
 import { mount } from 'cypress-react-unit-test'
-
-export class Component extends React.Component {
-  constructor(props) {
-    super(props)
-    console.log(
-      'set window.counter to this component in window',
-      window.location.pathname,
-    )
-    window.component = this
-  }
-
-  render() {
-    return <p>component</p>
-  }
-}
+import { Component } from './component'
 
 it('has the same window from the component as from test', () => {
   cy.window()
@@ -24,12 +10,17 @@ it('has the same window from the component as from test', () => {
     .and('not.equal', 'blank')
 
   mount(<Component />)
+
   cy.contains('component')
   cy.window()
     .its('location.pathname')
     // this filename
-    .should('match', /window-spec\.js$/)
+    .should('match', /window\/spec\.js$/)
 
   // the window should have property set by the component
   cy.window().should('have.property', 'component')
+
+  // the "window" object as seen by the component
+  // is the window object of the spec code
+  cy.window().should('have.property', 'componentsWindow', window)
 })