After a decade or extra the place Single-Web page-Purposes generated by
JavaScript frameworks have
develop into the norm, we see that server-side rendered HTML is turning into
common once more, additionally because of libraries similar to HTMX or Turbo. Writing a wealthy internet UI in a
historically server-side language like Go or Java is not simply doable,
however a really engaging proposition.
We then face the issue of learn how to write automated assessments for the HTML
elements of our internet functions. Whereas the JavaScript world has developed highly effective and subtle methods to check the UI,
ranging in measurement from unit-level to integration to end-to-end, in different
languages we do not need such a richness of instruments out there.
When writing an online software in Go or Java, HTML is often generated
by means of templates, which comprise small fragments of logic. It’s definitely
doable to check them not directly by means of end-to-end assessments, however these assessments
are sluggish and costly.
We will as a substitute write unit assessments that use CSS selectors to probe the
presence and proper content material of particular HTML components inside a doc.
Parameterizing these assessments makes it simple so as to add new assessments and to obviously
point out what particulars every check is verifying. This method works with any
language that has entry to an HTML parsing library that helps CSS
selectors; examples are offered in Go and Java.
Motivation
Why test-drive HTML templates? In any case, essentially the most dependable method to examine
{that a} template works is to render it to HTML and open it in a browser,
proper?
There’s some fact on this; unit assessments can not 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.
However:
- Counting on guide assessments solely is dangerous; what if we make a change that breaks
a template, and we do not check it as a result of we didn’t assume it could influence the
template? We would get an error at runtime! - Templates typically comprise logic, similar to if-then-else’s or iterations over arrays of things,
and when the array is empty, we frequently want to indicate one thing completely different.
Guide 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 ends in completely different browsers, on completely different units. It is good
to examine that the HTML buildings we’re constructing in our templates correspond to
what we expect.
It seems that test-driving HTML templates is straightforward; let’s examine learn how to
do it in Go and Java. I might be utilizing as a place to begin the TodoMVC
template, which is a pattern software used to showcase JavaScript
frameworks.
We are going to see methods that may be utilized to any programming language and templating expertise, so long as we have now
entry to an appropriate HTML parser.
This text is a bit lengthy; you might have considered trying to try the
closing resolution in Go or
in Java,
or soar to the conclusions.
Degree 1: checking for sound HTML
The primary factor we wish to examine is that the HTML we produce is
mainly sound. I do not imply to examine that HTML is legitimate based on the
W3C; it could be cool to do it, nevertheless it’s higher to start out with a lot easier and quicker checks.
For example, we would like our assessments to
break if the template generates one thing like
<div>foo</p>
Let’s have a look at learn how to do it in phases: we begin with the next check that
tries to compile the template. In Go we use the usual html/template package deal.
Go
func Test_wellFormedHtml(t *testing.T) {
templ := template.Should(template.ParseFiles("index.tmpl"))
_ = templ
}
In Java, we use jmustache
as a result of it is quite simple to make use of; Freemarker or
Velocity are different widespread decisions.
Java
@Check
void indexIsSoundHtml() {
var template = Mustache.compiler().compile(
new InputStreamReader(
getClass().getResourceAsStream("/index.tmpl")));
}
If we run this check, 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 check ought to go.
Then we create a mannequin for the template to make use of. The applying manages a todo-list, and
we are able to create a minimal mannequin for demonstration functions.
Go
func Test_wellFormedHtml(t *testing.T) {
templ := template.Should(template.ParseFiles("index.tmpl"))
mannequin := todo.NewList()
_ = templ
_ = mannequin
}
Java
@Check
void indexIsSoundHtml() {
var template = Mustache.compiler().compile(
new InputStreamReader(
getClass().getResourceAsStream("/index.tmpl")));
var mannequin = new TodoList();
}
Now we render the template, saving the ends in a bytes buffer (Go) or as a String (Java).
Go
func Test_wellFormedHtml(t *testing.T) {
templ := template.Should(template.ParseFiles("index.tmpl"))
mannequin := todo.NewList()
var buf bytes.Buffer
err := templ.Execute(&buf, mannequin)
if err != nil {
panic(err)
}
}
Java
@Check
void indexIsSoundHtml() {
var template = Mustache.compiler().compile(
new InputStreamReader(
getClass().getResourceAsStream("/index.tmpl")));
var mannequin = new TodoList();
var html = template.execute(mannequin);
}
At this level, we wish to parse the HTML and we anticipate to see an
error, as a result of in our damaged HTML there’s a div aspect that
is closed by a p aspect. There may be an HTML parser within the Go
customary library, however it’s too lenient: if we run it on our damaged HTML, we do not get an
error. Fortunately, the Go customary library additionally has an XML parser that may be
configured to parse HTML (because of this Stack Overflow reply)
Go
func Test_wellFormedHtml(t *testing.T) {
templ := template.Should(template.ParseFiles("index.tmpl"))
mannequin := todo.NewList()
// render the template right into a buffer
var buf bytes.Buffer
err := templ.Execute(&buf, mannequin)
if err != nil {
panic(err)
}
// examine that the template will be parsed as (lenient) XML
decoder := xml.NewDecoder(bytes.NewReader(buf.Bytes()))
decoder.Strict = false
decoder.AutoClose = xml.HTMLAutoClose
decoder.Entity = xml.HTMLEntity
for {
_, err := decoder.Token()
swap err {
case io.EOF:
return // We're executed, it is legitimate!
case nil:
// do nothing
default:
t.Fatalf("Error parsing html: %s", err)
}
}
}
This code configures the HTML parser to have the correct 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 aspect </p>
In Java, a flexible library to make use of is jsoup:
Java
@Check
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 check passes.
The check, nonetheless, is simply too verbose: we extract two helper features, in
order to make the intention of the check clearer, and we get
Go
func Test_wellFormedHtml(t *testing.T) {
mannequin := todo.NewList()
buf := renderTemplate("index.tmpl", mannequin)
assertWellFormedHtml(t, buf)
}
Java
@Check
void indexIsSoundHtml() {
var mannequin = new TodoList();
var html = renderTemplate("/index.tmpl", mannequin);
assertSoundHtml(html);
}
Degree 2: testing HTML construction
What else ought to we check?
We all know that the appears to be like of a web page can solely be examined, finally, by a
human how it’s rendered in a browser. Nevertheless, there’s typically
logic in templates, and we would like 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 apply, 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 grasp what it’s that we’re attempting to show.
What we’d like
is a method to say that some elements of the rendered HTML
correspond to what we anticipate, and to ignore all the small print we do not
care about. A method to do that is by operating queries with the CSS selector language:
it’s a highly effective language that enables us to pick the
components that we care about from the entire HTML doc. As soon as we have now
chosen these components, we (1) depend that the variety of aspect returned
is what we anticipate, and (2) that they comprise the textual content or different content material
that we anticipate.
The UI that we’re alleged to generate appears to be like like this:
There are a number of particulars which can be rendered dynamically:
- The variety of gadgets and their textual content content material change, clearly
- The type of the todo-item modifications when it is accomplished (e.g., the
second) - The “2 gadgets left” textual content will change with the variety of non-completed
gadgets - One of many three buttons “All”, “Energetic”, “Accomplished” might be
highlighted, relying on the present url; for example if we resolve that the
url that reveals solely the “Energetic” gadgets is/energetic, then when the present url
is/energetic, the “Energetic” button needs to be surrounded by a skinny purple
rectangle - 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 example:
index.tmpl
<part class="todoapp">
<ul class="todo-list">
<!-- These are right here simply to indicate the construction of the record gadgets -->
<!-- Listing gadgets ought to get the category `accomplished` when marked as accomplished -->
<li class="accomplished"> â‘¡
<div class="view">
<enter class="toggle" sort="checkbox" checked>
<label>Style JavaScript</label> â‘
<button class="destroy"></button>
</div>
</li>
<li>
<div class="view">
<enter class="toggle" sort="checkbox">
<label>Purchase a unicorn</label> â‘
<button class="destroy"></button>
</div>
</li>
</ul>
<footer class="footer">
<!-- This needs 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>
By wanting on the static model of the template, we are able to deduce which
CSS selectors can be utilized to determine the related components for the 5Â dynamic
options listed above:
| characteristic | CSS selector | |
|---|---|---|
| â‘ | All of the gadgets | ul.todo-list li |
| â‘¡ | Accomplished gadgets | ul.todo-list li.accomplished |
| â“· | Objects left | span.todo-count |
| â‘£ | Highlighted navigation hyperlink | ul.filters a.chosen |
| ⑤ | Clear accomplished button | button.clear-completed |
We will use these selectors to focus our assessments on simply the issues we wish to check.
Testing HTML content material
The primary check will search for all of the gadgets, and show that the info
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> 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 method to question the HTML doc with our CSS selector; a superb
library for Go is goquery, that implements an API impressed by jQuery.
In Java, we hold utilizing the identical library we used to check for sound HTML, particularly
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> components contained in the <ul class="todo-list">
choice := doc.Discover("ul.todo-list li")
assert.Equal(t, 2, choice.Size())
// assert the primary <li> textual content is "Foo"
assert.Equal(t, "Foo", textual content(choice.Nodes[0]))
// assert the second <li> textual content is "Bar"
assert.Equal(t, "Bar", textual content(choice.Nodes[1]))
}
func textual content(node *html.Node) string {
// A bit mess resulting from 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
@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");
}
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 information:
Go
<ul class="todo-list"> {{ vary .Objects }} <li> <div class="view"> <enter class="toggle" sort="checkbox"> <label>{{ .Title }}</label> <button class="destroy"></button> </div> </li> {{ finish }} </ul>
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>
Check each content material and soundness on the identical time
Our check works, however it’s a bit verbose, particularly the Go model. If we’ll have extra
assessments, they’ll develop 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 check 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! 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
}
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;
}
And with this, we are able to 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 superb place for testing extra rendering logic. The
second dynamic characteristic in our record is “Listing 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]))
}
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");
}
And this check will be made inexperienced by including this little bit of logic to the
template:
Go
<ul class="todo-list">
{{ vary .Objects }}
<li class="{{ if .IsCompleted }}accomplished{{ finish }}">
<div class="view">
<enter class="toggle" sort="checkbox">
<label>{{ .Title }}</label>
<button class="destroy"></button>
</div>
</li>
{{ finish }}
</ul>
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>
So little by little, we are able to check and add the varied dynamic options
that our template ought to have.