🚀 Feature: Highlight browser failures in red

[tj]

to make it more obvious without wasting eye-movement effort to look at the count haha. I prefer github.com/visionmedia/mocha-matrix for this reason but it's not a good fit as a default

[danielstjules]

I agree that'd be helpful :) So far, failures aren't generally obvious unless they're early in the suite:

I'll a submit a PR that adds a horizontal bar in the header. It could be light grey while running, green if it passed, and red if it failed.

[mayankshah1607]

Hi. I am new here and would like to contribute.
From what I understand, when a test suite fails, messages must be displayed in red and if success, messages must be displayed in green. From what I know, I think mocha already does this. I would like to know what must be done exactly, and would like a deeper insight to this issue.

Thank you! :)

[dhuang612]

Hi,

is this available to work on?

[outsideris]

Sure

[dhuang612]

created pr #4082

[dhuang612]

updated pr with new code and included screenshots.

Please let me know if anything else needs to be changed

[dhuang612]

I see a ref to the new pr but just wanted to make sure you guys were aware.

created a new pr for this issue:
#4148

[pedro-qwkin]

Why isn't this merged?

[dhuang612]

@outsideris Hi can I get an update on my PR?
#4148

[outsideris]

@dhuang612 We missed it. I will check your PR.

[fzn0x]

Hi @outsideris is it available to work on? I don't see any progress from the latest PR above

[mark-wiemer]

#4148 looks like it can be resurrected, I'll see what I can do tomorrow :)

[mark-wiemer]

FYI #5218 is ready for review :)

[JoshuaKGoldberg]

Thanks @mark-wiemer! Coming over from #5218 (comment): my personal take is that the best implementation for this issue would be one that doesn't change page layout. From that comment: the taller the summary section, the less fits on the page in smaller viewports. A lot of people are accustomed to the placement as-is.

The border treatment you have in #5218 could get the job done, but colored borders tend to necessitate margin & padding to look good. Which means it might be hard to get that to look good without changing layout.

Proposal: how about modifying the color on failure for text & progress circle stroke? Say, darkred in light mode & #ffcccb in dark mode?

	Fail
Dark
Light

From an accessibility perspective, the summary already indicates the pass/fail status with failures: ..., so the UI wouldn't be relying solely on color to convey information.

[mark-wiemer]

Text color changes sound fine by me! I'll see what I can do :)

[mark-wiemer]

How do you feel about adding the X to indicate a failure as well? I thought that was a nice super clear item that stands out even in black and white, and it doesn't make the view any taller!

[JoshuaKGoldberg]

I like that idea 🙂. Thinking: there's already a green ✔ or red X put on individual tests once their status is known. So this would be putting the same treatment on the summary?

1. As soon as a failure happens, the red X
2. If all tests are done and there was no failure, the green ✔

Is that what you're thinking? 👍 from me on that if so.

[mark-wiemer]

I think that would be best, yes. I'd add a green check even if some tests were skipped. Basically once all tests complete, green check unless any test failed. If any failures, red X :)

[mark-wiemer]

Hey @JoshuaKGoldberg I'm not sure about coloring the progress circle and its inner text as red or green. To me that could be read as "all tests failed" or "100%" of tests failed, where someone may expect a "99%/1%" text to indicate 1% failed. Additionally, highlighting the whole circle red might be read as "all tests failed" when that's not really what it means.

For now, I think the green text of passes and failures, plus the new result indicator, is sufficient:

[mark-wiemer]

#5222 is ready for review :)

[JoshuaKGoldberg]

I'm not sure about coloring the progress circle and its inner text as red or green ...

Oh, good point. Agreement from me on not changing it for now then 🙂.

For now, I think the green text of passes and failures, plus the new result indicator, is sufficient:

Looks great!

What do you think about also coloring the numbers, like failures: 1 instead of just failures? I found it odd at first to read just the label in the new color.

[mark-wiemer]

coloring the numbers as well works for me, let me update it :)