Take a look at-Driving HTML Templates

What else ought to we check?

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

One may be tempted to check the rendered HTML with string equality,
however this method fails in observe, as a result of templates comprise plenty of
particulars that make string equality assertions impractical. The assertions
develop into very verbose, and when studying the assertion, it turns into tough
to know what it’s that we’re attempting 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 technique to do that is by working queries with the CSS selector language:
it’s a highly effective language that enables us to pick out the
parts that we care about from the entire HTML doc. As soon as now we have
chosen these parts, we (1) depend that the variety of aspect returned
is what we anticipate, and (2) that they comprise the textual content or different content material
that we anticipate.

The UI that we’re presupposed to generate appears to be like 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 modifications 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” might be
   highlighted, relying on the present url; for example if we determine that the
   url that exhibits solely the “Lively” gadgets is /lively, then when the present url
   is /lively, 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 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 -->
      <!-- Checklist 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="#/lively">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>  

source

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

We will use these selectors to focus our checks on simply the issues we need to check.

Testing HTML content material

The primary check will search for all of the gadgets, and show that the information
arrange by the check 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 want a strategy to question the HTML doc with our CSS selector; a very good
library for Go is goquery, that implements an API impressed by jQuery.
In Java, we hold utilizing the identical library we used to check for sound HTML, specifically
jsoup. Our check 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 check 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 {
    // A little bit mess because of the truth that goquery has
    // a .Textual content() technique on Choice however not on html.Node
    sel := goquery.Choice{Nodes: []*html.Node{node}}
    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> 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");
  }

source

If we nonetheless have not modified the template to populate the record from the
mannequin, this check 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, received Style JavaScript
      index_template_test.go:49: Second record merchandise: need Bar, received 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" sort="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" sort="checkbox">
        <label>{{ title }}</label>
        <button class="destroy"></button>
      </div>
    </li>
    {{ /allItems }}
  </ul>

source

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

Our check works, however it’s a bit verbose, particularly the Go model. If we’ll have extra
checks, they’ll develop into repetitive and tough 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 check 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 very 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 check right here with t.FatalF
      t.Fatalf("Error rendering template %s", err)
    }
    return doc
  }

source

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

source

And with this, we will do away with the primary check that we wrote, as we are actually testing for sound HTML on a regular basis.

The second check

Now we’re in a very good place for testing extra rendering logic. The
second dynamic characteristic in our record is “Checklist gadgets ought to get the category
accomplished when marked as accomplished”. We will write a check 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.Measurement())
    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 check 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" sort="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" sort="checkbox">
        <label>{{ title }}</label>
        <button class="destroy"></button>
      </div>
    </li>
    {{ /allItems }}
  </ul>

source

So little by little, we will check and add the varied dynamic options
that our template ought to have.

Make it straightforward so as to add new checks

The primary of the 20 ideas from the superb talk by Russ Cox on Go
Testing is “Make it straightforward so as to add new check circumstances“. Certainly, in Go there
is a bent to make most checks parameterized, for this very cause.
Alternatively, whereas Java has
good support
for parameterized tests with JUnit 5, they are not used as a lot.

Since our present two checks have the identical construction, we
might issue them right into a single parameterized check.

A check case for us will include:

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

So that is the information construction for our check circumstances:

Go

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

source

Java

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

source

And that is our parameterized check:

Go

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

source

Java

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

source

We will now run our parameterized check and see it move:

Go

  $ go check -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 check
  
  > Activity :check
  
  IndexTemplateTest > testIndexTemplate(TestCase) > [1] all todo gadgets are proven PASSED
  IndexTemplateTest > testIndexTemplate(TestCase) > [2] accomplished gadgets get the 'accomplished' class PASSED

Observe how, by giving a reputation to our check circumstances, we get very readable check output, each on the terminal and within the IDE:

Having rewritten our two outdated checks in desk kind, it is now tremendous straightforward so as to add
one other. That is the check for the “x gadgets left” textual content:

Go

  {
    title: "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",
      Checklist.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

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

source

Java

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

source

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

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

We’ll now check the “All”, “Lively” 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 strategy to discover out.

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

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

Go

  func renderTemplate(mannequin *todo.Checklist, 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

  non-public 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 check circumstances desk has yet another discipline:

Go

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

Java

  document TestCase(String title,
                  TodoList mannequin,
                  String path,
                  String selector,
                  Checklist<String> matches) {
      @Override
      public String toString() {
          return title;
      }
  }
  
  public static TestCase[] indexTestCases() {
      return new TestCase[]{
              new TestCase(
                      "all todo gadgets are proven",
                      new TodoList()
                              .add("Foo")
                              .add("Bar"),
                      "/",
                      "ul.todo-list li",
                      Checklist.of("Foo", "Bar")),
              // ... the earlier circumstances
              new TestCase(
                      "highlighted navigation hyperlink: All",
                      new TodoList(),
                      "/",
                      "ul.filters a.chosen",
                      Checklist.of("All")),
              new TestCase(
                      "highlighted navigation hyperlink: Lively",
                      new TodoList(),
                      "/lively",
                      "ul.filters a.chosen",
                      Checklist.of("Lively")),
              new TestCase(
                      "highlighted navigation hyperlink: Accomplished",
                      new TodoList(),
                      "/accomplished",
                      "ul.filters a.chosen",
                      Checklist.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 concerned with, however Java doesn’t have
an analogous characteristic, so we’re pushed to move additional info, and this makes the check circumstances
desk tougher to know.

A developer would possibly have a look at the primary check case and marvel if the anticipated conduct relies upon
on the trail being set to “/”, and may be tempted so as to add extra circumstances with
a unique path. In the identical method, when studying the
highlighted navigation hyperlink check circumstances, the developer would possibly marvel if the
anticipated conduct depends upon the mannequin being set to an empty todo record. If that’s the case, one would possibly
be led so as to add irrelevant check 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
knowledge to our check case. In Java we’d move null for the
irrelevant fields, however there’s a greater method: we will use
the builder pattern,
popularized by Joshua Bloch.
We will shortly write one for the Java TestCase document this fashion:

Java

  document TestCase(String title,
                  TodoList mannequin,
                  String path,
                  String selector,
                  Checklist<String> matches) {
      @Override
      public String toString() {
          return title;
      }
  
      public static remaining class Builder {
          String title;
          TodoList mannequin;
          String path;
          String selector;
          Checklist<String> matches;
  
          public Builder title(String title) {
              this.title = title;
              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(title, mannequin, path, selector, matches);
          }
      }
  }

Hand-coding builders is a bit of tedious, however doable, although there are
automated ways to write down them.
Now we will rewrite our Java check circumstances with the Builder, to
obtain larger readability:

Java

  public static TestCase[] indexTestCases() {
      return new TestCase[]{
              new TestCase.Builder()
                      .title("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()
                      .title("highlighted navigation hyperlink: Accomplished")
                      .path("/accomplished")
                      .selector("ul.filters a.chosen")
                      .matches("Accomplished")
                      .construct(),
      };
  }

So, the place are we with our checks? At current, they fail for the incorrect cause: null-pointer exceptions
as a result of lacking mannequin and path values.
So as to get our new check circumstances to fail for the precise cause, specifically that the template does
not but have logic to spotlight the proper hyperlink, we should
present default values for mannequin and path. In Go, we will do that
within the check technique:

Go

  func Test_indexTemplate(t *testing.T) {
    for _, check := vary testCases {
      t.Run(check.title, func(t *testing.T) {
        if check.mannequin == nil {
          check.mannequin = todo.NewList()
        }
        buf := renderTemplate(check.mannequin, check.path)
        // ... similar as earlier than 
      })
    }
  }

source

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

Java

  public static remaining class Builder {
      String title;
      TodoList mannequin = new TodoList();
      String path = "/";
      String selector;
      Checklist<String> matches;
      // ...
  }

source

With these modifications, we see that the final two check circumstances, those for the highlighted hyperlink Lively
and Accomplished fail, for the anticipated cause 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 checks move, we make these modifications 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 "/lively" }}chosen{{ finish }}" href="#/lively">Lively</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="#/lively">Lively</a>
    </li>
    <li>
      <a class="{{ #pathCompleted }}chosen{{ /pathCompleted }}" href="#/accomplished">Accomplished</a>
    </li>
  </ul>

source

For the reason that 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 checks 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 knowledge = Map.of(
              "mannequin", mannequin,
              "pathRoot", path.equals("/"),
              "pathActive", path.equals("/lively"),
              "pathCompleted", path.equals("/accomplished")
      );
      return template.execute(knowledge);
  }

source

And with these modifications, all of our checks now move.

To recap this part, we made the check code a bit of bit extra sophisticated, in order that the check
circumstances are clearer: it is a excellent tradeoff!

Loading the web page within the Playwright browser

We begin with a check that can simply load the preliminary HTML. The check
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())
    }
  }

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, "/");
          
          attempt (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

Firstly of the check, 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

  attempt (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.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

  non-public 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 check; it succeeds and
it logs the stubbed community exercise on normal 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 check we are actually capable of load arbitrary HTML in a
headless browser. Within the subsequent sections we’ll see the right way to simulate person
interplay with parts of the web page, and observe the web page’s
behaviour. However first we have to resolve an issue with the shortage of
identifiers in our area mannequin.

Figuring out todo gadgets

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

Go – up to date mannequin with Id

  sort Merchandise struct {
    Id          int
    Title       string
    IsCompleted bool
  }
  
  func (l *Checklist) AddWithId(id int, title string) *Checklist {
    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 *Checklist) Add(title string) *Checklist {
    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 remaining Checklist<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 document TodoItem(int id, String title, boolean isCompleted) {
      public boolean isActive() {
          return !isCompleted;
      }
  }

And we replace the mannequin in our check so as to add specific Ids

Go – including Id within the check 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 check 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 need to simulate person interplay with the HTML web page. It may be
tempting to proceed to make use of CSS selectors to establish the precise
checkbox that we need 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. For example, you do not search for a
button by a CSS locator reminiscent of button.purchase; as an alternative,
you search for one thing clickable with the label “Purchase”. In observe,
this implies figuring out elements of the web page by their
ARIA roles.

To this finish, we add code to our check 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{Identify: "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 check, 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 by utilizing 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 check, 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'll see

        the right way to check 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.

Spherical-trip to the server

Now we’ll prolong our check. We inform the check that if name to
POST /toggle/101 is obtained, it ought to return some
stubbed HTML.

Go

  } else if route.Request().URL() == "http://localhost:4567/toggle/101" && route.Request().Technique() == "POST" {
    // we anticipate {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 anticipate {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/htmx.org@1.9.12" {
    // serve the htmx library
    stubResponse(route, readFile("testdata/htmx.min.js"), "utility/javascript")

Go

  } else if (route.request().url().equals("https://unpkg.com/htmx.org@1.9.12")) {
      // 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 comprises many of the utility is
reloaded.

Go

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

  // examine that the web page has been up to date
  doc := parseHtml(t, content material(t, web page))
  parts := doc.Discover("physique > part.todoapp > p")
  assert.Equal(t, "Stubbed html", parts.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();

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

We run the check, and it fails, as anticipated. So as to perceive
why precisely it fails, we add to the error message the entire HTML
doc.

Go

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

Java

  assertThat(parts.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 title="viewport" content material="width=device-width, initial-scale=1">
                              <title>Template • TodoMVC</title>
                              <script src="https://unpkg.com/htmx.org@1.9.12"></script>
                            <physique>
                              <part class="todoapp">
                          ...
                                    <li class="">
                                      <div class="view">
                                        <enter id="checkbox-101" class="toggle" sort="checkbox">
                                        <label for="checkbox-101">One</label>
                                        <button class="destroy"></button>
                                      </div>
                                    </li>
                          ...

We will make this check move 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/htmx.org@1.9.12"></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"
      sort="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 check, 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/htmx.org@1.9.12
  << 200 https://unpkg.com/htmx.org@1.9.12
  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 title="viewport" content material="width=device-width, initial-scale=1">
                              <title>Template • TodoMVC</title>
                              <script src="https://unpkg.com/htmx.org@1.9.12"></script>
                          ...
                            <physique>
                              <part class="todoapp"><part class="todoapp">
                                    <p>Stubbed html</p>
                                  </part></part>
                          ...
                          </physique></html>

The log strains present that the POST name occurred as anticipated, however
examination of the error message exhibits that the HTML construction we
anticipated shouldn’t be there: now we have a part.todoapp nested
inside one other. Because of this we’re not utilizing the HTMX annotations
accurately, and exhibits why this sort of check could be precious. 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"
      sort="checkbox">

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

and we check 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/htmx.org@1.9.12
  << 200 https://unpkg.com/htmx.org@1.9.12
  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/htmx.org@1.9.12
      << 200 https://unpkg.com/htmx.org@1.9.12
      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 right way to write a check for the behaviour of our
HTML that, whereas utilizing the sophisticated equipment of a headless browser,
nonetheless feels extra like a unit check than an integration check. It’s in
reality testing simply an HTML web page with any related CSS and JavaScript,
in isolation from different elements of the applying reminiscent of controllers,
providers or repositories.

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

See the ultimate model of the check in Go and in Java.