issue-6168: added leading zero to test runner counter in stats.tsx file

[Manuel-Suarez-Abascal]

• Closes The width of the timer in the Test Runner is 'jumpy' #6168

User facing changelog

The timer in the Test Runner now always displays at a consistent length.

Additional Details

I opened this PR to fix issue-6268. I solved the jumpy bug on the runner test timer by adding a leading zero to the header counter.

How has the user experience changed?

PR Tasks

• Has a PR for user-facing changes been opened in cypress-documentation?

[cypress-bot]

Thanks for the contribution! Below are some guidelines Cypress uses when doing PR reviews.

• Please write [WIP] in the title of your Pull Request if your PR is not ready for review - someone will review your PR as soon as the [WIP] is removed.
• Please familiarize yourself with the PR Review Checklist and feel free to make updates on your PR based on these guidelines.

PR Review Checklist

If any of the following requirements can't be met, leave a comment in the review selecting 'Request changes', otherwise 'Approve'.

User Experience

• The feature/bugfix is self-documenting from within the product.
• The change provides the end user with a way to fix their problem (no dead ends).

Functionality

• The code works and performs its intended function with the correct logic.
• Performance has been factored in (for example, the code cleans up after itself to not cause memory leaks).
• The code guards against edge cases and invalid input and has tests to cover it.

Maintainability

• The code is readable (too many nested 'if's are a bad sign).
• Names used for variables, methods, etc, clearly describe their function.
• The code is easy to understood and there are relevant comments explaining.
• New algorithms are documented in the code with link(s) to external docs (flowcharts, w3c, chrome, firefox).
• There are comments containing link(s) to the addressed issue (in tests and code).

Quality

• The change does not reimplement code.
• There's not a module from the ecosystem that should be used instead.
• There is no redundant or duplicate code.
• There are no irrelevant comments left in the code.
• Tests are testing the code’s intended functionality in the best way possible.

Internal

• The original issue has been tagged with a release in ZenHub.

[claassistantio]

All committers have signed the CLA.

[jennifer-shehane]

@Manuel-Suarez-Abascal Thanks for the contribution! Could you please sign our CLA?

[Manuel-Suarez-Abascal]

@Manuel-Suarez-Abascal Thanks for the contribution! Could you please sign our CLA?

You're welcome @jennifer-shehane! I have signed the CLA. Let me know, if you have any questions about my implementation!

[jennifer-shehane]

@Manuel-Suarez-Abascal There's a failing unit test in the file below. Can you address this?

https://github.com/cypress-io/cypress/blob/develop/packages/reporter/src/header/stats.spec.tsx#L19

  1) <Stats />
       duration
         renders -- when zero:

      AssertionError: expected the node in <_class /> to have text '--', but it has '000--'      
     
     HTML:
     
     <span className="num">000--</span>
      + expected - actual

      -000--
      +--
      
      at Context.<anonymous> (src/header/stats.spec.tsx:64:56)
      at processImmediate (internal/timers.js:439:21)

[Manuel-Suarez-Abascal]

@Manuel-Suarez-Abascal There's a failing unit test in the file below. Can you address this?

@jennifer-shehane I have addressed the failing unit test. The solution has passed all tests now!

[jennifer-shehane]

This is great. Thanks for addressing the test failure also. 💯

[kuceb]

Why not add a min-width and right-align the text? the leading zero only adds visual clutter

if you want you can use toFixed(2) to force 2 decimal places

[jennifer-shehane]

The leading zero is only up until 10 secs and they are using .toFixed(2) to force 2 decimal places. I think this will look better than min-width with a weird space on the left.