115 photo input testing #271
Conversation
| @@ -193,6 +195,7 @@ const PhotoInput: React.FC<PhotoInputProps> = ({ | |||
| <Button | |||
| variant="danger" | |||
| className="photo-delete-button" | |||
| data-testid="photo-delete-button" | |||
There was a problem hiding this comment.
Instead of adding the data-testid prop, could you find this element with a CSS selector, e.g., button.photo-delete-button?
There was a problem hiding this comment.
@markborkum I just pushed a change that accomplishes this. I'm not a pro at Jest, but it seems like using querySelector forces the test to be a little more lengthy. ChatGPT is telling me that error handling is baked into the getByTestId method. If you like this solution better, I will do this for the tests and remove the data-testid attributes.
| @@ -147,6 +148,7 @@ const PhotoInput: React.FC<PhotoInputProps> = ({ | |||
| </Collapsible> | |||
| <input | |||
| ref={ref} | |||
| data-testid="photo-input" | |||
There was a problem hiding this comment.
Instead of adding the data-testid prop, could you find this element with a CSS selector, e.g., button.btn.btn-outline-primary?
| @@ -125,6 +125,7 @@ const PhotoInput: React.FC<PhotoInputProps> = ({ | |||
| </Button> | |||
| <Button | |||
| variant="danger" | |||
| data-testid="permanently-delete-button" | |||
There was a problem hiding this comment.
Instead of adding the data-testid prop, could you find this element with a CSS selector, e.g., button.btn-danger?
This is a Jest test for the PhotoInput component