Fix timeout progress bar for cy.wait

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

@@ -76,6 +76,16 @@ export default class Command extends Instrument {
     this.renderProps = props.renderProps || {}
     this.visible = props.visible
 
+    if (this.timeout !== props.timeout) {
+      const timeElapsed = Date.now() - new Date(this.wallClockStartedAt).getTime()
+      const percentageComplete = timeElapsed / this.timeout
+      const newTimeout = (props.timeout - timeElapsed) / (1 - percentageComplete)
+      const newPosition = percentageComplete * newTimeout - timeElapsed
+
+      this.timeout = newTimeout
+      this.wallClockStartedAt = new Date(new Date(this.wallClockStartedAt).getTime() - newPosition).toJSON()
+    }
+
     this._checkLongRunning()
   }
 

packages/reporter/src/commands/command.tsx

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