Take a look at-Driving HTML Templates

After a decade or extra the place Single-Web page-Functions generated by
JavaScript frameworks have
develop into the norm, we see that server-side rendered HTML is turning into
common once more, additionally because of libraries resembling HTMX or Turbo. Writing a wealthy internet UI in a
historically server-side language like Go or Java is not simply attainable,
however a really engaging proposition.

We then face the issue of how you can write automated checks for the HTML
elements of our internet functions. Whereas the JavaScript world has developed highly effective and subtle 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 internet utility in Go or Java, HTML is often generated
by way of templates, which comprise small fragments of logic. It’s actually
attainable to check them not directly by way of end-to-end checks, however these checks
are sluggish and costly.

We will 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 check is verifying. This method works with any
language that has entry to an HTML parsing library that helps CSS
selectors; examples are supplied in Go and Java.

Stage 1: checking for sound HTML

The primary factor we need to verify is that the HTML we produce is
mainly sound. I do not imply to verify that HTML is legitimate in keeping with the
W3C; it will be cool to do it, however it’s higher to start out with a lot less complicated and quicker checks.
For example, we would like our checks to
break if the template generates one thing like

<div>foo</p>

Let’s have a look at how you can do it in levels: we begin with the next check 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

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

If we run this check, 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 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.

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

  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 factor that
is closed by a p factor. There’s 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)

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

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

Take a look at-Driving HTML Templates

Stage 1: checking for sound HTML

Stage 2: testing HTML construction

What else ought to we check?

Testing HTML content material

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

The second check

Make it simple so as to add new checks

Making the desk extra expressive, on the expense of the check code

Stage 3: testing HTML behaviour

Loading the web page within the Playwright browser

Figuring out todo gadgets

Clicking on a todo merchandise

Spherical-trip to the server

Bonus stage: Stringly asserted

Related Articles

LEAVE A REPLY Cancel reply

Latest Articles