Skip to content

test: add Lumo visual tests for field and group field mixins - #12736

Open
vursen wants to merge 6 commits into
mainfrom
test/lumo-field-visual-tests
Open

test: add Lumo visual tests for field and group field mixins#12736
vursen wants to merge 6 commits into
mainfrom
test/lumo-field-visual-tests

Conversation

@vursen

@vursen vursen commented Sep 11, 2026

Copy link
Copy Markdown
Contributor

Description

  • Added mock-field and mock-group-field fixtures. They use the shared Lumo field mixins without the styles of a single component.
  • Added visual tests for the field mixins (LTR and RTL) and the group field mixins. The tests include the default, label, required, error message, and helper states.
  • Added the reference screenshots for the new tests.

Type of change

  • Tests

🤖 Generated with Claude Code

vursen and others added 3 commits September 11, 2026 16:15
The Lumo field mixins are shared by many components. Mock elements let the
tests cover them once, without the styles of any single component.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

@vaadin-review-bot vaadin-review-bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Reviewed the changes — left 3 comments.

Finding
🧪 Mock fields lack DirMixin, so the RTL tests never exercise Lumo's [dir='rtl'] rules
🧪 The wrapped test sits under the vertical theme, where wrapping cannot happen
📐 No not-animated styles, while the Lumo error message transitions max-height over 0.4s

Comment thread packages/vaadin-lumo-styles/test/fixtures/mock-field.js Outdated
Comment thread packages/vaadin-lumo-styles/test/visual/group-field.test.js
Comment thread packages/vaadin-lumo-styles/test/visual/field.test.js
@vursen
vursen added this pull request to stack #12737 September 11, 2026 12:29
vursen and others added 3 commits September 11, 2026 16:34
Without it the mock hosts never get the `dir` attribute, so the Lumo
`:host([dir='rtl'])` rules for the required indicator and the error
message were not covered by the RTL tests.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Lumo lays the group out in a wrapping row by default and switches to a
column for the `vertical` theme, so the width limit only wraps items in
the default layout.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The Lumo error message transitions `max-height`, so the screenshot
depends on when it is taken.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@sonarqubecloud

Copy link
Copy Markdown

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.

2 participants