This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
0.1.0 0.1.1
Snapshot Testing for Elm
version 1.0.0
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.0
Committed At 2018-04-19 13:39:22 UTC
myrho/elm-round 1.0.2 <= v < 2.0.0 1.0.4
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1

Modules

README

elm snapshot tests :camera:

Installation

npm i elm-snapshots-tests

elm-package install kalutheo/elm-snapshot-tests

Why ?

Snapshot Testing is a technic used in frontend development for visual regression and graphical UI Testing. It has been democratized by Jest and it is a powerful way to unit test your code with very few efforts.

As jest documention states :

snapshots can capture any serializable value and should be used anytime the goal is testing whether the output is correct

The Elm Update function of a program seems to be a great candidate for Snapshot Testing !

This library primary goal is to bring Snapshot Testing to Elm and facilitate business logic testing.

Before :

suite =
    describe "Bmi Calculator App"
        [ describe "A Small person BMI"
            [ test "Select a Gender" <|
                \_ ->
                    let
                        expectedModel =
                            { initialModel | gender = Female }

                        newModel =
                            update
                                (SelectGender Female)
                                initialModel
                                |> Tuple.first
                    in
                    Expect.equal newModel expectedModel
            , test "Select a Height" <|
                \_ ->
                    let
                        expectedModel =
                            { initialModel | height = "150" }

                        newModel =
                            update
                                (SelectHeight "150")
                                initialModel
                                |> Tuple.first
                    in
                    Expect.equal newModel expectedModel
            , test "Select a Weight" <|
                \_ ->
                    let
                        expectedModel =
                            { initialModel | weight = "55" }

                        newModel =
                            update
                                (SelectWeight "55")
                                initialModel
                                |> Tuple.first
                    in
                    Expect.equal newModel expectedModel
            ]
        ]

After : :rocket:

tests =
    [ describe "A small person BMI"
        ([ it "Select a Gender" (SelectGender Female)
         , it "Select a Height" (SelectHeight "150")
         , it "Select a Weight" (SelectWeight "55")
         ]
            |> snapshotUpdate initialModel update
        )
    , describe "A tall and slim person BMI"
        ([ it "Select a Gender" (SelectGender Male)
         , it "Select a Height" (SelectHeight "190")
         , it "Select a Weight" (SelectWeight "55")
         ]
            |> snapshotUpdate initialModel update
        )
    ]

The resulting Snapshot :

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`A Small person BMI Select a Gender 1`] = `
Object {
  "msg": "SelectGender Female",
  "newModel": "{ height = \\"180\\", weight = \\"80\\", gender = Female }",
  "title": "Select a Gender",
}
`;

exports[`A Small person BMI Select a Height 1`] = `
Object {
  "msg": "SelectHeight \\"150\\"",
  "newModel": "{ height = \\"150\\", weight = \\"80\\", gender = Female }",
  "title": "Select a Height",
}
`;

exports[`A Small person BMI Select a Weight 1`] = `
Object {
  "msg": "SelectWeight \\"55\\"",
  "newModel": "{ height = \\"150\\", weight = \\"55\\", gender = Female }",
  "title": "Select a Weight",
}
`;

Usage

1 - Write an Elm Snapshots Test file in your project directory (next to elm-package.json and package.json) : see ExampleBmiCalculatorTest.elm

2 - Run elm-snapshots-test --name ExampleBmiCalculatorTest (where name is the name of your Elm Snapshots Test Module)

3 - Your snapshots will appear in a __snapshots__