Take a look at-Driving HTML Templates

Motivation

Why test-drive HTML templates? In spite of everything, essentially the most dependable option to verify
{that a} template works is to render it to HTML and open it in a browser,
proper?

There’s some reality on this; unit exams can not show {that a} template
works as anticipated when rendered in a browser, so checking them manually
is critical. And if we make a
mistake within the logic of a template, often the template breaks
in an apparent means, so the error is shortly noticed.

Alternatively:

• Counting on guide exams solely is dangerous; what if we make a change that breaks
  a template, and we do not take a look at it as a result of we didn’t suppose it could influence the
  template? We might get an error at runtime!
• Templates typically include logic, equivalent to if-then-else’s or iterations over arrays of things,
  and when the array is empty, we regularly want to indicate one thing completely different.
  Guide checking all instances, for all of those bits of logic, turns into unsustainable in a short time
• There are errors that aren’t seen within the browser. Browsers are extraordinarily
  tolerant of inconsistencies in HTML, counting on heuristics to repair our damaged
  HTML, however then we would get completely different ends in completely different browsers, on completely different gadgets. It is good
  to verify that the HTML constructions we’re constructing in our templates correspond to
  what we predict.

It seems that test-driving HTML templates is simple; let’s have a look at how one can
do it in Go and Java. I shall be utilizing as a place to begin the TodoMVC
template, which is a pattern software used to showcase JavaScript
frameworks.

We’ll see methods that may be utilized to any programming language and templating expertise, so long as we’ve
entry to an appropriate HTML parser.

This text is a bit lengthy; it’s your decision to try the
ultimate answer in Go or
in Java,
or leap to the conclusions.

Stage 1: checking for sound HTML

The primary factor we need to verify is that the HTML we produce is
principally sound. I do not imply to verify that HTML is legitimate in response to the
W3C; it could be cool to do it, but it surely’s higher to start out with a lot easier and quicker checks.
As an illustration, we would like our exams to
break if the template generates one thing like

<div>foo</p>

Let’s examine how one can do it in phases: we begin with the next take a look at that
tries to compile the template. In Go we use the usual html/template package deal.

Go

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

In Java, we use jmustache
as a result of it is quite simple to make use of; Freemarker or
Velocity are different frequent decisions.

Java

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

If we run this take a look at, it’ll fail, as a result of the index.tmpl file does
not exist. So we create it, with the above damaged HTML. Now the take a look at ought to go.

Then we create a mannequin for the template to make use of. The applying manages a todo-list, and
we are able to create a minimal mannequin for demonstration functions.

Go

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

Java

  @Take a look at
  void indexIsSoundHtml() {
      var template = Mustache.compiler().compile(
              new InputStreamReader(
                      getClass().getResourceAsStream("/index.tmpl")));
      var mannequin = new TodoList();
  }

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

Go

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

Java

  @Take a look at
  void indexIsSoundHtml() {
      var template = Mustache.compiler().compile(
              new InputStreamReader(
                      getClass().getResourceAsStream("/index.tmpl")));
      var mannequin = new TodoList();
  
      var html = template.execute(mannequin);
  }

At this level, we need to parse the HTML and we anticipate to see an
error, as a result of in our damaged HTML there’s a div ingredient that
is closed by a p ingredient. There may be an HTML parser within the Go
normal library, however it’s too lenient: if we run it on our damaged HTML, we do not get an
error. Fortunately, the Go normal library additionally has an XML parser that may be
configured to parse HTML (because of this Stack Overflow reply)

Go

  func Test_wellFormedHtml(t *testing.T) {
    templ := template.Should(template.ParseFiles("index.tmpl"))
    mannequin := todo.NewList()
    
    // render the template right into a buffer
    var buf bytes.Buffer
    err := templ.Execute(&buf, mannequin)
    if err != nil {
      panic(err)
    }
  
    // verify that the template could 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()
      change err {
      case io.EOF:
        return // We're carried out, it is legitimate!
      case nil:
        // do nothing
      default:
        t.Fatalf("Error parsing html: %s", err)
      }
    }
  }

supply

This code configures the HTML parser to have the precise degree of leniency
for HTML, after which parses the HTML token by token. Certainly, we see the error
message we needed:

--- FAIL: Test_wellFormedHtml (0.00s)
    index_template_test.go:61: Error parsing html: XML syntax error on line 4: sudden finish ingredient </p>

In Java, a flexible library to make use of is jsoup:

Java

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

supply

And we see it fail:

java.lang.AssertionError: 
Anticipating empty however was:<[<1:13>: Unexpected EndTag token [</p>] when in state [InBody],

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

The take a look at, nonetheless, is simply too verbose: we extract two helper capabilities, in
order to make the intention of the take a look at clearer, and we get

Go

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

supply

Java

  @Take a look at
  void indexIsSoundHtml() {
      var mannequin = new TodoList();
  
      var html = renderTemplate("/index.tmpl", mannequin);
  
      assertSoundHtml(html);
  }

supply