From c360f22b5e0c18bb5ceabacd4abd9eb697005e32 Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Sat, 15 Jan 2022 21:40:36 +1030 Subject: [PATCH 01/15] feat: Update tests elm.json packages --- tests/elm.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/tests/elm.json b/tests/elm.json index 79cc3df2..446e131e 100644 --- a/tests/elm.json +++ b/tests/elm.json @@ -6,20 +6,20 @@ "elm-version": "0.19.1", "dependencies": { "direct": { - "elm/browser": "1.0.0", - "elm/core": "1.0.0", + "elm/browser": "1.0.1", + "elm/core": "1.0.5", "elm/html": "1.0.0", - "elm/json": "1.0.0", + "elm/json": "1.1.3", "elm/random": "1.0.0", - "elm/svg": "1.0.0", + "elm/svg": "1.0.1", "elm/time": "1.0.0", "elm/url": "1.0.0", - "elm/virtual-dom": "1.0.0", + "elm/virtual-dom": "1.0.2", "elm-explorations/linear-algebra": "1.0.3", "elm-explorations/markdown": "1.0.0", "elm-explorations/test": "1.2.2", - "elm-explorations/webgl": "1.0.1", - "jinjor/elm-diff": "1.0.5", + "elm-explorations/webgl": "1.1.3", + "jinjor/elm-diff": "1.0.6", "rtfeldman/elm-validate": "4.0.1" }, "indirect": { From 3f01f7a229298d8e31036c70bb47a9e1df1592ca Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Sat, 15 Jan 2022 23:41:47 +1030 Subject: [PATCH 02/15] feat: Add NS selectors to Selector type --- src/Test/Html/Internal/ElmHtml/Query.elm | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Test/Html/Internal/ElmHtml/Query.elm b/src/Test/Html/Internal/ElmHtml/Query.elm index a564b2e6..4aa5a38c 100644 --- a/src/Test/Html/Internal/ElmHtml/Query.elm +++ b/src/Test/Html/Internal/ElmHtml/Query.elm @@ -29,7 +29,9 @@ 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 From e4ccc66b2046e0321d512b7c76fe30f195c2731a Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Sat, 15 Jan 2022 23:43:45 +1030 Subject: [PATCH 03/15] feat: Add NS classes to Internal.Selector type --- src/Test/Html/Selector/Internal.elm | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Test/Html/Selector/Internal.elm b/src/Test/Html/Selector/Internal.elm index abe9a4e1..4db638cb 100644 --- a/src/Test/Html/Selector/Internal.elm +++ b/src/Test/Html/Selector/Internal.elm @@ -7,7 +7,9 @@ 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 } From 54a8051420eb13ea963e118d41d066fee2420304 Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Sat, 15 Jan 2022 23:56:35 +1030 Subject: [PATCH 04/15] feat: Expose classNS selector This selector will act specifically on svg classes which follow a different implementation to regular HTML elements. --- src/Test/Html/Selector.elm | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/src/Test/Html/Selector.elm b/src/Test/Html/Selector.elm index 321a5edd..fab93739 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, classes, exactClassName, style, checked, selected, disabled + , id, class, classNS, classes, exactClassName, style, checked, selected, disabled ) {-| Selecting HTML elements. @@ -16,7 +16,7 @@ module Test.Html.Selector exposing ## Attributes -@docs id, class, classes, exactClassName, style, checked, selected, disabled +@docs id, class, classNS, classes, exactClassName, style, checked, selected, disabled -} @@ -110,6 +110,31 @@ 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. This is used less often than [`class`](#class), [`classes`](#classes) or From 63285d4f734c7cdc7e1d31fcf158af72f9d11008 Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Sun, 16 Jan 2022 00:24:14 +1030 Subject: [PATCH 05/15] feat: Add NS helpers for ClassListNS Svg classes will exist as an attribute "class" on the record stringAttributes. --- src/Test/Html/Internal/ElmHtml/Query.elm | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/Test/Html/Internal/ElmHtml/Query.elm b/src/Test/Html/Internal/ElmHtml/Query.elm index 4aa5a38c..201b7fbc 100644 --- a/src/Test/Html/Internal/ElmHtml/Query.elm +++ b/src/Test/Html/Internal/ElmHtml/Query.elm @@ -249,6 +249,11 @@ hasClasses classList facts = containsAll classList (classnames facts) +hasClassesNS : List String -> Facts msg -> Bool +hasClassesNS classList facts = + containsAll classList (classnamesNS facts) + + hasStyle : { key : String, value : String } -> Facts msg -> Bool hasStyle style facts = Dict.get style.key facts.styles == Just style.value @@ -260,6 +265,11 @@ classnames facts = |> Maybe.withDefault "" |> String.split " " +classnamesNS : Facts msg -> List String +classnamesNS facts = + Dict.get "class" facts.stringAttributes + |> Maybe.withDefault "" + |> String.split " " containsAll : List a -> List a -> Bool containsAll a b = @@ -283,6 +293,10 @@ nodeRecordPredicate selector = .facts >> hasClasses classList + ClassListNS classList -> + .facts + >> hasClassesNS classList + Tag tag -> .tag >> (==) tag From 3c97c7a3a0444bd22d6eb4bd21913e490939b106 Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Sun, 16 Jan 2022 00:40:21 +1030 Subject: [PATCH 06/15] feat: Expose classesNS function This selector is for finding multiple classes on an svg element. --- src/Test/Html/Selector.elm | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/src/Test/Html/Selector.elm b/src/Test/Html/Selector.elm index fab93739..c42d53a4 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, exactClassName, style, checked, selected, disabled + , id, class, classNS, classes, classesNS, exactClassName, style, checked, selected, disabled ) {-| Selecting HTML elements. @@ -16,7 +16,7 @@ module Test.Html.Selector exposing ## Attributes -@docs id, class, classNS, classes, exactClassName, style, checked, selected, disabled +@docs id, class, classNS, classes, classesNS, exactClassName, style, checked, selected, disabled -} @@ -85,6 +85,32 @@ 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. From 07caf8691846c963a3b82f57946a273ca22f2c20 Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Sun, 16 Jan 2022 00:55:27 +1030 Subject: [PATCH 07/15] feat: Expose exactClassNameNS selector Tests the exact class value for svg elements. --- src/Test/Html/Selector.elm | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/src/Test/Html/Selector.elm b/src/Test/Html/Selector.elm index c42d53a4..e2545725 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, style, checked, selected, disabled + , id, class, classNS, classes, classesNS, exactClassName, exactClassNameNS, style, checked, selected, disabled ) {-| Selecting HTML elements. @@ -16,7 +16,7 @@ module Test.Html.Selector exposing ## Attributes -@docs id, class, classNS, classes, classesNS, exactClassName, style, checked, selected, disabled +@docs id, class, classNS, classes, classesNS, exactClassName, exactClassNameNS, style, checked, selected, disabled -} @@ -186,6 +186,31 @@ 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 From d2604fe7b310619ad9466da335c4834dc2b1892a Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Sun, 16 Jan 2022 01:07:57 +1030 Subject: [PATCH 08/15] feat: Add NS helpers for ClassNameNS --- src/Test/Html/Internal/ElmHtml/Query.elm | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/Test/Html/Internal/ElmHtml/Query.elm b/src/Test/Html/Internal/ElmHtml/Query.elm index 201b7fbc..20b8f259 100644 --- a/src/Test/Html/Internal/ElmHtml/Query.elm +++ b/src/Test/Html/Internal/ElmHtml/Query.elm @@ -244,6 +244,11 @@ hasClass queryString facts = List.member queryString (classnames facts) +hasClassNS : String -> Facts msg -> Bool +hasClassNS queryString facts = + List.member queryString (classnamesNS facts) + + hasClasses : List String -> Facts msg -> Bool hasClasses classList facts = containsAll classList (classnames facts) @@ -265,12 +270,14 @@ classnames facts = |> Maybe.withDefault "" |> String.split " " + classnamesNS : Facts msg -> List String classnamesNS facts = Dict.get "class" facts.stringAttributes |> Maybe.withDefault "" |> String.split " " + containsAll : List a -> List a -> Bool containsAll a b = b @@ -289,6 +296,10 @@ nodeRecordPredicate selector = .facts >> hasClass classname + ClassNameNS classname -> + .facts + >> hasClassNS classname + ClassList classList -> .facts >> hasClasses classList From 5cd6ca36988ed757e16a8d9a85844d059c2e8c19 Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Sun, 16 Jan 2022 01:09:49 +1030 Subject: [PATCH 09/15] feat: Create NS predicate helpers for markdown These mimick the nodeRecordPredicate helpers. --- src/Test/Html/Internal/ElmHtml/Query.elm | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/Test/Html/Internal/ElmHtml/Query.elm b/src/Test/Html/Internal/ElmHtml/Query.elm index 20b8f259..9f5e4960 100644 --- a/src/Test/Html/Internal/ElmHtml/Query.elm +++ b/src/Test/Html/Internal/ElmHtml/Query.elm @@ -343,10 +343,18 @@ markdownPredicate selector = .facts >> hasClass classname + ClassNameNS classname -> + .facts + >> hasClassNS classname + ClassList classList -> .facts >> hasClasses classList + ClassListNS classList -> + .facts + >> hasClassesNS classList + Tag tag -> always False From 42d5542f1c985dd5963ab47996eeaa3d5bb1db4b Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Sun, 16 Jan 2022 01:11:27 +1030 Subject: [PATCH 10/15] feat: Map NS types to selector string --- src/Test/Html/Selector/Internal.elm | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/Test/Html/Selector/Internal.elm b/src/Test/Html/Selector/Internal.elm index 4db638cb..44b5a64f 100644 --- a/src/Test/Html/Selector/Internal.elm +++ b/src/Test/Html/Selector/Internal.elm @@ -42,9 +42,15 @@ 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 From 67b746785e17fbf98c19ff262f3557c26a592e7d Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Sun, 16 Jan 2022 01:12:42 +1030 Subject: [PATCH 11/15] feat: Map NS Selector types to Internal.Selector types --- src/Test/Html/Selector/Internal.elm | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/Test/Html/Selector/Internal.elm b/src/Test/Html/Selector/Internal.elm index 44b5a64f..b4cee281 100644 --- a/src/Test/Html/Selector/Internal.elm +++ b/src/Test/Html/Selector/Internal.elm @@ -145,9 +145,15 @@ 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 From ed2de93479bd29dd2f61dd125ae9257329bb7ea7 Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Sun, 16 Jan 2022 01:14:12 +1030 Subject: [PATCH 12/15] feat: Add tests for all NS selectors I have added a few tests for attribute and class selectors to assert that these selectors will not work with svg classes. --- tests/src/Test/Html/SelectorTests.elm | 104 +++++++++++++++++++++++++- 1 file changed, 102 insertions(+), 2 deletions(-) diff --git a/tests/src/Test/Html/SelectorTests.elm b/tests/src/Test/Html/SelectorTests.elm index cbcb7bb3..374d04e8 100644 --- a/tests/src/Test/Html/SelectorTests.elm +++ b/tests/src/Test/Html/SelectorTests.elm @@ -4,10 +4,12 @@ module Test.Html.SelectorTests exposing (all) -} import Fuzz exposing (..) -import Html exposing (Html, a, div, footer, header, li, section, span, ul) +import Html import Html.Attributes as Attr +import Svg +import Svg.Attributes as SvgAttribs import Test exposing (..) -import Test.Html.Query as Query exposing (Single) +import Test.Html.Query as Query import Test.Html.Selector exposing (..) @@ -16,6 +18,104 @@ all = describe "Test.Html.Selector" [ 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 + Svg.svg + [ SvgAttribs.class svgClass ] + [ Svg.circle [ SvgAttribs.cx "50", SvgAttribs.cy "50", SvgAttribs.r "40" ] [] ] + |> Query.fromHtml + |> Query.hasNot [ class svgClass ] ] From 21babdd0ce1542f8dcda5fe86c229fcf94cb3cf1 Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Sun, 16 Jan 2022 01:15:31 +1030 Subject: [PATCH 13/15] feat: Add svg package We need this for testing NS selectors --- elm.json | 1 + 1 file changed, 1 insertion(+) diff --git a/elm.json b/elm.json index 87d071f7..616cedb8 100644 --- a/elm.json +++ b/elm.json @@ -21,6 +21,7 @@ "elm/html": "1.0.0 <= v < 2.0.0", "elm/json": "1.0.0 <= v < 2.0.0", "elm/random": "1.0.0 <= v < 2.0.0", + "elm/svg": "1.0.1 <= v < 2.0.0", "elm/virtual-dom": "1.0.0 <= v < 2.0.0" }, "test-dependencies": {} From 499fcca94aa2f718723525f9dd3c8d8a8984f9e9 Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Tue, 18 Jan 2022 10:16:54 +1030 Subject: [PATCH 14/15] feat: Use 1.0.0 svg lib --- elm.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/elm.json b/elm.json index 616cedb8..72f073f4 100644 --- a/elm.json +++ b/elm.json @@ -21,8 +21,8 @@ "elm/html": "1.0.0 <= v < 2.0.0", "elm/json": "1.0.0 <= v < 2.0.0", "elm/random": "1.0.0 <= v < 2.0.0", - "elm/svg": "1.0.1 <= v < 2.0.0", + "elm/svg": "1.0.0 <= v < 2.0.0", "elm/virtual-dom": "1.0.0 <= v < 2.0.0" }, "test-dependencies": {} -} \ No newline at end of file +} From a50f7b32578e66556fd5afdc7e19ffced457c5d1 Mon Sep 17 00:00:00 2001 From: Jaime Terreu Date: Tue, 18 Jan 2022 10:21:40 +1030 Subject: [PATCH 15/15] feat: Revert package versions For compatibilities sake, we are using the original versions. --- tests/elm.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/tests/elm.json b/tests/elm.json index 446e131e..79cc3df2 100644 --- a/tests/elm.json +++ b/tests/elm.json @@ -6,20 +6,20 @@ "elm-version": "0.19.1", "dependencies": { "direct": { - "elm/browser": "1.0.1", - "elm/core": "1.0.5", + "elm/browser": "1.0.0", + "elm/core": "1.0.0", "elm/html": "1.0.0", - "elm/json": "1.1.3", + "elm/json": "1.0.0", "elm/random": "1.0.0", - "elm/svg": "1.0.1", + "elm/svg": "1.0.0", "elm/time": "1.0.0", "elm/url": "1.0.0", - "elm/virtual-dom": "1.0.2", + "elm/virtual-dom": "1.0.0", "elm-explorations/linear-algebra": "1.0.3", "elm-explorations/markdown": "1.0.0", "elm-explorations/test": "1.2.2", - "elm-explorations/webgl": "1.1.3", - "jinjor/elm-diff": "1.0.6", + "elm-explorations/webgl": "1.0.1", + "jinjor/elm-diff": "1.0.5", "rtfeldman/elm-validate": "4.0.1" }, "indirect": {