Skip to content

Commit

Permalink
Make main in to a stub, update tests for new code
Browse files Browse the repository at this point in the history
  • Loading branch information
ceddlyburge committed Feb 21, 2025
1 parent c7966bc commit 8dc9efc
Show file tree
Hide file tree
Showing 12 changed files with 71 additions and 54 deletions.
12 changes: 5 additions & 7 deletions exercises/concept/paulas-palindromes/.docs/hints.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,33 @@

- Check out the [Elm Guide][elm-guide], which has a nice worked example that is similar.

## 1. Define the Model type for the application
## 1. Define the Model and Msg types for the application

- The `Model` contains the application's state - all the data that the application needs.
- This application just needs a string to store the text in the Text Box.
- It can be any type, but in any useful application it is always a [record][record].

## 2. Define the Msg type for the application

- The `Msg` type is a defines the messages that are passed to the `update` function, to trigger specific changes in the model.
- This application only needs one change to the model - updating the model when the text in the Text Box changes.
- It can be any type, but in any useful application it is always a [custom type][custom-type].

## 3. Write the update function
## 2. Write the update function

- In any useful application the update function will use a `case` statement to pattern match on the `Msg` parameter.
- IN each branch of the case statement it will extract information it needs from the `Msg` parameter and return an updated `Model`
- The `Model` should be a record, and [record update syntax][record-update-syntax] is normally used.

## 4. Write the view function
## 3. Write the view function

- The `view` function should probably return a `div` for the root element
- The first child should be an `input`, with a `value` attribute for the current text, and an `nInput` attribute / event with the relevant variant of the `Msg`.
- The second child should probably be another `div` with a `text`child stating whether the text is a palindrome or not.

## 5. Write the init function
## 4. Write the init function

- This should simply return a `Model` with sensible default values (probably an empty string).

## 6. Write the main function
## 5. Write the main function

- The main function should just called [`Browser.sandbox`][browser-sandbox]
- `Browser.sandbox` requires a [record][record] argument with the `init`, `update` and `view` functions.
Expand Down
18 changes: 9 additions & 9 deletions exercises/concept/paulas-palindromes/.docs/instructions.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,29 @@ You decide to do this using an Elm [sandbox][browser-sandox] application.
The application will have a Text Box, that Paula can type her guess into, and text stating whether or not the text in the box is a palindrome or not.
The text will update whenever the text in the Text Box changes.

## 1. Define the Model type for the application
## 1. Define the Model and Msg types for the application

The application `Model` needs the string to check.

## 2. Define the Msg type for the application
The application needs a `Msg` to indicate that the text in the Text Box has changed. The variant for this should be called `Change`

The application needs a `Msg` to indicate that the text in the Text Box has changed.

## 3. Write the update function
## 2. Write the update function

The update function should take a `Msg` and a `Model` parameter, and return a new `Model`.

## 4. Write the view function
## 3. Write the view function

Elm requires that the view function has to return an `Html msg` type, which means that you need to return a single element from the view function (and not an array of elements).

Inside this root element, there should be an `input` element (the Text Box),and a `div` with `text` content to state whether the text in the `input` is a palindrome or not.
Inside this root element, there should be an `input` element (the Text Box), and a `div` with `text` content to state whether the text in the `input` is a palindrome or not.

The text should be "This is a palindrome" or "Not a palindrome".

## 5. Write the init function
## 4. Write the init function

The `init` function should return a sensible initial `Model` value.

## 6. Write the main function
## 5. Write the main function

The `main` function should call [`Browser.sandbox`][browser-sandbox], passing a record parameter with the `init`, `update` and `view` functions.

Expand Down
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Introduction

%{concept: web-applications-1}
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,17 @@ update msg model =

-- VIEW

isPalindrome : String -> String
isPalindrome content =
if content == (content |> String.toLower |> String.reverse) then
"This is a palindrome"
else
"Not a palindrome"


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) ]
[ input [ placeholder "Text to check for a palindrome", value model.content, onInput Change ] []
, div [] [ text (isPalindrome model.content) ]
]
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ type alias Sandbox msg model =
}


sandbox :
Sandbox msg model
-> Html msg --Sandbox msg model
sandbox : Sandbox msg model -> Html msg
sandbox { init, view } =
view init
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module Main exposing (Msg(..), init, main, update, view)
module Main exposing (..)

import Browser
import Html exposing (Html, div, input, text)
Expand All @@ -7,7 +7,6 @@ import Html.Events exposing (onInput)



-- MAIN
-- When you have finished this exercise, this file will be an Elm program.
--
-- You can copy this file to Ellie (an online Elm sandbox - https://ellie-app.com/)
Expand All @@ -21,46 +20,35 @@ import Html.Events exposing (onInput)
-- - Then go to the url in the output to view the application (localhost://53529 or similar)


-- MAIN

main: Html msg
main =
Browser.sandbox { init = init, update = update, view = view }
Debug.todo "Implement main function"



-- MODEL

-- define the Model type

type alias Model =
{ content : String
}


init : Model
init =
{ content = "" }
Debug.todo "Implement init function"



-- UPDATE


type Msg
= Change String

-- define the Msg type, with a `Change` variant

update : Msg -> Model -> Model
update msg model =
case msg of
Change newContent ->
{ model | content = newContent }

Debug.todo "Implement update function"


-- 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) ]
]
Debug.todo "Implement view function"
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
module Tests exposing (tests)

import Expect
import Main exposing (Msg(..), init, main, update, view)
import Main exposing (..)
import Test exposing (..)
import Test.Html.Event as Event
import Test.Html.Query as Query
Expand All @@ -10,12 +10,24 @@ import Test.Html.Selector exposing (tag, text)

tests : Test
tests =
describe "ArlosAlphabetiser"
describe "Paulas Palindromes"
[ describe "1"
[ test "init should return a model empty content" <|
[test "Model is exposed" <|
\_ ->
init
|> Expect.equal { content = "" }
let
identity : Model -> Model
identity model =
model
in
Expect.pass,
test "Msg is exposed" <|
\_ ->
let
identity : Msg -> msg
identity msg =
msg
in
Expect.pass
]
, describe "2"
[ test "update should change the model content" <|
Expand All @@ -24,20 +36,31 @@ tests =
|> Expect.equal { content = "new content" }
]
, describe "3"
[ test "view should alphabetise content" <|
[ test "view should identify content as a palindrome" <|
\_ ->
view { content = "tacocat" }
|> Query.fromHtml
|> Query.has [ text "This is a palindrome" ]
, test "view should identify content that is not a palindrome" <|
\_ ->
view { content = "cats" }
view { content = "wrapcat" }
|> Query.fromHtml
|> Query.has [ text "acst" ]
, test "view should blah" <|
|> Query.has [ text "Not a palindrome" ]
, test "view should create Msg.Change onChange" <|
\_ ->
view { content = "" }
|> Query.fromHtml
|> Query.find [ tag "input" ]
|> Event.simulate (Event.input "cats")
|> Event.expect (Change "cats")
|> Event.simulate (Event.input "cat")
|> Event.expect (Change "cat")
]
, describe "4"
[ test "init should return a model empty content" <|
\_ ->
init
|> Expect.equal { content = "" }
]
, describe "5"
[ test "main should create the sandbox" <|
\_ ->
-- This is a bit of a hack, and doesn't test the update function is passed,
Expand Down

0 comments on commit 8dc9efc

Please sign in to comment.