unique identifier for Alert Dialog

[Ditofry]

https://paste.twilio.design/components/alert-dialog

Currently I don't see an optimal way of finding the 'confirm' and 'cancel' buttons in the dialog in a testing context (using something like getElementByAttribute("testid", "alert-dialogue-confirm") ) Searching by text content is difficult when the text is also found in the title and description of the dialog.

Would it be possible to add a data-testid or some other unique identifier that could be queried in a test? I would be happy to make this change if I can get guidance from your team :)

Thank you!!!

[nkrantz]

Hi @Ditofry - a couple of options:

1. If you're willing to make a contribution to the system, the best way to be able to hook into and test the footer buttons would be to refactor the Alert Dialog component to be composable. Right now, it's built so that everything is controlled by props, but we have some planned work (not yet on the roadmap) to deprecate that API. If you're interested in that, feel free to check out this ticket, and let's set up a time to chat about the work.
2. In the meantime, in order to hook into those buttons for your tests, you can make use of the data-paste-element prop that gets added to all our components. If you inspect the component using dev tools, you'll be able to see the different levels onto which we apply the property. You can access the contents of the footer specifically using querySelector('[data-paste-element="ALERT_DIALOG_FOOTER"]'). That way, you can confidently get the buttons by any text that also appears in the header and body of the Dialog.

Let me know which route you end up taking here, and if you have any more questions about contributing the work!

[Ditofry]

Thank you for your response @nkrantz , I'm not sure how I missed the data-paste-element. This seems to cover everything for my use case and I can't think of a way to improve this any further to be honest.

I appreciate your time and hard work on Paste 🙏