Fix timeout progress bar for cy.wait (#7882)

Co-authored-by: Jennifer Shehane <jennifer@cypress.io>

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

@@ -1123,6 +1123,103 @@ describe('src/cy/commands/waiting', () => {
           })
         })
       })
+
+      describe('timeouts', function () {
+        it('sets default requestTimeout', {
+          requestTimeout: 199,
+        }, function (done) {
+          cy.on('command:retry', () => {
+            expect(this.lastLog.get('timeout')).to.eq(199)
+
+            done()
+          })
+
+          cy
+          .server()
+          .route('GET', '*', {}).as('fetch')
+          .wait('@fetch')
+        })
+
+        it('sets custom requestTimeout', function (done) {
+          cy.on('command:retry', () => {
+            expect(this.lastLog.get('timeout')).to.eq(199)
+
+            done()
+          })
+
+          cy
+          .server()
+          .route('GET', '*', {}).as('fetch')
+          .wait('@fetch', { requestTimeout: 199 })
+        })
+
+        it('sets default responseTimeout', {
+          responseTimeout: 299,
+        }, function (done) {
+          cy.on('command:retry', () => {
+            expect(this.lastLog.get('timeout')).to.eq(299)
+
+            done()
+          })
+
+          cy
+          .server({ delay: 100 })
+          .route('GET', '*', {}).as('fetch')
+          .window().then((win) => {
+            xhrGet(win, '/foo')
+
+            return null
+          })
+          .wait('@fetch')
+        })
+
+        it('sets custom responseTimeout', function (done) {
+          cy.on('command:retry', () => {
+            expect(this.lastLog.get('timeout')).to.eq(299)
+
+            done()
+          })
+
+          cy
+          .server({ delay: 100 })
+          .route('GET', '*', {}).as('fetch')
+          .window().then((win) => {
+            xhrGet(win, '/foo')
+
+            return null
+          })
+          .wait('@fetch', { responseTimeout: 299 })
+        })
+
+        it('updates to requestTimeout and responseTimeout at the proper times', function (done) {
+          let log
+          let retryCount = 0
+
+          cy.on('command:retry', () => {
+            log = log || this.lastLog
+            retryCount++
+            if (retryCount === 1) {
+              expect(log.get('timeout')).to.eq(100)
+
+              // trigger request to move onto response timeout verification
+              const win = cy.state('window')
+
+              xhrGet(win, '/foo')
+            }
+
+            if (retryCount === 2) {
+              expect(log.get('timeout')).to.eq(299)
+
+              done()
+            }
+          })
+
+          cy
+          .server({ delay: 100 })
+          .route('GET', '*', {}).as('fetch')
+          .wait('@fetch', { requestTimeout: 100, responseTimeout: 299 })
+        })
+      })
     })
   })
 })

packages/driver/src/cy/commands/waiting.js

@@ -35,7 +35,7 @@ module.exports = (Commands, Cypress, cy, state) => {
 
     if (options.log !== false) {
       options._log = Cypress.log({
-        timeout: cy.timeout(),
+        timeout: ms,
         consoleProps () {
           return {
             'Waited For': `${ms}ms before continuing`,
@@ -55,7 +55,6 @@ module.exports = (Commands, Cypress, cy, state) => {
 
     if (options.log !== false) {
       log = options._log = Cypress.log({
-        timeout: options.timeout,
         type: 'parent',
         aliasType: 'route',
         options: userOptions,
@@ -156,13 +155,21 @@ module.exports = (Commands, Cypress, cy, state) => {
         options = _.omit(options, '_runnableTimeout')
         options.timeout = requestTimeout || Cypress.config('requestTimeout')
 
+        if (log) {
+          log.set('timeout', options.timeout)
+        }
+
         return checkForXhr(alias, 'request', index, num, options)
       }
 
       const waitForResponse = () => {
         options = _.omit(options, '_runnableTimeout')
         options.timeout = responseTimeout || Cypress.config('responseTimeout')
 
+        if (log) {
+          log.set('timeout', options.timeout)
+        }
+
         return checkForXhr(alias, 'response', index, num, options)
       }
 

packages/reporter/src/commands/command-model.ts

@@ -77,6 +77,7 @@ export default class Command extends Instrument {
     this.numElements = props.numElements
     this.renderProps = props.renderProps || {}
     this.visible = props.visible
+    this.timeout = props.timeout
 
     this._checkLongRunning()
   }

packages/reporter/src/commands/command.tsx

@@ -121,9 +121,10 @@ const Progress = observer(({ model }: ProgressProps) => {
   const timeRemaining = model.timeout ? model.timeout - timeElapsed : 0
   const percentageRemaining = timeRemaining / model.timeout * 100 || 0
 
+  // we add a key to the span to ensure a rerender and restart of the animation on change
   return (
     <div className='command-progress'>
-      <span style={{ animationDuration: `${timeRemaining}ms`, width: `${percentageRemaining}%` }} />
+      <span style={{ animationDuration: `${timeRemaining}ms`, width: `${percentageRemaining}%` }} key={timeRemaining} />
     </div>
   )
 })