-
Notifications
You must be signed in to change notification settings - Fork 3.3k
misc: Reporter redesign #31914
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
misc: Reporter redesign #31914
Conversation
cypress
|
Project |
cypress
|
Branch Review |
mabel/issue-31677-reporter-redesign
|
Run status |
|
Run duration | 18m 30s |
Commit |
|
Committer | mabela416 |
View all properties for this run ↗︎ |
Test results | |
---|---|
|
0
|
|
1
|
|
28
|
|
0
|
|
587
|
View all changes introduced in this branch ↗︎ |
UI Coverage
0%
|
|
---|---|
|
4
|
|
0
|
Accessibility
97.09%
|
|
---|---|
|
0 critical
1 serious
0 moderate
0 minor
|
|
4
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@mabela416 So many changes, thanks for seeing this work through! I have some comments on a few things initially.
On hover of commands, there is a slight rounded corner on all of the right corners, when there shouldn't be for corners that are not first/last.
Is it possible to have this bottom left corner look more rounded when the test is open?
Is this the right hover state for tests? I assumed it would be this lighter focus style.
This juxtaposition of the failure block with the test logs looks strange to me.
When you hover over a describe, the icon changes to an arrow, but when you click the describe - that arrow icon doesn't rotate to show the described as closed.
Also, the icon stays that way after click/focus and does not go back to the old icon when I hover away from the describe. Seems odd.
The 'Open in IDE' button when hovering over a Before Each doesn't seem centered.
The jump that the test does from the 1px border to the 2px border doesn't feel fluid.
Screen.Recording.2025-06-23.at.12.00.38.PM.mov
We need some margin-bottom on the tests list - when you scroll all the way down it sits there so close to the bottom edge like it's not the end.
I don't think the New Test button should overlap the text of the Describe, it's a bit weird copying the text or seeing it if I want in this case.
The attempt styling needs to be accounted for - the lines connecting them look strange here.
This describe icon feels strange flashing back and forth between pending/queued? Maybe it's not too weird, I don't know.
Screen.Recording.2025-06-23.at.12.10.12.PM.mov
This blue line that shows on the commandTimeout - when it burns down should have that highlighted gray color, not the dark black color.
Screen.Recording.2025-06-23.at.12.12.59.PM.mov
Yeah this is the figma for the test hover state https://www.figma.com/design/XYBgOykHfLCi1yT4Va7GLO/Studio-Test-generation?node-id=3607-170837&t=33uO9ue4ojx1TNL4-4 The lighter focus style is only for when the user focuses the test by tabbing |
This is part of the design here |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@mabela416 Is this spacing accurate when all the describes are collapsed? Seems like some unnecessary
vertical spacing in between.
Some strange states in Studio I think (I know this will go away fairly soon though)
-
I don't think the describe here should show the purple left line
-
This 'interact with your site' has a weird blue line on the left
This hover over hooks looks a bit strange with it not taking up the full width or not having rounded corners like others. Maybe it's fine, just want to check.
Also - the open in IDE icon doesn't seem centered with the text
The test is still inching to left and right by 1px when opening/collapsing
Screen.Recording.2025-06-25.at.3.57.38.PM.mov
This stack trace error seems like it uses more vertical height than it needs to - just confirm design.
Clicking on skipped tests opens this weird empty space
Screen.Recording.2025-06-25.at.4.04.32.PM.mov
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
} | ||
|
||
.controls-container-studio { | ||
// TODO: change this to 32px for the studio redesign |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is there an issue we can link to for this?
@@ -46,9 +51,17 @@ const RunnableHeader: React.FC<RunnableHeaderProps> = observer(({ spec, statsSto | |||
relativeFile: relativeSpecPath, | |||
} | |||
|
|||
const openInIDE = () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: should use the naming convention for components here and render it using JSX notation
const openInIDE = () => { | |
const OpenInIDE = () => { |
...
<OpenInIDE />
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good, nice work! 🎉
…abel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign
…abel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign
…abel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign
This reverts commit 3b59a94.
…ng css styles at all
ff07762
to
ec7b787
Compare
Waiting on Ryan's approval instead since Jennifer is out
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good. Nice work!
Additional details
Steps to test
Go through different states of the app and make sure the styles match the figma
Passed
Error state
Running
Paused
Focused state only by tabbing
Suite
Test
Hover state
Header
Suite open
Suite closed
Test
Debug mode
Open test preferences
How has the user experience changed?
PR Tasks
cypress-documentation
?type definitions
?