testcafe-react-selectors icon indicating copy to clipboard operation
testcafe-react-selectors copied to clipboard

Select component based on matching criteria function

Open ChrisLane opened this issue 1 year ago • 5 comments

For the example JSX below

<TodoApp className="todo-app">
    <div>
        <TodoList>
            <TodoItem priority="High">Item 1</TodoItem>
            <TodoItem priority="Low">Item 2</TodoItem>
        </TodoList>
        <TodoList>
            <TodoItem priority="Medium">Item 1</TodoItem>
        </TodoList>
    </div>
</TodoApp>

If I want to make some assertions on a TodoList component that contains a TodoItem with priority="Medium", I would have to filter TodoList components based on the values in .child() or .findReact("TodoItem").withProps({priority: "Medium"})

I think it would be cleaner if if could instead select a component based on whether a function returns true. For example:

const mySelector = ReactSelector("TodoList").matches(selector => selector.findReact("TodoItem").withProps({priority: "Medium"}));

Would this be a possible improvement that could be incorporated into the project?

ChrisLane avatar Apr 26 '23 15:04 ChrisLane

Hi @ChrisLane,

Thank you for sharing this idea with us.

miherlosev avatar May 01 '23 01:05 miherlosev

This issue has been automatically marked as stale because it has not had any activity for a long period. It will be closed and archived if no further activity occurs. However, we may return to this issue in the future. If it still affects you or you have any additional information regarding it, please leave a comment and we will keep it open.

github-actions[bot] avatar Mar 16 '24 01:03 github-actions[bot]

Bump

ChrisLane avatar Mar 16 '24 08:03 ChrisLane