diff --git a/src/Test/Html/Internal/ElmHtml/Query.elm b/src/Test/Html/Internal/ElmHtml/Query.elm
index 64b1c36c..8482e5ec 100644
--- a/src/Test/Html/Internal/ElmHtml/Query.elm
+++ b/src/Test/Html/Internal/ElmHtml/Query.elm
@@ -262,8 +262,25 @@ hasStyle style facts =
classnames : Facts msg -> List String
classnames facts =
- Dict.get "className" facts.stringAttributes
- |> Maybe.withDefault ""
+ (case ( Dict.get "class" facts.stringAttributes, Dict.get "className" facts.stringAttributes ) of
+ ( Just _, Just _ ) ->
+ -- If you use both the `class` attribute and the `className` property at the same time,
+ -- it’s undefined which classes you end up with. It depends on which order they are specified,
+ -- which order elm/virtual-dom happens to apply them, and which of them changed most recently.
+ -- Mixing both is not a good idea. Ideally, we’d show some nice error message explaining this
+ -- here, but since this is very much an edge case it does not feel worth the complexity.
+ -- Instead, silently claim that there are no classes (that no classes match the node).
+ ""
+
+ ( Just class, Nothing ) ->
+ class
+
+ ( Nothing, Just className ) ->
+ className
+
+ ( Nothing, Nothing ) ->
+ ""
+ )
|> String.split " "
diff --git a/tests/src/Test/Html/QueryTests.elm b/tests/src/Test/Html/QueryTests.elm
index 134ff5c2..198d7b01 100644
--- a/tests/src/Test/Html/QueryTests.elm
+++ b/tests/src/Test/Html/QueryTests.elm
@@ -113,6 +113,27 @@ all =
[ Query.has [ attribute (Attr.property "className" (Encode.string "hello world")) ]
, Query.has [ attribute (Attr.property "className" (Encode.string "world hello")) ]
]
+ , test "matches a class added using Attr.attribute" <|
+ \() ->
+ divWithAttribute (Attr.attribute "class" "hello")
+ |> Query.fromHtml
+ |> Query.has [ class "hello" ]
+ , test "matches a class added using Attr.property" <|
+ \() ->
+ divWithAttribute (Attr.property "className" (Encode.string "hello"))
+ |> Query.fromHtml
+ |> Query.has [ class "hello" ]
+ , test "matches nothing if classes are added both using Attr.attribute and Attr.property" <|
+ \() ->
+ Html.div
+ [ Attr.attribute "class" "hello"
+ , Attr.property "className" (Encode.string "world")
+ ]
+ []
+ |> Query.fromHtml
+ |> Query.has [ class "hello" ]
+ |> expectationToIsPassing
+ |> Expect.equal False
]
]
, describe "Query.contains" <|