Debug 1.1 - Show Running Build details

[warrensplayer]

Current behavior

On the Debug page, if the only runs found that match any of the commit shas passed to the Cloud are RUNNING, then the empty state that shows the count of specs that have completed is shown and updated every 15 seconds. When the build completes, the empty state spec count is replaced with either a success message if no failed tests are reported, or else the failed tests are displayed.

On the Debug page, if a completed build is found and shown on the page, and a newer run is found with the RUNNING status, a banner is shown at the top of the page just below the header that shows the count of completed and total specs for the RUNNING build and is updated every 15 seconds. When that build completes, the banner updates to show a "View run" link. Clicking that link will update the Debug page to show the details for that completed run.

Desired behavior

---

Testing in progress banner

On the Debug page, if the current run is in a RUNNING status, replace the empty state with just the count of specs completed vs total with the following:

• Show a banner at the top of the page that contains the run progress with the following states:
  • While tests are being recorded
    • Show copy "Testing in progress..." with the spec counts "X of X spec completed"
    • Show progress bar with percent complete calculated by the ratio of specs completed vs total
    • Right most part of the progress bar will have a different color background to indicate the "delayed completion" stage of a run. Hovering over this will show a tooltip (see copy below)

• When run enters the "waiting for completion" phase
  • Add additional message that says "Scheduled to complete in X seconds". The seconds should be calculated from the new XXXX timestamp field. The seconds should dynamically count down to 0.
  • If the time to completion passes (i.e. the countdown reaches 0), change the copy to say "Schedule to complete soon". This should be rare or only while waiting on a Cloud query to return, etc.

NOTE Removing from the scope for this issue the UI element in the progress bar shown below and the tooltip

Delayed completion tooltip copy

• Title
  • Run completion delay
• Body
  • Run will wait for new groups to join before transitioning to 'completed'. Edit delay in project settings

---

New empty state copy while running

• Show empty state copy when no failed tests have been returned
  • Update DebugPendingRunSpash to have a title of "Testing in progress..." and a sub title of "Failures will be displayed here"

• If the run enters the "scheduled to complete" phase and there are no failures, the empty state copy should update to say "Scheduled to complete..."

---

Showing failed tests while RUNNING

• Show failed tests while the run is RUNNING
  • Allow the debug container to show the failed tests, even when the run is in the RUNNING status
  • Update the poller in RelevantRunSpecsDataSource to track count of failed tests and emit on the relevantRunChange subscription if the test counts change. This will cause the GQL query in the Debug page to refetch.
  • When new data is returned from the Cloud that should update what failed tests are shown, these should animate in so that the change in the page is not janky. Updates may be needed in DebugContainer in the way the data is mapped in the computed value debugSpecsArray to support this.
    • Animations
      • Make use of Vue's Transition and TransitionGroup if possible. The desire is to do the animations with CSS and not rely on javascript. You can make use of the "move" part of the TransitionGroup to allow them to change position if new ones sort earlier then previously shown ones.
      • New spec
      • New test(s) within a spec
      • Spec changing from 1 group to multiple groups
      • Adding an additional group to a spec that already has multiple groups

---

Add a way to switch to a running run

• Add a "Switch to run" link to the DebugNewRelevantRunBar when status is RUNNNIG
  • Allow a user to switch seeing a RUNNING run from a completed run. Clicking the view run button should use the same mutation to switch the current run to the newest run in the RUNNING state

References

Figma - https://www.figma.com/file/PAOozuCxtfetqP8fUVvg0y/branch/QkCp2F69X0qyLo7qnYQ67e/Cypress-App?node-id=23626%3A225092&t=gSNW0CyMgqjwNqp0-1
Figma animation prototype - https://www.figma.com/proto/PAOozuCxtfetqP8fUVvg0y/branch/QkCp2F69X0qyLo7qnYQ67e/Cypress-App?node-id=24179%3A256286&scaling=min-zoom&page-id=21010%3A176355&starting-point-node-id=24179%3A256286&show-proto-sidebar=1

[warrensplayer]

Hey team! Please add your planning poker estimate with Zenhub @astone123 @lmiller1990 @marktnoonan @mike-plummer @ZachJW34

[lmiller1990]

Testing GraphQL is still a bit of an opened ended question - there's an example of how you can do it here: #25601 but documentation is still required.

I'm guessing for development, the best way is to create a project with the actual state described in each of the stories and test against that (you could capture the JSON data and test drive it, if you like, by replicating the setup in #25601).

[cypress-bot]

Released in 12.8.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.8.0, please open a new issue.