Degree 1: checking for sound HTML
The primary factor we wish to examine is that the HTML we produce is
principally sound. I do not imply to examine that HTML is legitimate in accordance with the
W3C; it will be cool to do it, but it surely’s higher to start out with a lot less complicated and quicker checks.
As an example, we wish 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 bundle.
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 selections.
Java
@Check void indexIsSoundHtml() { var template = Mustache.compiler().compile( new InputStreamReader( getClass().getResourceAsStream("/index.tmpl"))); } If we run this take a look at, it can 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 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 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
@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 count on to see an
error, as a result of in our damaged HTML there’s a div component that
is closed by a p component. 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) } // examine 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() change err { case io.EOF: return // We're carried out, it is legitimate! case nil: // do nothing default: t.Fatalf("Error parsing html: %s", err) } } } supply
This code configures the HTML parser to have the appropriate stage of leniency
for HTML, after which parses the HTML token by token. Certainly, we see the error
message we needed:
--- FAIL: Test_wellFormedHtml (0.00s) index_template_test.go:61: Error parsing html: XML syntax error on line 4: surprising finish component </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(); } supply
And we see it fail:
java.lang.AssertionError: Anticipating empty however was:<[<1:13>: Unexpected EndTag token [</p>] when in state [InBody],
Success! Now if we copy over the contents of the TodoMVC
template to our index.tmpl file, the take a look at passes.
The take a look at, nevertheless, is simply too verbose: we extract two helper features, in
order to make the intention of the take a look at clearer, and we get
Go
func Test_wellFormedHtml(t *testing.T) { mannequin := todo.NewList() buf := renderTemplate("index.tmpl", mannequin) assertWellFormedHtml(t, buf) } supply
Java
@Check void indexIsSoundHtml() { var mannequin = new TodoList(); var html = renderTemplate("/index.tmpl", mannequin); assertSoundHtml(html); } supply
Degree 2: testing HTML construction
What else ought to we take a look at?
We all know that the seems of a web page can solely be examined, in the end, by a
human how it’s rendered in a browser. Nonetheless, there may be usually
logic in templates, and we wish 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 apply, as a result of templates include lots of
particulars that make string equality assertions impractical. The assertions
grow to be very verbose, and when studying the assertion, it turns into troublesome
to grasp what it’s that we’re attempting to show.
What we want
is a method to say that some elements of the rendered HTML
correspond to what we count on, and to ignore all the main points 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 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 count on, and (2) that they include the textual content or different content material
that we count on.
The UI that we’re speculated to generate seems 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 model 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”, “Lively”, “Accomplished” might be
highlighted, relying on the present url; as an illustration if we resolve that the
url that reveals solely the “Lively” gadgets is /lively, then when the present url
is /lively, the “Lively” button ought 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 issues 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, offered for example:
index.tmpl
<part class="todoapp"> <ul class="todo-list"> <!-- These are right here simply to point out 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" 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"><sturdy>0</sturdy> merchandise left</span> ⓷ <ul class="filters"> <li> <a class="chosen" href="#/">All</a> ④ </li> <li> <a href="#/lively">Lively</a> </li> <li> <a href="#/accomplished">Accomplished</a> </li> </ul> <!-- Hidden if no accomplished gadgets are left ↓ --> <button class="clear-completed">Clear accomplished</button> ⑤ </footer> </part>
supply
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:
| function | CSS selector |
| ① | All of the gadgets | ul.todo-list li |
| ② | Accomplished gadgets | 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 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 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’d like a approach 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 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> 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 of mess on account of the truth that goquery has // a .Textual content() methodology on Choice however not on html.Node sel := goquery.Choice{Nodes: []*html.Node{node}} return strings.TrimSpace(sel.Textual content()) } supply
Java
@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 record 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 record merchandise: need Foo, bought Style JavaScript index_template_test.go:49: Second record merchandise: need Bar, bought Purchase a unicorn
Java
IndexTemplateTest > todoItemsAreShown() FAILED org.opentest4j.AssertionFailedError: Anticipating: <"Style JavaScript"> to be equal to: <"Foo"> however was not.
We repair it by making the template use the mannequin information:
Go
<ul class="todo-list"> {{ vary .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’ll have extra
exams, they’ll grow to be repetitive and troublesome to learn, so we make it extra concise by extracting a helper perform for parsing the html. We additionally take away the
feedback, because the code ought to be clear sufficient
Go
func Test_todoItemsAreShown(t *testing.T) { mannequin := todo.NewList() mannequin.Add("Foo") mannequin.Add("Bar") buf := renderTemplate("index.tmpl", mannequin) doc := parseHtml(t, buf) choice := doc.Discover("ul.todo-list li") assert.Equal(t, 2, choice.Size()) assert.Equal(t, "Foo", textual content(choice.Nodes[0])) assert.Equal(t, "Bar", textual content(choice.Nodes[1])) } func parseHtml(t *testing.T, buf bytes.Buffer) *goquery.Doc { doc, err := goquery.NewDocumentFromReader(bytes.NewReader(buf.Bytes())) if err != nil { // if parsing fails, we cease the take a look at right here with t.FatalF t.Fatalf("Error rendering template %s", err) } return doc } Java
@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, ""); } A lot better! At the least in my view. Now that we extracted the parseHtml helper, it is
a good suggestion to examine for sound HTML within the helper:
Go
func parseHtml(t *testing.T, buf bytes.Buffer) *goquery.Doc { assertWellFormedHtml(t, buf) doc, err := goquery.NewDocumentFromReader(bytes.NewReader(buf.Bytes())) if err != nil { // if parsing fails, we cease the take a look at right here with t.FatalF t.Fatalf("Error rendering template %s", err) } return doc } supply
Java
non-public static Doc parseHtml(String html) { var parser = Parser.htmlParser().setTrackErrors(10); var doc = Jsoup.parse(html, "", parser); assertThat(parser.getErrors()).isEmpty(); return doc; } supply
And with this, we are able to do away with the primary take a look at that we wrote, as we are actually 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 record 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 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> 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 exams
The primary of the 20 ideas from the superb discuss by Russ Cox on Go
Testing is “Make it simple so as to add new take a look at circumstances“. Certainly, in Go there
is a bent to make most exams parameterized, for this very cause.
Alternatively, whereas Java has
good assist
for parameterized exams with JUnit 5, they aren’t used as a lot.
Since our present two exams have the identical construction, we
may issue them right into a single parameterized take a look at.
A take a look at case for us will encompass:
- A reputation (in order that we are able to produce clear error messages when the take a look at
fails) - A mannequin (in our case a
todo.Listing) - A CSS selector
- A listing of textual content matches that we anticipate finding once we run the CSS
selector on the rendered HTML.
So that is the info construction for our take a look at circumstances:
Go
var testCases = []struct { title string mannequin *todo.Listing selector string matches []string }{ { title: "all todo gadgets are proven", mannequin: todo.NewList(). Add("Foo"). Add("Bar"), selector: "ul.todo-list li", matches: []string{"Foo", "Bar"}, }, { title: "accomplished gadgets get the 'accomplished' class", mannequin: todo.NewList(). Add("Foo"). AddCompleted("Bar"), selector: "ul.todo-list li.accomplished", matches: []string{"Bar"}, }, } supply
Java
file TestCase(String title, TodoList mannequin, String selector, Listing<String> matches) { @Override public String toString() { return title; } } public static TestCase[] indexTestCases() { return new TestCase[]{ new TestCase( "all todo gadgets are proven", new TodoList() .add("Foo") .add("Bar"), "ul.todo-list li", 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.title, func(t *testing.T) { buf := renderTemplate("index.tmpl", take a look at.mannequin) assertWellFormedHtml(t, buf) doc := parseHtml(t, buf) choice := doc.Discover(take a look at.selector) require.Equal(t, len(take a look at.matches), len(choice.Nodes), "surprising # of matches") for i, node := vary choice.Nodes { assert.Equal(t, take a look at.matches[i], textual content(node)) } }) } } supply
Java
@ParameterizedTest @MethodSource("indexTestCases") void testIndexTemplate(TestCase take a look at) { var html = renderTemplate("/index.tmpl", take a look at.mannequin); var doc = parseHtml(html); var choice = doc.choose(take a look at.selector); assertThat(choice).hasSize(take a look at.matches.dimension()); for (int i = 0; i < take a look at.matches.dimension(); 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 > Activity :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
Be aware how, by giving a reputation to our take a look at circumstances, we get very readable take a look at output, each on the terminal and within the IDE:
Having rewritten our two outdated exams in desk type, it is now tremendous simple so as to add
one other. That is the take a look at for the “x gadgets left” textual content:
Go
{ title: "gadgets left", mannequin: todo.NewList(). Add("One"). Add("Two"). AddCompleted("Three"), selector: "span.todo-count", matches: []string{"2 gadgets left"}, }, supply
Java
new TestCase( "gadgets left", new TodoList() .add("One") .add("Two") .addCompleted("Three"), "span.todo-count", Listing.of("2 gadgets left")), supply
And the corresponding change within the html template is:
Go
<span class="todo-count"><sturdy>{{len .ActiveItems}}</sturdy> gadgets left</span> supply
Java – jmustache
<span class="todo-count"><sturdy>{{activeItemsCount}}</sturdy> gadgets left</span> supply
The above change within the template requires a supporting methodology within the mannequin:
Go
kind Merchandise struct { Title string IsCompleted bool } kind Listing struct { Gadgets []*Merchandise } func (l *Listing) ActiveItems() []*Merchandise { var end result []*Merchandise for _, merchandise := vary l.Gadgets { if !merchandise.IsCompleted { end result = append(end result, merchandise) } } return end result } supply
Java
public class TodoList { non-public last Listing<TodoItem> gadgets = new ArrayList<>(); // ... public lengthy activeItemsCount() { return gadgets.stream().filter(TodoItem::isActive).rely(); } } supply
We have invested slightly effort in our testing infrastructure, in order that including new
take a look at circumstances is simpler. Within the subsequent part, we’ll see that the necessities
for the following take a look at circumstances will push us to refine our take a look at infrastructure additional.
Making the desk extra expressive, on the expense of the take a look at code
We are going to now take a look at the “All”, “Lively” and “Accomplished” navigation hyperlinks at
the underside of the UI (see the image above),
and these depend upon which url we’re visiting, which is
one thing that our template has no approach to discover out.
Presently, all we move to our template is our mannequin, which is a todo-list.
It is not appropriate so as to add the at the moment visited url to the mannequin, as a result of that’s
consumer navigation state, not software state.
So we have to move extra info to the template past the mannequin. A straightforward method
is to move a map, which we assemble in our
renderTemplate perform:
Go
func renderTemplate(mannequin *todo.Listing, path string) bytes.Buffer { templ := template.Should(template.ParseFiles("index.tmpl")) var buf bytes.Buffer information := map[string]any{ "mannequin": mannequin, "path": path, } err := templ.Execute(&buf, information) if err != nil { panic(err) } return buf } Java
non-public String renderTemplate(String templateName, TodoList mannequin, String path) { var template = Mustache.compiler().compile( new InputStreamReader( getClass().getResourceAsStream(templateName))); var information = Map.of( "mannequin", mannequin, "path", path ); return template.execute(information); } And correspondingly our take a look at circumstances desk has yet another area:
Go
var testCases = []struct { title string mannequin *todo.Listing path string selector string matches []string }{ { title: "all todo gadgets are proven", mannequin: todo.NewList(). Add("Foo"). Add("Bar"), selector: "ul.todo-list li", matches: []string{"Foo", "Bar"}, }, // ... the opposite circumstances { title: "highlighted navigation hyperlink: All", path: "/", selector: "ul.filters a.chosen", matches: []string{"All"}, }, { title: "highlighted navigation hyperlink: Lively", path: "/lively", selector: "ul.filters a.chosen", matches: []string{"Lively"}, }, { title: "highlighted navigation hyperlink: Accomplished", path: "/accomplished", selector: "ul.filters a.chosen", matches: []string{"Accomplished"}, }, } Java
file TestCase(String title, TodoList mannequin, String path, String selector, Listing<String> matches) { @Override public String toString() { return title; } } public static TestCase[] indexTestCases() { return new TestCase[]{ new TestCase( "all todo gadgets are proven", new TodoList() .add("Foo") .add("Bar"), "/", "ul.todo-list li", Listing.of("Foo", "Bar")), // ... the earlier circumstances new TestCase( "highlighted navigation hyperlink: All", new TodoList(), "/", "ul.filters a.chosen", Listing.of("All")), new TestCase( "highlighted navigation hyperlink: Lively", new TodoList(), "/lively", "ul.filters a.chosen", Listing.of("Lively")), new TestCase( "highlighted navigation hyperlink: Accomplished", new TodoList(), "/accomplished", "ul.filters a.chosen", Listing.of("Accomplished")), }; } We discover that for the three new circumstances, the mannequin is irrelevant;
whereas for the earlier circumstances, the trail is irrelevant. The Go syntax permits us
to initialize a struct with simply the fields we’re occupied with, however Java doesn’t have
the same function, so we’re pushed to move additional info, and this makes the take a look at circumstances
desk tougher to grasp.
A developer may 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 may be tempted so as to add extra circumstances with
a unique path. In the identical method, when studying the
highlighted navigation hyperlink take a look at circumstances, the developer may marvel if the
anticipated conduct relies on the mannequin being set to an empty todo record. In that case, one may
be led so as to add irrelevant take a look at circumstances 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
information 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 rapidly write one for the Java TestCase file this manner:
Java
file TestCase(String title, TodoList mannequin, String path, String selector, Listing<String> matches) { @Override public String toString() { return title; } public static last class Builder { String title; TodoList mannequin; String path; String selector; Listing<String> matches; public Builder title(String title) { this.title = title; return this; } public Builder mannequin(TodoList mannequin) { this.mannequin = mannequin; return this; } public Builder path(String path) { this.path = path; return this; } public Builder selector(String selector) { this.selector = selector; return this; } public Builder matches(String ... matches) { this.matches = Arrays.asList(matches); return this; } public TestCase construct() { return new TestCase(title, mannequin, path, selector, matches); } } } Hand-coding builders is slightly tedious, however doable, although there are
automated methods to jot down them.
Now we are able to rewrite our Java take a look at circumstances with the Builder, to
obtain larger readability:
Java
public static TestCase[] indexTestCases() { return new TestCase[]{ new TestCase.Builder() .title("all todo gadgets are proven") .mannequin(new TodoList() .add("Foo") .add("Bar")) .selector("ul.todo-list li") .matches("Foo", "Bar") .construct(), // ... different circumstances new TestCase.Builder() .title("highlighted navigation hyperlink: Accomplished") .path("/accomplished") .selector("ul.filters a.chosen") .matches("Accomplished") .construct(), }; } So, the place are we with our exams? At current, they fail for the unsuitable cause: null-pointer exceptions
as a result of lacking mannequin and path values.
So as to get our new take a look at circumstances to fail for the appropriate cause, specifically that the template does
not but have logic to focus on the right 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.title, 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 last class Builder { String title; 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 circumstances, those for the highlighted hyperlink Lively
and Accomplished fail, for the anticipated cause that the highlighted hyperlink doesn’t change:
Go
=== RUN Test_indexTemplate/highlighted_navigation_link:_Active index_template_test.go:82: Error Hint: .../tdd-templates/go/index_template_test.go:82 Error: Not equal: anticipated: "Lively" precise : "All" === RUN Test_indexTemplate/highlighted_navigation_link:_Completed index_template_test.go:82: Error Hint: .../tdd-templates/go/index_template_test.go:82 Error: Not equal: anticipated: "Accomplished" precise : "All"
Java
IndexTemplateTest > testIndexTemplate(TestCase) > [5] highlighted navigation hyperlink: Lively FAILED org.opentest4j.AssertionFailedError: Anticipating: <"All"> to be equal to: <"Lively"> however was not. IndexTemplateTest > testIndexTemplate(TestCase) > [6] highlighted navigation hyperlink: Accomplished FAILED org.opentest4j.AssertionFailedError: Anticipating: <"All"> to be equal to: <"Accomplished"> however was not.
To make the exams move, we make these modifications to the template:
Go
<ul class="filters"> <li> <a class="{{ if eq .path "/" }}chosen{{ finish }}" href="#/">All</a> </li> <li> <a class="{{ if eq .path "/lively" }}chosen{{ finish }}" href="#/lively">Lively</a> </li> <li> <a class="{{ if eq .path "/accomplished" }}chosen{{ finish }}" href="#/accomplished">Accomplished</a> </li> </ul> supply
Java – jmustache
<ul class="filters"> <li> <a class="{{ #pathRoot }}chosen{{ /pathRoot }}" href="#/">All</a> </li> <li> <a class="{{ #pathActive }}chosen{{ /pathActive }}" href="#/lively">Lively</a> </li> <li> <a class="{{ #pathCompleted }}chosen{{ /pathCompleted }}" href="#/accomplished">Accomplished</a> </li> </ul> supply
For the reason that Mustache template language doesn’t enable for equality testing, we should change the
information handed to the template in order that we execute the equality exams earlier than rendering the template:
Java
non-public String renderTemplate(String templateName, TodoList mannequin, String path) { var template = Mustache.compiler().compile( new InputStreamReader( getClass().getResourceAsStream(templateName))); var information = Map.of( "mannequin", mannequin, "pathRoot", path.equals("/"), "pathActive", path.equals("/lively"), "pathCompleted", path.equals("/accomplished") ); return template.execute(information); } supply
And with these modifications, all of our exams now move.
To recap this part, we made the take a look at code slightly bit extra difficult, in order that the take a look at
circumstances are clearer: it is a excellent tradeoff!
Degree 3: testing HTML behaviour
Within the story to this point, we examined the behaviour of the HTML
templates, by checking the construction of the generated HTML.
That is good, however what if we needed to check the behaviour of the HTML
itself, plus any CSS and JavaScript it could use?
The behaviour of HTML by itself is often fairly apparent, as a result of
there may be not a lot of it. The one components that may work together with the
consumer are the anchor (<a>), <type> and
<enter> components, however the image modifications utterly when
we add CSS, that may disguise, present, transfer round issues and much extra, and
with JavaScript, that may add any behaviour to a web page.
In an software that’s primarily rendered server-side, we count on
that the majority behaviour is applied by returning new HTML with a
round-trip to the consumer, and this may be examined adequately with the
strategies we have seen to this point, however what if we needed to hurry up the
software behaviour with a library corresponding to HTMX? This library works by way of particular
attributes which can be added to components so as to add Ajax behaviour. These
attributes are in impact a DSL that we’d wish to
take a look at.
How can we take a look at the mixture of HTML, CSS and JavaScript in
a unit take a look at?
Testing HTML, CSS and JavaScript requires one thing that is ready to
interpret and execute their behaviours; in different phrases, we want a
browser! It’s customary to make use of headless browsers in end-to-end exams;
can we use them for unitary exams as a substitute? I believe that is attainable,
utilizing the next strategies, though I have to admit I’ve but to attempt
this on an actual mission.
We are going to use the Playwright
library, that’s accessible for each Go and
Java. The exams we
are going to jot down might be slower, as a result of we must wait a couple of
seconds for the headless browser to start out, however will retain among the
vital traits of unit exams, primarily that we’re testing
simply the HTML (and any related CSS and JavaScript), in isolation from
some other server-side logic.
Persevering with with the TodoMVC
instance, the following factor we’d wish to take a look at is what occurs when the
consumer clicks on the checkbox of a todo merchandise. What we might prefer to occur is
that:
- A POST name to the server is made, in order that the applying is aware of
that the state of a todo merchandise has modified - The server returns new HTML for the dynamic a part of the web page,
specifically the entire part with class “todoapp”, in order that we are able to present the
new state of the applying together with the rely of remaining “lively”
gadgets (see the template above) - The web page replaces the outdated contents of the “todoapp” part with
the brand new ones.
Loading the web page within the Playwright browser
We begin with a take a look at that may simply load the preliminary HTML. The take a look at
is slightly 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 surprising requests panic("surprising request: " + route.Request().URL()) } }) if err != nil { t.Deadly(err) } // load preliminary HTML within the web page response, err := web page.Goto("http://localhost:4567/index.html") if err != nil { t.Deadly(err) } if response.Standing() != 200 { t.Fatalf("surprising standing: %d", response.Standing()) } } supply
Java
public class IndexBehaviourTest { static Playwright playwright; static Browser browser; @BeforeAll static void launchBrowser() { playwright = Playwright.create(); browser = playwright.chromium().launch(); } @AfterAll static void closeBrowser() { playwright.shut(); } @Check void toggleTodoItem() { // Render the preliminary html TodoList mannequin = new TodoList() .add("One") .add("Two"); String initialHtml = renderTemplate("/index.tmpl", mannequin, "/"); attempt (Web page web page = browser.newPage()) { logActivity(web page); // stub community calls web page.route("**", route -> { if (route.request().url().equals("http://localhost:4567/index.html")) { // serve the preliminary HTML route.fulfill(new Route.FulfillOptions() .setContentType("textual content/html") .setBody(initialHtml)); } else { // we do not need surprising calls fail(String.format("Sudden request: %s %s", route.request().methodology(), route.request().url())); } }); // load preliminary html web page.navigate("http://localhost:4567/index.html"); } } } supply
Firstly 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
attempt (Web page web page = browser.newPage()) { logActivity(web page); The openPage perform in Go returns a Playwright
Web page object,
Go
func openPage() playwright.Web page { pw, err := playwright.Run() if err != nil { log.Fatalf("couldn't begin playwright: %v", err) } browser, err := pw.Chromium.Launch() if err != nil { log.Fatalf("couldn't launch browser: %v", err) } web page, err := browser.NewPage() if err != nil { log.Fatalf("couldn't create web page: %v", err) } return web page } and the logActivity perform gives suggestions on what
the web page is doing
Go
func logActivity(web page playwright.Web page) { web page.OnRequest(func(request playwright.Request) { log.Printf(">> %s %sn", request.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 may attempt to do
Go
err := web page.Route("**", func(route playwright.Route) { if route.Request().URL() == "http://localhost:4567/index.html" { // serve the preliminary HTML stubResponse(route, initialHtml.String(), "textual content/html") } else { // keep away from surprising requests panic("surprising request: " + route.Request().URL()) } }) Java
// stub community calls web page.route("**", route -> { if (route.request().url().equals("http://localhost:4567/index.html")) { // serve the preliminary HTML route.fulfill(new Route.FulfillOptions() .setContentType("textual content/html") .setBody(initialHtml)); } else { // we do not need surprising calls fail(String.format("Sudden request: %s %s", route.request().methodology(), route.request().url())); } }); and we ask the web page to load the preliminary HTML
Go
response, err := web page.Goto("http://localhost:4567/index.html") Java
web page.navigate("http://localhost:4567/index.html"); With all this equipment in place, we run the take a look at; it succeeds and
it logs the stubbed community exercise on customary output:
Go
=== RUN Test_toggleTodoItem >> GET http://localhost:4567/index.html << 200 http://localhost:4567/index.html Loaded: http://localhost:4567/index.html --- PASS: Test_toggleTodoItem (0.89s)
Java
IndexBehaviourTest > toggleTodoItem() STANDARD_OUT >> GET http://localhost:4567/index.html << 200 http://localhost:4567/index.html Loaded: http://localhost:4567/index.html IndexBehaviourTest > toggleTodoItem() PASSED
So with this take a look at we are actually capable of load arbitrary HTML in a
headless browser. Within the subsequent sections we’ll see how you can simulate consumer
interplay with components of the web page, and observe the web page’s
behaviour. However first we have to resolve an issue with the shortage of
identifiers in our area mannequin.
Figuring out todo gadgets
Now we wish to click on on the “One” checkbox. The issue now we have is
that at current, now we have no approach to determine particular person todo gadgets, so
we introduce an Id area 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 last 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 information
func Test_toggleTodoItem(t *testing.T) { // render the preliminary HTML mannequin := todo.NewList(). AddWithId(101, "One"). AddWithId(102, "Two") initialHtml := renderTemplate("index.tmpl", mannequin, "/") // ... } Java – including Id within the take a look at information
@Check void toggleTodoItem() { // Render the preliminary html TodoList mannequin = new TodoList() .add(101, "One") .add(102, "Two"); String initialHtml = renderTemplate("/index.tmpl", mannequin, "/"); } We are actually prepared to check consumer interplay with the web page.
Clicking on a todo merchandise
We wish to simulate consumer interplay with the HTML web page. It may be
tempting to proceed to make use of CSS selectors to determine the particular
checkbox that we wish to click on, however there’s a greater method: there’s a
consensus amongst front-end builders that one of the best ways to check
interplay with a web page is to make use of it
the identical method that customers do. As an example, you do not search for a
button by way of a CSS locator corresponding to button.purchase; as a substitute,
you search for one thing clickable with the label “Purchase”. In apply,
this implies figuring out elements of the web page by way of their
ARIA roles.
To this finish, we add code to our take a look at to search for a checkbox labelled
“One”:
Go
func Test_toggleTodoItem(t *testing.T) { // ... // click on on the "One" checkbox checkbox := web page.GetByRole(*playwright.AriaRoleCheckbox, playwright.PageGetByRoleOptions{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'll see
how you can take a look at that the clicking on a todo merchandise triggers a distant name to the
server, that ought to lead to swapping part of the present HTML with
the HTML returned by the XHR name.
Spherical-trip to the server
Now we’ll 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 count on {that a} POST /toggle/101 request is made once 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 count on {that a} POST /toggle/101 request is made once 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"), "software/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 incorporates many of the software is
reloaded.
Go
// click on on the "One" checkbox checkbox := web page.GetByRole(*playwright.AriaRoleCheckbox, playwright.PageGetByRoleOptions{Identify: "One"}) if err := checkbox.Click on(); err != nil { t.Deadly(err) } // examine that the web page has been up to date doc := parseHtml(t, content material(t, web page)) 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(); // examine 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. So as 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 may be very verbose, however we see that the explanation it
fails is that we do not see the stubbed HTML within the output. This implies
that the web page didn’t make the anticipated XHR name.
Go – Java is 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 title="viewport" content material="width=device-width, initial-scale=1"> <title>Template • TodoMVC</title> <script src="https://unpkg.com/htmx.org@1.9.12"></script> <physique> <part class="todoapp"> ... <li class=""> <div class="view"> <enter id="checkbox-101" class="toggle" 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 required 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 title="viewport" content material="width=device-width, initial-scale=1"> <title>Template • TodoMVC</title> <script src="https://unpkg.com/htmx.org@1.9.12"></script> ... <physique> <part class="todoapp"><part class="todoapp"> <p>Stubbed html</p> </part></part> ... </physique></html>
The log strains present that the POST name occurred as anticipated, however
examination of the error message reveals that the HTML construction we
anticipated just isn’t there: now we have a part.todoapp nested
inside one other. Because of this we aren’t utilizing the HTMX annotations
accurately, and reveals why this type of take a look at may be beneficial. 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 a substitute.
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 how you can write a take a look at for the behaviour of our
HTML that, whereas utilizing the difficult 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 applying corresponding to 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 often an excessive amount of for a unit take a look at; nevertheless, like a unit take a look at, it is rather secure, 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.
Bonus stage: Stringly asserted
Esko Luontola, TDD skilled and writer of the net course tdd.mooc.fi, recommended an alternate to testing HTML with CSS selectors: the concept is to rework HTML right into a human-readable canonical type.
Let’s take for instance this snippet of generated HTML:
<ul class="todo-list"> <li class=""> <div class="view"> <enter id="checkbox-100" class="toggle" kind="checkbox"> <label for="checkbox-100">One</label> <button class="destroy"></button> </div> </li> <li class=""> <div class="view"> <enter id="checkbox-200" class="toggle" kind="checkbox"> <label for="checkbox-200">Two</label> <button class="destroy"></button> </div> </li> <li class="accomplished"> <div class="view"> <enter id="checkbox-300" class="toggle" kind="checkbox"> <label for="checkbox-300">Three</label> <button class="destroy"></button> </div> </li> </ul>
We may visualize the above HTML by:
- deleting all HTML tags
- decreasing each sequence of whitespace characters to a single clean
to reach at:
One Two Three
This, nevertheless, removes an excessive amount of of the HTML construction to be helpful. As an example, it doesn’t allow us to distinguish between lively and accomplished gadgets. Some HTML component symbolize seen content material: as an illustration
<enter worth="foo" />
reveals a textual content field with the phrase “foo” that is a crucial a part of the method we understand HTML. To visualise these components, Esko suggests so as to add a data-test-icon attribute that provides some textual content for use instead of the component when visualizing it for testing. With this,
<enter worth="foo" data-test-icon="[foo]" />
the enter component is visualized as [foo], with the sq. brackets hinting that the phrase “foo” sits inside an editable textual content field. Now if we add test-icons to our HTML template,
Go — Java is analogous
<ul class="todo-list"> {{ vary .mannequin.AllItems }} <li class="{{ if .IsCompleted }}accomplished{{ finish }}"> <div class="view"> <enter data-hx-post="/toggle/{{ .Id }}" data-hx-target="part.todoapp" data-hx-swap="outerHTML" id="checkbox-{{ .Id }}" class="toggle" kind="checkbox" data-test-icon="{{ if .IsCompleted }}✅{{ else }}⬜{{ finish }}"> <label for="checkbox-{{ .Id }}">{{ .Title }}</label> <button class="destroy" data-test-icon="❌️"></button> </div> </li> {{ finish }} </ul> we are able to assert in opposition to its canonical visible illustration like this:
Go
func Test_visualize_html_example(t *testing.T) { mannequin := todo.NewList(). Add("One"). Add("Two"). AddCompleted("Three") buf := renderTemplate("todo-list.tmpl", mannequin, "/") anticipated := ` ⬜ One ❌️ ⬜ Two ❌️ ✅ Three ❌️ ` assert.Equal(t, normalizeWhitespace(anticipated), visualizeHtml(buf.String())) } Java
@Check void visualize_html_example() { var mannequin = new TodoList() .add("One") .add("Two") .addCompleted("Three"); var html = renderTemplate("/todo-list.tmpl", mannequin, "/"); assertThat(visualizeHtml(html)) .isEqualTo(normalizeWhitespace(""" ⬜ One ❌️ ⬜ Two ❌️ ✅ Three ❌️ """)); } Right here is Esko Luontola’s Java implementation of the 2 features that make this attainable, and my translation to Go of his code.
Go
func visualizeHtml(html string) string abbr func normalizeWhitespace(s string) string { return strings.TrimSpace(replaceAll(s, "s+", " ")) } func replaceAll(src, regex, repl string) string { re := regexp.MustCompile(regex) return re.ReplaceAllString(src, repl) } supply
Java
public static String visualizeHtml(String html) tt)b.*?>", "") // inline components .replaceAll("<[^>]*>", " "); // block components // substitute HTML character entities html = html.replaceAll(" ", " ") .replaceAll("<", "<") // have to be after stripping HTML tags, to keep away from creating unintended components .replaceAll(">", ">") .replaceAll(""", """) .replaceAll("'", "'") .replaceAll("&", "&"); // have to be final, to keep away from creating unintended character entities return normalizeWhitespace(html); public static String normalizeWhitespace(String s) { return s.replaceAll("s+", " ").trim(); } supply
On this part, now we have seen a method for asserting HTML content material that’s an alternative choice to the CSS selector-based approach utilized in the remainder of the article. Esko Luontola has reported nice success with it, and I hope readers have success with it too!
This method of asserting in opposition to giant, difficult information constructions corresponding to HTML pages by decreasing them to a canonical string model has no title that I do know of. Martin Fowler recommended “stringly asserted”, and from his suggestion comes the title of this part.
