Test.Html.Query fails to find LineChart by classes

[zkrzyzanowski]

Hi! I'm trying to write some tests using this module and am running into some errors where the classes used on LineCharts view nodes can't be found by Test.Html.Query

I want to make some assertions that the y axis, x axis, etc have the correct titles and are visible.

module TestFake exposing (..)

import Html
import Html.Attributes
import LineChart
import LineChart.Area as Area
import LineChart.Axis as Axis
import LineChart.Axis.Intersection as Intersection
import LineChart.Axis.Line as AxisLine
import LineChart.Axis.Range as Range
import LineChart.Axis.Ticks as Ticks
import LineChart.Axis.Title as Title
import LineChart.Colors as Colors
import LineChart.Container as Container
import LineChart.Coordinate as Coordinate
import LineChart.Dots as Dots
import LineChart.Events as Events
import LineChart.Grid as Grid
import LineChart.Interpolation as Interpolation
import LineChart.Junk as Junk
import LineChart.Legends as Legends
import LineChart.Line as Line
import Loading
import Svg
import Svg.Attributes
import Test exposing (describe, test)
import Test.Html.Query as Query
import Test.Html.Selector as Selector


initChartConfig : LineChart.Config ChartData Msg
initChartConfig =
    { y =
        Axis.full 600 "Y Axis" .yAxis
    , x = Axis.full 600 "X Axis" .dataPoint
    , container = Container.default "container-id"
    , interpolation = Interpolation.default
    , intersection = Intersection.default
    , legends = Legends.default
    , events = Events.hoverOne Hover
    , junk = Junk.default
    , grid = Grid.default
    , area = Area.default
    , line = Line.default
    , dots = Dots.default
    }


type alias ChartData =
    { dataPoint : Float
    , yAxis : Float
    }


type Msg
    = Hover (Maybe ChartData)


all : Test.Test
all =
    describe "Test suite"
        [ test "chart - y axis is visible pass" <|
            \_ ->
                Html.div []
                    [ Svg.node "g"
                        [ Html.Attributes.class "chart__axis--vertical" ]
                        []
                    ]
                    |> Query.fromHtml
                    |> Query.find [ Selector.class "chart__axis--vertical" ]
                    |> Query.has [ Selector.class "chart__axis--vertical" ]
        , test "chart - y axis is visible fail" <|
            \_ ->
                LineChart.viewCustom initChartConfig
                    [ LineChart.line Colors.blue
                        Dots.diamond
                        "Name"
                        []
                    ]
                    |> Query.fromHtml
                    |> Query.find [ Selector.class "chart__axis--vertical" ]
                    |> Query.has [ Selector.class "chart__axis--vertical" ]
        ]

The first test that just creates a g node with the class name passes, but the second that creates a LineChart view fails with the following error:

 ▼ Query.find [ class "chart__axis--vertical" ]

    0 matches found for this query.


    ✗ Query.find always expects to find 1 element, but it found 0 instead.

document.querySelector('.chart__axis--vertical')

returns the correct node when I run it in my app. This may be an elm-test issue. If so, happy to close out the issue.

Thanks in advance!