Skip to content
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

Layout modifier screenshot tests #1995

Merged

Conversation

ahmed3elshaer
Copy link
Contributor

@ahmed3elshaer ahmed3elshaer commented Apr 29, 2024

Fixes #1877

This is a draft to collect feedback about the screenshot test results in View and ComposeUI.

ComposeUI

  • Box
    ⚠️ There is no difference in the test results whether or not the margin is assigned. The margin is always "empty" in the screenshots.

  • Column & Row
    ✅ Screenshots recorded as expected.

View

  • Box, Column & Row
    ⚠️ There is no difference, The margin is always applied in the screenshots, even when it's empty

UIView

  • Box
    ⚠️ The margin is always "empty" in the screenshots.

  • Column & Row
    ⚠️ The margin is always "Applied" in the screenshots.

See #1877 (comment) or File changes for a visual explanation

Is my test approach correct? If so, should we create issues for the identified findings?

  • CHANGELOG.md's "Unreleased" section has been updated, if applicable.

@ahmed3elshaer ahmed3elshaer marked this pull request as draft April 29, 2024 18:17
@ahmed3elshaer ahmed3elshaer changed the title Draft: Layout modifier screenshot tests Layout modifier screenshot tests Apr 29, 2024
Copy link
Collaborator

@JakeWharton JakeWharton left a comment

Choose a reason for hiding this comment

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

Looks great. We can file individual bugs for each implementation whose behavior is broken once this merges.

container.onEndChanges()
verifySnapshot(container, "Margin")
first.modifier = Modifier
container.onEndChanges()
Copy link
Collaborator

Choose a reason for hiding this comment

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

In the other test you call widget.children.onModifierUpdated(0, redColor). Seems like both tests should have the same behavior here. We probably want to call both onModifierUpdated() and onEndChanges() in both tests.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I modified TestFlexContainer to expose the children property so that we can use children.onModifierUpdated(0, widget) inside AbstractFlexContainerTest.kt.

Should we add container.onEndChanges() to AbstractBoxTest? This will require us to provide a ChangeListener implementation for the Box widget under test. In my opinion, this is a significant change. So, should we stick with using children.onModifierUpdated in both tests or work to support the ChangeListener for the Box widget?

@JakeWharton
Copy link
Collaborator

Actually the problem with Compose UI's Box and margins on children is known: #2006. It was simply an omission on the initial PR.

@ahmed3elshaer ahmed3elshaer force-pushed the layout-modifier-screenshot-tests branch from 3c2ad0b to 4068f49 Compare May 3, 2024 17:29
@ahmed3elshaer ahmed3elshaer marked this pull request as ready for review May 3, 2024 17:57
@ahmed3elshaer
Copy link
Contributor Author

Updated the description with UIView findings

@JakeWharton JakeWharton merged commit 80e5d3b into cashapp:trunk May 9, 2024
10 checks passed
@underscoretang
Copy link
Collaborator

this broke something for me locally when i pulled main. i can't seem to undirty theses images, no matter what i do.

screenshot stang 2024 05 09 15 21 32

maybe some git-lfs or .gitignore setup i don't have. any ideas?

@swankjesse
Copy link
Collaborator

I tried this and it worked?

git rm --cached -r .
git reset --hard

@JakeWharton
Copy link
Collaborator

The pointfree library has some non-determinism. I don't know why.

Explored a bit here: #1988 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add row/col/box screenshot tests where we remove one modifier element from a child
4 participants