some way to select only elements that have a particular event handler

[avh4]

Split from https://github.com/eeue56/elm-html-test/issues/32 by request.

some way to select only elements that have a particular event handler. In this example, find the div with the onClick handler, and ignore the other divs:

div []
    [ div []
        [ div [ onClick MyMsg ]
            [ div [] [ text "Click me" ] ]
        , div [] []
        ]
    , div [] []
    ]

Possible API:

Query.find [ tag "div", withHandler "click" ]

[rtfeldman]

This seems easy enough to implement, but I'm curious about the use case - are there tests we currently can't write without this?

[avh4]

I'm not sure I understand the question. The issue shows an example of a test that can't currently be written (find the div that can be clicked without having to know the exact path to that div).

[rtfeldman]

Sorry! Maybe a better way to say it would be: is there a reason searching for the click handler would be better than searching based on the text "Click me", given that this text also uniquely identifies the element we want?

I could see pros and cons of each approach. Searching by text would give a false negative if we changed the text of the button, but searching by click handler would give a false negative if we introduced an unrelated sibling button with different text, which also had a click handler.

All else being equal, I'd rather minimize API surface area and not introduce a new alternative way to do the same thing, so I'm wondering if we've encountered any real-world cases where existing queries (e.g. text queries) fell short, and being able to query based on handlers would have been a significant improvement over e.g. improving how we can do text queries.

Sorry I was less clear previously - does that make sense?

[avh4]

In the example above:

• Query.find [ text "Click me" ] finds the text node, which if you try to click it, gives "Found element is a text, which does not produce events, therefore could not simulate click on it."
• Query.find [ tag "div" ] finds all the divs, and there is no way to get the clickable one: "Query.find always expects to find 1 element, but it found 5 instead"
• With contains that you proposed elsewhere, Query.find [ tag "div", contains [ text "Click me" ] ] would still not solve this because it would match 3 of the 5 divs, and there would still be no way to get the one of those three that has the click handler.

[rtfeldman]

Cool, thanks for clarifying @avh4! This motivation makes sense to me.

I'm planning to implement this on our next Hackday, which is Friday.

Any objections @eeue56?

[eeue56]

👍