Fix issue where progress bar would restart on collapse toggle (#7923)

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

packages/reporter/cypress/integration/tests_spec.ts

@@ -153,6 +153,30 @@ describe('controls', function () {
           expect($span).to.have.css('width', '0px')
         })
       })
+
+      it('recalculates correct width after being closed', function () {
+        const { wallClockStartedAt } = this.runnables.suites[0].suites[0].tests[1].commands[0]
+
+        // take the wallClockStartedAt of this command and add 1000 milliseconds to it
+        // in order to simulate the command having run for 1 second of the total 4000 timeout
+        const date = new Date(wallClockStartedAt).setMilliseconds(1000)
+
+        cy.clock(date, ['Date'])
+        cy.get('.runnable-active').click()
+        cy.get('.command-progress > span').should(($span) => {
+          expect($span.attr('style')).to.contain('animation-duration: 3000ms')
+          expect($span.attr('style')).to.contain('width: 75%')
+        })
+
+        // set the clock ahead as if time has passed
+        cy.tick(2000)
+
+        cy.get('.runnable-active > .collapsible > .runnable-wrapper').click().click()
+        cy.get('.command-progress > span').should(($span) => {
+          expect($span.attr('style')).to.contain('animation-duration: 1000ms')
+          expect($span.attr('style')).to.contain('width: 25%')
+        })
+      })
     })
   })
 })

packages/reporter/src/collapsible/collapsible.spec.tsx

@@ -40,12 +40,6 @@ describe('<Collapsible />', () => {
     expect(component.find('.collapsible-content')).to.have.className('bar')
   })
 
-  it('renders the children', () => {
-    const component = shallow(<Collapsible><main>A child</main></Collapsible>)
-
-    expect(component.find('.collapsible-content main')).to.have.text('A child')
-  })
-
   it('opens when clicking header', () => {
     const component = shallow(<Collapsible />)
 
@@ -53,6 +47,14 @@ describe('<Collapsible />', () => {
     expect(component).to.have.className('is-open')
   })
 
+  it('renders the children only when open', () => {
+    const component = shallow(<Collapsible><main>A child</main></Collapsible>)
+
+    expect(component.find('.collapsible-content')).not.to.have.text('A child')
+    component.find('.collapsible-header').simulate('click', { stopPropagation () {} })
+    expect(component.find('.collapsible-content main')).to.have.text('A child')
+  })
+
   it('closes when clicking header twice', () => {
     const component = shallow(<Collapsible />)
 

packages/reporter/src/collapsible/collapsible.tsx

@@ -64,18 +64,14 @@ class Collapsible extends Component<Props, State> {
           {this.props.headerExtras}
         </div>
         <div className={cs('collapsible-content', this.props.contentClass)}>
-          {this.props.children}
+          {this.state.isOpen && this.props.children}
         </div>
       </div>
     )
   }
 
   _toggleOpen = () => {
-    this.setState({ isOpen: !this.state.isOpen }, () => {
-      if (this.props.toggleOpen) {
-        this.props.toggleOpen(this.state.isOpen)
-      }
-    })
+    this.setState({ isOpen: !this.state.isOpen })
   }
 
   _onClick = (e: MouseEvent) => {

packages/reporter/src/test/test.tsx

@@ -91,7 +91,6 @@ class Test extends Component<Props> {
         headerStyle={{ paddingLeft: indent(model.level) }}
         contentClass='runnable-instruments'
         isOpen={this._shouldBeOpen()}
-        toggleOpen={this._toggleOpen}
       >
         {this._contents()}
       </Collapsible>
@@ -116,9 +115,6 @@ class Test extends Component<Props> {
   }
 
   _contents () {
-    // performance optimization - don't render contents if not open
-    if (!this._shouldBeOpen()) return null
-
     const { model } = this.props
 
     return (

packages/runner/cypress/integration/reporter.errors.spec.js

@@ -91,6 +91,8 @@ const verifyInternalFailure = (props) => {
   cy.get('.runnable-err-message')
   .should('include.text', `thrown in ${method.replace(/\./g, '-')}`)
 
+  cy.get('.runnable-err-stack-expander > .collapsible-header').click()
+
   cy.get('.runnable-err-stack-trace')
   .should('include.text', method)