Testing EuiButton and EuiButtonIcon
<EuiButton>, <EuiButtonIcon> and <EuiButtonEmpty> are all rendering native <button> or <a> elements.
Buttons as a elements
When <EuiButton>, <EuiButtonIcon> or <EuiButtonEmpty> receive a valid href property, they will render
an anchor (<a>) element instead of a button (<button>). Please keep in mind that no matter what element
is used underneath, they'll look the same, so it's best to open Dev Tools and check what element to query.
Icons
In order to confirm the right icon is rendered, you can follow the same steps as you'd do for <EuiIcon>.
You should check if the <button> (or <a> - see above) element has a <svg> element inside to ensure
an icon is being displayed, and compare the data-icon-type attribute value.
It matches the type of icon being displayed on the screen.
Content (children)
Button content is wrapped in multiple inner elements to ensure correct styles, however, we don't recommend querying
using the inner structure of our components. Instead, you should read the inner text of the rendered <button>
(or <a> - see above) and confirm it's what you expected it to be.
You can do that by reading the innerText
or textContent properties of the element.
Read about the differences between these two
here.
Available selectors
| Selector | Description |
|---|---|
button or a | Root button element |
svg | Button icon Use data-icon-type to verify the right icon is used |