Check-Driving HTML Templates

After a decade or extra the place Single-Web page-Purposes generated by
JavaScript frameworks have
turn out to be the norm, we see that server-side rendered HTML is changing into
standard once more, additionally due to libraries reminiscent of HTMX or Turbo. Writing a wealthy net UI in a
historically server-side language like Go or Java is no longer simply potential,
however a really engaging proposition.

We then face the issue of easy methods to write automated checks for the HTML
components of our net functions. Whereas the JavaScript world has developed highly effective and refined methods to check the UI,
ranging in measurement from unit-level to integration to end-to-end, in different
languages we don’t have such a richness of instruments out there.

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

We are able to as a substitute write unit checks that use CSS selectors to probe the
presence and proper content material of particular HTML components inside a doc.
Parameterizing these checks makes it simple so as to add new checks and to obviously
point out what particulars every take a look at 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.

Degree 1: checking for sound HTML

The primary factor we need 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 will be cool to do it, but it surely’s higher to begin with a lot less complicated and sooner checks.
As an example, we wish our checks to
break if the template generates one thing like

<div>foo</p>

Let’s have a look at easy methods to do it in levels: we begin with the next take a look at that
tries to compile the template. In Go we use the usual html/template bundle.

  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 widespread decisions.

Java

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

If we run this take a look at, 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 take a look at ought to cross.

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

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

Java

  @Check
  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).

  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

  @Check
  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 count on to see an
error, as a result of in our damaged HTML there’s a div aspect that
is closed by a p aspect. 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 reply)

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

	function	CSS selector
①	All of the objects	ul.todo-list li
②	Accomplished objects	ul.todo-list li.accomplished
⓷	Objects left	span.todo-count
④	Highlighted navigation hyperlink	ul.filters a.chosen
⑤	Clear accomplished button	button.clear-completed

Check-Driving HTML Templates

Degree 1: checking for sound HTML

Degree 2: testing HTML construction

What else ought to we take a look at?

Testing HTML content material

Check each content material and soundness on the identical time

The second take a look at

Make it simple so as to add new checks

Making the desk extra expressive, on the expense of the take a look at code

Recent Articles

Related Stories

Leave A Reply Cancel reply