diff --git a/src/Test/Html/Internal/ElmHtml/Query.elm b/src/Test/Html/Internal/ElmHtml/Query.elm index 9f5e4960..e6b5ea4d 100644 --- a/src/Test/Html/Internal/ElmHtml/Query.elm +++ b/src/Test/Html/Internal/ElmHtml/Query.elm @@ -29,9 +29,7 @@ import Test.Html.Internal.ElmHtml.InternalTypes exposing (..) type Selector = Id String | ClassName String - | ClassNameNS String | ClassList (List String) - | ClassListNS (List String) | Tag String | Attribute String String | BoolAttribute String Bool @@ -241,22 +239,12 @@ hasBoolAttribute attribute value facts = hasClass : String -> Facts msg -> Bool hasClass queryString facts = - List.member queryString (classnames facts) - - -hasClassNS : String -> Facts msg -> Bool -hasClassNS queryString facts = - List.member queryString (classnamesNS facts) + List.member queryString (classnames facts ++ classes facts) hasClasses : List String -> Facts msg -> Bool hasClasses classList facts = - containsAll classList (classnames facts) - - -hasClassesNS : List String -> Facts msg -> Bool -hasClassesNS classList facts = - containsAll classList (classnamesNS facts) + containsAll classList (classnames facts ++ classes facts) hasStyle : { key : String, value : String } -> Facts msg -> Bool @@ -271,8 +259,8 @@ classnames facts = |> String.split " " -classnamesNS : Facts msg -> List String -classnamesNS facts = +classes : Facts msg -> List String +classes facts = Dict.get "class" facts.stringAttributes |> Maybe.withDefault "" |> String.split " " @@ -296,18 +284,10 @@ nodeRecordPredicate selector = .facts >> hasClass classname - ClassNameNS classname -> - .facts - >> hasClassNS classname - ClassList classList -> .facts >> hasClasses classList - ClassListNS classList -> - .facts - >> hasClassesNS classList - Tag tag -> .tag >> (==) tag @@ -343,18 +323,10 @@ markdownPredicate selector = .facts >> hasClass classname - ClassNameNS classname -> - .facts - >> hasClassNS classname - ClassList classList -> .facts >> hasClasses classList - ClassListNS classList -> - .facts - >> hasClassesNS classList - Tag tag -> always False diff --git a/src/Test/Html/Selector.elm b/src/Test/Html/Selector.elm index e2545725..27244c2d 100644 --- a/src/Test/Html/Selector.elm +++ b/src/Test/Html/Selector.elm @@ -1,7 +1,7 @@ module Test.Html.Selector exposing ( Selector , tag, text, containing, attribute, all - , id, class, classNS, classes, classesNS, exactClassName, exactClassNameNS, style, checked, selected, disabled + , id, class, classes, exactClassName, style, checked, selected, disabled ) {-| Selecting HTML elements. @@ -16,7 +16,7 @@ module Test.Html.Selector exposing ## Attributes -@docs id, class, classNS, classes, classesNS, exactClassName, exactClassNameNS, style, checked, selected, disabled +@docs id, class, classes, exactClassName, style, checked, selected, disabled -} @@ -85,32 +85,6 @@ classes = Classes -{-| Matches svg elements that have all the given classes (and possibly others as well). - -When you only care about one class instead of several, you can use -[`classNS`](#classNS) instead of passing this function a list with one value in it. - -To match the element's exact class attribute string, use [`exactClassNameNS`](#exactClassNameNS). - - import Svg.Html as SvgHtml - import Svg.Attributes as SvgAttr - import Test.Html.Query as Query - import Test exposing (test) - import Test.Html.Selector exposing (classesNS) - - - test "Svg has the classes svg-styles and svg-large" <| - \() -> - SvgHtml.svg [ SvgAttr.class "svg-styles svg-large" ] [] - |> Query.fromHtml - |> Query.has [ classesNS [ "svg-styles", "svg-large" ] ] - --} -classesNS : List String -> Selector -classesNS = - ClassesNS - - {-| Matches elements that have the given class (and possibly others as well). To match multiple classes at once, use [`classes`](#classes) instead. @@ -136,36 +110,11 @@ class = Class -{-| Matches svg elements that have the given class (and possibly others as well). - -To match multiple classes at once, use [`classesNS`](#classesNS) instead. - -To match the element's exact class attribute string, use [`exactClassNameNS`](#exactClassNameNS). - - import Svg.Html as SvgHtml - import Svg.Attributes as SvgAttr - import Test.Html.Query as Query - import Test exposing (test) - import Test.Html.Selector exposing (classNS) - - - test "Svg has the class svg-large" <| - \() -> - SvgHtml.svg [ SvgAttr.class "svg-styles svg-large" ] [ ] - |> Query.fromHtml - |> Query.has [ classNS "svg-large" ] - --} -classNS : String -> Selector -classNS = - ClassNS - - -{-| Matches the element's exact class attribute string. +{-| Matches the element's exact "className" property string. This is used less often than [`class`](#class), [`classes`](#classes) or [`attribute`](#attribute), which check for the _presence_ of a class as opposed -to matching the entire class attribute exactly. +to matching the entire class property exactly. import Html import Html.Attributes as Attr @@ -180,37 +129,14 @@ to matching the entire class attribute exactly. |> Query.fromHtml |> Query.has [ exactClassName "btn btn-large" ] +There's a difference between properties and attributes (read more [here](https://github.com/elm/html/blob/master/properties-vs-attributes.md)). + -} exactClassName : String -> Selector exactClassName = namedAttr "className" -{-| Matches the svg element's exact class attribute string. - -This is used less often than [`classNS`](#classNS) or [`classesNS`](#classesNS), -which check for the _presence_ of a class as opposed to matching the entire -class attribute exactly. - - import Svg.Html as SvgHtml - import Svg.Attributes as SvgAttr - import Test.Html.Query as Query - import Test exposing (test) - import Test.Html.Selector exposing (exactClassNameNS) - - - test "Svg has the exact class 'svg-styles svg-large'" <| - \() -> - SvgHtml.svg [ SvgAttr.class "btn btn-large" ] [] - |> Query.fromHtml - |> Query.has [ exactClassNameNS "svg-styles svg-large" ] - --} -exactClassNameNS : String -> Selector -exactClassNameNS = - namedAttr "class" - - {-| Matches elements that have the given `id` attribute. import Html diff --git a/src/Test/Html/Selector/Internal.elm b/src/Test/Html/Selector/Internal.elm index b4cee281..abe9a4e1 100644 --- a/src/Test/Html/Selector/Internal.elm +++ b/src/Test/Html/Selector/Internal.elm @@ -7,9 +7,7 @@ import Test.Html.Internal.ElmHtml.Query as ElmHtmlQuery type Selector = All (List Selector) | Classes (List String) - | ClassesNS (List String) | Class String - | ClassNS String | Attribute { name : String, value : String } | BoolAttribute { name : String, value : Bool } | Style { key : String, value : String } @@ -42,15 +40,9 @@ selectorToString criteria = Classes list -> "classes " ++ quoteString (String.join " " list) - ClassesNS list -> - "classesNS " ++ quoteString (String.join " " list) - Class class -> "class " ++ quoteString class - ClassNS class -> - "classNS " ++ quoteString class - Attribute { name, value } -> "attribute " ++ quoteString name @@ -145,15 +137,9 @@ query fn fnAll selector list = Classes classes -> List.concatMap (fn (ElmHtmlQuery.ClassList classes)) elems - ClassesNS classes -> - List.concatMap (fn (ElmHtmlQuery.ClassListNS classes)) elems - Class class -> List.concatMap (fn (ElmHtmlQuery.ClassList [ class ])) elems - ClassNS class -> - List.concatMap (fn (ElmHtmlQuery.ClassListNS [ class ])) elems - Attribute { name, value } -> List.concatMap (fn (ElmHtmlQuery.Attribute name value)) elems diff --git a/tests/src/Test/Html/SelectorTests.elm b/tests/src/Test/Html/SelectorTests.elm index 374d04e8..992e6f26 100644 --- a/tests/src/Test/Html/SelectorTests.elm +++ b/tests/src/Test/Html/SelectorTests.elm @@ -6,11 +6,12 @@ module Test.Html.SelectorTests exposing (all) import Fuzz exposing (..) import Html import Html.Attributes as Attr +import Json.Encode import Svg import Svg.Attributes as SvgAttribs import Test exposing (..) import Test.Html.Query as Query -import Test.Html.Selector exposing (..) +import Test.Html.Selector as Selector exposing (..) all : Test @@ -19,106 +20,53 @@ all = [ bug13 , textSelectors , classSelectors - , attributeSelectors - , nsSelectors - ] - - -nsSelectors : Test -nsSelectors = - describe "NS selectors" - [ test "classNS selector finds class on svg with one class" <| - \() -> - let - svgClass = - "some-NS-class" - in - Svg.svg - [ SvgAttribs.class svgClass ] - [ Svg.circle [ SvgAttribs.cx "50", SvgAttribs.cy "50", SvgAttribs.r "40" ] [] ] - |> Query.fromHtml - |> Query.has [ classNS svgClass ] - , test "classNS selector finds class on svg with multiple classes" <| - \() -> - let - svgClass = - "some-NS-class" - in - Svg.svg - [ SvgAttribs.class svgClass, SvgAttribs.class "another-NS-class" ] - [ Svg.circle [ SvgAttribs.cx "50", SvgAttribs.cy "50", SvgAttribs.r "40" ] [] ] - |> Query.fromHtml - |> Query.has [ classNS svgClass ] - , test "classesNS selector finds all classes on svg" <| - \() -> - let - svgClass = - "some-NS-class" - in - Svg.svg - [ SvgAttribs.class svgClass, SvgAttribs.class "another-NS-class" ] - [ Svg.circle [ SvgAttribs.cx "50", SvgAttribs.cy "50", SvgAttribs.r "40" ] [] ] - |> Query.fromHtml - |> Query.has [ classesNS [ svgClass, "another-NS-class" ] ] - , test "classesNS selector finds single class on svg with multiple classes" <| - \() -> - let - svgClass = - "some-NS-class" - in - Svg.svg - [ SvgAttribs.class svgClass, SvgAttribs.class "another-NS-class" ] - [ Svg.circle [ SvgAttribs.cx "50", SvgAttribs.cy "50", SvgAttribs.r "40" ] [] ] - |> Query.fromHtml - |> Query.has [ classesNS [ svgClass ] ] - , test "exactClassNameNS selector finds the exact class value on svg" <| - \() -> - let - svgClass = - "some-NS-class another-NS-class" - in - Svg.svg - [ SvgAttribs.class svgClass ] - [ Svg.circle [ SvgAttribs.cx "50", SvgAttribs.cy "50", SvgAttribs.r "40" ] [] ] - |> Query.fromHtml - |> Query.has [ exactClassNameNS svgClass ] - ] - - -attributeSelectors : Test -attributeSelectors = - describe "attribute selectors" - [ test "attribute selector does not find class on svg elements" <| - \() -> - let - svgClass = - "some-NS-class" - in - Svg.svg - [ SvgAttribs.class svgClass ] - [ Svg.circle [ SvgAttribs.cx "50", SvgAttribs.cy "50", SvgAttribs.r "40" ] [] ] - |> Query.fromHtml - |> Query.hasNot [ attribute (SvgAttribs.class svgClass) ] ] classSelectors : Test classSelectors = - describe "class selectors" - [ test "does not find class on svg elements" <| - \() -> - let - svgClass = - "some-NS-class" - in + describe "class attribute assertions" + [ describe "Using Html.Attribute.class" <| + classAssertions [ "some-custom-class" ] <| + Html.div [ Attr.class "some-custom-class" ] [] + , describe "Using Html.Attribute.property" <| + classAssertions [ "some-custom-class" ] <| + Html.div [ Attr.property "className" (Json.Encode.string "some-custom-class") ] [] + , describe "Using Html.Attribute.attribute" <| + classAssertions [ "some-custom-class" ] <| + Html.div [ Attr.attribute "class" "some-custom-class" ] [] + , describe "svg with one class" <| + classAssertions [ "some-NS-class" ] <| + Svg.svg [ SvgAttribs.class "some-NS-class" ] [] + , describe "with multiple classes" <| + classAssertions [ "some-NS-class", "another-NS-class" ] <| Svg.svg - [ SvgAttribs.class svgClass ] - [ Svg.circle [ SvgAttribs.cx "50", SvgAttribs.cy "50", SvgAttribs.r "40" ] [] ] - |> Query.fromHtml - |> Query.hasNot [ class svgClass ] + [ SvgAttribs.class "some-NS-class" + , SvgAttribs.class "another-NS-class" + ] + [] ] +classAssertions : List String -> Html.Html msg -> List Test +classAssertions classes html = + (test "Test.Html.Selector.classes finds the classes" <| + \_ -> + html + |> Query.fromHtml + |> Query.has [ Selector.classes classes ] + ) + :: List.map + (\className -> + test ("Test.Html.Selector.class finds the class: " ++ className) <| + \_ -> + html + |> Query.fromHtml + |> Query.has [ Selector.class className ] + ) + classes + + {-| -} bug13 : Test @@ -138,7 +86,7 @@ bug13 = [ Html.h1 [ Attr.title "greeting", Attr.class "me" ] [ Html.text "Hello!" ] ] |> Query.fromHtml |> Query.find [ attribute (Attr.title "greeting") ] - |> Query.has [ text "Hello!", class "me" ] + |> Query.has [ Selector.text "Hello!", Selector.class "me" ] ]