Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Fix flaky Percy tests of ReplyChain #10450

Merged
merged 6 commits into from
Mar 27, 2023
Merged

Fix flaky Percy tests of ReplyChain #10450

merged 6 commits into from
Mar 27, 2023

Conversation

luixxiul
Copy link
Contributor

@luixxiul luixxiul commented Mar 24, 2023

For element-hq/element-web#24881

This PR intends to address the flaky Percy snapshot tests of ReplyChain by applying a media query for Percy.

Here is the list of the snapshots which should be addressed with this PR:

This PR also adds another step to check whether a sent receipt is rendered, so snapshots should capture the receipt consistently, mitigating the risk of flakiness.

For a reviewer: before merging, please add X-Needs-Percy to check whether the strokes color and the profile name color is same ($username-variant1-color, which is #368bd6 on light theme).

type: task

Signed-off-by: Suguru Hirahara [email protected]

Checklist

  • Tests written for new code (and old code if feasible)
  • Linter and other CI checks pass
  • Sign-off given on the changes (see CONTRIBUTING.md)

This change is marked as an internal change (Task), so will not be included in the changelog.

@github-actions github-actions bot added Z-Community-PR Issue is solved by a community member's PR T-Task Refactoring, enabling or disabling functionality, other engineering tasks labels Mar 24, 2023
- Add media query for percy on _ReplyChain.pcss to apply the same color to vertical strokes (border-left)of ReplyChain
- Use CSS variables for visibility
- Manage those variables on _common.pcss for maintainability

Signed-off-by: Suguru Hirahara <[email protected]>
Signed-off-by: Suguru Hirahara <[email protected]>
@luixxiul luixxiul changed the title Fix flaky Percy tests of ReplyChain Fix flaky Percy tests of ReplyChain Mar 25, 2023
@luixxiul luixxiul marked this pull request as ready for review March 25, 2023 12:45
@luixxiul luixxiul requested a review from a team as a code owner March 25, 2023 12:45
@andybalaam andybalaam added the X-Needs-Percy Whether to run Percy screenshot tests in Merge Queue label Mar 27, 2023
Copy link
Member

@andybalaam andybalaam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks plausible. Let's see how the percy snapshots come out.

@luixxiul
Copy link
Contributor Author

luixxiul commented Mar 27, 2023

The border color issue seems to have been fixed ($username-variant1-color seems to be applied to the border), but this time the different list style was applied (except Firefox).

After
Screenshot from 2023-03-27 19-30-27 Screenshot from 2023-03-27 19-30-40

I guess it is because the declaration "list-style-type: none" of .mx_RoomView_MessageList is not applied to mx_EventTile_last on the tests above:

It can be seen on another test as well.

Screenshot from 2023-03-27 19-55-59

Adding a commit which should fix the issue.

@andybalaam
Copy link
Member

Percy snapshots look reasonable, so I think this leaves us in a better state than we were in before.

@andybalaam andybalaam enabled auto-merge (squash) March 27, 2023 12:08
@andybalaam andybalaam merged commit afb2cb9 into matrix-org:develop Mar 27, 2023
@luixxiul
Copy link
Contributor Author

luixxiul commented Mar 27, 2023

Thanks for the review!

The previous commit failed to fix the list style issue. I'm going to create an issue for it!

@luixxiul luixxiul deleted the fix-flaky-test-reply branch March 27, 2023 14:29
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
T-Task Refactoring, enabling or disabling functionality, other engineering tasks X-Needs-Percy Whether to run Percy screenshot tests in Merge Queue Z-Community-PR Issue is solved by a community member's PR
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants