Test-Driving HTML Templates

Date:


foo

Let’s see how to do it in stages: we start with the following test that
tries to compile the template. In Go we use the standard html/template package.

Go

  func Test_wellFormedHtml(t *testing.T) {
    templ := template.Must(template.ParseFiles("index.tmpl"))
    _ = templ
  }

In Java, we use jmustache
because it’s very simple to use; Freemarker or
Velocity are other common choices.

Java

  @Test
  void indexIsSoundHtml() {
      var template = Mustache.compiler().compile(
              new InputStreamReader(
                      getClass().getResourceAsStream("/index.tmpl")));
  }

If we run this test, it will fail, because the index.tmpl file does
not exist. So we create it, with the above broken HTML. Now the test should pass.

Then we create a model for the template to use. The application manages a todo-list, and
we can create a minimal model for demonstration purposes.

Go

  func Test_wellFormedHtml(t *testing.T) {
    templ := template.Must(template.ParseFiles("index.tmpl"))
    model := todo.NewList()
    _ = templ
    _ = model
  }

Java

  @Test
  void indexIsSoundHtml() {
      var template = Mustache.compiler().compile(
              new InputStreamReader(
                      getClass().getResourceAsStream("/index.tmpl")));
      var model = new TodoList();
  }

Now we render the template, saving the results in a bytes buffer (Go) or as a String (Java).

Go

  func Test_wellFormedHtml(t *testing.T) {
    templ := template.Must(template.ParseFiles("index.tmpl"))
    model := todo.NewList()
    var buf bytes.Buffer
    err := templ.Execute(&buf, model)
    if err != nil {
      panic(err)
    }
  }

Java

  @Test
  void indexIsSoundHtml() {
      var template = Mustache.compiler().compile(
              new InputStreamReader(
                      getClass().getResourceAsStream("/index.tmpl")));
      var model = new TodoList();
  
      var html = template.execute(model);
  }

At this point, we want to parse the HTML and we expect to see an
error, because in our broken HTML there is a div element that
is closed by a p element. There is an HTML parser in the Go
standard library, but it is too lenient: if we run it on our broken HTML, we don’t get an
error. Luckily, the Go standard library also has an XML parser that can be
configured to parse HTML (thanks to this Stack Overflow answer)

Go

  func Test_wellFormedHtml(t *testing.T) {
    templ := template.Must(template.ParseFiles("index.tmpl"))
    model := todo.NewList()
    
    // render the template into a buffer
    var buf bytes.Buffer
    err := templ.Execute(&buf, model)
    if err != nil {
      panic(err)
    }
  
    // check that the template can be parsed as (lenient) XML
    decoder := xml.NewDecoder(bytes.NewReader(buf.Bytes()))
    decoder.Strict = false
    decoder.AutoClose = xml.HTMLAutoClose
    decoder.Entity = xml.HTMLEntity
    for {
      _, err := decoder.Token()
      switch err {
      case io.EOF:
        return // We're done, it's valid!
      case nil:
        // do nothing
      default:
        t.Fatalf("Error parsing html: %s", err)
      }
    }
  }

source

This code configures the HTML parser to have the right level of leniency
for HTML, and then parses the HTML token by token. Indeed, we see the error
message we wanted:

--- FAIL: Test_wellFormedHtml (0.00s)
    index_template_test.go:61: Error parsing html: XML syntax error on line 4: unexpected end element 

In Java, a versatile library to use is jsoup:

Java

  @Test
  void indexIsSoundHtml() {
      var template = Mustache.compiler().compile(
              new InputStreamReader(
                      getClass().getResourceAsStream("/index.tmpl")));
      var model = new TodoList();
  
      var html = template.execute(model);
  
      var parser = Parser.htmlParser().setTrackErrors(10);
      Jsoup.parse(html, "", parser);
      assertThat(parser.getErrors()).isEmpty();
  }

source

And we see it fail:

java.lang.AssertionError: 
Expecting empty but was:<[<1:13>: Unexpected EndTag token [] when in state [InBody],

Success! Now if we copy over the contents of the TodoMVC
template
to our index.tmpl file, the test passes.

The test, however, is too verbose: we extract two helper functions, in
order to make the intention of the test clearer, and we get

Go

  func Test_wellFormedHtml(t *testing.T) {
    model := todo.NewList()
  
    buf := renderTemplate("index.tmpl", model)
  
    assertWellFormedHtml(t, buf)
  }

source

Java

  @Test
  void indexIsSoundHtml() {
      var model = new TodoList();
  
      var html = renderTemplate("/index.tmpl", model);
  
      assertSoundHtml(html);
  }

source

Level 2: testing HTML structure

What else should we test?

We know that the looks of a page can only be tested, ultimately, by a
human looking at how it is rendered in a browser. However, there is often
logic in templates, and we want to be able to test that logic.

One might be tempted to test the rendered HTML with string equality,
but this technique fails in practice, because templates contain a lot of
details that make string equality assertions impractical. The assertions
become very verbose, and when reading the assertion, it becomes difficult
to understand what it is that we’re trying to prove.

What we need
is a technique to assert that some parts of the rendered HTML
correspond to what we expect, and to ignore all the details we don’t
care about.
One way to do this is by running queries with the CSS selector language:
it is a powerful language that allows us to select the
elements that we care about from the whole HTML document. Once we have
selected those elements, we (1) count that the number of element returned
is what we expect, and (2) that they contain the text or other content
that we expect.

The UI that we are supposed to generate looks like this:

There are several details that are rendered dynamically:

  1. The number of items and their text content change, obviously
  2. The style of the todo-item changes when it’s completed (e.g., the
    second)
  3. The “2 items left” text will change with the number of non-completed
    items
  4. One of the three buttons “All”, “Active”, “Completed” will be
    highlighted, depending on the current url; for instance if we decide that the
    url that shows only the “Active” items is /active, then when the current url
    is /active, the “Active” button should be surrounded by a thin red
    rectangle
  5. The “Clear completed” button should only be visible if any item is
    completed

Each of this concerns can be tested with the help of CSS selectors.

This is a snippet from the TodoMVC template (slightly simplified). I
have not yet added the dynamic bits, so what we see here is static
content, provided as an example:

index.tmpl

  

source



Source link

Share post:

[tds_leads title_text="Subscribe" input_placeholder="Email address" btn_horiz_align="content-horiz-center" pp_checkbox="yes" pp_msg="SSd2ZSUyMHJlYWQlMjBhbmQlMjBhY2NlcHQlMjB0aGUlMjAlM0NhJTIwaHJlZiUzRCUyMiUyMyUyMiUzRVByaXZhY3klMjBQb2xpY3klM0MlMkZhJTNFLg==" f_title_font_family="653" f_title_font_size="eyJhbGwiOiIyNCIsInBvcnRyYWl0IjoiMjAiLCJsYW5kc2NhcGUiOiIyMiJ9" f_title_font_line_height="1" f_title_font_weight="700" f_title_font_spacing="-1" msg_composer="success" display="column" gap="10" input_padd="eyJhbGwiOiIxNXB4IDEwcHgiLCJsYW5kc2NhcGUiOiIxMnB4IDhweCIsInBvcnRyYWl0IjoiMTBweCA2cHgifQ==" input_border="1" btn_text="I want in" btn_tdicon="tdc-font-tdmp tdc-font-tdmp-arrow-right" btn_icon_size="eyJhbGwiOiIxOSIsImxhbmRzY2FwZSI6IjE3IiwicG9ydHJhaXQiOiIxNSJ9" btn_icon_space="eyJhbGwiOiI1IiwicG9ydHJhaXQiOiIzIn0=" btn_radius="3" input_radius="3" f_msg_font_family="653" f_msg_font_size="eyJhbGwiOiIxMyIsInBvcnRyYWl0IjoiMTIifQ==" f_msg_font_weight="600" f_msg_font_line_height="1.4" f_input_font_family="653" f_input_font_size="eyJhbGwiOiIxNCIsImxhbmRzY2FwZSI6IjEzIiwicG9ydHJhaXQiOiIxMiJ9" f_input_font_line_height="1.2" f_btn_font_family="653" f_input_font_weight="500" f_btn_font_size="eyJhbGwiOiIxMyIsImxhbmRzY2FwZSI6IjEyIiwicG9ydHJhaXQiOiIxMSJ9" f_btn_font_line_height="1.2" f_btn_font_weight="700" f_pp_font_family="653" f_pp_font_size="eyJhbGwiOiIxMyIsImxhbmRzY2FwZSI6IjEyIiwicG9ydHJhaXQiOiIxMSJ9" f_pp_font_line_height="1.2" pp_check_color="#000000" pp_check_color_a="#ec3535" pp_check_color_a_h="#c11f1f" f_btn_font_transform="uppercase" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjQwIiwiZGlzcGxheSI6IiJ9LCJsYW5kc2NhcGUiOnsibWFyZ2luLWJvdHRvbSI6IjM1IiwiZGlzcGxheSI6IiJ9LCJsYW5kc2NhcGVfbWF4X3dpZHRoIjoxMTQwLCJsYW5kc2NhcGVfbWluX3dpZHRoIjoxMDE5LCJwb3J0cmFpdCI6eyJtYXJnaW4tYm90dG9tIjoiMzAiLCJkaXNwbGF5IjoiIn0sInBvcnRyYWl0X21heF93aWR0aCI6MTAxOCwicG9ydHJhaXRfbWluX3dpZHRoIjo3Njh9" msg_succ_radius="2" btn_bg="#ec3535" btn_bg_h="#c11f1f" title_space="eyJwb3J0cmFpdCI6IjEyIiwibGFuZHNjYXBlIjoiMTQiLCJhbGwiOiIxOCJ9" msg_space="eyJsYW5kc2NhcGUiOiIwIDAgMTJweCJ9" btn_padd="eyJsYW5kc2NhcGUiOiIxMiIsInBvcnRyYWl0IjoiMTBweCJ9" msg_padd="eyJwb3J0cmFpdCI6IjZweCAxMHB4In0="]
spot_imgspot_img

Popular

More like this
Related