Take a look at-Driving HTML Templates

Let’s examine the right way to 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 bundle.

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

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 can 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 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 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 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 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 (due to 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 will 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 achieved, 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 fitting stage of leniency
for HTML, after which parses the HTML token by token. Certainly, we see the error
message we wished:

--- FAIL: Test_wellFormedHtml (0.00s)
    index_template_test.go:61: Error parsing html: XML syntax error on line 4: surprising finish aspect 

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 [] 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 just 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

Stage 2: testing HTML construction

What else ought to we take a look at?

We all know that the seems of a web page can solely be examined, in the end, by a
human how it’s rendered in a browser. Nonetheless, there’s typically
logic in templates, and we would like to have the ability to take a look at that logic.

One may be tempted to check the rendered HTML with string equality,
however this method fails in observe, as a result of templates comprise loads of
particulars that make string equality assertions impractical. The assertions
change into very verbose, and when studying the assertion, it turns into troublesome
to grasp what it’s that we’re attempting to show.

What we want
is a way to claim that some elements of the rendered HTML
correspond to what we count on, and to ignore all the main points we do not
care about. A technique to do that is by working queries with the CSS selector language:
it’s a highly effective language that permits us to pick out the
components that we care about from the entire HTML doc. As soon as we’ve
chosen these components, we (1) depend that the variety of aspect returned
is what we count on, and (2) that they comprise the textual content or different content material
that we count on.

The UI that we’re imagined to generate seems like this:

There are a number of particulars which are 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”, “Energetic”, “Accomplished” will likely be
   highlighted, relying on the present url; for example if we resolve that the
   url that reveals solely the “Energetic” objects is /lively, then when the present url
   is /lively, the “Energetic” button ought to be surrounded by a skinny crimson
   rectangle
5. The “Clear accomplished” button ought to solely be seen if any merchandise is
   accomplished

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

This can be 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, offered for example:

index.tmpl

supply