Skip to content

Conversation

@laura-codess
Copy link
Contributor

@laura-codess laura-codess commented Aug 4, 2025

Problem

Currently, the Mynah-UI elements do not show data-testid at the production level of Amazon Q. This makes UI Tests very flakey because we have to rely on CSS Selectors to grab Mynah-UI elements, and these CSS Selectors can be shared across multiple different elements.

Solution

In mynahUI.ts we set test:true so data-testid will show at production level. Now instead of using CSS Selectors, test writers can grab the data-testid

const mynahUiProps: MynahUIProps = {
        ...
        config: {
            maxTabs: 10,
            test: true,
        ...

Screenshot 2025-08-04 at 2 12 59 PM

This is the code in Mynah-UI that turns on test-ids when test config is set to true
https://github.com/aws/mynah-ui/blob/main/src/helper/dom.ts#L264

License

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

@laura-codess laura-codess requested a review from a team as a code owner August 4, 2025 18:19
@codecov-commenter
Copy link

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 61.20%. Comparing base (01d8112) to head (1c4e1d7).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #2046   +/-   ##
=======================================
  Coverage   61.20%   61.20%           
=======================================
  Files         245      245           
  Lines       53160    53161    +1     
  Branches     3222     3222           
=======================================
+ Hits        32534    32535    +1     
  Misses      20564    20564           
  Partials       62       62           
Flag Coverage Δ
unittests 61.20% <100.00%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

},
config: {
maxTabs: 10,
test: true,
Copy link
Contributor

Choose a reason for hiding this comment

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

should this only be in test mode or is it fine to always have on

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 believe it's fine to always have on. The mynah people that I spoke with agreed that setting test = true doesn't do anything aside from adding data-testids.

@laura-codess laura-codess merged commit f18ea96 into aws:main Aug 4, 2025
6 of 7 checks passed
@laura-codess laura-codess deleted the fix/test-ids branch August 4, 2025 18:40
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.

4 participants