Saturday, June 15, 2024
HomeSoftware DevelopmentTake a look at-Driving HTML Templates

Take a look at-Driving HTML Templates


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

We then face the issue of the right way to write automated exams for the HTML
elements of our net functions. Whereas the JavaScript world has advanced 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 would not have such a richness of instruments accessible.

When writing an internet utility in Go or Java, HTML is usually generated
by means of templates, which include small fragments of logic. It’s definitely
attainable to check them not directly by means of end-to-end exams, however these exams
are gradual and costly.

We will as an alternative write unit exams that use CSS selectors to probe the
presence and proper content material of particular HTML parts inside a doc.
Parameterizing these exams makes it simple so as to add new exams 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 offered in Go and Java.

Degree 1: checking for sound HTML

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

<div>foo</p>

Let’s examine the right way 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 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 widespread 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’ll 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 move.

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 ends in 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 anticipate 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
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 (because of 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)
    }
  
    // examine 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 executed, 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 appropriate 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 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();
  }

supply

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

supply

Java

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

supply

Degree 2: testing HTML construction

What else ought to we take a look at?

We all know that the appears of a web page can solely be examined, in the end, 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 may be tempted to check the rendered HTML with string equality,
however this system fails in apply, as a result of templates include a whole lot of
particulars that make string equality assertions impractical. The assertions
turn out to be 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 want
is a way to say that some elements of the rendered HTML
correspond to what we anticipate, and to ignore all the small print we do not
care about.
A method 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
parts that we care about from the entire HTML doc. As soon as we have now
chosen these parts, we (1) rely that the variety of aspect returned
is what we anticipate, and (2) that they include the textual content or different content material
that we anticipate.

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

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

  1. The variety of gadgets and their textual content content material change, clearly
  2. The fashion 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”, “Lively”, “Accomplished” shall be
    highlighted, relying on the present url; as an example if we determine that the
    url that reveals solely the “Lively” gadgets is /energetic, then when the present url
    is /energetic, the “Lively” button ought to be surrounded by a skinny pink
    rectangle
  5. The “Clear accomplished” button ought to solely be seen if any merchandise is
    accomplished

Every of this considerations 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 instance:

index.tmpl

  <part class="todoapp">
    <ul class="todo-list">
      <!-- These are right here simply to point out the construction of the listing gadgets -->
      <!-- Listing gadgets ought to get the category `accomplished` when marked as accomplished -->
      <li class="accomplished">  
        <div class="view">
          <enter class="toggle" sort="checkbox" checked>
          <label>Style JavaScript</label> 
          <button class="destroy"></button>
        </div>
      </li>
      <li>
        <div class="view">
          <enter class="toggle" sort="checkbox">
          <label>Purchase a unicorn</label> 
          <button class="destroy"></button>
        </div>
      </li>
    </ul>
    <footer class="footer">
      <!-- This ought to 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">Lively</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>  

supply

By trying on the static model of the template, we are able to deduce which
CSS selectors can be utilized to determine the related parts for the 5 dynamic
options listed above:

characteristic 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 will use these selectors to focus our exams on simply the issues we need 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> parts contained in the <ul class="todo-list"> 
  // assert the primary <li> textual content is "Foo"
  // assert the second <li> textual content is "Bar"
}

We’d like a method to question the HTML doc with our CSS selector; a great
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> parts 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 {
    // Slightly mess because of the truth that goquery has
    // a .Textual content() methodology on Choice however not on html.Node
    sel := goquery.Choice{Nodes: []*html.Node{node}}
    return strings.TrimSpace(sel.Textual content())
  }

supply

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> parts 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");
  }

supply

If we nonetheless have not modified the template to populate the listing from the
mannequin, this take a look at will fail, as a result of the static template
todo gadgets have totally different textual content:

Go

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

Go

  <ul class="todo-list">
    {{ vary .Objects }}
      <li>
        <div class="view">
          <enter class="toggle" sort="checkbox">
          <label>{{ .Title }}</label>
          <button class="destroy"></button>
        </div>
      </li>
    {{ finish }}
  </ul>

supply

Java – jmustache

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

supply

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
exams, they’ll turn out to be repetitive and troublesome to learn, so we make it extra concise by extracting a helper perform for parsing the html. We additionally take away the
feedback, because the code ought to 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");
  }
  
  non-public 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 examine 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
  }

supply

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;
  }

supply

And with this, we are able to eliminate the primary take a look at that we wrote, as we at the moment are testing for sound HTML on a regular basis.

The second take a look at

Now we’re in a great place for testing extra rendering logic. The
second dynamic characteristic in our listing is “Listing gadgets ought to get the category
accomplished when marked as accomplished”. We will 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]))
  }

supply

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");
  }

supply

And this take a look at will 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" sort="checkbox">
          <label>{{ .Title }}</label>
          <button class="destroy"></button>
        </div>
      </li>
    {{ finish }}
  </ul>

supply

Java – jmustache

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

supply

So little by little, we are able to take a look at and add the varied dynamic options
that our template ought to have.

Make it simple so as to add new exams

The primary of the 20 suggestions from the superb speak 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 exams parameterized, for this very purpose.
Alternatively, whereas Java has
good help
for parameterized exams
with JUnit 5, they are not used as a lot.

Since our present two exams 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 are able to produce clear error messages when the take a look at
    fails)
  • A mannequin (in our case a todo.Listing)
  • A CSS selector
  • A listing 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.Listing
    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"},
    },
  }

supply

Java

  report TestCase(String identify,
                  TodoList mannequin,
                  String selector,
                  Listing<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",
                      Listing.of("Foo", "Bar")),
              new TestCase(
                      "accomplished gadgets get the 'accomplished' class",
                      new TodoList()
                              .add("Foo")
                              .addCompleted("Bar"),
                      "ul.todo-list li.accomplished",
                      Listing.of("Bar")),
      };
  }

supply

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

supply

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));
      }
  }

supply

We will now run our parameterized take a look at and see it move:

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

Word 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 outdated exams in desk type, 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"},
  },

supply

Java

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

supply

And the corresponding change within the html template is:

Go

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

supply

Java – jmustache

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

supply

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

Go

  sort Merchandise struct {
    Title       string
    IsCompleted bool
  }
  
  sort Listing struct {
    Objects []*Merchandise
  }
  
  func (l *Listing) ActiveItems() []*Merchandise {
    var end result []*Merchandise
    for _, merchandise := vary l.Objects {
      if !merchandise.IsCompleted {
        end result = append(end result, merchandise)
      }
    }
    return end result
  }

supply

Java

  public class TodoList {
      non-public ultimate Listing<TodoItem> gadgets = new ArrayList<>();
      // ...
      public lengthy activeItemsCount() {
          return gadgets.stream().filter(TodoItem::isActive).rely();
      }
  }

supply

We have invested a bit of 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”, “Lively” and “Accomplished” navigation hyperlinks at
the underside of the UI (see the image above),
and these rely upon which url we’re visiting, which is
one thing that our template has no method to discover out.

Presently, all we move to our template is our mannequin, which is a todo-list.
It is not appropriate so as to add the presently visited url to the mannequin, as a result of that’s
consumer navigation state, not utility state.

So we have to move extra info to the template past the mannequin. A straightforward manner
is to move a map, which we assemble in our
renderTemplate perform:

Go

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

Java

  non-public String renderTemplate(String templateName, TodoList mannequin, String path) {
      var template = Mustache.compiler().compile(
              new InputStreamReader(
                      getClass().getResourceAsStream(templateName)));
      var information = Map.of(
              "mannequin", mannequin,
              "path", path
      );
      return template.execute(information);
  }

And correspondingly our take a look at circumstances desk has another area:

Go

  var testCases = []struct {
    identify     string
    mannequin    *todo.Listing
    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: Lively",
      path:     "/energetic",
      selector: "ul.filters a.chosen",
      matches:  []string{"Lively"},
    },
    {
      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,
                  Listing<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",
                      Listing.of("Foo", "Bar")),
              // ... the earlier circumstances
              new TestCase(
                      "highlighted navigation hyperlink: All",
                      new TodoList(),
                      "/",
                      "ul.filters a.chosen",
                      Listing.of("All")),
              new TestCase(
                      "highlighted navigation hyperlink: Lively",
                      new TodoList(),
                      "/energetic",
                      "ul.filters a.chosen",
                      Listing.of("Lively")),
              new TestCase(
                      "highlighted navigation hyperlink: Accomplished",
                      new TodoList(),
                      "/accomplished",
                      "ul.filters a.chosen",
                      Listing.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 keen on, however Java doesn’t have
an analogous characteristic, so we’re pushed to move further info, and this makes the take a look at circumstances
desk more durable to grasp.

A developer would possibly take a look at the primary take a look at case and marvel if the anticipated habits relies upon
on the trail being set to "/", and may be tempted so as to add extra circumstances with
a distinct path. In the identical manner, when studying the
highlighted navigation hyperlink take a look at circumstances, the developer would possibly marvel if the
anticipated habits will depend on the mannequin being set to an empty todo listing. 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 need to optimize for the time of the builders, so it is worthwhile to keep away from including irrelevant
information to our take a look at case. In Java we would move null for the
irrelevant fields, however there’s a greater manner: we are able to use
the builder sample,
popularized by Joshua Bloch.
We will rapidly write one for the Java TestCase report this manner:

Java

  report TestCase(String identify,
                  TodoList mannequin,
                  String path,
                  String selector,
                  Listing<String> matches) {
      @Override
      public String toString() {
          return identify;
      }
  
      public static ultimate class Builder {
          String identify;
          TodoList mannequin;
          String path;
          String selector;
          Listing<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 a bit of tedious, however doable, although there are
automated methods to write down them.
Now we are able to rewrite our Java take a look at circumstances with the Builder, to
obtain larger 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 exams? At current, they fail for the unsuitable purpose: null-pointer exceptions
as a result of lacking mannequin and path values.
As a way to get our new take a look at circumstances to fail for the appropriate purpose, particularly that the template does
not but have logic to focus on the proper hyperlink, we should
present default values for mannequin and path. In Go, we are able to do that
within the take a look at methodology:

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

supply

In Java, we are able to present default values within the builder:

Java

  public static ultimate class Builder {
      String identify;
      TodoList mannequin = new TodoList();
      String path = "/";
      String selector;
      Listing<String> matches;
      // ...
  }

supply

With these adjustments, we see that the final two take a look at circumstances, those for the highlighted hyperlink Lively
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: "Lively"
                          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: Lively FAILED
      org.opentest4j.AssertionFailedError:
      Anticipating:
       <"All">
      to be equal to:
       <"Lively">
      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 exams move, 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">Lively</a>
    </li>
    <li>
      <a class="{{ if eq .path "/accomplished" }}chosen{{ finish }}" href="#/accomplished">Accomplished</a>
    </li>
  </ul>

supply

Java – jmustache

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

supply

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

Java

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

supply

And with these adjustments, all of our exams now move.

To recap this part, we made the take a look at code a bit of 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 up to now, we examined the behaviour of the HTML
templates
, by checking the construction of the generated HTML.
That is good, however what if we needed 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 parts that may work together with the
consumer are the anchor (<a>), <type> and
<enter> parts, however the image adjustments fully when
we add CSS, that may disguise, present, transfer round issues and much extra, and
with JavaScript, that may add any behaviour to a web page.

In an utility that’s primarily rendered server-side, we anticipate
that the majority behaviour is applied by returning new HTML with a
round-trip to the consumer, and this may be examined adequately with the
strategies we have seen up to now, however what if we needed to hurry up the
utility behaviour with a library reminiscent of HTMX? This library works by means of particular
attributes which can be added to parts so as to add Ajax behaviour. These
attributes are in impact a DSL that we would need to
take a look at.

How can we take a look at the mixture 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 exams;
can we use them for unitary exams as an alternative? I feel that is attainable,
utilizing the next strategies, though I need to admit I’ve but to strive
this on an actual undertaking.

We are going to use the Playwright
library, that’s accessible for each Go and
Java. The exams we
are going to write down shall be slower, as a result of we must wait a number of
seconds for the headless browser to begin, however will retain a few of the
vital traits of unit exams, primarily that we’re testing
simply the HTML (and any related CSS and JavaScript), in isolation from
some other server-side logic.

Persevering with with the TodoMVC
instance, the following factor we would need to take a look at is what occurs when the
consumer 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 all the part with class “todoapp”, in order that we are able to present the
    new state of the applying together with the rely of remaining “energetic”
    gadgets (see the template above)
  3. The web page replaces the outdated 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 a bit of 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())
    }
  }

supply

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("Sudden request: %s %s", route.request().methodology(), route.request().url()));
                  }
              });
          
              // load preliminary html
              web page.navigate("http://localhost:4567/index.html");
          }
      }
  }

supply

At first 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 is able to 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 perform 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 perform gives 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.Methodology(), 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

  non-public void logActivity(Web page web page) {
      web page.onRequest(request -> System.out.printf(">> %s %spercentn", request.methodology(), 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("Sudden request: %s %s", route.request().methodology(), 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 customary 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 at the moment are in a position to load arbitrary HTML in a
headless browser. Within the subsequent sections we’ll see the right way to simulate consumer
interplay with parts of the web page, and observe the web page’s
behaviour. However first we have to clear up an issue with the dearth of
identifiers in our area mannequin.

Figuring out todo gadgets

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

Go – up to date mannequin with Id

  sort Merchandise struct {
    Id          int
    Title       string
    IsCompleted bool
  }
  
  func (l *Listing) AddWithId(id int, title string) *Listing {
    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 *Listing) Add(title string) *Listing {
    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 {
      non-public ultimate Listing<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;
      }
  
      non-public 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 information

  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 information

  @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 at the moment are prepared to check consumer interplay with the web page.

Clicking on a todo merchandise

We need to simulate consumer interplay with the HTML web page. It may be
tempting to proceed to make use of CSS selectors to determine the precise
checkbox that we need to click on, however there’s a greater manner: there’s a
consensus amongst front-end builders that one of the best ways to check
interplay with a web page is to make use of it
the identical manner that customers do
. For example, you do not search for a
button by means of a CSS locator reminiscent of 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 means 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.PageGetByRoleOptions{Title: "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 unhealthy accessibility

  <li>
    <div class="view">
      <enter class="toggle" sort="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" sort="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" sort="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" sort="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 enhancing
accessibility of our generated HTML. Within the subsequent part, we are going to see
the right way to take a look at that the clicking on a todo merchandise triggers a distant name to the
server, that ought to lead to swapping part of the present HTML with
the HTML returned by the XHR name.

We’re releasing this text in installments. The final installment
will take a look at the right way to take a look at the calls which can be made to the server, and
embrace a bonus section on stringly asserted exams.

To search out out after we publish the following installment subscribe to this
web site’s
RSS feed, or Martin’s feeds on
Mastodon,
LinkedIn, or
X (Twitter).



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments