feat: working on running all component tests together

[bahmutov]

• Closes Component tests not run when clicking 'Run n specs' button #8203

User facing changelog

Run all integration specs or all component specs (or filtered list of specs) by clicking the appropriate button, see the video below

Additional details

How has the user experience changed?

PR Tasks

• display the number of filtered specs for each type inside the button, like "Run 1 spec" for integration and "Run 5 specs" for component button below

Implemented

• remove the original "Run all specs" button, since now we have two separate buttons
• update the button text and labels depending on the running situation

Notes

I have looked how the current implementation in develop sets the active class on the clicked spec, or on all running specs, and have left it as is. But I think it is incorrect and in the future we should fix it. Right now, when you click on a single spec, it starts running, BUT the "Running All Specs" button is still enabled, since it does not have "active" class. Thus you can click on it, which seems wrong. I think it should be required to stop running spec first before clicking on the "Run all ..." button is allowed.

• @jennifer-shehane likes UI
• Have tests been added/updated?
• Has the original issue been tagged with a release in ZenHub?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[cypress]

---

Test summary

3855 • 0 • 55 • 1

---

Run details

Project	cypress
Status	Passed
Commit	deef398
Started	Nov 3, 2020 6:47 AM
Ended	Nov 3, 2020 6:57 AM
Duration	10:48 💡
OS	Linux Debian - 10.2
Browser	Firefox 77

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[jennifer-shehane]

This closes this issue: #8203

The concept seems fine to me to move forward. Just need to fix some css and add some tests. 👍

1. The 'running' text runs into the scrollbar if its present on the list.

2. The 'running' button also floats above the scrolled list when you scroll.

[bahmutov]

Fixed positions on scroll

Now just updating the tests

[bahmutov]

Current problem - while all tests are running, the user can change the search mask - and the label on the button changes

I might just change that label to be "Running integration specs" instead of being explicit "Running N integration specs"

[jennifer-shehane]

You gotta love CSS. The expand arrow was now comically tiny, I fixed this.

Nitpick: The spec name shown in the Test Runner doesn't seem to match the new logic. Maybe this isn't that important.

• It always shows 'All Specs' for either integration/component tests.

• As well as the filtered specs (this matched 2 integration and 2 component tests), and I ran component tests but it just says 'specs matching "nav"'.

I also just realized we're mixing 'specs' and 'tests' terminology. The tab says 'Tests', the panel says 'Tests', but the buttons / titles in the Test Runner say 'specs'. I'm mostly just talking out loud about this.

[bahmutov]

@jennifer-shehane you are right - the problem is that the browser has very little info about what it is running. This even creates problems for the desktop-gui, since it gets an even from the browser "running tests" and all it knows is the URL, but not the type of the tests for example, or the search pattern. That should be refactored I feel in a separate PR to be consistent and good.