Take a look at-Driving HTML Templates

After a decade or extra the place Single-Web page-Functions generated by
JavaScript frameworks have
become the norm
, we see that server-side rendered HTML is changing into
in style once more, additionally due to libraries corresponding to HTMX or Turbo. Writing a wealthy internet UI in a
historically server-side language like Go or Java is not simply doable,
however a really engaging proposition.

We then face the issue of the way to write automated exams for the HTML
components of our internet functions. Whereas the JavaScript world has advanced powerful and sophisticated methods to check the UI,
ranging in dimension from unit-level to integration to end-to-end, in different
languages we don’t have such a richness of instruments accessible.

When writing an online software in Go or Java, HTML is often generated
by templates, which include small fragments of logic. It’s actually
doable to check them not directly by end-to-end exams, however these exams
are sluggish and costly.

We will as a substitute write unit exams that use CSS selectors to probe the
presence and proper content material of particular HTML components inside a doc.
Parameterizing these exams makes it simple so as to add new exams and to obviously
point out what particulars every check is verifying. This strategy works with any
language that has entry to an HTML parsing library that helps CSS
selectors; examples are supplied in Go and Java.

Motivation

Why test-drive HTML templates? In spite of everything, essentially the most dependable solution to test
{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 important. And if we make a
mistake within the logic of a template, normally the template breaks
in an apparent means, so the error is shortly noticed.

Then again:

  • Counting on handbook exams solely is dangerous; what if we make a change that breaks
    a template, and we do not check it as a result of we didn’t suppose it could affect the
    template? We would get an error at runtime!
  • Templates usually include logic, corresponding to if-then-else’s or iterations over arrays of things,
    and when the array is empty, we frequently want to indicate one thing completely different.
    Guide checking all circumstances, 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’d get completely different leads to completely different browsers, on completely different units. It is good
    to test that the HTML constructions we’re constructing in our templates correspond to
    what we predict.

It seems that test-driving HTML templates is straightforward; let’s examine the way to
do it in Go and Java. I might be utilizing as a place to begin the TodoMVC
template
, which is a pattern software used to showcase JavaScript
frameworks.

We are going to see methods that may be utilized to any programming language and templating expertise, so long as now we have
entry to an appropriate HTML parser.

This text is a bit lengthy; it’s your decision to check out the
final solution in Go or
in Java,
or jump to the conclusions.

Degree 1: checking for sound HTML

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

<div>foo</p>

Let’s have a look at the way to do it in levels: we begin with the next check 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 check, it would fail, as a result of the index.tmpl file does
not exist. So we create it, with the above damaged HTML. Now the check ought to move.

Then we create a mannequin for the template to make use of. The applying manages a todo-list, and
we will 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 leads to 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 wish to parse the HTML and we count on to see an
error, as a result of in our damaged HTML there’s a div component that
is closed by a p component. There’s an HTML parser within the Go
customary library, however it’s too lenient: if we run it on our damaged HTML, we do not get an
error. Fortunately, the Go customary library additionally has an XML parser that may be
configured to parse HTML (due to this Stack Overflow answer)

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)
    
  
    // test 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()
      swap err 
      case io.EOF:
        return // We're carried out, it is legitimate!
      case nil:
        // do nothing
      default:
        t.Fatalf("Error parsing html: %s", err)
      
    
  

source

This code configures the HTML parser to have the precise stage 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: surprising finish component </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();
  

source

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 check passes.

The check, nonetheless, is just too verbose: we extract two helper features, in
order to make the intention of the check clearer, and we get

Go

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

source

Java

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

source

Degree 2: testing HTML construction

What else ought to we check?

We all know that the appears of a web page can solely be examined, finally, by a
human how it’s rendered in a browser. Nevertheless, there may be usually
logic in templates, and we wish to have the ability to check that logic.

One is likely to be tempted to check the rendered HTML with string equality,
however this method fails in follow, as a result of templates include a variety of
particulars that make string equality assertions impractical. The assertions
develop into very verbose, and when studying the assertion, it turns into troublesome
to grasp what it’s that we’re making an attempt to show.

What we’d like
is a way to say that some components of the rendered HTML
correspond to what we count on, and to ignore all the small print we do not
care about.
A technique to do that is by operating queries with the CSS selector language:
it’s a highly effective language that enables us to pick the
components that we care about from the entire HTML doc. As soon as now we have
chosen these components, we (1) depend that the variety of component returned
is what we count on, and (2) that they include the textual content or different content material
that we count on.

The UI that we’re speculated to generate appears like this:

There are a number of particulars which might be rendered dynamically:

  1. The variety of objects and their textual content content material change, clearly
  2. The model of the todo-item adjustments when it is accomplished (e.g., the
    second)
  3. The “2 objects left” textual content will change with the variety of non-completed
    objects
  4. One of many three buttons “All”, “Lively”, “Accomplished” might be
    highlighted, relying on the present url; for example if we determine that the
    url that reveals solely the “Lively” objects is /lively, then when the present url
    is /lively, the “Lively” button must be surrounded by a skinny purple
    rectangle
  5. The “Clear accomplished” button ought to solely be seen if any merchandise is
    accomplished

Every of this issues could be examined with the assistance of CSS selectors.

It is a snippet from the TodoMVC template (barely simplified). I
haven’t but added the dynamic bits, so what we see right here is static
content material, supplied for example:

index.tmpl

  <part class="todoapp">
    <ul class="todo-list">
      <!-- These are right here simply to indicate the construction of the record objects -->
      <!-- Record objects ought to get the category `accomplished` when marked as accomplished -->
      <li class="accomplished">  
        <div class="view">
          <enter class="toggle" kind="checkbox" checked>
          <label>Style JavaScript</label> 
          <button class="destroy"></button>
        </div>
      </li>
      <li>
        <div class="view">
          <enter class="toggle" kind="checkbox">
          <label>Purchase a unicorn</label> 
          <button class="destroy"></button>
        </div>
      </li>
    </ul>
    <footer class="footer">
      <!-- This must be `0 objects left` by default -->
      <span class="todo-count"><sturdy>0</sturdy> merchandise left</span> 
      <ul class="filters">
        <li>
          <a class="chosen" href="#/">All</a> 
        </li>
        <li>
          <a href="#/lively">Lively</a>
        </li>
        <li>
          <a href="#/accomplished">Accomplished</a>
        </li>
      </ul>
      <!-- Hidden if no accomplished objects are left ↓ -->
      <button class="clear-completed">Clear accomplished</button> 
    </footer>
  </part>  

source

By wanting on the static model of the template, we will deduce which
CSS selectors can be utilized to determine the related components for the 5 dynamic
options listed above:

characteristic CSS selector
All of the objects ul.todo-list li
Accomplished objects ul.todo-list li.accomplished
Gadgets left span.todo-count
Highlighted navigation hyperlink ul.filters a.chosen
Clear accomplished button button.clear-completed

We will use these selectors to focus our exams on simply the issues we wish to check.

Testing HTML content material

The primary check will search for all of the objects, and show that the information
arrange by the check is rendered appropriately.

func Test_todoItemsAreShown(t *testing.T) 
  mannequin := todo.NewList()
  mannequin.Add("Foo")
  mannequin.Add("Bar")

  buf := renderTemplate(mannequin)

  // assert there are two <li> components contained in the <ul class="todo-list"> 
  // assert the primary <li> textual content is "Foo"
  // assert the second <li> textual content is "Bar"

We want a solution to question the HTML doc with our CSS selector; a very good
library for Go is goquery, that implements an API impressed by jQuery.
In Java, we hold utilizing the identical library we used to check for sound HTML, specifically
jsoup. Our check turns into:

Go

  func Test_todoItemsAreShown(t *testing.T) 
    mannequin := todo.NewList()
    mannequin.Add("Foo")
    mannequin.Add("Bar")
  
    buf := renderTemplate("index.tmpl", mannequin)
  
    // parse the HTML with goquery
    doc, err := goquery.NewDocumentFromReader(bytes.NewReader(buf.Bytes()))
    if err != nil 
      // if parsing fails, we cease the check right here with t.FatalF
      t.Fatalf("Error rendering template %s", err)
    
  
    // assert there are two <li> components contained in the <ul class="todo-list">
    choice := doc.Discover("ul.todo-list li")
    assert.Equal(t, 2, choice.Size())
  
    // assert the primary <li> textual content is "Foo"
    assert.Equal(t, "Foo", textual content(choice.Nodes[0]))
  
    // assert the second <li> textual content is "Bar"
    assert.Equal(t, "Bar", textual content(choice.Nodes[1]))
  
  
  func textual content(node *html.Node) string 
    // Just a little mess attributable to the truth that goquery has
    // a .Textual content() technique on Choice however not on html.Node
    sel := goquery.SelectionNodes: []*html.Nodenode
    return strings.TrimSpace(sel.Textual content())
  

source

Java

  @Take a look at
  void todoItemsAreShown() throws IOException 
      var mannequin = new TodoList();
      mannequin.add("Foo");
      mannequin.add("Bar");
  
      var html = renderTemplate("/index.tmpl", mannequin);
  
      // parse the HTML with jsoup
      Doc doc = Jsoup.parse(html, "");
  
      // assert there are two <li> components contained in the <ul class="todo-list">
      var choice = doc.choose("ul.todo-list li");
      assertThat(choice).hasSize(2);
  
      // assert the primary <li> textual content is "Foo"
      assertThat(choice.get(0).textual content()).isEqualTo("Foo");
  
      // assert the second <li> textual content is "Bar"
      assertThat(choice.get(1).textual content()).isEqualTo("Bar");
  

source

If we nonetheless have not modified the template to populate the record from the
mannequin, this check will fail, as a result of the static template
todo objects have completely different textual content:

Go

  --- FAIL: Test_todoItemsAreShown (0.00s)
      index_template_test.go:44: First record merchandise: need Foo, received Style JavaScript
      index_template_test.go:49: Second record merchandise: need Bar, received Purchase a unicorn

Java

  IndexTemplateTest > todoItemsAreShown() FAILED
      org.opentest4j.AssertionFailedError:
      Anticipating:
       <"Style JavaScript">
      to be equal to:
       <"Foo">
      however was not.

We repair it by making the template use the mannequin information:

Go

  <ul class="todo-list">
     vary .Gadgets 
      <li>
        <div class="view">
          <enter class="toggle" kind="checkbox">
          <label> .Title </label>
          <button class="destroy"></button>
        </div>
      </li>
     finish 
  </ul>

source

Java – jmustache

  <ul class="todo-list">
     #allItems 
    <li>
      <div class="view">
        <enter class="toggle" kind="checkbox">
        <label> title </label>
        <button class="destroy"></button>
      </div>
    </li>
     /allItems 
  </ul>

source

Take a look at each content material and soundness on the identical time

Our check works, however it’s a bit verbose, particularly the Go model. If we’ll have extra
exams, they may develop into repetitive and troublesome to learn, so we make it extra concise by extracting a helper operate for parsing the html. We additionally take away the
feedback, because the code must be clear sufficient

Go

  func Test_todoItemsAreShown(t *testing.T) 
    mannequin := todo.NewList()
    mannequin.Add("Foo")
    mannequin.Add("Bar")
  
    buf := renderTemplate("index.tmpl", mannequin)
  
    doc := parseHtml(t, buf)
    choice := doc.Discover("ul.todo-list li")
    assert.Equal(t, 2, choice.Size())
    assert.Equal(t, "Foo", textual content(choice.Nodes[0]))
    assert.Equal(t, "Bar", textual content(choice.Nodes[1]))
  
  
  func parseHtml(t *testing.T, buf bytes.Buffer) *goquery.Doc 
    doc, err := goquery.NewDocumentFromReader(bytes.NewReader(buf.Bytes()))
    if err != nil 
      // if parsing fails, we cease the check right here with t.FatalF
      t.Fatalf("Error rendering template %s", err)
    
    return doc
  

Java

  @Take a look at
  void todoItemsAreShown() throws IOException 
      var mannequin = new TodoList();
      mannequin.add("Foo");
      mannequin.add("Bar");
  
      var html = renderTemplate("/index.tmpl", mannequin);
  
      var doc = parseHtml(html);
      var choice = doc.choose("ul.todo-list li");
      assertThat(choice).hasSize(2);
      assertThat(choice.get(0).textual content()).isEqualTo("Foo");
      assertThat(choice.get(1).textual content()).isEqualTo("Bar");
  
  
  non-public static Doc parseHtml(String html) 
      return Jsoup.parse(html, "");
  

Significantly better! Not less than in my view. Now that we extracted the parseHtml helper, it is
a good suggestion to test for sound HTML within the helper:

Go

  func parseHtml(t *testing.T, buf bytes.Buffer) *goquery.Doc 
    assertWellFormedHtml(t, buf)
    doc, err := goquery.NewDocumentFromReader(bytes.NewReader(buf.Bytes()))
    if err != nil 
      // if parsing fails, we cease the check right here with t.FatalF
      t.Fatalf("Error rendering template %s", err)
    
    return doc
  

source

Java

  non-public static Doc parseHtml(String html) 
      var parser = Parser.htmlParser().setTrackErrors(10);
      var doc = Jsoup.parse(html, "", parser);
      assertThat(parser.getErrors()).isEmpty();
      return doc;
  

source

And with this, we will eliminate the primary check that we wrote, as we are actually testing for sound HTML on a regular basis.

The second check

Now we’re in a very good place for testing extra rendering logic. The
second dynamic characteristic in our record is “Record objects ought to get the category
accomplished when marked as accomplished”. We will write a check for this:

Go

  func Test_completedItemsGetCompletedClass(t *testing.T) 
    mannequin := todo.NewList()
    mannequin.Add("Foo")
    mannequin.AddCompleted("Bar")
  
    buf := renderTemplate("index.tmpl", mannequin)
  
    doc := parseHtml(t, buf)
    choice := doc.Discover("ul.todo-list li.accomplished")
    assert.Equal(t, 1, choice.Measurement())
    assert.Equal(t, "Bar", textual content(choice.Nodes[0]))
  

source

Java

  @Take a look at
  void completedItemsGetCompletedClass() 
      var mannequin = new TodoList();
      mannequin.add("Foo");
      mannequin.addCompleted("Bar");
  
      var html = renderTemplate("/index.tmpl", mannequin);
  
      Doc doc = Jsoup.parse(html, "");
      var choice = doc.choose("ul.todo-list li.accomplished");
      assertThat(choice).hasSize(1);
      assertThat(choice.textual content()).isEqualTo("Bar");
  

source

And this check could be made inexperienced by including this little bit of logic to the
template:

Go

  <ul class="todo-list">
     vary .Gadgets 
      <li class=" if .IsCompleted accomplished finish ">
        <div class="view">
          <enter class="toggle" kind="checkbox">
          <label> .Title </label>
          <button class="destroy"></button>
        </div>
      </li>
     finish 
  </ul>

source

Java – jmustache

  <ul class="todo-list">
     #allItems 
    <li class=" #isCompleted accomplished /isCompleted ">
      <div class="view">
        <enter class="toggle" kind="checkbox">
        <label> title </label>
        <button class="destroy"></button>
      </div>
    </li>
     /allItems 
  </ul>

source

So little by little, we will check and add the varied dynamic options
that our template ought to have.

We’re releasing this text in installments. Future installments will
present the way to use parameterization to make it simpler so as to add new exams, and
the way to check the conduct of the generated HTML.

To seek out out once we publish the following installment subscribe to this
website’s
RSS feed, or Martin’s feeds on
Mastodon,
LinkedIn, or
X (Twitter).