Check-Driving HTML Templates

What else ought to we take a look at?

We all know that the seems to be 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 usually
logic in templates, and we would like to have the ability to take a look at that logic.

One is perhaps tempted to check the rendered HTML with string equality,
however this system fails in apply, as a result of templates include lots of
particulars that make string equality assertions impractical. The assertions
turn into very verbose, and when studying the assertion, it turns into tough
to grasp what it’s that we’re making an attempt to show.

What we’d like
is a way to say that some elements of the rendered HTML
correspond to what we anticipate, and to ignore all the main points we do not
care about. A technique to do that is by working queries with the CSS selector language:
it’s a highly effective language that permits us to pick out the
components that we care about from the entire HTML doc. As soon as now we have
chosen these components, we (1) rely that the variety of component 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 seems to be 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 type 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”, “Energetic”, “Accomplished” will probably be
   highlighted, relying on the present url; as an illustration if we resolve that the
   url that exhibits solely the “Energetic” gadgets is /energetic, then when the present url
   is /energetic, the “Energetic” 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.

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, offered for instance:

index.tmpl

  <part class="todoapp">     <ul class="todo-list">       <!-- These are right here simply to point out the construction of the checklist gadgets -->       <!-- Listing gadgets ought to get the category `accomplished` when marked as accomplished -->       <li class="accomplished">  ②         <div class="view">           <enter class="toggle" kind="checkbox" checked>           <label>Style JavaScript</label> ①           <button class="destroy"></button>         </div>       </li>       <li>         <div class="view">           <enter class="toggle" kind="checkbox">           <label>Purchase a unicorn</label> ①           <button class="destroy"></button>         </div>       </li>     </ul>     <footer class="footer">       <!-- This ought to be `0 gadgets left` by default -->       <span class="todo-count"><robust>0</robust> merchandise left</span> ⓷       <ul class="filters">         <li>           <a class="chosen" href="#/">All</a> ④         </li>         <li>           <a href="#/energetic">Energetic</a>         </li>         <li>           <a href="#/accomplished">Accomplished</a>         </li>       </ul>       <!-- Hidden if no accomplished gadgets are left ↓ -->       <button class="clear-completed">Clear accomplished</button> ⑤     </footer>   </part>  

supply

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

We will use these selectors to focus our checks on simply the issues we wish to take a look at.

Testing HTML content material

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

func Test_todoItemsAreShown(t *testing.T) {   mannequin := todo.NewList()   mannequin.Add("Foo")   mannequin.Add("Bar")   buf := renderTemplate(mannequin)   // assert there are two <li> components contained in the <ul class="todo-list">    // assert the primary <li> textual content is "Foo"   // assert the second <li> textual content is "Bar" } 

We want a option to question the HTML doc with our CSS selector; an excellent
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 take a look at turns into:

Go

  func Test_todoItemsAreShown(t *testing.T) {     mannequin := todo.NewList()     mannequin.Add("Foo")     mannequin.Add("Bar")        buf := renderTemplate("index.tmpl", mannequin)        // parse the HTML with goquery     doc, err := goquery.NewDocumentFromReader(bytes.NewReader(buf.Bytes()))     if err != nil {       // if parsing fails, we cease the take a look at right here with t.FatalF       t.Fatalf("Error rendering template %s", err)     }        // assert there are two <li> components contained in the <ul class="todo-list">     choice := doc.Discover("ul.todo-list li")     assert.Equal(t, 2, choice.Size())        // assert the primary <li> textual content is "Foo"     assert.Equal(t, "Foo", textual content(choice.Nodes[0]))        // assert the second <li> textual content is "Bar"     assert.Equal(t, "Bar", textual content(choice.Nodes[1]))   }      func textual content(node *html.Node) string {     // Somewhat mess attributable to 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

  @Check   void todoItemsAreShown() throws IOException {       var mannequin = new TodoList();       mannequin.add("Foo");       mannequin.add("Bar");          var html = renderTemplate("/index.tmpl", mannequin);          // parse the HTML with jsoup       Doc doc = Jsoup.parse(html, "");          // assert there are two <li> components contained in the <ul class="todo-list">       var choice = doc.choose("ul.todo-list li");       assertThat(choice).hasSize(2);          // assert the primary <li> textual content is "Foo"       assertThat(choice.get(0).textual content()).isEqualTo("Foo");          // assert the second <li> textual content is "Bar"       assertThat(choice.get(1).textual content()).isEqualTo("Bar");   }

supply

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

Go

  --- FAIL: Test_todoItemsAreShown (0.00s)       index_template_test.go:44: First checklist merchandise: need Foo, acquired Style JavaScript       index_template_test.go:49: Second checklist merchandise: need Bar, acquired 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 .Gadgets }}       <li>         <div class="view">           <enter class="toggle" kind="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" kind="checkbox">         <label>{{ title }}</label>         <button class="destroy"></button>       </div>     </li>     {{ /allItems }}   </ul>

supply

Check 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
checks, they may turn 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 take a look at right here with t.FatalF       t.Fatalf("Error rendering template %s", err)     }     return doc   } 

Java

  @Check   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! Not less than in my view. Now that we extracted the parseHtml helper, it is
a good suggestion to verify 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 an excellent place for testing extra rendering logic. The
second dynamic function in our checklist 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.Measurement())     assert.Equal(t, "Bar", textual content(choice.Nodes[0]))   }

supply

Java

  @Check   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 .Gadgets }}       <li class="{{ if .IsCompleted }}accomplished{{ finish }}">         <div class="view">           <enter class="toggle" kind="checkbox">           <label>{{ .Title }}</label>           <button class="destroy"></button>         </div>       </li>     {{ finish }}   </ul>

supply

Java – jmustache

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

supply

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

Make it simple so as to add new checks

The primary of the 20 suggestions from the wonderful discuss by Russ Cox on Go
Testing is “Make it simple so as to add new take a look at instances“. Certainly, in Go there
is an inclination to make most checks parameterized, for this very cause.
Alternatively, whereas Java has
good help
for parameterized checks with JUnit 5, they aren’t used as a lot.

Since our present two checks 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
• An inventory of textual content matches that we look forward to finding after we run the CSS
  selector on the rendered HTML.

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

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

  file 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), "sudden # 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      > Job :take a look at      IndexTemplateTest > testIndexTemplate(TestCase) > [1] all todo gadgets are proven PASSED   IndexTemplateTest > testIndexTemplate(TestCase) > [2] accomplished gadgets get the 'accomplished' class PASSED

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

Having rewritten our two outdated checks 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"><robust>{{len .ActiveItems}}</robust> gadgets left</span>

supply

Java – jmustache

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

supply

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

Go

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

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 instances is less complicated. Within the subsequent part, we’ll see that the necessities
for the following take a look at instances 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’ll now take a look at the “All”, “Energetic” and “Accomplished” navigation hyperlinks at
the underside of the UI (see the image above),
and these rely on which url we’re visiting, which is
one thing that our template has no option 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 at the moment visited url to the mannequin, as a result of that’s
person navigation state, not utility state.

So we have to move extra data to the template past the mannequin. A simple method
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     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 take a look at instances desk has yet another subject:

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 instances     {       identify:     "highlighted navigation hyperlink: All",       path:     "/",       selector: "ul.filters a.chosen",       matches:  []string{"All"},     },     {       identify:     "highlighted navigation hyperlink: Energetic",       path:     "/energetic",       selector: "ul.filters a.chosen",       matches:  []string{"Energetic"},     },     {       identify:     "highlighted navigation hyperlink: Accomplished",       path:     "/accomplished",       selector: "ul.filters a.chosen",       matches:  []string{"Accomplished"},     },   }

Java

  file 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 instances               new TestCase(                       "highlighted navigation hyperlink: All",                       new TodoList(),                       "/",                       "ul.filters a.chosen",                       Listing.of("All")),               new TestCase(                       "highlighted navigation hyperlink: Energetic",                       new TodoList(),                       "/energetic",                       "ul.filters a.chosen",                       Listing.of("Energetic")),               new TestCase(                       "highlighted navigation hyperlink: Accomplished",                       new TodoList(),                       "/accomplished",                       "ul.filters a.chosen",                       Listing.of("Accomplished")),       };   }

We discover that for the three new instances, the mannequin is irrelevant;
whereas for the earlier instances, the trail is irrelevant. The Go syntax permits us
to initialize a struct with simply the fields we’re involved in, however Java doesn’t have
the same function, so we’re pushed to move further data, and this makes the take a look at instances
desk tougher to grasp.

A developer would possibly take a look at the primary take a look at case and marvel if the anticipated conduct relies upon
on the trail being set to "/", and is perhaps tempted so as to add extra instances with
a unique path. In the identical method, when studying the
highlighted navigation hyperlink take a look at instances, the developer would possibly marvel if the
anticipated conduct relies on the mannequin being set to an empty todo checklist. If that’s the case, one would possibly
be led so as to add irrelevant take a look at instances for the highlighted hyperlink with non-empty todo-lists.

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

Java

  file 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 put in writing them.
Now we are able to rewrite our Java take a look at instances with the Builder, to
obtain better 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 instances               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 checks? At current, they fail for the incorrect cause: null-pointer exceptions
because of the lacking mannequin and path values.
As a way to get our new take a look at instances to fail for the best cause, specifically 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 modifications, we see that the final two take a look at instances, those for the highlighted hyperlink Energetic
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: "Energetic"                           precise  : "All"   === RUN   Test_indexTemplate/highlighted_navigation_link:_Completed       index_template_test.go:82:              Error Hint:  .../tdd-templates/go/index_template_test.go:82             Error:        Not equal:                            anticipated: "Accomplished"                           precise  : "All" 

Java

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

To make the 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 "/energetic" }}chosen{{ finish }}" href="#/energetic">Energetic</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">Energetic</a>     </li>     <li>       <a class="{{ #pathCompleted }}chosen{{ /pathCompleted }}" href="#/accomplished">Accomplished</a>     </li>   </ul>

supply

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("/energetic"),               "pathCompleted", path.equals("/accomplished")       );       return template.execute(knowledge);   }

supply

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

To recap this part, we made the take a look at code a bit of bit extra sophisticated, in order that the take a look at
instances are clearer: this can be a excellent tradeoff!

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 whole 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 sudden requests         panic("sudden 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("sudden 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();       }          @Check       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 sudden calls                       fail(String.format("Surprising request: %s %s", route.request().methodology(), route.request().url()));                   }               });                          // load preliminary html               web page.navigate("http://localhost:4567/index.html");           }       }   }

supply

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

Go

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

Java

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

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

Go

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

Java

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

The openPage 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 offers suggestions on what
the web page is doing

Go

  func logActivity(web page playwright.Web page) {     web page.OnRequest(func(request playwright.Request) {       log.Printf(">> %s %sn", request.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 sudden requests       panic("sudden 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 sudden calls           fail(String.format("Surprising 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 find out how to simulate person
interplay with components of the web page, and observe the web page’s
behaviour. However first we have to clear up an issue with the shortage of
identifiers in our area mannequin.

Figuring out todo gadgets

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

Go – up to date mannequin with Id

  kind Merchandise struct {     Id          int     Title       string     IsCompleted bool   }      func (l *Listing) AddWithId(id int, title string) *Listing {     merchandise := Merchandise{       Id:    id,       Title: title,     }     l.Gadgets = append(l.Gadgets, &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.Gadgets = append(l.Gadgets, &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 file TodoItem(int id, String title, boolean isCompleted) {       public boolean isActive() {           return !isCompleted;       }   }

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

Go – including Id within the take a look at knowledge

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

Java – including Id within the take a look at knowledge

  @Check   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 person interplay with the web page.

Clicking on a todo merchandise

We wish to simulate person interplay with the HTML web page. It is perhaps
tempting to proceed to make use of CSS selectors to establish the precise
checkbox that we wish to click on, however there’s a greater method: there’s a
consensus amongst front-end builders that the easiest way to check
interplay with a web page is to make use of it
the identical method that customers do. As an illustration, you do not search for a
button via a CSS locator resembling 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 via 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{Identify: "One"})     if err := checkbox.Click on(); err != nil {       t.Deadly(err)     }   }

Java

  @Check   void toggleTodoItem() {           // ...           // click on on the "One" checkbox           var checkbox = web page.getByRole(AriaRole.CHECKBOX, new Web page.GetByRoleOptions().setName("One"));           checkbox.click on();       }   }

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

Go

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

Java

  IndexBehaviourTest > toggleTodoItem() STANDARD_OUT       >> GET http://localhost:4567/index.html       << 200 http://localhost:4567/index.html       Loaded: http://localhost:4567/index.html      IndexBehaviourTest > toggleTodoItem() FAILED       com.microsoft.playwright.TimeoutError: Error {         message="hyperlink the label to the checkbox correctly: 
generated HTML with dangerous accessibility 
 
  <li>     <div class="view">       <enter class="toggle" kind="checkbox">       <label>One</label>       <button class="destroy"></button>     </div>   </li>
 
We repair it through the use of the for attribute within the
         template,
 
index.tmpl – Go 
 
  <li>     <div class="view">       <enter id="checkbox-{{.Id}}" class="toggle" kind="checkbox">       <label for="checkbox-{{.Id}}">{{.Title}}</label>       <button class="destroy"></button>     </div>   </li>
 
index.tmpl – Java 
 
  <li>     <div class="view">       <enter id="checkbox-{{ id }}" class="toggle" kind="checkbox">       <label for="checkbox-{{ id }}">{{ title }}</label>       <button class="destroy"></button>     </div>   </li>
 
In order that it generates correct, accessible HTML:
 
generated HTML with higher accessibility 
 
  <li>     <div class="view">       <enter id="checkbox-101" class="toggle" kind="checkbox">       <label for="checkbox-101">One</label>       <button class="destroy"></button>     </div>   </li>
 
We run once more the take a look at, and it passes. 
 
On this part we noticed how testing the HTML in the identical was as customers
         work together with it led us to make use of ARIA roles, which led to enhancing
         accessibility of our generated HTML. Within the subsequent part, we are going to see
         find out how to take a look at that the clicking on a todo merchandise triggers a distant name to the
         server, that ought to end in swapping part of the present HTML with
         the HTML returned by the XHR name.
 

Spherical-trip to the server

Now we are going to prolong our take a look at. We inform the take a look at 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().Methodology() == "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().methodology().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 a lot 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)   }   // verify that the web page has been up to date   doc := parseHtml(t, content material(t, web page))   components := doc.Discover("physique > part.todoapp > p")   assert.Equal(t, "Stubbed html", components.Textual content(), should(web page.Content material())) 

java

  // click on on the "One" checkbox   var checkbox = web page.getByRole(AriaRole.CHECKBOX, new Web page.GetByRoleOptions().setName("One"));   checkbox.click on();   // verify that the web page has been up to date   var doc = parseHtml(web page.content material());   var components = doc.choose("physique > part.todoapp > p");   assertThat(components.textual content())           .describedAs(web page.content material())           .isEqualTo("Stubbed html");

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

Go

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

Java

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

The error message could be very verbose, however we see that the rationale 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 analogous

  --- 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  : ""                           ...             Check:         Test_toggleTodoItem             Messages:     <!DOCTYPE html><html lang="en"><head>                               <meta charset="utf-8">                               <meta identify="viewport" content material="width=device-width, initial-scale=1">                               <title>Template • TodoMVC</title>                               <script src="https://unpkg.com/htmx.org@1.9.12"></script>                             <physique>                               <part class="todoapp">                           ...                                     <li class="">                                       <div class="view">                                         <enter id="checkbox-101" class="toggle" kind="checkbox">                                         <label for="checkbox-101">One</label>                                         <button class="destroy"></button>                                       </div>                                     </li>                           ...

We will make this take a look at 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"       kind="checkbox">

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

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

Go – Java is analogous

  --- 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  : ""                           ...             Check:         Test_toggleTodoItem             Messages:     <!DOCTYPE html><html lang="en"><head>                               <meta charset="utf-8">                               <meta identify="viewport" content material="width=device-width, initial-scale=1">                               <title>Template • TodoMVC</title>                               <script src="https://unpkg.com/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 isn’t there: now we have a part.todoapp nested
inside one other. Which means that we’re not utilizing the HTMX annotations
appropriately, and exhibits why this sort of take a look at will be invaluable. We add the
lacking annotation

index.tmpl

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

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

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

Go

  === RUN   Test_toggleTodoItem   >> GET http://localhost:4567/index.html   << 200 http://localhost:4567/index.html   >> GET https://unpkg.com/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 find out how to write a take a look at for the behaviour of our
HTML that, whereas utilizing the sophisticated equipment of a headless browser,
nonetheless feels extra like a unit take a look at than an integration take a look at. It’s in
truth testing simply an HTML web page with any related CSS and JavaScript,
in isolation from different elements of the appliance resembling controllers,
companies or repositories.

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

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