Fix duplicated data-testid on mvx-button host and inner <button>

[arhtudormorar]

Title

Fix duplicated data-testid on mvx-button by disabling host reflection

Summary

This PR fixes Playwright strict-mode violations caused by mvx-button rendering two DOM nodes with the same data-testid:

• The host <mvx-button> reflected the data-testid attribute.
• The inner <button> also received the same data-testid.

Because of this, selectors like getByTestId('btnPing') or getByTestId('btnPong') could resolve to two elements, triggering strict-mode errors.

Changes

• Kept the existing public API so consumers can continue to pass data-testid to mvx-button.

• Updated the dataTestId prop to stop reflecting the attribute onto the host element:

  @prop({ attribute: 'data-testid', reflect: false }) dataTestId?: string = '';

[gemini-code-assist]

Summary of Changes

Hello @arhtudormorar, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request resolves a testing incompatibility by refining how the data-testid attribute is handled within the mvx-button web component. By ensuring that this attribute is present only on the rendered inner button and not duplicated on the host element, it prevents strict-mode errors in testing frameworks like Playwright, thereby improving test reliability without altering the component's external interface.

Highlights

• Fixes Playwright strict-mode violations: Addresses issues where data-testid attributes were duplicated on both the custom <mvx-button> host element and its inner <button>, causing Playwright to fail in strict mode by finding two elements for a single selector.
• Ensures unique data-testid for inner button: Modifies the mvx-button component to ensure that the data-testid attribute is present only on the inner <button> element, making it the sole target for test selectors.
• Maintains public API compatibility: The existing public API for passing data-testid to mvx-button remains unchanged, preventing breaking changes for consumers while resolving the underlying issue.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• src/components/visual/button/button.tsx
  • Imported Element from @stencil/core to enable host element access.
  • Added @Element() hostElement!: HTMLElement; to gain a reference to the component's host DOM element.
  • Implemented the componentDidRender() lifecycle hook to programmatically remove the data-testid attribute from the host element after rendering, ensuring it only resides on the inner <button>.

Activity

• No human activity (comments, reviews) has been recorded on this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request correctly fixes an issue with duplicated data-testid attributes that violate Playwright's strict mode. The fix involves adding a componentDidRender lifecycle hook to remove the data-testid from the host element. While this solution is effective, I've provided feedback on a more idiomatic Stencil approach using @Prop({ reflect: false }) which would achieve the same result in a more declarative way, removing the need for the added lifecycle hook.

[gemini-code-assist]

While this approach works, a more declarative and idiomatic way to achieve this in Stencil is to prevent the prop from being reflected to the host element's attributes in the first place. You can do this by setting reflect: false on the @Prop decorator for dataTestId.

This would prevent the attribute from being added to the host element, eliminating the need for this lifecycle hook to remove it manually.

For example:

// If the attribute is `data-test-id` (from `dataTestId` prop)
@Prop({ reflect: false }) dataTestId?: string = '';

// If the attribute is `data-testid`
@Prop({ attribute: 'data-testid', reflect: false }) dataTestId?: string = '';

This change would make the component's logic cleaner and avoid manual DOM manipulation.