Merge remote-tracking branch 'origin/develop' into test-orchestration

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

@@ -31,7 +31,7 @@ describe('cy.viewport', () => {
       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')
+    expect(getComputedStyle(window.parent.document.querySelector('iframe').parentElement).transform).to.contain('matrix(0.8')
     cy.viewport(2000, 200).should(() => {
       expect(getComputedStyle(window.parent.document.querySelector('iframe').parentElement).transform).not.to.contain('matrix(1')
     })

npm/react/releaserc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  ...require('./.releaserc.base'),
+  branches: [
+    'master',
+    { name: 'next/npm/react', channel: 'next', prerelease: 'alpha' },
+  ],
+}

npm/react/src/mount.ts

@@ -166,6 +166,10 @@ export const unmount = (options = { log: true }) => {
   })
 }
 
+beforeEach(() => {
+  unmount()
+})
+
 /**
  * Creates new instance of `mount` function with default options
  * @function   createMount

npm/vite-dev-server/cypress/components/react-no-jsx.spec.tsx

@@ -3,7 +3,22 @@ import { mount } from '@cypress/react'
 import { Foo } from './Foo'
 
 describe('React', () => {
-  it('renders a react component', () => {
+  it('renders a react component #1', () => {
+    mount(<Foo />)
+    cy.get('div').contains('Hello world')
+  })
+
+  it('renders a react component #2', () => {
+    mount(<Foo />)
+    cy.get('div').contains('Hello world')
+  })
+
+  it('renders a react component #3', () => {
+    mount(<Foo />)
+    cy.get('div').contains('Hello world')
+  })
+
+  it('renders a react component #4', () => {
     mount(<Foo />)
     cy.get('div').contains('Hello world')
   })

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

@@ -58,7 +58,7 @@
       Cypress.onSpecWindow(window, importsToLoad)
       Cypress.action('app:window:before:load', window)
 
-      beforeEach(() => {
+      before(() => {
         const root = appendTargetIfNotExists('__cy_root')
 
         root.appendChild(appendTargetIfNotExists('__cy_app'))

packages/driver/cypress/integration/commands/assertions_spec.js

@@ -1425,6 +1425,19 @@ describe('src/cy/commands/assertions', () => {
 
         cy.wrap(buttons).should('have.length', length - 1)
       })
+
+      // https://github.com/cypress-io/cypress/issues/14484
+      it('does not override user-defined error message', (done) => {
+        cy.on('fail', (err) => {
+          expect(err.message).to.contain('Filter should have 1 items')
+
+          done()
+        })
+
+        cy.get('div').should(($divs) => {
+          expect($divs, 'Filter should have 1 items').to.have.length(1)
+        })
+      })
     })
   })
 

packages/driver/src/cy/chai.js

@@ -341,9 +341,12 @@ chai.use((chai, u) => {
                 return `Not enough elements found. Found '${len1}', expected '${len2}'.`
               }
 
-              const newMessage = getLongLengthMessage(obj.length, length)
+              // if the user has specified a custom message,
+              // for example: expect($subject, 'Should have length').to.have.length(1)
+              // prefer that over our message
+              const message = chaiUtils.flag(this, 'message') ? e1.message : getLongLengthMessage(obj.length, length)
 
-              $errUtils.modifyErrMsg(e1, newMessage, () => newMessage)
+              $errUtils.modifyErrMsg(e1, message, () => message)
 
               throw e1
             }

packages/reporter/cypress/integration/spec_title_spec.ts

@@ -24,7 +24,7 @@ describe('spec title', () => {
     start({
       relative: '__all',
       name: '',
-      absolute: '',
+      absolute: '__all',
     })
 
     cy.get('.runnable-header').should('have.text', 'All Specs')
@@ -38,7 +38,7 @@ describe('spec title', () => {
     start({
       relative: '__all',
       name: '',
-      absolute: '',
+      absolute: '__all',
       specFilter: 'cof',
     })
 

packages/reporter/src/runnables/runnables.tsx

@@ -34,13 +34,15 @@ const RunnablesEmptyState = ({ spec, eventManager = events }: RunnablesEmptyStat
     eventManager.emit('studio:init:suite', 'r1')
   }
 
+  const isAllSpecs = spec.absolute === '__all' || spec.relative === '__all'
+
   return (
     <div className='no-tests'>
       <h2>
         <i className='fas fa-exclamation-triangle' /> No tests found.
       </h2>
       <p>Cypress could not detect tests in this file.</p>
-      { spec.absolute !== '__all' && (
+      { !isAllSpecs && (
         <>
           <FileOpener fileDetails={{
             column: 0,

packages/runner-ct/cypress/component/RunnerCt.spec.tsx

@@ -5,6 +5,12 @@ import RunnerCt from '../../src/app/RunnerCt'
 import State from '../../src/lib/state'
 import '@packages/runner/src/main.scss'
 
+const selectors = {
+  reporter: '[data-cy=reporter]',
+  specsList: '[data-cy=specs-list]',
+  searchInput: 'input[placeholder="Find spec..."]',
+}
+
 class FakeEventManager {
   start = () => { }
   on = () => { }
@@ -13,32 +19,22 @@ class FakeEventManager {
 }
 
 const fakeConfig = { projectName: 'Project', env: {}, isTextTerminal: false } as any as Cypress.RuntimeConfigOptions
+const makeState = (options = {}) => (new State({
+  reporterWidth: 500,
+  spec: null,
+  specs: [{ relative: '/test.js', absolute: 'root/test.js', name: 'test.js' }],
+  ...options,
+}))
 
 describe('RunnerCt', () => {
   beforeEach(() => {
     cy.viewport(1000, 500)
   })
 
-  function assertSpecsListIs (state: 'closed' | 'open') {
-    // for some reason should("not.be.visible") doesn't work here so ensure that specs list was outside of screen
-    cy.get('[data-cy=specs-list]').then(($el) => {
-      const { width } = $el[0].getBoundingClientRect()
-
-      // SplitPane adds a 1px margin on the edge. No big deal. That's why the assertions are 1 and 301 instead of 1 and 300.
-      state === 'closed' ? expect(width).to.eq(1) : expect(width).to.eq(301)
-    })
-  }
-
   it('renders RunnerCt', () => {
-    const state = new State({
-      reporterWidth: 500,
-      spec: null,
-      specs: [{ relative: '/test.js', absolute: 'root/test.js', name: 'test.js' }],
-    })
-
     mount(
       <RunnerCt
-        state={state}
+        state={makeState()}
         // @ts-ignore - this is difficult to stub. Real one breaks things.
         eventManager={new FakeEventManager()}
         config={fakeConfig}
@@ -49,15 +45,9 @@ describe('RunnerCt', () => {
   })
 
   it('renders RunnerCt for video recording', () => {
-    const state = new State({
-      reporterWidth: 500,
-      spec: null,
-      specs: [{ relative: '/test.js', absolute: 'root/test.js', name: 'test.js' }],
-    })
-
     mount(
       <RunnerCt
-        state={state}
+        state={makeState()}
         // @ts-ignore - this is difficult to stub. Real one breaks things.
         eventManager={new FakeEventManager()}
         config={{ ...fakeConfig, isTextTerminal: true }}
@@ -69,15 +59,9 @@ describe('RunnerCt', () => {
 
   context('keyboard shortcuts', () => {
     beforeEach(() => {
-      const state = new State({
-        reporterWidth: 500,
-        spec: null,
-        specs: [{ relative: '/test.js', absolute: 'root/test.js', name: 'test.js' }],
-      })
-
       mount(
         <RunnerCt
-          state={state}
+          state={makeState()}
           // @ts-ignore - this is difficult to stub. Real one breaks things.
           eventManager={new FakeEventManager()}
           config={fakeConfig}
@@ -88,17 +72,31 @@ describe('RunnerCt', () => {
     })
 
     it('toggles specs list drawer using shortcut', () => {
+      cy.get(selectors.specsList).should('be.visible')
+
       cy.realPress(['Meta', 'B'])
-      cy.wait(400) // can not wait for this animation automatically :(
-      assertSpecsListIs('closed')
+      cy.get(selectors.specsList).should('not.be.visible')
 
       cy.realPress(['Meta', 'B'])
-      assertSpecsListIs('open')
+      cy.get(selectors.specsList).should('be.visible')
     })
 
     it('focuses the search field on "/"', () => {
       cy.realPress('/')
-      cy.get('input[placeholder="Find spec..."]').should('be.focused')
+      cy.get(selectors.searchInput).should('be.focused')
+    })
+  })
+
+  context('no spec selected', () => {
+    it('hides reporter', () => {
+      mount(<RunnerCt
+        state={makeState({ spec: null })}
+        // @ts-ignore - this is difficult to stub. Real one breaks things.
+        eventManager={new FakeEventManager()}
+        config={fakeConfig} />)
+
+      cy.get(selectors.reporter).should('not.be.visible')
+      cy.percySnapshot()
     })
   })
 })

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

@@ -20,14 +20,15 @@ export const ReporterContainer = observer(
   function ReporterContainer (props: ReporterContainerProps) {
     if (!props.state.spec) {
       return (
-        <div className='no-spec'>
+        <div className='no-spec' data-cy="reporter">
           <NoSpecSelected />
         </div>
       )
     }
 
     return (
       <Reporter
+        data-cy="reporter"
         runMode={props.state.runMode}
         runner={props.eventManager.reporterBus}
         className={cs({ 'display-none': props.state.screenshotting }, styles.reporter)}

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

@@ -56,6 +56,7 @@ $box-shadow-closest: 0px 0px 5px rgba(0, 0, 0, 0.4);
 
 .runner {
   box-shadow: unset;
+  left: 0 !important;
 }
 
 .reporter {