After a decade or extra the place Single-Web page-Functions generated by
JavaScript frameworks have
change into the norm, we see that server-side rendered HTML is changing into
well-liked once more, additionally due to libraries equivalent to HTMX or Turbo. Writing a wealthy net UI in a
historically server-side language like Go or Java is not simply potential,
however a really enticing proposition.
We then face the issue of how you can write automated exams for the HTML
components of our net purposes. Whereas the JavaScript world has developed highly effective and refined methods to check the UI,
ranging in dimension from unit-level to integration to end-to-end, in different
languages we would not have such a richness of instruments accessible.
When writing an online software in Go or Java, HTML is usually generated
by way of templates, which include small fragments of logic. It’s actually
potential to check them not directly by way of end-to-end exams, however these exams
are sluggish and costly.
We will as an alternative write unit exams that use CSS selectors to probe the
presence and proper content material of particular HTML parts inside a doc.
Parameterizing these exams makes it simple so as to add new exams and to obviously
point out what particulars every take a look at is verifying. This method works with any
language that has entry to an HTML parsing library that helps CSS
selectors; examples are supplied in Go and Java.
Motivation
Why test-drive HTML templates? In spite of everything, probably the most dependable solution to verify
{that a} template works is to render it to HTML and open it in a browser,
proper?
There’s some reality on this; unit exams can’t show {that a} template
works as anticipated when rendered in a browser, so checking them manually
is critical. And if we make a
mistake within the logic of a template, often the template breaks
in an apparent approach, so the error is rapidly noticed.
Alternatively:
- Counting on guide exams solely is dangerous; what if we make a change that breaks
a template, and we do not take a look at it as a result of we didn’t suppose it could impression the
template? We might get an error at runtime! - Templates usually include logic, equivalent to if-then-else’s or iterations over arrays of things,
and when the array is empty, we frequently want to point out one thing completely different.
Handbook checking all instances, for all of those bits of logic, turns into unsustainable in a short time - There are errors that aren’t seen within the browser. Browsers are extraordinarily
tolerant of inconsistencies in HTML, counting on heuristics to repair our damaged
HTML, however then we’d get completely different leads to completely different browsers, on completely different units. It is good
to verify that the HTML constructions we’re constructing in our templates correspond to
what we predict.
It seems that test-driving HTML templates is straightforward; let’s have a look at how you can
do it in Go and Java. I will probably be utilizing as a place to begin the TodoMVC
template, which is a pattern software used to showcase JavaScript
frameworks.
We’ll see methods that may be utilized to any programming language and templating expertise, so long as we now have
entry to an acceptable HTML parser.
This text is a bit lengthy; you might have considered trying to check out the
last resolution in Go or
in Java,
or bounce to the conclusions.
Degree 1: checking for sound HTML
The primary factor we need to verify is that the HTML we produce is
principally sound. I do not imply to verify that HTML is legitimate in response to the
W3C; it could be cool to do it, however it’s higher to begin with a lot easier and quicker checks.
As an illustration, we would like our exams to
break if the template generates one thing like
<div>foo</p>
Let’s examine how you can do it in levels: we begin with the next take a look at that
tries to compile the template. In Go we use the usual html/template package deal.
Go
func Test_wellFormedHtml(t *testing.T) {
templ := template.Should(template.ParseFiles("index.tmpl"))
_ = templ
}
In Java, we use jmustache
as a result of it is quite simple to make use of; Freemarker or
Velocity are different frequent decisions.
Java
@Take a look at
void indexIsSoundHtml() {
var template = Mustache.compiler().compile(
new InputStreamReader(
getClass().getResourceAsStream("/index.tmpl")));
}
If we run this take a look at, it’s going to fail, as a result of the index.tmpl file does
not exist. So we create it, with the above damaged HTML. Now the take a look at ought to move.
Then we create a mannequin for the template to make use of. The appliance manages a todo-list, and
we will create a minimal mannequin for demonstration functions.
Go
func Test_wellFormedHtml(t *testing.T) {
templ := template.Should(template.ParseFiles("index.tmpl"))
mannequin := todo.NewList()
_ = templ
_ = mannequin
}
Java
@Take a look at
void indexIsSoundHtml() {
var template = Mustache.compiler().compile(
new InputStreamReader(
getClass().getResourceAsStream("/index.tmpl")));
var mannequin = new TodoList();
}
Now we render the template, saving the leads to a bytes buffer (Go) or as a String (Java).
Go
func Test_wellFormedHtml(t *testing.T) {
templ := template.Should(template.ParseFiles("index.tmpl"))
mannequin := todo.NewList()
var buf bytes.Buffer
err := templ.Execute(&buf, mannequin)
if err != nil {
panic(err)
}
}
Java
@Take a look at
void indexIsSoundHtml() {
var template = Mustache.compiler().compile(
new InputStreamReader(
getClass().getResourceAsStream("/index.tmpl")));
var mannequin = new TodoList();
var html = template.execute(mannequin);
}
At this level, we need to parse the HTML and we count on to see an
error, as a result of in our damaged HTML there’s a div ingredient that
is closed by a p ingredient. There’s an HTML parser within the Go
customary library, however it’s too lenient: if we run it on our damaged HTML, we do not get an
error. Fortunately, the Go customary library additionally has an XML parser that may be
configured to parse HTML (due to this Stack Overflow reply)
Go
func Test_wellFormedHtml(t *testing.T) {
templ := template.Should(template.ParseFiles("index.tmpl"))
mannequin := todo.NewList()
// render the template right into a buffer
var buf bytes.Buffer
err := templ.Execute(&buf, mannequin)
if err != nil {
panic(err)
}
// verify that the template may be parsed as (lenient) XML
decoder := xml.NewDecoder(bytes.NewReader(buf.Bytes()))
decoder.Strict = false
decoder.AutoClose = xml.HTMLAutoClose
decoder.Entity = xml.HTMLEntity
for {
_, err := decoder.Token()
swap err {
case io.EOF:
return // We're achieved, it is legitimate!
case nil:
// do nothing
default:
t.Fatalf("Error parsing html: %s", err)
}
}
}
This code configures the HTML parser to have the appropriate degree of leniency
for HTML, after which parses the HTML token by token. Certainly, we see the error
message we wished:
--- FAIL: Test_wellFormedHtml (0.00s)
index_template_test.go:61: Error parsing html: XML syntax error on line 4: sudden finish ingredient </p>
In Java, a flexible library to make use of is jsoup:
Java
@Take a look at
void indexIsSoundHtml() {
var template = Mustache.compiler().compile(
new InputStreamReader(
getClass().getResourceAsStream("/index.tmpl")));
var mannequin = new TodoList();
var html = template.execute(mannequin);
var parser = Parser.htmlParser().setTrackErrors(10);
Jsoup.parse(html, "", parser);
assertThat(parser.getErrors()).isEmpty();
}
And we see it fail:
java.lang.AssertionError: Anticipating empty however was:<[<1:13>: Unexpected EndTag token [</p>] when in state [InBody],
Success! Now if we copy over the contents of the TodoMVC
template to our index.tmpl file, the take a look at passes.
The take a look at, nevertheless, is just too verbose: we extract two helper features, in
order to make the intention of the take a look at clearer, and we get
Go
func Test_wellFormedHtml(t *testing.T) {
mannequin := todo.NewList()
buf := renderTemplate("index.tmpl", mannequin)
assertWellFormedHtml(t, buf)
}
Java
@Take a look at
void indexIsSoundHtml() {
var mannequin = new TodoList();
var html = renderTemplate("/index.tmpl", mannequin);
assertSoundHtml(html);
}
Degree 2: testing HTML construction
What else ought to we take a look at?
We all know that the seems of a web page can solely be examined, in the end, by a
human how it’s rendered in a browser. Nevertheless, there may be usually
logic in templates, and we would like to have the ability to take a look at that logic.
One may be tempted to check the rendered HTML with string equality,
however this method fails in observe, as a result of templates include a variety of
particulars that make string equality assertions impractical. The assertions
change into very verbose, and when studying the assertion, it turns into tough
to know what it’s that we’re making an attempt to show.
What we want
is a way to claim that some components of the rendered HTML
correspond to what we count on, and to ignore all the small print we do not
care about. A method to do that is by operating queries with the CSS selector language:
it’s a highly effective language that permits us to pick the
parts that we care about from the entire HTML doc. As soon as we now have
chosen these parts, we (1) rely that the variety of ingredient returned
is what we count on, and (2) that they include the textual content or different content material
that we count on.
The UI that we’re presupposed to generate seems like this:
There are a number of particulars which might be rendered dynamically:
- The variety of objects and their textual content content material change, clearly
- The type of the todo-item adjustments when it is accomplished (e.g., the
second) - The “2 objects left” textual content will change with the variety of non-completed
objects - One of many three buttons “All”, “Energetic”, “Accomplished” will probably be
highlighted, relying on the present url; for example if we determine that the
url that reveals solely the “Energetic” objects is/lively, then when the present url
is/lively, the “Energetic” button needs to be surrounded by a skinny crimson
rectangle - The “Clear accomplished” button ought to solely be seen if any merchandise is
accomplished
Every of this considerations may 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 objects -->
<!-- Record objects 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 needs to be `0 objects 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">Energetic</a>
</li>
<li>
<a href="#/accomplished">Accomplished</a>
</li>
</ul>
<!-- Hidden if no accomplished objects are left ↓ -->
<button class="clear-completed">Clear accomplished</button> ⑤
</footer>
</part>
By wanting on the static model of the template, we will deduce which
CSS selectors can be utilized to determine the related parts for the 5Â dynamic
options listed above:
| function | CSS selector | |
|---|---|---|
| â‘ | All of the objects | ul.todo-list li |
| â‘¡ | Accomplished objects | ul.todo-list li.accomplished |
| â“· | Gadgets left | span.todo-count |
| â‘£ | Highlighted navigation hyperlink | ul.filters a.chosen |
| ⑤ | Clear accomplished button | button.clear-completed |
We will use these selectors to focus our exams on simply the issues we need to take a look at.
Testing HTML content material
The primary take a look at will search for all of the objects, and show that the information
arrange by the take a look at is rendered accurately.
func Test_todoItemsAreShown(t *testing.T) {
mannequin := todo.NewList()
mannequin.Add("Foo")
mannequin.Add("Bar")
buf := renderTemplate(mannequin)
// assert there are two <li> parts contained in the <ul class="todo-list">
// assert the primary <li> textual content is "Foo"
// assert the second <li> textual content is "Bar"
}
We’d like a solution to question the HTML doc with our CSS selector;
library for Go is goquery, that implements an API impressed by jQuery.
In Java, we maintain utilizing the identical library we used to check for sound HTML, 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> 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 as a result 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())
}
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");
}
If we nonetheless have not modified the template to populate the record from the
mannequin, this take a look at will fail, as a result of the static template
todo objects 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 .Gadgets }} <li> <div class="view"> <enter class="toggle" kind="checkbox"> <label>{{ .Title }}</label> <button class="destroy"></button> </div> </li> {{ finish }} </ul>
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>
Take a look at each content material and soundness on the similar time
Our take a look at works, however it’s a bit verbose, particularly the Go model. If we’ll have extra
exams, they are going to change into repetitive and tough to learn, so we make it extra concise by extracting a helper operate for parsing the html. We additionally take away the
feedback, because the code needs to be clear sufficient
Go
func Test_todoItemsAreShown(t *testing.T) {
mannequin := todo.NewList()
mannequin.Add("Foo")
mannequin.Add("Bar")
buf := renderTemplate("index.tmpl", mannequin)
doc := parseHtml(t, buf)
choice := doc.Discover("ul.todo-list li")
assert.Equal(t, 2, choice.Size())
assert.Equal(t, "Foo", textual content(choice.Nodes[0]))
assert.Equal(t, "Bar", textual content(choice.Nodes[1]))
}
func parseHtml(t *testing.T, buf bytes.Buffer) *goquery.Doc {
doc, err := goquery.NewDocumentFromReader(bytes.NewReader(buf.Bytes()))
if err != nil {
// if parsing fails, we cease the take a look at right here with t.FatalF
t.Fatalf("Error rendering template %s", err)
}
return doc
}
Java
@Take a look at
void todoItemsAreShown() throws IOException {
var mannequin = new TodoList();
mannequin.add("Foo");
mannequin.add("Bar");
var html = renderTemplate("/index.tmpl", mannequin);
var doc = parseHtml(html);
var choice = doc.choose("ul.todo-list li");
assertThat(choice).hasSize(2);
assertThat(choice.get(0).textual content()).isEqualTo("Foo");
assertThat(choice.get(1).textual content()).isEqualTo("Bar");
}
personal static Doc parseHtml(String html) {
return Jsoup.parse(html, "");
}
Significantly better! Not less than for my part. 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
}
Java
personal static Doc parseHtml(String html) {
var parser = Parser.htmlParser().setTrackErrors(10);
var doc = Jsoup.parse(html, "", parser);
assertThat(parser.getErrors()).isEmpty();
return doc;
}
And with this, we will 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 place for testing extra rendering logic. The
second dynamic function in our record is “Record objects ought to get the category
accomplished when marked as accomplished”. We will write a take a look at for this:
Go
func Test_completedItemsGetCompletedClass(t *testing.T) {
mannequin := todo.NewList()
mannequin.Add("Foo")
mannequin.AddCompleted("Bar")
buf := renderTemplate("index.tmpl", mannequin)
doc := parseHtml(t, buf)
choice := doc.Discover("ul.todo-list li.accomplished")
assert.Equal(t, 1, choice.Dimension())
assert.Equal(t, "Bar", textual content(choice.Nodes[0]))
}
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");
}
And this take a look at may 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>
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>
So little by little, we will take a look at and add the assorted dynamic options
that our template ought to have.