Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Test.Html.Query.has wrongfully returns a failed expectation even when the clauses in the Selector are there #134

Open
sashaafm opened this issue Apr 10, 2020 · 4 comments · May be fixed by #175
Open

Test.Html.Query.has wrongfully returns a failed expectation even when the clauses in the Selector are there #134

sashaafm opened this issue Apr 10, 2020 · 4 comments · May be fixed by #175

Comments

@sashaafm
Copy link

Hello, I'm seeing the following error in a test:


    ▼ Query.findAll [ tag "svg" ]

        1)  <svg class="some-class-type-1 some-class-icon v-align-middle" height="20" width="20">
                <circle cx="10" cy="10" fill="#fb8532" r="9" shape-rendering="geometricPrecision" stroke="black" stroke-width="0.5">
                </circle>
            </svg>

        2)  <svg class="some-class-type-2 some-class-icon v-align-middle" height="20" width="20">
                <circle cx="10" cy="10" fill="#f66a0a" r="9" shape-rendering="geometricPrecision" stroke="black" stroke-width="0.5">
                </circle>
            </svg>

        3)  <svg class="some-class-type-0 some-class-icon v-align-middle" height="20" width="20">
                <circle cx="10" cy="10" fill="#ffdf5d" r="9" shape-rendering="geometricPrecision" stroke="black" stroke-width="0.5">
                </circle>
            </svg>


    ▼ Query.index 0

        1)  <svg class="some-class-type-1 some-class-icon v-align-middle" height="20" width="20">
                <circle cx="10" cy="10" fill="#fb8532" r="9" shape-rendering="geometricPrecision" stroke="black" stroke-width="0.5">
                </circle>
            </svg>


    ▼ Query.has [ class "some-class-type-1" ]

    ✗ has class "some-class-type-1"

as you can see Query.index 0 finds an svg with some-class-type-1, and I use a Query.has [ class "some-class-type-1" ]. However, it reports as not having that class some-class-type-1. AFAIK, this is a bug because Query.has is supposed to return a successful expectation if the Selector clauses given to it are true, which they seem to be in this case.

I'm providing the test code below:

model
|> view
|> Query.fromHtml
|> Query.findAll [ Selector.class "row" ]
|> Query.keep (Selector.tag "svg")
|> Expect.all
     [ Query.index 0
         >> Query.has [ Selector.class "some-class-type-1" ]
     , Query.index 1
         >> Query.has [ Selector.class "some-class-type-2"]
     , Query.index 2
         >> Query.has [ Selector.class "some-class-type-0"]
     ]

If there's any further information I can give please do tell.

Thank you
@TheManSpeaker
Copy link

I'm having the same issue:

▼ Query.find [ tag "svg" ]

    1)  <svg class="feather feather-chevron-down" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24">
            <polyline points="6 9 12 15 18 9">
            </polyline>
        </svg>


▼ Query.has [ class "feather-chevron-down" ]

✗ has class "feather-chevron-down"

@Confidenceman02
Copy link

Confidenceman02 commented Jan 14, 2022 •
edited
Loading

svg's internally are seen by elm as NodeNs or KeyedNodeNs types and the way classes are added to them is different to your standard Html elements.

The class selector you are using is really only going to work for html elements not svg's which I don't think is a bug, albeit, it's not an intuitive limitation.

Have you tried using an attribute selector to find the class?

Query.has [ namedAttr (SvgAttribs.class "feather feather-chevron-down") ] might do the trick.

I think a specific selector for svg classes should be added.

elm-css had a similar issue which you can read about here. There's a fix at the current time of writing this which we are waiting to get merged.

@Confidenceman02 Confidenceman02 mentioned this issue Jan 14, 2022
Merged
@Confidenceman02
Copy link

Actually looks like namedAttr is an internal module so wont work out of the box. Messing around with the code it does actually find the svg class though. Hmm..

@Confidenceman02
Copy link

Confidenceman02 commented Jan 15, 2022 •
edited
Loading

Here is the reason attribute selector will not work with svg classes. It's treating the attribute "class" like a regular html class. Later it will look for the class in a record under key "className" which it will of course not find because svg's set their classes as an "attribute" with the key of "class".

        Ok (InternalTypes.Attribute { key, value }) ->
            if String.toLower key == "class" then
                value
                    |> String.split " "
                    |> Classes

            else
                namedAttr key value

If you just return namedAttr key value then it works but you break a bunch of stuff.

@Confidenceman02 Confidenceman02 linked a pull request Jan 15, 2022 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: NS class selectors Confidenceman02/test
3 participants
@sashaafm @TheManSpeaker @Confidenceman02