Take a look at-Driving HTML Templates

July 19, 2024

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 turning into
common once more, additionally because of libraries comparable to HTMX or Turbo. Writing a wealthy net UI in a
historically server-side language like Go or Java is no longer simply attainable,
however a really engaging proposition.

We then face the issue of the best way to write automated assessments for the HTML
elements of our net purposes. Whereas the JavaScript world has advanced powerful and sophisticated 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 obtainable.

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

We are able to as an alternative write unit assessments that use CSS selectors to probe the
presence and proper content material of particular HTML components inside a doc.
Parameterizing these assessments makes it simple so as to add new assessments 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 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 easier and sooner checks.
As an illustration, we would like our assessments to
break if the template generates one thing like

<div>foo</p>

Let’s have a look at the best 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 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 is going to 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 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 aspect that
is closed by a p aspect. There may be an HTML parser within the Go
commonplace library, however it’s too lenient: if we run it on our damaged HTML, we do not get an
error. Fortunately, the Go commonplace library additionally has an XML parser that may be
configured to parse HTML (because of 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()
      change err 
      case io.EOF:
        return // We're achieved, 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 suitable 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 </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 take a look at passes.

The take a look at, nevertheless, is simply too verbose: we extract two helper features, 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)

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 take a look at?

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

One is likely to be tempted to check the rendered HTML with string equality,
however this method fails in apply, as a result of templates include plenty of
particulars that make string equality assertions impractical. The assertions
grow to be 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 method to say that some elements 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 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 have now
chosen these components, we (1) depend that the variety of aspect 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 alleged to generate appears to be like like this:

There are a number of particulars which are rendered dynamically:

  1. The variety of gadgets 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 gadgets left” textual content will change with the variety of non-completed
    gadgets
  4. One of many three buttons “All”, “Energetic”, “Accomplished” might be
    highlighted, relying on the present url; as an example if we determine that the
    url that reveals solely the “Energetic” gadgets is /energetic, then when the present url
    is /energetic, the “Energetic” button must 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 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 instance:

index.tmpl 

  <part class="todoapp">
    <ul class="todo-list">
      <!-- These are right here simply to point out the construction of the record gadgets -->
      <!-- Record gadgets 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 gadgets 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="#/energetic">Energetic</a>
        </li>
        <li>
          <a href="#/accomplished">Accomplished</a>
        </li>
      </ul>
      <!-- Hidden if no accomplished gadgets are left ↓ -->
      <button class="clear-completed">Clear accomplished</button> ⑤
    </footer>
  </part>

source

By trying 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:

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

We are able to use these selectors to focus our assessments on simply the issues we wish to take a look at.

Testing HTML content material

The primary take a look at will search for all of the gadgets, and show that the info
arrange by the take a look at is rendered accurately.

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 superb
library for Go is goquery, that implements an API impressed by jQuery.
In Java, we maintain utilizing the identical library we used to check for sound HTML, particularly
jsoup. Our take a look at 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 take a look at 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 
    // A bit mess on account of 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 take a look at will fail, as a result of the static template
todo gadgets have completely different textual content:

Go 

  --- FAIL: Test_todoItemsAreShown (0.00s)
      index_template_test.go:44: First record merchandise: need Foo, bought Style JavaScript
      index_template_test.go:49: Second record merchandise: need Bar, bought 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 knowledge:

Go 

  <ul class="todo-list">
     vary .Objects 
      <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 take a look at works, however it’s a bit verbose, particularly the Go model. If we will have extra
assessments, they’ll grow to be 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 take a look at 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");
  
  
  personal static Doc parseHtml(String html) 
      return Jsoup.parse(html, "");

Significantly better! At the least 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 take a look at right here with t.FatalF
      t.Fatalf("Error rendering template %s", err)
    
    return doc

source

Java 

  personal 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 do away with the primary take a look at that we wrote, as we are actually testing for sound HTML on a regular basis.

The second take a look at

Now we’re in a superb place for testing extra rendering logic. The
second dynamic function in our record is “Record gadgets ought to get the category
accomplished when marked as accomplished”. We are able to write a take a look at 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.Dimension())
    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 take a look at could be made inexperienced by including this little bit of logic to the
template:

Go 

  <ul class="todo-list">
     vary .Objects 
      <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 take a look at and add the assorted dynamic options
that our template ought to have.

Make it simple so as to add new assessments

The primary of the 20 ideas from the superb talk by Russ Cox on Go
Testing is “Make it simple so as to add new take a look at circumstances“. Certainly, in Go there
is an inclination to make most assessments parameterized, for this very purpose.
Alternatively, whereas Java has
good support
for parameterized tests with JUnit 5, they aren’t used as a lot.

Since our present two assessments have the identical construction, we
may issue them right into a single parameterized take a look at.

A take a look at case for us will encompass:

  • A reputation (in order that we will produce clear error messages when the take a look at
    fails)
  • A mannequin (in our case a todo.Record)
  • A CSS selector
  • An inventory of textual content matches that we look forward to finding after we run the CSS
    selector on the rendered HTML.

So that is the info construction for our take a look at circumstances:

Go 

  var testCases = []struct 
    identify     string
    mannequin    *todo.Record
    selector string
    matches  []string
  
    
      identify: "all todo gadgets are proven",
      mannequin: todo.NewList().
        Add("Foo").
        Add("Bar"),
      selector: "ul.todo-list li",
      matches:  []string"Foo", "Bar",
    ,
    
      identify: "accomplished gadgets get the 'accomplished' class",
      mannequin: todo.NewList().
        Add("Foo").
        AddCompleted("Bar"),
      selector: "ul.todo-list li.accomplished",
      matches:  []string"Bar",
    ,

source

Java 

  report TestCase(String identify,
                  TodoList mannequin,
                  String selector,
                  Record<String> matches) 
      @Override
      public String toString() 
          return identify;
      
  
  
  public static TestCase[] indexTestCases() 
      return new TestCase[]
              new TestCase(
                      "all todo gadgets are proven",
                      new TodoList()
                              .add("Foo")
                              .add("Bar"),
                      "ul.todo-list li",
                      Record.of("Foo", "Bar")),
              new TestCase(
                      "accomplished gadgets get the 'accomplished' class",
                      new TodoList()
                              .add("Foo")
                              .addCompleted("Bar"),
                      "ul.todo-list li.accomplished",
                      Record.of("Bar")),
      ;

source

And that is our parameterized take a look at:

Go 

  func Test_indexTemplate(t *testing.T) 
    for _, take a look at := vary testCases 
      t.Run(take a look at.identify, func(t *testing.T) 
        buf := renderTemplate("index.tmpl", take a look at.mannequin)
  
        assertWellFormedHtml(t, buf)
        doc := parseHtml(t, buf)
        choice := doc.Discover(take a look at.selector)
        require.Equal(t, len(take a look at.matches), len(choice.Nodes), "surprising # of matches")
        for i, node := vary choice.Nodes 
          assert.Equal(t, take a look at.matches[i], textual content(node))
        
      )

source

Java 

  @ParameterizedTest
  @MethodSource("indexTestCases")
  void testIndexTemplate(TestCase take a look at) 
      var html = renderTemplate("/index.tmpl", take a look at.mannequin);
  
      var doc = parseHtml(html);
      var choice = doc.choose(take a look at.selector);
      assertThat(choice).hasSize(take a look at.matches.measurement());
      for (int i = 0; i < take a look at.matches.measurement(); i++) 
          assertThat(choice.get(i).textual content()).isEqualTo(take a look at.matches.get(i));

source

We are able to now run our parameterized take a look at and see it go:

Go 

  $ go take a look at -v
  === RUN   Test_indexTemplate
  === RUN   Test_indexTemplate/all_todo_items_are_shown
  === RUN   Test_indexTemplate/completed_items_get_the_'accomplished'_class
  --- PASS: Test_indexTemplate (0.00s)
      --- PASS: Test_indexTemplate/all_todo_items_are_shown (0.00s)
      --- PASS: Test_indexTemplate/completed_items_get_the_'accomplished'_class (0.00s)
  PASS
  okay    tdd-html-templates  0.608s

Java 

  $ ./gradlew take a look at
  
  > Process :take a look at
  
  IndexTemplateTest > testIndexTemplate(TestCase) > [1] all todo gadgets are proven PASSED
  IndexTemplateTest > testIndexTemplate(TestCase) > [2] accomplished gadgets get the 'accomplished' class PASSED

Notice how, by giving a reputation to our take a look at circumstances, we get very readable take a look at output, each on the terminal and within the IDE:

Having rewritten our two previous assessments in desk kind, it is now tremendous simple so as to add
one other. That is the take a look at for the “x gadgets left” textual content:

Go 

  
    identify: "gadgets left",
    mannequin: todo.NewList().
      Add("One").
      Add("Two").
      AddCompleted("Three"),
    selector: "span.todo-count",
    matches:  []string"2 gadgets left",
  ,

source

Java 

  new TestCase(
      "gadgets left",
      new TodoList()
              .add("One")
              .add("Two")
              .addCompleted("Three"),
      "span.todo-count",
      Record.of("2 gadgets left")),

source

And the corresponding change within the html template is:

Go 

  <span class="todo-count"><sturdy>len .ActiveItems</sturdy> gadgets left</span>

source

Java – jmustache 

  <span class="todo-count"><sturdy>activeItemsCount</sturdy> gadgets left</span>

source

The above change within the template requires a supporting technique within the mannequin:

Go 

  kind Merchandise struct 
    Title       string
    IsCompleted bool
  
  
  kind Record struct 
    Objects []*Merchandise
  
  
  func (l *Record) ActiveItems() []*Merchandise 
    var consequence []*Merchandise
    for _, merchandise := vary l.Objects 
      if !merchandise.IsCompleted 
        consequence = append(consequence, merchandise)
      
    
    return consequence

source

Java 

  public class TodoList 
      personal closing Record<TodoItem> gadgets = new ArrayList<>();
      // ...
      public lengthy activeItemsCount() 
          return gadgets.stream().filter(TodoItem::isActive).depend();

source

We have invested somewhat effort in our testing infrastructure, in order that including new
take a look at circumstances is simpler. Within the subsequent part, we’ll see that the necessities
for the following take a look at circumstances will push us to refine our take a look at infrastructure additional.

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

We are going to now take a look at the “All”, “Energetic” and “Accomplished” navigation hyperlinks at
the underside of the UI (see the picture above),
and these rely on which url we’re visiting, which is
one thing that our template has no solution to discover out.

At the moment, all we go to our template is our mannequin, which is a todo-list.
It is not right so as to add the at present visited url to the mannequin, as a result of that’s
person navigation state, not utility state.

So we have to go extra data to the template past the mannequin. A straightforward method
is to go a map, which we assemble in our
renderTemplate operate:

Go 

  func renderTemplate(mannequin *todo.Record, path string) bytes.Buffer 
    templ := template.Should(template.ParseFiles("index.tmpl"))
    var buf bytes.Buffer
    knowledge := map[string]any
      "mannequin": mannequin,
      "path":  path,
    
    err := templ.Execute(&buf, knowledge)
    if err != nil 
      panic(err)
    
    return buf

Java 

  personal String renderTemplate(String templateName, TodoList mannequin, String path) 
      var template = Mustache.compiler().compile(
              new InputStreamReader(
                      getClass().getResourceAsStream(templateName)));
      var knowledge = Map.of(
              "mannequin", mannequin,
              "path", path
      );
      return template.execute(knowledge);

And correspondingly our take a look at circumstances desk has yet one more subject:

Go 

  var testCases = []struct 
    identify     string
    mannequin    *todo.Record
    path     string
    selector string
    matches  []string
  
    
      identify: "all todo gadgets are proven",
      mannequin: todo.NewList().
        Add("Foo").
        Add("Bar"),
      selector: "ul.todo-list li",
      matches:  []string"Foo", "Bar",
    ,
  // ... the opposite circumstances
    
      identify:     "highlighted navigation hyperlink: All",
      path:     "/",
      selector: "ul.filters a.chosen",
      matches:  []string"All",
    ,
    
      identify:     "highlighted navigation hyperlink: Energetic",
      path:     "/energetic",
      selector: "ul.filters a.chosen",
      matches:  []string"Energetic",
    ,
    
      identify:     "highlighted navigation hyperlink: Accomplished",
      path:     "/accomplished",
      selector: "ul.filters a.chosen",
      matches:  []string"Accomplished",
    ,

Java 

  report TestCase(String identify,
                  TodoList mannequin,
                  String path,
                  String selector,
                  Record<String> matches) 
      @Override
      public String toString() 
          return identify;
      
  
  
  public static TestCase[] indexTestCases() 
      return new TestCase[]
              new TestCase(
                      "all todo gadgets are proven",
                      new TodoList()
                              .add("Foo")
                              .add("Bar"),
                      "/",
                      "ul.todo-list li",
                      Record.of("Foo", "Bar")),
              // ... the earlier circumstances
              new TestCase(
                      "highlighted navigation hyperlink: All",
                      new TodoList(),
                      "/",
                      "ul.filters a.chosen",
                      Record.of("All")),
              new TestCase(
                      "highlighted navigation hyperlink: Energetic",
                      new TodoList(),
                      "/energetic",
                      "ul.filters a.chosen",
                      Record.of("Energetic")),
              new TestCase(
                      "highlighted navigation hyperlink: Accomplished",
                      new TodoList(),
                      "/accomplished",
                      "ul.filters a.chosen",
                      Record.of("Accomplished")),
      ;

We discover that for the three new circumstances, the mannequin is irrelevant;
whereas for the earlier circumstances, the trail is irrelevant. The Go syntax permits us
to initialize a struct with simply the fields we’re enthusiastic about, however Java doesn’t have
an identical function, so we’re pushed to go additional data, and this makes the take a look at circumstances
desk tougher to grasp.

A developer would possibly take a look at the primary take a look at case and surprise if the anticipated conduct relies upon
on the trail being set to "/", and is likely to be tempted so as to add extra circumstances with
a distinct path. In the identical method, when studying the
highlighted navigation hyperlink take a look at circumstances, the developer would possibly surprise if the
anticipated conduct is determined by the mannequin being set to an empty todo record. In that case, one would possibly
be led so as to add irrelevant take a look at circumstances for the highlighted hyperlink with non-empty todo-lists.

We wish to optimize for the time of the builders, so it is worthwhile to keep away from including irrelevant
knowledge to our take a look at case. In Java we would go null for the
irrelevant fields, however there’s a greater method: we will use
the builder sample,
popularized by Joshua Bloch.
We are able to shortly write one for the Java TestCase report this fashion:

Java 

  report TestCase(String identify,
                  TodoList mannequin,
                  String path,
                  String selector,
                  Record<String> matches) 
      @Override
      public String toString() 
          return identify;
      
  
      public static closing class Builder 
          String identify;
          TodoList mannequin;
          String path;
          String selector;
          Record<String> matches;
  
          public Builder identify(String identify) 
              this.identify = identify;
              return this;
          
  
          public Builder mannequin(TodoList mannequin) 
              this.mannequin = mannequin;
              return this;
          
  
          public Builder path(String path) 
              this.path = path;
              return this;
          
  
          public Builder selector(String selector) 
              this.selector = selector;
              return this;
          
  
          public Builder matches(String ... matches) 
              this.matches = Arrays.asList(matches);
              return this;
          
  
          public TestCase construct() 
              return new TestCase(identify, mannequin, path, selector, matches);

Hand-coding builders is somewhat tedious, however doable, although there are
automated ways to write down them.
Now we will rewrite our Java take a look at circumstances with the Builder, to
obtain higher readability:

Java 

  public static TestCase[] indexTestCases() 
      return new TestCase[]
              new TestCase.Builder()
                      .identify("all todo gadgets are proven")
                      .mannequin(new TodoList()
                              .add("Foo")
                              .add("Bar"))
                      .selector("ul.todo-list li")
                      .matches("Foo", "Bar")
                      .construct(),
              // ... different circumstances
              new TestCase.Builder()
                      .identify("highlighted navigation hyperlink: Accomplished")
                      .path("/accomplished")
                      .selector("ul.filters a.chosen")
                      .matches("Accomplished")
                      .construct(),
      ;

So, the place are we with our assessments? At current, they fail for the fallacious purpose: null-pointer exceptions
because of the lacking mannequin and path values.
With a view to get our new take a look at circumstances to fail for the suitable purpose, particularly that the template does
not but have logic to focus on the right hyperlink, we should
present default values for mannequin and path. In Go, we will do that
within the take a look at technique:

Go 

  func Test_indexTemplate(t *testing.T) 
    for _, take a look at := vary testCases 
      t.Run(take a look at.identify, func(t *testing.T) 
        if take a look at.mannequin == nil 
          take a look at.mannequin = todo.NewList()
        
        buf := renderTemplate(take a look at.mannequin, take a look at.path)
        // ... identical as earlier than 
      )

source

In Java, we will present default values within the builder:

Java 

  public static closing class Builder 
      String identify;
      TodoList mannequin = new TodoList();
      String path = "/";
      String selector;
      Record<String> matches;
      // ...

source

With these adjustments, we see that the final two take a look at circumstances, those for the highlighted hyperlink Energetic
and Accomplished fail, for the anticipated purpose that the highlighted hyperlink doesn’t change:

Go 

  === RUN   Test_indexTemplate/highlighted_navigation_link:_Active
      index_template_test.go:82: 
            Error Hint:  .../tdd-templates/go/index_template_test.go:82
            Error:        Not equal: 
                          anticipated: "Energetic"
                          precise  : "All"
  === RUN   Test_indexTemplate/highlighted_navigation_link:_Completed
      index_template_test.go:82: 
            Error Hint:  .../tdd-templates/go/index_template_test.go:82
            Error:        Not equal: 
                          anticipated: "Accomplished"
                          precise  : "All"

Java 

  IndexTemplateTest > testIndexTemplate(TestCase) > [5] highlighted navigation hyperlink: Energetic FAILED
      org.opentest4j.AssertionFailedError:
      Anticipating:
       <"All">
      to be equal to:
       <"Energetic">
      however was not.
  
  IndexTemplateTest > testIndexTemplate(TestCase) > [6] highlighted navigation hyperlink: Accomplished FAILED
      org.opentest4j.AssertionFailedError:
      Anticipating:
       <"All">
      to be equal to:
       <"Accomplished">
      however was not.

To make the assessments go, we make these adjustments to the template:

Go 

  <ul class="filters">
    <li>
      <a class=" if eq .path "/" chosen finish " href="#/">All</a>
    </li>
    <li>
      <a class=" if eq .path "/energetic" chosen finish " href="#/energetic">Energetic</a>
    </li>
    <li>
      <a class=" if eq .path "/accomplished" chosen finish " href="#/accomplished">Accomplished</a>
    </li>
  </ul>

source

Java – jmustache 

  <ul class="filters">
    <li>
      <a class=" #pathRoot chosen /pathRoot " href="#/">All</a>
    </li>
    <li>
      <a class=" #pathActive chosen /pathActive " href="#/energetic">Energetic</a>
    </li>
    <li>
      <a class=" #pathCompleted chosen /pathCompleted " href="#/accomplished">Accomplished</a>
    </li>
  </ul>

source

Because the Mustache template language doesn’t enable for equality testing, we should change the
knowledge handed to the template in order that we execute the equality assessments earlier than rendering the template:

Java 

  personal String renderTemplate(String templateName, TodoList mannequin, String path) 
      var template = Mustache.compiler().compile(
              new InputStreamReader(
                      getClass().getResourceAsStream(templateName)));
      var knowledge = Map.of(
              "mannequin", mannequin,
              "pathRoot", path.equals("/"),
              "pathActive", path.equals("/energetic"),
              "pathCompleted", path.equals("/accomplished")
      );
      return template.execute(knowledge);

source

And with these adjustments, all of our assessments now go.

To recap this part, we made the take a look at code somewhat bit extra difficult, in order that the take a look at
circumstances are clearer: this can be a superb tradeoff!

Degree 3: testing HTML behaviour

Within the story thus far, we examined the behaviour of the HTML
templates, by checking the construction of the generated HTML.
That is good, however what if we wished to check the behaviour of the HTML
itself, plus any CSS and JavaScript it could use?

The behaviour of HTML by itself is often fairly apparent, as a result of
there may be not a lot of it. The one components that may work together with the
person are the anchor (<a>), <kind> and
<enter> components, however the image adjustments fully when
we add CSS, that may disguise, present, transfer round issues and plenty extra, and
with JavaScript, that may add any behaviour to a web page.

In an utility that’s primarily rendered server-side, we count on
that almost all behaviour is applied by returning new HTML with a
round-trip to the person, and this may be examined adequately with the
methods we have seen thus far, however what if we wished to hurry up the
utility behaviour with a library comparable to HTMX? This library works by way of particular
attributes which are added to components so as to add Ajax behaviour. These
attributes are in impact a DSL that we would wish to
take a look at.

How can we take a look at the mix of HTML, CSS and JavaScript in
a unit take a look at?

Testing HTML, CSS and JavaScript requires one thing that is ready to
interpret and execute their behaviours; in different phrases, we want a
browser! It’s customary to make use of headless browsers in end-to-end assessments;
can we use them for unitary assessments as an alternative? I believe that is attainable,
utilizing the next methods, though I need to admit I’ve but to strive
this on an actual mission.

We are going to use the Playwright
library, that’s obtainable for each Go and
Java. The assessments we
are going to write down might be slower, as a result of we should wait a couple of
seconds for the headless browser to start out, however will retain a few of the
essential traits of unit assessments, primarily that we’re testing
simply the HTML (and any related CSS and JavaScript), in isolation from
every other server-side logic.

Persevering with with the TodoMVC
instance, the following factor we would wish to take a look at is what occurs when the
person clicks on the checkbox of a todo merchandise. What we would prefer to occur is
that:

  1. A POST name to the server is made, in order that the applying is aware of
    that the state of a todo merchandise has modified
  2. The server returns new HTML for the dynamic a part of the web page,
    particularly the entire part with class “todoapp”, in order that we will present the
    new state of the applying together with the depend of remaining “energetic”
    gadgets (see the template above)
  3. The web page replaces the previous contents of the “todoapp” part with
    the brand new ones.

Loading the web page within the Playwright browser

We begin with a take a look at that can simply load the preliminary HTML. The take a look at
is somewhat concerned, so I present the entire code right here, after which I’ll
remark it little by little.

Go 

  func Test_toggleTodoItem(t *testing.T) 
    // render the preliminary HTML
    mannequin := todo.NewList().
      Add("One").
      Add("Two")
    initialHtml := renderTemplate("index.tmpl", mannequin, "/")
  
    // open the browser web page with Playwright
    web page := openPage()
    defer web page.Shut()
    logActivity(web page)
  
    // stub community calls
    err := web page.Route("**", func(route playwright.Route) 
      if route.Request().URL() == "http://localhost:4567/index.html" 
        // serve the preliminary HTML
        stubResponse(route, initialHtml.String(), "textual content/html")
       else 
        // keep away from surprising requests
        panic("surprising request: " + route.Request().URL())
      
    )
    if err != nil 
      t.Deadly(err)
    
  
    // load preliminary HTML within the web page
    response, err := web page.Goto("http://localhost:4567/index.html")
    if err != nil 
      t.Deadly(err)
    
    if response.Standing() != 200 
      t.Fatalf("surprising standing: %d", response.Standing())

source

Java 

  public class IndexBehaviourTest {
      static Playwright playwright;
      static Browser browser;
  
      @BeforeAll
      static void launchBrowser() 
          playwright = Playwright.create();
          browser = playwright.chromium().launch();
      
  
      @AfterAll
      static void closeBrowser() 
          playwright.shut();
      
  
      @Take a look at
      void toggleTodoItem() 
          // Render the preliminary html
          TodoList mannequin = new TodoList()
                  .add("One")
                  .add("Two");
          String initialHtml = renderTemplate("/index.tmpl", mannequin, "/");
          
          strive (Web page web page = browser.newPage()) 
              logActivity(web page);
  
              // stub community calls
              web page.route("**", route -> 
                  if (route.request().url().equals("http://localhost:4567/index.html")) 
                      // serve the preliminary HTML
                      route.fulfill(new Route.FulfillOptions()
                              .setContentType("textual content/html")
                              .setBody(initialHtml));
                   else 
                      // we do not need surprising calls
                      fail(String.format("Surprising request: %s %s", route.request().technique(), route.request().url()));
                  
              );
          
              // load preliminary html
              web page.navigate("http://localhost:4567/index.html");
          
      
  }

source

At the beginning of the take a look at, we initialize the mannequin with two todo
gadgets “One” and “Two”, then we render the template as earlier than:

Go 

  mannequin := todo.NewList().
    Add("One").
    Add("Two")
  initialHtml := renderTemplate("index.tmpl", mannequin, "/")

Java 

  TodoList mannequin = new TodoList()
          .add("One")
          .add("Two");
  String initialHtml = renderTemplate("/index.tmpl", mannequin, "/");

Then we open the Playwright “web page”, which can begin a headless
browser

Go 

  web page := openPage()
  defer web page.Shut()
  logActivity(web page)

Java 

  strive (Web page web page = browser.newPage()) 
      logActivity(web page);

The openPage operate in Go returns a Playwright
Web page object,

Go 

  func openPage() playwright.Web page 
    pw, err := playwright.Run()
    if err != nil 
      log.Fatalf("couldn't begin playwright: %v", err)
    
    browser, err := pw.Chromium.Launch()
    if err != nil 
      log.Fatalf("couldn't launch browser: %v", err)
    
    web page, err := browser.NewPage()
    if err != nil 
      log.Fatalf("couldn't create web page: %v", err)
    
    return web page

and the logActivity operate offers suggestions on what
the web page is doing

Go 

  func logActivity(web page playwright.Web page) 
    web page.OnRequest(func(request playwright.Request) 
      log.Printf(">> %s %sn", request.Technique(), request.URL())
    )
    web page.OnResponse(func(response playwright.Response) 
      log.Printf("<< %d %sn", response.Standing(), response.URL())
    )
    web page.OnLoad(func(web page playwright.Web page) 
      log.Println("Loaded: " + web page.URL())
    )
    web page.OnConsole(func(message playwright.ConsoleMessage) 
      log.Println("!  " + message.Textual content())
    )

Java 

  personal void logActivity(Web page web page) 
      web page.onRequest(request -> System.out.printf(">> %s %spercentn", request.technique(), request.url()));
      web page.onResponse(response -> System.out.printf("<< %s %spercentn", response.standing(), response.url()));
      web page.onLoad(page1 -> System.out.println("Loaded: " + page1.url()));
      web page.onConsoleMessage(consoleMessage -> System.out.println("!  " + consoleMessage.textual content()));

Then we stub all community exercise that the web page would possibly attempt to do

Go 

  err := web page.Route("**", func(route playwright.Route) 
    if route.Request().URL() == "http://localhost:4567/index.html" 
      // serve the preliminary HTML
      stubResponse(route, initialHtml.String(), "textual content/html")
     else 
      // keep away from surprising requests
      panic("surprising request: " + route.Request().URL())
    
  )

Java 

  // stub community calls
  web page.route("**", route -> 
      if (route.request().url().equals("http://localhost:4567/index.html")) 
          // serve the preliminary HTML
          route.fulfill(new Route.FulfillOptions()
                  .setContentType("textual content/html")
                  .setBody(initialHtml));
       else 
          // we do not need surprising calls
          fail(String.format("Surprising request: %s %s", route.request().technique(), route.request().url()));
      
  );

and we ask the web page to load the preliminary HTML

Go 

  response, err := web page.Goto("http://localhost:4567/index.html")

Java 

  web page.navigate("http://localhost:4567/index.html");

With all this equipment in place, we run the take a look at; it succeeds and
it logs the stubbed community exercise on commonplace output:

Go 

  === RUN   Test_toggleTodoItem
  >> GET http://localhost:4567/index.html
  << 200 http://localhost:4567/index.html
  Loaded: http://localhost:4567/index.html
  --- PASS: Test_toggleTodoItem (0.89s)

Java 

  IndexBehaviourTest > toggleTodoItem() STANDARD_OUT
      >> GET http://localhost:4567/index.html
      << 200 http://localhost:4567/index.html
      Loaded: http://localhost:4567/index.html
  
  IndexBehaviourTest > toggleTodoItem() PASSED

So with this take a look at we are actually in a position to load arbitrary HTML in a
headless browser. Within the subsequent sections we’ll see the best way to simulate person
interplay with components of the web page, and observe the web page’s
behaviour. However first we have to resolve an issue with the dearth of
identifiers in our area mannequin.

Figuring out todo gadgets

Now we wish to click on on the “One” checkbox. The issue we have now is
that at current, we have now no solution to determine particular person todo gadgets, so
we introduce an Id subject within the todo merchandise:

Go – up to date mannequin with Id 

  kind Merchandise struct 
    Id          int
    Title       string
    IsCompleted bool
  
  
  func (l *Record) AddWithId(id int, title string) *Record 
    merchandise := Merchandise
      Id:    id,
      Title: title,
    
    l.Objects = append(l.Objects, &merchandise)
    return l
  
  
  // Add creates a brand new todo.Merchandise with a random Id
  func (l *Record) Add(title string) *Record 
    merchandise := Merchandise
      Id:    generateRandomId(),
      Title: title,
    
    l.Objects = append(l.Objects, &merchandise)
    return l
  
  
  func generateRandomId() int 
    return abs(rand.Int())

Java – up to date mannequin with Id 

  public class TodoList 
      personal closing Record<TodoItem> gadgets = new ArrayList<>();
  
      public TodoList add(String title) 
          gadgets.add(new TodoItem(generateRandomId(), title, false));
          return this;
      
  
      public TodoList addCompleted(String title) 
          gadgets.add(new TodoItem(generateRandomId(), title, true));
          return this;
      
  
      public TodoList add(int id, String title) 
          gadgets.add(new TodoItem(id, title, false));
          return this;
      
  
      personal static int generateRandomId() 
          return new Random().nextInt(0, Integer.MAX_VALUE);
      
  
  
  public report TodoItem(int id, String title, boolean isCompleted) 
      public boolean isActive() 
          return !isCompleted;

And we replace the mannequin in our take a look at so as to add express Ids

Go – including Id within the take a look at knowledge 

  func Test_toggleTodoItem(t *testing.T) 
    // render the preliminary HTML
    mannequin := todo.NewList().
      AddWithId(101, "One").
      AddWithId(102, "Two")
    initialHtml := renderTemplate("index.tmpl", mannequin, "/")
    // ...

Java – including Id within the take a look at knowledge 

  @Take a look at
  void toggleTodoItem() 
      // Render the preliminary html
      TodoList mannequin = new TodoList()
              .add(101, "One")
              .add(102, "Two");
      String initialHtml = renderTemplate("/index.tmpl", mannequin, "/");

We are actually prepared to check person interplay with the web page.

Clicking on a todo merchandise

We wish to simulate person interplay with the HTML web page. It is likely to be
tempting to proceed to make use of CSS selectors to determine the particular
checkbox that we wish to click on, however there’s a greater method: there’s a
consensus amongst front-end builders that the easiest way to check
interplay with a web page is to use it
the same way that users do. As an illustration, you do not search for a
button by way of a CSS locator comparable to button.purchase; as an alternative,
you search for one thing clickable with the label “Purchase”. In apply,
this implies figuring out elements of the web page by way of their
ARIA roles.

To this finish, we add code to our take a look at to search for a checkbox labelled
“One”:

Go 

  func Test_toggleTodoItem(t *testing.T) 
    // ...
    // click on on the "One" checkbox
    checkbox := web page.GetByRole(*playwright.AriaRoleCheckbox, playwright.PageGetByRoleOptionsTitle: "One")
    if err := checkbox.Click on(); err != nil 
      t.Deadly(err)

Java 

  @Take a look at
  void toggleTodoItem() 
          // ...
          // click on on the "One" checkbox
          var checkbox = web page.getByRole(AriaRole.CHECKBOX, new Web page.GetByRoleOptions().setName("One"));
          checkbox.click on();

We run the take a look at, and it fails:

Go 

  >> GET http://localhost:4567/index.html
  << 200 http://localhost:4567/index.html
  Loaded: http://localhost:4567/index.html
  --- FAIL: Test_toggleTodoItem (32.74s)
      index_behaviour_test.go:50: playwright: timeout: Timeout 30000ms exceeded.

Java 

  IndexBehaviourTest > toggleTodoItem() STANDARD_OUT
      >> GET http://localhost:4567/index.html
      << 200 http://localhost:4567/index.html
      Loaded: http://localhost:4567/index.html
  
  IndexBehaviourTest > toggleTodoItem() FAILED
      com.microsoft.playwright.TimeoutError: Error 
        message="hyperlink the label to the checkbox correctly:


generated HTML with dangerous accessibility




  <li>
    <div class="view">
      <enter class="toggle" kind="checkbox">
      <label>One</label>
      <button class="destroy"></button>
    </div>
  </li>


We repair it through the use of the for attribute within the

        template,


index.tmpl – Go



  <li>
    <div class="view">
      <enter id="checkbox-.Id" class="toggle" kind="checkbox">
      <label for="checkbox-.Id">.Title</label>
      <button class="destroy"></button>
    </div>
  </li>


index.tmpl – Java



  <li>
    <div class="view">
      <enter id="checkbox- id " class="toggle" kind="checkbox">
      <label for="checkbox- id "> title </label>
      <button class="destroy"></button>
    </div>
  </li>


In order that it generates correct, accessible HTML:


generated HTML with higher accessibility



  <li>
    <div class="view">
      <enter id="checkbox-101" class="toggle" kind="checkbox">
      <label for="checkbox-101">One</label>
      <button class="destroy"></button>
    </div>
  </li>


We run once more the take a look at, and it passes. 


On this part we noticed how testing the HTML in the identical was as customers

        work together with it led us to make use of ARIA roles, which led to bettering

        accessibility of our generated HTML. Within the subsequent part, we'll see

        the best way to take a look at that the press on a todo merchandise triggers a distant name to the

        server, that ought to end in swapping part of the present HTML with

        the HTML returned by the XHR name.

Spherical-trip to the server

Now we’ll prolong our take a look at. We inform the take a look at that if name to
POST /toggle/101 is acquired, it ought to return some
stubbed HTML.

Go 

   else if route.Request().URL() == "http://localhost:4567/toggle/101" && route.Request().Technique() == "POST" 
    // we count on {that a} POST /toggle/101 request is made after we click on on the "One" checkbox
    const stubbedHtml = `
      <part class="todoapp">
        <p>Stubbed html</p>
      </part>`
    stubResponse(route, stubbedHtml, "textual content/html")

Java 

   else if (route.request().url().equals("http://localhost:4567/toggle/101") && route.request().technique().equals("POST")) 
      // we count on {that a} POST /toggle/101 request is made after we click on on the "One" checkbox
      String stubbedHtml = """
          <part class="todoapp">
              <p>Stubbed html</p>
          </part>
          """;
      route.fulfill(new Route.FulfillOptions()
              .setContentType("textual content/html")
              .setBody(stubbedHtml));

And we stub the loading of the HTMX library, which we load from a
native file:

Go 

   else if route.Request().URL() == "https://unpkg.com/[email protected]" 
    // serve the htmx library
    stubResponse(route, readFile("testdata/htmx.min.js"), "utility/javascript")

Go 

   else if (route.request().url().equals("https://unpkg.com/[email protected]")) {
      // serve the htmx library
      route.fulfill(new Route.FulfillOptions()
              .setContentType("textual content/html")
              .setBody(readFile("/htmx.min.js")));

Lastly, we add the expectation that, after we click on the checkbox,
the part of the HTML that incorporates a lot of the utility is
reloaded.

Go 

  // click on on the "One" checkbox
  checkbox := web page.GetByRole(*playwright.AriaRoleCheckbox, playwright.PageGetByRoleOptionsName: "One")
  if err := checkbox.Click on(); err != nil 
    t.Deadly(err)
  

  // test that the web page has been up to date
  doc := parseHtml(t, content material(t, web page))
  components := doc.Discover("physique > part.todoapp > p")
  assert.Equal(t, "Stubbed html", components.Textual content(), should(web page.Content material()))

java 

  // click on on the "One" checkbox
  var checkbox = web page.getByRole(AriaRole.CHECKBOX, new Web page.GetByRoleOptions().setName("One"));
  checkbox.click on();

  // test that the web page has been up to date
  var doc = parseHtml(web page.content material());
  var components = doc.choose("physique > part.todoapp > p");
  assertThat(components.textual content())
          .describedAs(web page.content material())
          .isEqualTo("Stubbed html");

We run the take a look at, and it fails, as anticipated. With a view to perceive
why precisely it fails, we add to the error message the entire HTML
doc.

Go 

  assert.Equal(t, "Stubbed html", components.Textual content(), should(web page.Content material()))

Java 

  assertThat(components.textual content())
          .describedAs(web page.content material())
          .isEqualTo("Stubbed html");

The error message may be very verbose, however we see that the explanation it
fails is that we do not see the stubbed HTML within the output. This implies
that the web page didn’t make the anticipated XHR name.

Go – Java is comparable 

  --- FAIL: Test_toggleTodoItem (2.75s)
  === RUN   Test_toggleTodoItem
  >> GET http://localhost:4567/index.html
  << 200 http://localhost:4567/index.html
  Loaded: http://localhost:4567/index.html
      index_behaviour_test.go:67:
            Error Hint:  .../index_behaviour_test.go:67
            Error:        Not equal:
                          anticipated: "Stubbed html"
                          precise  : ""
                          ...
            Take a look at:         Test_toggleTodoItem
            Messages:     <!DOCTYPE html><html lang="en"><head>
                              <meta charset="utf-8">
                              <meta identify="viewport" content material="width=device-width, initial-scale=1">
                              <title>Template • TodoMVC</title>
                              <script src="https://unpkg.com/[email protected]"></script>
                            <physique>
                              <part class="todoapp">
                          ...
                                    <li class="">
                                      <div class="view">
                                        <enter id="checkbox-101" class="toggle" kind="checkbox">
                                        <label for="checkbox-101">One</label>
                                        <button class="destroy"></button>
                                      </div>
                                    </li>
                          ...

We are able to make this take a look at go by altering the HTML template to make use of HTMX
to make an XHR name again to the server. First we load the HTMX
library:

index.tmpl 

  <title>Template • TodoMVC</title>
  <script src="https://unpkg.com/[email protected]"></script>

Then we add the HTMX attributes to the checkboxes:

index.tmpl 

  <enter
      data-hx-post="/toggle/.Id"
      data-hx-target="part.todoapp"
      id="checkbox-.Id"
      class="toggle"
      kind="checkbox">

The data-hx-post annotation will make HTMX do a POST
name to the required url. The data-hx-target tells HTMX
to repeat the HTML returned by the decision, to the aspect specified by the
part.todoapp CSS locator.

We run once more the take a look at, and it nonetheless fails!

Go – Java is comparable 

  --- FAIL: Test_toggleTodoItem (2.40s)
  === RUN   Test_toggleTodoItem
  >> GET http://localhost:4567/index.html
  << 200 http://localhost:4567/index.html
  >> GET https://unpkg.com/[email protected]
  << 200 https://unpkg.com/[email protected]
  Loaded: http://localhost:4567/index.html
  >> POST http://localhost:4567/toggle/101
  << 200 http://localhost:4567/toggle/101
      index_behaviour_test.go:67:
            Error Hint:  .../index_behaviour_test.go:67
            Error:        Not equal:
                          anticipated: "Stubbed html"
                          precise  : ""
                          ...
            Take a look at:         Test_toggleTodoItem
            Messages:     <!DOCTYPE html><html lang="en"><head>
                              <meta charset="utf-8">
                              <meta identify="viewport" content material="width=device-width, initial-scale=1">
                              <title>Template • TodoMVC</title>
                              <script src="https://unpkg.com/[email protected]"></script>
                          ...
                            <physique>
                              <part class="todoapp"><part class="todoapp">
                                    <p>Stubbed html</p>
                                  </part></part>
                          ...
                          </physique></html>

The log traces present that the POST name occurred as anticipated, however
examination of the error message reveals that the HTML construction we
anticipated will not be there: we have now a part.todoapp nested
inside one other. Which means we’re not utilizing the HTMX annotations
accurately, and reveals why this sort of take a look at could be worthwhile. We add the
lacking annotation

index.tmpl 

  <enter
      data-hx-post="/toggle/.Id"
      data-hx-target="part.todoapp"
      data-hx-swap="outerHTML"
      id="checkbox-.Id"
      class="toggle"
      kind="checkbox">

The default behaviour of HTMX is to switch the interior HTML of the
goal aspect. The data-hx-swap="outerHTML" annotation
tells HTMX to switch the outer HTML as an alternative.

and we take a look at once more, and this time it passes!

Go 

  === RUN   Test_toggleTodoItem
  >> GET http://localhost:4567/index.html
  << 200 http://localhost:4567/index.html
  >> GET https://unpkg.com/[email protected]
  << 200 https://unpkg.com/[email protected]
  Loaded: http://localhost:4567/index.html
  >> POST http://localhost:4567/toggle/101
  << 200 http://localhost:4567/toggle/101
  --- PASS: Test_toggleTodoItem (1.39s)

Java 

  IndexBehaviourTest > toggleTodoItem() STANDARD_OUT
      >> GET http://localhost:4567/index.html
      << 200 http://localhost:4567/index.html
      >> GET https://unpkg.com/[email protected]
      << 200 https://unpkg.com/[email protected]
      Loaded: http://localhost:4567/index.html
      >> POST http://localhost:4567/toggle/101
      << 200 http://localhost:4567/toggle/101
  
  IndexBehaviourTest > toggleTodoItem() PASSED

On this part we noticed the best way to write a take a look at for the behaviour of our
HTML that, whereas utilizing the difficult equipment of a headless browser,
nonetheless feels extra like a unit take a look at than an integration take a look at. It’s in
reality testing simply an HTML web page with any related CSS and JavaScript,
in isolation from different elements of the applying comparable to controllers,
providers or repositories.

The take a look at prices 2-3 seconds of ready time for the headless browser to return up, which is often an excessive amount of for a unit take a look at; nevertheless, like a unit take a look at, it is extremely steady, as it’s not flaky, and its failures are documented with a comparatively clear error message.

See the ultimate model of the take a look at in Go and in Java.

Bonus stage: Stringly asserted

Esko Luontola, TDD skilled and writer of the web course tdd.mooc.fi, suggested an alternative to testing HTML with CSS selectors: the concept is to rework HTML right into a human-readable canonical kind.

Let’s take for instance this snippet of generated HTML:

<ul class="todo-list">
  <li class="">
    <div class="view">
      <enter id="checkbox-100" class="toggle" kind="checkbox">
      <label for="checkbox-100">One</label>
      <button class="destroy"></button>
    </div>
  </li>
  <li class="">
    <div class="view">
      <enter id="checkbox-200" class="toggle" kind="checkbox">
      <label for="checkbox-200">Two</label>
      <button class="destroy"></button>
    </div>
  </li>
  <li class="accomplished">
    <div class="view">
      <enter id="checkbox-300" class="toggle" kind="checkbox">
      <label for="checkbox-300">Three</label>
      <button class="destroy"></button>
    </div>
  </li>
</ul>

We may visualize the above HTML by:

  1. deleting all HTML tags
  2. decreasing each sequence of whitespace characters to a single clean

to reach at:

One Two Three

This, nevertheless, removes an excessive amount of of the HTML construction to be helpful. As an illustration, it doesn’t allow us to distinguish between energetic and accomplished gadgets. Some HTML aspect symbolize seen content material: as an example

<enter worth="foo" />

reveals a textual content field with the phrase “foo” that is a vital a part of the method we understand HTML. To visualise these components, Esko suggests so as to add a data-test-icon attribute that provides some textual content for use instead of the aspect when visualizing it for testing. With this,

<enter worth="foo" data-test-icon="[foo]" />

the enter aspect is visualized as [foo], with the sq. brackets hinting that the phrase “foo” sits inside an editable textual content field. Now if we add test-icons to our HTML template,

Go — Java is comparable 

  <ul class="todo-list">
       vary .mannequin.AllItems 
      <li class=" if .IsCompleted accomplished finish ">
          <div class="view">
              <enter data-hx-post="/toggle/ .Id "
                     data-hx-target="part.todoapp"
                     data-hx-swap="outerHTML"
                     id="checkbox- .Id "
                     class="toggle"
                     kind="checkbox"
                     data-test-icon=" if .IsCompleted ✅ else ⬜ finish ">
              <label for="checkbox- .Id "> .Title </label>
              <button class="destroy" data-test-icon="❌️"></button>
          </div>
      </li>
      { finish }
  </ul>

we will assert towards its canonical visible illustration like this:

Go 

  func Test_visualize_html_example(t *testing.T) 
    mannequin := todo.NewList().
      Add("One").
      Add("Two").
      AddCompleted("Three")
  
    buf := renderTemplate("todo-list.tmpl", mannequin, "/")
  
    anticipated := `
      ⬜ One ❌️
      ⬜ Two ❌️
      ✅ Three ❌️
      `
    assert.Equal(t, normalizeWhitespace(anticipated), visualizeHtml(buf.String()))

Java 

  @Take a look at
  void visualize_html_example() 
      var mannequin = new TodoList()
              .add("One")
              .add("Two")
              .addCompleted("Three");
  
      var html = renderTemplate("/todo-list.tmpl", mannequin, "/");
  
      assertThat(visualizeHtml(html))
              .isEqualTo(normalizeWhitespace("""
                      ⬜ One ❌️
                      ⬜ Two ❌️
                      ✅ Three ❌️
                      """));

Right here is Esko Luontola’s Java implementation of the 2 features that make this attainable, and my translation to Go of his code.

Go 

  func visualizeHtml(html string) string tt)b.*?>", "")
    // strip all HTML tags: block components
    html = replaceAll(html, "<[^>]*>", " ")
    // exchange HTML character entities
    html = replaceAll(html, "&nbsp;", " ")
    html = replaceAll(html, "&lt;", "<")
    html = replaceAll(html, "&gt;", ">")
    html = replaceAll(html, "&quot;", """)
    html = replaceAll(html, "&apos;", "'")
    html = replaceAll(html, "&amp;", "&")
    return normalizeWhitespace(html)
  
  
  func normalizeWhitespace(s string) string 
    return strings.TrimSpace(replaceAll(s, "s+", " "))
  
  
  func replaceAll(src, regex, repl string) string 
    re := regexp.MustCompile(regex)
    return re.ReplaceAllString(src, repl)

source

Java 

  public static String visualizeHtml(String html) b
  
  public static String normalizeWhitespace(String s) 
     return s.replaceAll("s+", " ").trim();

source

On this part, we have now seen a method for asserting HTML content material that’s an alternative choice to the CSS selector-based approach utilized in the remainder of the article. Esko Luontola has reported nice success with it, and I hope readers have success with it too!

This method of asserting towards massive, difficult knowledge constructions comparable to HTML pages by decreasing them to a canonical string model has no identify that I do know of. Martin Fowler suggested “stringly asserted”, and from his suggestion comes the identify of this part.

More Stories

Mamba and Software program Package deal Safety with Sylvain Corlay

Mamba and Software program Package deal Safety with Sylvain Corlay

January 23, 2025
Contemporary Information for AI With Spring AI Operate Calls

Contemporary Information for AI With Spring AI Operate Calls

January 22, 2025
My favourite musical discoveries of 2024

My favourite musical discoveries of 2024

January 21, 2025

Latest Post

Koozai: Award Profitable Small Company of the Yr

Koozai: Award Profitable Small Company of the Yr

January 24, 2025
Greatest Headsets for Working From House in 2025

Greatest Headsets for Working From House in 2025

January 24, 2025
Behind the Scenes: Iron Sentinel

Behind the Scenes: Iron Sentinel

January 24, 2025
Mamba and Software program Package deal Safety with Sylvain Corlay

Mamba and Software program Package deal Safety with Sylvain Corlay

January 23, 2025
Microsoft and OpenAI evolve partnership to drive the subsequent part of AI

Microsoft and OpenAI evolve partnership to drive the subsequent part of AI

January 23, 2025