Moving to styled components and stripping data-testid making it impossible to test

[antictor]

Description

We write tests using Cypress and need properties or classes to be used as selectors to locate page elements. Moving to styled components and stripping the data-testid elements during the build means that we now struggle to write tests.

The most recent examples are the update to the masthead. Our tests need to confirm that a user is logged in and the correct avatar details are displayed but there is now way to do this. The other example is context menu, there is nothing in the rendered markup that lets is know if a context menu is shown or not.

Can we either stop stripping data-testid or allow testids to be passed in as properties.

[thyhjwb6]

@antictor

Our data-testid and class attributes should not be depended on as you have noticed they are likely to change and will ultimately be stripped from the component library.

Solution as follows:

• we can allow prop drilling on all Masthead subcomponents so that you can pass in your data-testid
• we can allow prop drilling on the ContextMenu
• review existing components to identify the areas where prop drilling is not enabled

Confirm you are happy with the above and then we can mark this ticket as Ready.

[antictor]

If that allows me to pass a data-testid prop of my own then that would be ideal.

On a side note Buttons don't allow the name property or data-testid to be send to it either (well you can but then you have to tell it to ignore the type error saying the prop doesn't exist)