Test.PagesProgram.Viewer

A browser-based visual test runner that lets you step through elm-pages test snapshots in your browser. Displays a Cypress-style command log sidebar alongside the rendered page view.

module TestViewer exposing (main)


import Test.PagesProgram as PagesProgram
import Test.PagesProgram.Viewer as Viewer


main =
    Viewer.app
        [ ( "Blog loads posts"
          , myBlogTest |> PagesProgram.toSnapshots
          )
        , ( "Counter increments"
          , myCounterTest |> PagesProgram.toSnapshots
          )
        ]

Open the compiled HTML in your browser, then use arrow keys to step through.

The Cookies sidebar (c) displays signed session cookies with the secret that was used. Note: the in-memory "checksum" shown next to the secret is a fast non-cryptographic FNV1a hash, not a real HMAC-SHA256 — it only exists so the visual runner can distinguish different secrets and detect test-time tampering of signed-cookie payloads.

app : List ( String, List Snapshot ) -> Program Flags Model Msg

Create a visual test runner application. Pass a list of named tests with their snapshots.

main =
    Viewer.app
        [ ( "my test", myTest |> PagesProgram.toSnapshots )
        ]

type alias Flags =

()

Flags for the viewer app. Currently unused.

type alias Model =

{ tests : List NamedTest

, currentTestIndex : Int

, currentStepIndex : Int

, hoveredStepIndex : Maybe Int

, showModel : Bool

, sidebarMode : SidebarMode

, navKey : Key

, basePath : String

, searchQuery : String

, viewportWidth : Maybe Int

, showEffects : Bool

, showNetwork : Bool

, showNetworkBackend : Bool

, showNetworkFrontend : Bool

, showFetchers : Bool

, showCookies : Bool

, previewMode : PreviewMode

, expandedGroups : Set Int

, modelTreeExpanded : Set String

}

The viewer's model.

type Msg

The viewer's messages.

dillonkearns/elm-pages/12.3.0

Test.PagesProgram.Viewer

Modules