Prove that a shim for Browser.sandbox can work

exercises/concept/arlos-alphabetiser/elm.json

@@ -0,0 +1,29 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src"
+    ],
+    "elm-version": "0.19.1",
+    "dependencies": {
+        "direct": {
+            "elm/core": "1.0.5",
+            "elm/json": "1.1.3",
+            "elm/parser": "1.1.0",
+            "elm/random": "1.0.0",
+            "elm/regex": "1.0.0",
+            "elm/time": "1.0.0",
+            "elm/html": "1.0.0"
+        },
+        "indirect": {}
+    },
+    "test-dependencies": {
+        "direct": {
+            "elm-explorations/test": "2.1.0",
+            "rtfeldman/elm-iso8601-date-strings": "1.1.4"
+        },
+        "indirect": {
+            "elm/bytes": "1.0.8",
+            "elm/virtual-dom": "1.0.3"
+        }
+    }
+}

exercises/concept/arlos-alphabetiser/src/ArlosAlphabetiser.elm

@@ -0,0 +1,55 @@
+module ArlosAlphabetiser exposing (main, init, update, view, Msg(..))
+
+import Browser
+import Html exposing (Html, div, input, text)
+import Html.Attributes exposing (placeholder, value)
+import Html.Events exposing (onInput)
+
+
+
+-- MAIN
+
+
+main =
+  Browser.sandbox { init = init, update = update, view = view }
+
+
+
+-- MODEL
+
+
+type alias Model =
+  { content : String
+  }
+
+
+init : Model
+init =
+  { content = "" }
+
+
+
+-- UPDATE
+
+
+type Msg
+  = Change String
+
+
+update : Msg -> Model -> Model
+update msg model =
+  case msg of
+    Change newContent ->
+      { model | content = newContent }
+
+
+
+-- VIEW
+
+
+view : Model -> Html Msg
+view model =
+  div []
+    [ input [ placeholder "Text to alphabetise", value model.content, onInput Change ] []
+    , div [] [ text (model.content |> String.toLower |> String.toList |> List.sort |> String.fromList) ]
+    ]

exercises/concept/arlos-alphabetiser/src/Browser.elm

@@ -0,0 +1,13 @@
+module Browser exposing (sandbox)
+
+import Html exposing (Html)
+
+type alias Sandbox msg model =
+    { init : model
+    , update : msg -> model -> model
+    , view : model -> Html msg
+    }
+
+
+sandbox : Sandbox msg model -> Html msg --Sandbox msg model
+sandbox { init, view } = view init

exercises/concept/arlos-alphabetiser/tests/Tests.elm

@@ -0,0 +1,48 @@
+module Tests exposing (tests)
+
+import Expect
+import ArlosAlphabetiser exposing (main, init, update, view, Msg(..))
+import Test exposing (..)
+import Test.Html.Query as Query
+import Test.Html.Selector exposing (tag, text)
+import Test.Html.Event as Event
+
+tests : Test
+tests =
+    describe "ArlosAlphabetiser"
+        [ describe "1"
+            [ test "init should return a model empty content" <|
+                \_ ->
+                    init
+                        |> Expect.equal { content = "" }
+            ]
+        , describe "2"
+            [ test "update should change the model content" <|
+                \_ ->
+                    update (Change "new content" ) { content = "" }
+                        |> Expect.equal { content = "new content" }
+            ]
+        , describe "3"
+            [ test "view should alphabetise content" <|
+                \_ ->
+                    view { content = "cats" }
+                        |> Query.fromHtml
+                        |> Query.has [ text "acst" ]
+            , test "view should blah" <|
+                \_ ->
+                    view { content = "" }
+                        |> Query.fromHtml
+                        |> Query.find [ tag "input" ]
+                        |> Event.simulate (Event.input "cats")
+                        |> Event.expect (Change "cats")
+            ]
+        , describe "4"
+            [ test "main should create the sandbox" <|
+                \_ ->
+                    -- This is a bit of a hack, and doesn't test the update function is passed,
+                    -- but elm make requires us to return something it understands, and an 
+                    -- Html Msg is the only such thing we can feasibly create.
+                    main
+                        |> Expect.equal (view init)
+            ]
+        ]