fix(component-testing): make content adjust to size of window (#14876)

Author: Barthélémy Ledoux

npm/react/cypress/component/viewport-spec.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { mount } from '@cypress/react'
+
+const viewportWidth = 200
+const viewportHeight = 100
+
+describe('cypress.json viewport',
+  { viewportWidth, viewportHeight },
+  () => {
+    it('should have the correct dimensions', () => {
+      // cy.should cannot be the first cy command we run
+      cy.window().should((w) => {
+        expect(w.innerWidth).to.eq(viewportWidth)
+        expect(w.innerHeight).to.eq(viewportHeight)
+      })
+    })
+  })
+
+describe('cy.viewport', () => {
+  it('should resize the viewport', () => {
+    cy.viewport(viewportWidth, viewportHeight).should(() => {
+      expect(window.innerWidth).to.eq(viewportWidth)
+      expect(window.innerHeight).to.eq(viewportHeight)
+    })
+  })
+
+  it('should make it scale down when overflowing', () => {
+    mount(<p>
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+      Incidunt necessitatibus quia quo obcaecati tempora numquam nobis
+      minima libero vel? Nam sequi iusto quod fugit vel rerum eligendi beatae voluptatibus numquam.
+    </p>)
+
+    expect(getComputedStyle(window.parent.document.querySelector('iframe').parentElement).transform).to.contain('matrix(1')
+    cy.viewport(2000, 200).should(() => {
+      expect(getComputedStyle(window.parent.document.querySelector('iframe').parentElement).transform).not.to.contain('matrix(1')
+    })
+  })
+})

npm/react/cypress/component/viewport-spec.jsx

@@ -73,7 +73,7 @@ main.app-ct {
 }
 
 .runner-ct {
-  left: $specs-list-offset;
+  left: 0;
 
   header {
     position: static;
@@ -82,6 +82,9 @@ main.app-ct {
     right: unset;
     bottom: unset;
   }
+  .size-container{
+    transform-origin: 0 0;
+  }
 }
 
 .ct-plugins {

packages/runner-ct/src/app/app.scss

@@ -25,12 +25,15 @@ export interface ExtendedConfigOptions extends Cypress.ConfigOptions {
 }
 
 interface AppProps {
-  state: State;
-  // eslint-disable-next-line
+  state: State
   eventManager: typeof EventManager
   config: ExtendedConfigOptions
 }
 
+const DEFAULT_LEFT_SIDE_OF_SPLITPANE_WIDTH = 355
+// needs to account for the left bar + the margins around the viewport
+const VIEWPORT_SIDE_MARGIN = 40 + 17
+
 const App: React.FC<AppProps> = observer(
   function App (props: AppProps) {
     const pluginRootContainer = React.useRef<null | HTMLDivElement>(null)
@@ -40,13 +43,46 @@ const App: React.FC<AppProps> = observer(
     const [pluginsHeight, setPluginsHeight] = React.useState(500)
     const [isResizing, setIsResizing] = React.useState(false)
     const [isSpecsListOpen, setIsSpecsListOpen] = React.useState(true)
+    const [leftSideOfSplitPaneWidth, setLeftSideOfSplitPaneWidth] = React.useState(DEFAULT_LEFT_SIDE_OF_SPLITPANE_WIDTH)
+    const headerRef = React.useRef(null)
+
+    function monitorWindowResize () {
+      // I can't use forwardref in class based components
+      // Header still is a class component
+      // FIXME: use a forwardRef when available
+      const header = headerRef.current.headerRef
+
+      function onWindowResize () {
+        state.updateWindowDimensions({
+          windowWidth: window.innerWidth,
+          windowHeight: window.innerHeight,
+          reporterWidth: leftSideOfSplitPaneWidth + VIEWPORT_SIDE_MARGIN,
+          headerHeight: header.offsetHeight || 0,
+        })
+      }
+
+      window.addEventListener('resize', onWindowResize)
+      window.dispatchEvent(new Event('resize'))
+    }
 
     React.useEffect(() => {
       if (pluginRootContainer.current) {
         state.initializePlugins(config, pluginRootContainer.current)
       }
+
+      monitorWindowResize()
     }, [])
 
+    function onSplitPaneChange (newWidth: number) {
+      setLeftSideOfSplitPaneWidth(newWidth)
+      state.updateWindowDimensions({
+        reporterWidth: newWidth + VIEWPORT_SIDE_MARGIN,
+        windowWidth: null,
+        windowHeight: null,
+        headerHeight: null,
+      })
+    }
+
     return (
       <>
         <main className="app-ct">
@@ -73,6 +109,7 @@ const App: React.FC<AppProps> = observer(
               defaultSize={355}
               onDragStarted={() => setIsResizing(true)}
               onDragFinished={() => setIsResizing(false)}
+              onChange={onSplitPaneChange}
               className={cs('reporter-pane', { 'is-reporter-resizing': isResizing })}
             >
               <div>
@@ -105,7 +142,7 @@ const App: React.FC<AppProps> = observer(
                 }
               >
                 <div className="runner runner-ct container">
-                  <Header {...props} />
+                  <Header {...props} ref={headerRef}/>
                   <Iframes {...props} />
                   <Message state={state}/>
                 </div>

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

@@ -12,14 +12,16 @@ import selectorPlaygroundModel from '../selector-playground/selector-playground-
 
 @observer
 export default class Header extends Component {
-  @observable showingViewportMenu = false
+  headerRef = React.createRef()
+
+  @observable showingViewportMenu = false;
 
   render () {
     const { state, config } = this.props
 
     return (
       <header
-        ref='header'
+        ref={this.headerRef}
         className={cs({
           'showing-selector-playground': selectorPlaygroundModel.isOpen,
         })}
@@ -77,7 +79,7 @@ export default class Header extends Component {
   componentDidUpdate () {
     if (selectorPlaygroundModel.isOpen !== this.previousSelectorPlaygroundOpen) {
       this.props.state.updateWindowDimensions({
-        headerHeight: $(this.refs.header).outerHeight(),
+        headerHeight: this.headerRef.current.offsetHeight,
       })
 
       this.previousSelectorPlaygroundOpen = selectorPlaygroundModel.isOpen

packages/runner-ct/src/header/header.jsx

@@ -26,7 +26,7 @@ export default class Iframes extends Component {
   }
 
   render () {
-    const { height, width, scriptError } = this.props.state
+    const { height, width, scriptError, scale } = this.props.state
 
     return (
       <div className={cs('iframes-ct-container', { 'has-error': !!scriptError })}>
@@ -36,6 +36,7 @@ export default class Iframes extends Component {
           style={{
             height,
             width,
+            transform: `scale(${scale})`,
           }}
         />
         <ScriptError error={scriptError} />

packages/runner-ct/src/iframe/iframes.jsx

@@ -1,41 +1,12 @@
-$cypress_blue: #3380FF;
-$hairline-color: $cypress_blue;
-$hairline-thickness: 1px;
-$hairline-size: min(60px, 80%);
-$hairline-offset: 15px;
-
 .iframes-ct-container {
   margin: 8px;
 }
 
 .size-container {
   width: 100%;
   overflow: auto;
-  resize: both;
   background: none;
   box-shadow: none;
-
-  &:after, &:before {
-    content: "";
-    position: absolute;
-    background: $hairline-color;
-    opacity: .5;
-    padding: -2px;
-  }
-
-  &:after {
-    height: $hairline-size;
-    width: $hairline-thickness;
-    right: 0;
-    bottom: $hairline-offset;
-  }
-
-  &:before {
-    width: $hairline-size;
-    height: $hairline-thickness;
-    right: $hairline-offset;
-    bottom: 0;
-  }
 }
 
 .app-ct .runner {

packages/runner-ct/src/iframe/iframes.scss

@@ -163,7 +163,15 @@ export default class State {
     }
   }
 
-  @action updateWindowDimensions ({ windowWidth, windowHeight, reporterWidth, headerHeight }) {
+  @action updateWindowDimensions ({
+    windowWidth, windowHeight, reporterWidth, headerHeight,
+  }:
+    {
+      windowWidth: number | null
+      windowHeight: number | null
+      reporterWidth: number | null
+      headerHeight: number | null
+    }) {
     if (windowWidth != null) this.windowWidth = windowWidth
 
     if (windowHeight != null) this.windowHeight = windowHeight