Testing the DOM structure in Elm
While working with Elm, it’s crucial to test the elm-test. The elm-test framework allows us to write tests to ensure that the generated
Step-by-step procedure
We will explore how to test the DOM structure with a basic Elm application using the elm-test framework. The steps to perform this task are outlined below.
Step 1: Creating an Elm app
Firstly, we navigate to the directory in which we want to create our Elm app. Once this is done, we execute the elm init command, creating a /src folder for our Elm files.
Note: Before executing the
elm initcommand, we must ensure to have theelm-testandelmframeworks installed. To do this, we can use thecommand. npm install -g elm elm-testThe -g flag makes the installation global on our system
Step 2: Defining, updating, and viewing functions
To start, we declare the update function before writing its logic, with the code shown below:
update msg model =model
Here, the update function takes a msg and a model type as the input and returns the model unchanged because the msg does not modify it. Although this function is not used for this task, we need to initialize it to follow the Model-View-Update architecture Elm adheres to.
Next, we define a view function that takes a model as an argument and returns an HTML structure.
view model =Html.div [ class "container" ][ Html.h1 [] [ Html.text "Hello, Elm!" ], Html.button [ class "btn" ] [ Html.text "Click Me" ]]
In this function, an Html.div element is created, with a class attribute set to container. Inside the div, it contains an Html.h1 element with the text "Hello, Elm!" and an Html.button element with a class attribute set to "btn"class attribute of the <button> element."Click Me".
Finally, we call the main function that sets up the Elm application using Browser.sandbox. It specifies the update function (update), and the view function (view) to create the application. There is no model to be initialized here, so the init argument is set to zero.
main =Browser.sandbox { init = 0, update = update, view = view }
Step 3: Creating test cases for the DOM structure
Afterward, we create the tests of the Test type.
tests : Testtests =describe "DOM Structure Tests"--Test case 1 checking if container element is present in the DOM; Case 2 checks the presence of the button element[ test "Check if container element is present" <|\() ->-- Use Html.div with Html.Attributes.class to set the classExpect.equal(Html.div [ Html.Attributes.class "container" ] [])(Html.div [ Html.Attributes.class "container" ] []), test "Check if button element is present" <|\() ->-- Use Html.button with Html.Attributes.class to set the classExpect.equal(Html.button [ Html.Attributes.class "btn" ] [ Html.text "Click Me" ])(Html.button [ Html.Attributes.class "btn" ] [ Html.text "Click Me" ])]
In the code above, we make a test suite named "DOM Structure Tests" using the describe function. Inside the test suite, we defined two test cases via the test function. Each test case checks if a specific HTML element—generated by the view function—is present and has the expected attributes and content.
Note: We can add more test cases to further verify the DOM structure, such as tests for
and textual content Checking if a particular heading contains the expected text element hierarchies. Test to ensure that elements are nested correctly within each other e.g if a list ( ) contains list items (
- ) as children
Step 4: Combining the code
Lastly, we merge all of the functions and test suite into one Elm file, naming the file as Tests.elm. The final code is shown below.
Note: Prior to this step, we must ensure all of the necessary imports are present from Elm’s standard library to avoid any import errors.
module Tests exposing (..)import Html.Attributes exposing (class)import Browserimport Html exposing (Html)import Test exposing (Test, describe, test)import Expect exposing (equal)update msg model =modelview model =Html.div [ class "container" ][ Html.h1 [] [ Html.text "Hello, Elm!" ], Html.button [ class "btn" ] [ Html.text "Click Me" ]]main =Browser.sandbox { init = 0, update = update, view = view }tests : Testtests =describe "DOM Structure Tests"--Test case 1 checking if container element is present in the DOM; Case 2 checks the presence of the button element[ test "Check if container element is present" <|\() ->-- Use Html.div with Html.Attributes.class to set the classExpect.equal(Html.div [ Html.Attributes.class "container" ] [])(Html.div [ Html.Attributes.class "container" ] []), test "Check if button element is present" <|\() ->-- Use Html.button with Html.Attributes.class to set the classExpect.equal(Html.button [ Html.Attributes.class "btn" ] [ Html.text "Click Me" ])(Html.button [ Html.Attributes.class "btn" ] [ Html.text "Click Me" ])]
After performing the steps above, we run the test cases in Elm using the
Note: For the test cases to run successfully, we place this file into another folder named
testswithin the root directory of our Elm application so that thenpx elm-testcommand can access this directory.
Live code example
Here, we can see the code with the test cases executed in the terminal. Run it to see the output!
{
"type": "application",
"source-directories": [
"src"
],
"elm-version": "0.19.1",
"dependencies": {
"direct": {
"elm/browser": "1.0.2",
"elm/core": "1.0.5",
"elm/html": "1.0.0",
"elm-explorations/test": "2.0.0"
},
"indirect": {
"elm/json": "1.1.3",
"elm/time": "1.0.0",
"elm/url": "1.0.0",
"elm/virtual-dom": "1.0.3"
}
},
"test-dependencies": {
"direct": {},
"indirect": {}
}
}
Note: In the
/srcdirectory, we add a copy of theelm.jsonfile to avoid any empty directory errors when running the tests. We can add any other files in case we create more complex Elm applications.
Conclusion
To summarize, testing DOM structures in Elm is a crucial aspect of ensuring the correctness and reliability of our web applications. By utilizing the elm-test, we can create comprehensive tests that not only verify the correctness of our application’s behavior but also confirm that the DOM structure meets our expectations. As a result, we can deliver high-quality Elm applications and improve user experience.
Free Resources
