Unable to click on stars in React testing library. #54
Comments
|
AFAIK, The pointerMove event is being used to keep track of the hoverValue, and then the click event is used to save the hoverValue. The following series of events can be used to simulate the rating change using the react testing library. ...
const ratingStar = getByRole('rating').querySelector('.star-svg');
const ratingContainer = getByRole('rating').querySelector('.react-simple-star-rating'),
fireEvent.pointerMove(ratingStar);
fireEvent.click(ratingContainer);
...<div role="rating">
<Rating onClick={...} />
</div> |
|
I don't think @Parassharmaa's code works, or at least I couldn't make it work with cypress. So from: you actually get the following in the DOM. Each svg has a path but I've excluded them here for brevity. For an annoying moment you can see both sets of stars at the same time, 10 empty next to 10 full, then it snaps to the correct number of filled stars. You have to add a time delay to wait for that to finish before you can move, that's the first problem #49. Second problem is that you don't know which star out of the 10-on and 10-off you need to pick and if you pick the wrong one then it hangs the testing framework until it times out. So for clarity, doing this will only work if the number 8 is not selected. and doing this will only work if number 8 is already selected: I thought I could just use a selector that will trigger on both, but it obviously doesn't make any sense to have a mouse move on 2 elements at the same time, so cypress complained about that. Hopefully you can see the problem now. I've been trying to get this working for most of the afternoon and I'm stuck, so I'm going to add something to the onClick to update a hidden input and read it from there instead. But even then I have to calculate if the star is on or off depending on the number and pick the right class name for the selector. This is way more complicated than it needs to be!!! Or does anyone know a better way? Or even a way to know how many stars are selected? Help!! UPDATE: In the end I did: because I know that is what it should be, but I have no way in html/css to see that the click was successful. Now the problem is that it gets 8 correct but it thinks I'm clicking number 1 the second time, probably related to the calculated position, just a guess. |
|
I came across this issue and @davidnewcomb solution did not work for me. For context i'm using After looking at the source code I narrowed it down to two problems:
With both of these changes I could effectively mock the user interaction via a pointer move event and a subsequent click on the parent container. |
How can i clicks on the star rating. I tried so much.
<div className="text-center mt-3"> <Rating initialValue={rating} onClick={handleRating} fillColor={surveyTheme?.mainThemeColor || "#F1A900"} fillIcon={ <RxStarFilled size={50} aria-label="filled-stars" role="button" /> } emptyIcon={ <RxStar size={50} color={surveyTheme?.mainThemeColor || "#F1A900"} aria-label="unfilled-stars" role="button" /> } allowHover={false} aria-label="ranking-stars" as="button" /> </div>The text was updated successfully, but these errors were encountered: