barnowl | Universal converter of ambient RF decodings | Runtime Evironment library

I'm trying to append a drop down value to a textarea field, it works as a mention. So if there is an "@" call the dropdown and user will select a user, once selected the dropdown show hide it self, and the user should be able to append their comment data.

the issue im having is that setCommentBody is appending the selectedUser multiple times/ on every comment change in the textarea

My objective is

1. check for @ symbol (which its already doing)
2. render drop down once @ symbol is called( which is already doing)
3. once a value is selected hide drop down and add their comment (dropdown hides only if @ symbol is removed, which it should hide after a value is selected)

The mention should pretty much work exactly how stackoverflow comment section has it.

this is what i have so far

I'm trying to get a list of all users with the author.username property. So that means access posts author, comments author, and commentReplies author. I want an returned array with a list of usernames.

expected output

I'm calling a function by finding the button with the data-testid with "show_more_button"

What would be the way to test a component that relies on the initial state for conditional rendering ?

For example showLessFlag is dependent on state, and testing state in react-testing-library is counter productive.

so how would i test this condition in the CommentList component

How would you match mock props to the wrapper component props, im a bit confused. I know how to do it in enzyme jest. But not sure how to do it with react-testing-library.

I'm trying it match props.comments to the wrapper:

I'm trying to show the 2 previous recent comments based on createdAt, by implementing this filterMethod