[ ] Validation - make some simple rule, we need to test if error is shown when validation is complete. Test aria attributes like aria-invalid
[ ] ValidationImmediate - rules executed immediately when component is rendered
// - [ ] Reset - must set value to clearValue prop and reset validation
// - [ ] ResetValidation - must hide erorr, make isTouched false and isDirty false
[ ] ValidtionDirtyState - check if element becomes dirty when value input happens and error message is shown when dirty
[ ] ValidationTouchedState - check if element becomes touched when element blur happens and error message is shown when touched
! Make sure to test how component displayed, not if useValidation is working - we have unit test for that. We need only check visual (e.g. className, not style), dom content and aria attributes.
Notice, in this task we only need stories, component might be broken and falling test are OK.
Most of stories for one component applies to another, but I'd go with copy/paste stories instead of making some kind of wrapper for it.
Example of VaForm globall stories: packages/ui/src/components/va-form/VaForm.stories.ts - there mostly input tested, so half stories for VaInput is already here. We can copy them with few changes. Keep VaForm stories as is.
Components:
Stories:
! Make sure to test how component displayed, not if useValidation is working - we have unit test for that. We need only check visual (e.g. className, not style), dom content and aria attributes.
Notice, in this task we only need stories, component might be broken and falling test are OK.
Most of stories for one component applies to another, but I'd go with copy/paste stories instead of making some kind of wrapper for it.
Example of VaForm globall stories: packages/ui/src/components/va-form/VaForm.stories.ts - there mostly input tested, so half stories for VaInput is already here. We can copy them with few changes. Keep VaForm stories as is.