fix(@cypress/react): Devtools unpredictable resets (#15612)

* fix: Devtools unpredictable resets

* Remove cleaning up from webpack-dev-server

* Fix lint errors

* Get back observer

* fix: bring back cleanup (#15634)

* fix: wait for fw teardown to do html teardown

* fix: port responsibility of teardown to frameworks

* chore: add comments

* fix: typings

* fix: react unmount cannot be called in the right hook

* run dtslint

Co-authored-by: Barthélémy Ledoux <bart@cypress.io>
Co-authored-by: ElevateBart <ledouxb@gmail.com>

cli/types/cypress.d.ts

@@ -527,6 +527,18 @@ declare namespace Cypress {
      * @see https://on.cypress.io/catalog-of-events#App-Events
      */
     off: Actions
+
+    /**
+     * Trigger action
+     * @private
+     */
+    action: (action: string, ...args: any[]) => void
+
+    /**
+     * Load  files
+     * @private
+     */
+    onSpecWindow: (window: Window, specList: string[] | Array<() => Promise<void>>) => void
   }
 
   type CanReturnChainable = void | Chainable | Promise<unknown>

npm/react/cypress/component/advanced/material-ui-example/button-spec.js

@@ -9,3 +9,11 @@ it('renders a button', () => {
     </Button>,
   )
 })
+
+it('renders a button with an icon', () => {
+  mount(
+    <Button variant="contained" color="primary" startIcon="⛹️">
+      Hello World
+    </Button>,
+  )
+})

npm/react/cypress/component/advanced/renderless/mouse-movement.js

@@ -43,6 +43,7 @@ export default class MouseMovement extends React.Component {
     clearTimeout(this.state.timer)
     this.props.onMoved(false)
   }
+
   render () {
     return null
   }

npm/react/cypress/component/advanced/renderless/mouse-spec.js

@@ -31,7 +31,13 @@ describe('Renderless component', () => {
 
     cy.get('@log')
     .invoke('getCalls')
-    .then((calls) => calls.map((call) => call.args[0]))
+    .then((calls) => {
+      return calls.map((call) => {
+        console.log('one', call.args[0])
+
+        return call.args[0]
+      })
+    })
     .should('deep.equal', [
       'MouseMovement constructor',
       'MouseMovement componentWillMount',

npm/react/src/mount.ts

@@ -136,6 +136,12 @@ export const mount = (jsx: React.ReactNode, options: MountOptions = {}) => {
   })
 }
 
+let initialInnerHtml = ''
+
+Cypress.on('run:start', () => {
+  initialInnerHtml = document.head.innerHTML
+})
+
 /**
  * Removes the mounted component. Notice this command automatically
  * queues up the `unmount` into Cypress chain, thus you don't need `.then`
@@ -166,8 +172,17 @@ export const unmount = (options = { log: true }) => {
   })
 }
 
-beforeEach(() => {
-  unmount()
+// Cleanup before each run
+// NOTE: we cannot use unmount here because
+// we are not in the context of a test
+Cypress.on('test:before:run', () => {
+  const el = document.getElementById(ROOT_ID)
+
+  if (el) {
+    const wasUnmounted = ReactDOM.unmountComponentAtNode(el)
+
+    document.head.innerHTML = initialInnerHtml
+  }
 })
 
 /**

npm/vue/cypress/component/basic/code-coverage/Calculator-spec.js

@@ -25,4 +25,27 @@ describe('Calculator', () => {
       expect(includesVue, 'Calculator.vue is instrumented').to.be.true
     })
   })
+
+  it('adds two decimal numbers', () => {
+    cy.viewport(400, 50)
+    mount(Calculator)
+    cy.get('[data-cy=a]').clear().type('22.6')
+    cy.get('[data-cy=b]').clear().type('19.4')
+    cy.contains('= 42')
+
+    cy.log('**check coverage**')
+    cy.wrap(window)
+    .its('__coverage__')
+    // and it includes information even for this file
+    .then(Object.keys)
+    .should('include', Cypress.spec.absolute)
+    .and((filenames) => {
+      // coverage should include Calculator.vue file
+      const includesVue = filenames.some((filename) => {
+        return filename.endsWith('Calculator.vue')
+      })
+
+      expect(includesVue, 'Calculator.vue is instrumented').to.be.true
+    })
+  })
 })

npm/vue/src/index.ts

@@ -307,11 +307,20 @@ function failTestOnVueError (err, vm, info) {
   window.top.onerror(err)
 }
 
-function cyBeforeEach (cb: () => void) {
-  Cypress.on('test:before:run', cb)
+let initialInnerHtml = ''
+
+Cypress.on('run:start', () => {
+  initialInnerHtml = document.head.innerHTML
+})
+
+function registerAutoDestroy ($destroy: () => void) {
+  Cypress.on('test:before:run', () => {
+    $destroy()
+    document.head.innerHTML = initialInnerHtml
+  })
 }
 
-enableAutoDestroy(cyBeforeEach)
+enableAutoDestroy(registerAutoDestroy)
 
 /**
  * Mounts a Vue component inside Cypress browser.

npm/webpack-dev-server/index-template.html

@@ -7,5 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
+    <div id="__cy_root"></div>
   </body>
 </html>

npm/webpack-dev-server/src/aut-runner.ts

@@ -1,46 +1,12 @@
-/* eslint-disable no-console */
 /*eslint-env browser */
 
-function appendTargetIfNotExists (id: string, tag = 'div', parent = document.body) {
-  let node = document.getElementById(id)
-
-  node = document.createElement(tag)
-  node.setAttribute('id', id)
-  parent.appendChild(node)
-
-  return node
-}
-
-export function init (importPromises, parent = (window.opener || window.parent)) {
-  const Cypress = (window as any).Cypress = parent.Cypress
+export function init (importPromises, parent: Window = (window.opener || window.parent)) {
+  const Cypress = window.Cypress = parent.Cypress
 
   if (!Cypress) {
     throw new Error('Tests cannot run without a reference to Cypress!')
   }
 
   Cypress.onSpecWindow(window, importPromises)
   Cypress.action('app:window:before:load', window)
-
-  // In this variable, we save head
-  // innerHTML to account for loader installed styles
-  let headInnerHTML = ''
-
-  // before the run starts save
-  Cypress.on('run:start', () => {
-    headInnerHTML = document.head.innerHTML
-  })
-
-  // Before all tests we are mounting the root element, **not beforeEach**
-  // Cleaning up platform between tests is the responsibility of the specific adapter
-  // because unmounting react/vue component should be done using specific framework API
-  // (for devtools and to get rid of global event listeners from previous tests.)
-  Cypress.on('test:before:run', () => {
-    document.body.innerHTML = ''
-    document.head.innerHTML = headInnerHTML
-    appendTargetIfNotExists('__cy_root')
-  })
-
-  return {
-    restartRunner: Cypress.restartRunner,
-  }
 }

npm/webpack-dev-server/src/window.d.ts

@@ -0,0 +1,8 @@
+/**
+ * We need this file to call window.Cypress
+ */
+export declare global {
+  interface Window {
+    Cypress: Cypress.Cypress;
+  }
+}

npm/webpack-dev-server/tsconfig.json

@@ -17,14 +17,14 @@
     "outDir": "dist" /* Redirect output structure to the directory. */,
     // "rootDir": "src",                         /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "removeComments": true,                /* Do not emit comments to output. */
-//     "noEmit": true,                        /* Do not emit outputs. */
+    //     "noEmit": true,                        /* Do not emit outputs. */
     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
     /* Strict Type-Checking Options */
     "strict": false /* Enable all strict type-checking options. */,
-    "noImplicitAny": false,
+    // "noImplicitAny": true,
 
     /* Module Resolution Options */
     // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
@@ -48,6 +48,5 @@
     "esModuleInterop": true
   },
   "include": ["src"],
-  "exclude": ["*.js"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "*.js"]
 }

packages/runner-ct/index.d.ts

@@ -2,13 +2,16 @@
 /// <reference path="../../cli/types/cypress.d.ts" />
 
 declare module 'react-devtools-inline/frontend' {
-  import * as React from 'react'
-
   export type DevtoolsProps = { browserTheme: 'dark' | 'light'}
   export const initialize: (window: Window) => React.ComponentType<DevtoolsProps>;
 }
 
 declare module 'react-devtools-inline/backend' {
   export const initialize: (window: Window) => void
   export const activate: (window: Window) => void
+}
+
+declare module "*.scss" { 
+  const value: Record<string, string>
+  export default value
 }

packages/runner-ct/src/app/Plugins.tsx

@@ -12,46 +12,46 @@ import styles from './RunnerCt.module.scss'
 interface PluginsProps {
   state: State
   pluginsHeight: number
-  pluginRootContainerRef: React.MutableRefObject<HTMLDivElement>
 }
 
 export const Plugins = namedObserver('Plugins',
-  (props: PluginsProps) => (
-    <Hidden
-      type="layout"
-      hidden={!props.state.isAnyPluginToShow}
-      className={styles.ctPlugins}
-    >
-      <div className={styles.ctPluginsHeader}>
-        {props.state.plugins.map((plugin) => (
-          <button
-            key={plugin.name}
-            className={cs(styles.ctPluginToggleButton)}
-            onClick={() => props.state.openDevtoolsPlugin(plugin)}
-          >
-            <span className={styles.ctPluginsName}>
-              {plugin.name}
-            </span>
-            <div
-              className={cs(styles.ctTogglePluginsSectionButton, {
-                [styles.ctTogglePluginsSectionButtonOpen]: props.state.isAnyDevtoolsPluginOpen,
-              })}
-            >
-              <FontAwesomeIcon
-                icon='chevron-up'
-                className={styles.ctPluginsName}
-              />
-            </div>
-          </button>
-        ))}
-      </div>
+  (props: PluginsProps) => {
+    const ref = React.useRef<HTMLDivElement>(null)
+
+    return (
       <Hidden
-        ref={props.pluginRootContainerRef}
-        type="layout"
-        className={styles.ctPluginsContainer}
-        // deal with jumps when inspecting element
-        hidden={!props.state.isAnyDevtoolsPluginOpen}
-        style={{ height: props.pluginsHeight - PLUGIN_BAR_HEIGHT }}
-      />
-    </Hidden>
-  ))
+        type="visual"
+        hidden={!props.state.isAnyPluginToShow}
+        className={styles.ctPlugins}
+      >
+        <div className={styles.ctPluginsHeader}>
+          {props.state.plugins.map((plugin) => (
+            <button
+              key={plugin.name}
+              className={cs(styles.ctPluginToggleButton)}
+              onClick={() => props.state.toggleDevtoolsPlugin(plugin, ref.current)}
+            >
+              <span className={styles.ctPluginsName}>
+                {plugin.name}
+              </span>
+              <div
+                className={cs(styles.ctTogglePluginsSectionButton, {
+                  [styles.ctTogglePluginsSectionButtonOpen]: props.state.isAnyDevtoolsPluginOpen,
+                })}
+              >
+                <FontAwesomeIcon
+                  icon='chevron-up'
+                  className={styles.ctPluginsName}
+                />
+              </div>
+            </button>
+          ))}
+        </div>
+        <div
+          ref={ref}
+          className={styles.ctPluginsContainer}
+          style={{ height: props.pluginsHeight - PLUGIN_BAR_HEIGHT }}
+        />
+      </Hidden>
+    )
+  })