search

Vuepic / vue-datepicker

Datepicker component for Vue 3
https://vue3datepicker.com
MIT License
1.48k stars 147 forks source link

Change html attribute data-test to data-testId for better testability #987

Open Darent98 opened 1 month ago

Darent98 commented 1 month ago

Is your feature request related to a problem? Please describe. I am using storybook in my application to create component tests. I also created tests for this component I am using to ensure basic functionality after updates. After updating this package my test failed, because I was querying the label text of the hour picker. Which was 'Open hours overlay ' and now is depending on the selected hour e.g. '08-Open hours overlay'. By analyzing the element i figured out a data-test attribute was already set, but I could not query for it. Storybook is using the Testing Library, which provides methods to query by the data-testId.

Describe the solution you'd like I think it would be useful to change the data-test attribute to data-testId. Since I don't find anything only about the data-test attribute, but many articles and a large library using data-testId.

Describe alternatives you've considered Probably you could also just add the data-testId attribute, while also keeping the data-test attribute

Additional context You can also let me know whats the use case for the data-test attribute that you implemented.

Jasenkoo commented 1 week ago

You might want to check the following:

import { configure } from '@testing-library/dom';

configure({
  testIdAttribute: 'data-test',
});

I can change it to data-test-id to better match the attribute.