馃殌 [Feature] Remove data-test attributes in production
Created by: Tirokk
Authored by mattwr18 Closed
馃殌 Feature
We would like to use data-test attributes for testing when there is no existing CSS class used for styling.
User Problem
Sometimes it's challenging to target an element without finding all the elements and then grabbing one of the elements based on its position. This is not a good practice because it makes them less resilient to changes. Any update to the DOM and your likely to waste others time debugging, build time, and asking others to make your tests more resilient.
It is not a good practice to use CSS classes for testing, even if they are named with test in their name. CSS classes should be used for styling your application. If they are present, they can certainly be used to find elements, but should not be added solely for the purpose of testing
Enter data-test attributes, which are much less likely to be changed/removed by other developers unless in the context of changing tests. See, https://medium.com/@colecodes/test-your-dom-with-data-attributes-44fccc43ed4b and https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change
The issue is that these data-test attributes get built and make their way to production where they are just clutter.
Implementation
We can configure nuxt with compile options that remove these attributes during our production build.
Validation
Dev can create a production build locally, and inspect the DOM