Thursday, May 30, 2024
HomeSoftware DevelopmentTake a look at-Driving HTML Templates

Take a look at-Driving HTML Templates


After a decade or extra the place Single-Web page-Functions generated by
JavaScript frameworks have
turn out to be the norm
, we see that server-side rendered HTML is changing into
standard once more, additionally because of libraries resembling HTMX or Turbo. Writing a wealthy net UI in a
historically server-side language like Go or Java is not simply attainable,
however a really enticing proposition.

We then face the issue of find out how to write automated exams for the HTML
elements of our net functions. Whereas the JavaScript world has developed highly effective and subtle methods to check the UI,
ranging in dimension from unit-level to integration to end-to-end, in different
languages we wouldn’t have such a richness of instruments out there.

When writing an online software in Go or Java, HTML is usually generated
by means of templates, which include small fragments of logic. It’s actually
attainable to check them not directly by means of end-to-end exams, however these exams
are gradual and costly.

We will as a substitute 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 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.

Stage 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 based on the
W3C; it will be cool to do it, nevertheless it’s higher to begin with a lot easier and quicker checks.
As an example, we wish our exams to
break if the template generates one thing like

<div>foo</p>

Let’s have a look at find out 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 selections.

Java

  @Take a look at
  void indexIsSoundHtml() {
      var template = Mustache.compiler().compile(
              new InputStreamReader(
                      getClass().getResourceAsStream("/index.tmpl")));
  }

If we run this check, it should 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 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 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 ingredient that
is closed by a p ingredient. There’s an HTML parser within the Go
normal library, however it’s too lenient: if we run it on our damaged HTML, we do not get an
error. Fortunately, the Go normal 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()
      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 correct stage 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: surprising 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();
  }

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 check passes.

The check, nevertheless, 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)
  }

supply

Java

  @Take a look at
  void indexIsSoundHtml() {
      var mannequin = new TodoList();
  
      var html = renderTemplate("/index.tmpl", mannequin);
  
      assertSoundHtml(html);
  }

supply

Stage 2: testing HTML construction

What else ought to we check?

We all know that the seems to be 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 check that logic.

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

What we’d like
is a method to claim that some elements of the rendered HTML
correspond to what we count on, and to ignore all the small print we do not
care about.
A technique to do that is by working queries with the CSS selector language:
it’s a highly effective language that enables us to pick the
parts that we care about from the entire HTML doc. As soon as now we 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 to be like this:

There are a number of particulars which can be rendered dynamically:

  1. The variety of gadgets and their textual content content material change, clearly
  2. The type of the todo-item modifications when it is accomplished (e.g., the
    second)
  3. The “2 gadgets left” textual content will change with the variety of non-completed
    gadgets
  4. One of many three buttons “All”, “Lively”, “Accomplished” can be
    highlighted, relying on the present url; for example if we resolve that the
    url that reveals solely the “Lively” gadgets is /energetic, then when the present url
    is /energetic, the “Lively” button needs to be surrounded by a skinny crimson
    rectangle
  5. The “Clear accomplished” button ought to solely be seen if any merchandise is
    accomplished

Every of this considerations will be examined with the assistance of CSS selectors.

This can be a snippet from the TodoMVC template (barely simplified). I
haven’t but added the dynamic bits, so what we see right here is static
content material, offered for instance:

index.tmpl

  <part class="todoapp">
    <ul class="todo-list">
      <!-- These are right here simply to indicate the construction of the checklist gadgets -->
      <!-- Record 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"><sturdy>0</sturdy> merchandise left</span> 
      <ul class="filters">
        <li>
          <a class="chosen" href="#/">All</a> 
        </li>
        <li>
          <a href="#/energetic">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 will deduce which
CSS selectors can be utilized to establish the related parts 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 check.

Testing HTML content material

The primary check will search for all of the gadgets, and show that the information
arrange by the check is rendered appropriately.

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 option 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 maintain utilizing the identical library we used to check for sound HTML, specifically
jsoup. Our check turns into:

Go

  func Test_todoItemsAreShown(t *testing.T) {
    mannequin := todo.NewList()
    mannequin.Add("Foo")
    mannequin.Add("Bar")
  
    buf := renderTemplate("index.tmpl", mannequin)
  
    // parse the HTML with goquery
    doc, err := goquery.NewDocumentFromReader(bytes.NewReader(buf.Bytes()))
    if err != nil {
      // if parsing fails, we cease the check right here with t.FatalF
      t.Fatalf("Error rendering template %s", err)
    }
  
    // assert there are two <li> parts contained in the <ul class="todo-list">
    choice := doc.Discover("ul.todo-list li")
    assert.Equal(t, 2, choice.Size())
  
    // assert the primary <li> textual content is "Foo"
    assert.Equal(t, "Foo", textual content(choice.Nodes[0]))
  
    // assert the second <li> textual content is "Bar"
    assert.Equal(t, "Bar", textual content(choice.Nodes[1]))
  }
  
  func textual content(node *html.Node) string {
    // A little bit mess because of the truth that goquery has
    // a .Textual content() technique on Choice however not on html.Node
    sel := goquery.Choice{Nodes: []*html.Node{node}}
    return strings.TrimSpace(sel.Textual content())
  }

supply

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

supply

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

supply

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

Our check works, however it’s a bit verbose, particularly the Go model. If we will have extra
exams, they’ll turn out to be 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

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

supply

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

supply

And with this, we will do away with the primary check that we wrote, as we at the moment are 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 function in our checklist is “Record 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.Dimension())
    assert.Equal(t, "Bar", textual content(choice.Nodes[0]))
  }

supply

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

supply

And this check will be made inexperienced by including this little bit of logic to the
template:

Go

  <ul class="todo-list">
    {{ vary .Gadgets }}
      <li class="{{ if .IsCompleted }}accomplished{{ finish }}">
        <div class="view">
          <enter class="toggle" sort="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" sort="checkbox">
        <label>{{ title }}</label>
        <button class="destroy"></button>
      </div>
    </li>
    {{ /allItems }}
  </ul>

supply

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

Make it simple so as to add new exams

The primary of the 20 suggestions from the wonderful speak by Russ Cox on Go
Testing
is “Make it simple so as to add new check circumstances“. Certainly, in Go there
is a bent to make most exams parameterized, for this very cause.
However, whereas Java has
good help
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 check.

A check case for us will include:

  • A reputation (in order that we will produce clear error messages when the check
    fails)
  • A mannequin (in our case a todo.Record)
  • 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 information construction for our check circumstances:

Go

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

supply

Java

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

supply

And that is our parameterized check:

Go

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

supply

Java

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

supply

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

Go

  $ go check -v
  === RUN   Test_indexTemplate
  === RUN   Test_indexTemplate/all_todo_items_are_shown
  === RUN   Test_indexTemplate/completed_items_get_the_'accomplished'_class
  --- PASS: Test_indexTemplate (0.00s)
      --- PASS: Test_indexTemplate/all_todo_items_are_shown (0.00s)
      --- PASS: Test_indexTemplate/completed_items_get_the_'accomplished'_class (0.00s)
  PASS
  okay    tdd-html-templates  0.608s

Java

  $ ./gradlew check
  
  > Process :check
  
  IndexTemplateTest > testIndexTemplate(TestCase) > [1] all todo gadgets are proven PASSED
  IndexTemplateTest > testIndexTemplate(TestCase) > [2] accomplished gadgets get the 'accomplished' class PASSED

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

Having rewritten our two previous exams in desk type, it is now tremendous simple so as to add
one other. That is the check for the “x gadgets left” textual content:

Go

  {
    identify: "gadgets left",
    mannequin: todo.NewList().
      Add("One").
      Add("Two").
      AddCompleted("Three"),
    selector: "span.todo-count",
    matches:  []string{"2 gadgets left"},
  },

supply

Java

  new TestCase(
      "gadgets left",
      new TodoList()
              .add("One")
              .add("Two")
              .addCompleted("Three"),
      "span.todo-count",
      Record.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 technique within the mannequin:

Go

  sort Merchandise struct {
    Title       string
    IsCompleted bool
  }
  
  sort Record struct {
    Gadgets []*Merchandise
  }
  
  func (l *Record) 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 {
      personal remaining Record<TodoItem> gadgets = new ArrayList<>();
      // ...
      public lengthy activeItemsCount() {
          return gadgets.stream().filter(TodoItem::isActive).rely();
      }
  }

supply

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

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

We are going to now check the “All”, “Lively” and “Accomplished” navigation hyperlinks at
the underside of the UI (see the image above),
and these rely upon which url we’re visiting, which is
one thing that our template has no option to discover out.

At the moment, all we go to our template is our mannequin, which is a todo-list.
It is not right so as to add the at the moment visited url to the mannequin, as a result of that’s
person navigation state, not software state.

So we have to go extra data to the template past the mannequin. A simple manner
is to go a map, which we assemble in our
renderTemplate operate:

Go

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

  personal 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 check circumstances desk has yet one more subject:

Go

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

Java

  document TestCase(String identify,
                  TodoList mannequin,
                  String path,
                  String selector,
                  Record<String> matches) {
      @Override
      public String toString() {
          return identify;
      }
  }
  
  public static TestCase[] indexTestCases() {
      return new TestCase[]{
              new TestCase(
                      "all todo gadgets are proven",
                      new TodoList()
                              .add("Foo")
                              .add("Bar"),
                      "/",
                      "ul.todo-list li",
                      Record.of("Foo", "Bar")),
              // ... the earlier circumstances
              new TestCase(
                      "highlighted navigation hyperlink: All",
                      new TodoList(),
                      "/",
                      "ul.filters a.chosen",
                      Record.of("All")),
              new TestCase(
                      "highlighted navigation hyperlink: Lively",
                      new TodoList(),
                      "/energetic",
                      "ul.filters a.chosen",
                      Record.of("Lively")),
              new TestCase(
                      "highlighted navigation hyperlink: Accomplished",
                      new TodoList(),
                      "/accomplished",
                      "ul.filters a.chosen",
                      Record.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 thinking about, however Java doesn’t have
an analogous function, so we’re pushed to go further data, and this makes the check circumstances
desk more durable to grasp.

A developer may take a look at the primary check case and marvel if the anticipated habits relies upon
on the trail being set to "/", and may be tempted so as to add extra circumstances with
a special path. In the identical manner, when studying the
highlighted navigation hyperlink check circumstances, the developer may marvel if the
anticipated habits relies on the mannequin being set to an empty todo checklist. If that’s the case, one may
be led so as to add irrelevant check 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 check case. In Java we’d go null for the
irrelevant fields, however there’s a greater manner: we will use
the builder sample,
popularized by Joshua Bloch.
We will rapidly write one for the Java TestCase document this fashion:

Java

  document TestCase(String identify,
                  TodoList mannequin,
                  String path,
                  String selector,
                  Record<String> matches) {
      @Override
      public String toString() {
          return identify;
      }
  
      public static remaining class Builder {
          String identify;
          TodoList mannequin;
          String path;
          String selector;
          Record<String> matches;
  
          public Builder identify(String identify) {
              this.identify = identify;
              return this;
          }
  
          public Builder mannequin(TodoList mannequin) {
              this.mannequin = mannequin;
              return this;
          }
  
          public Builder path(String path) {
              this.path = path;
              return this;
          }
  
          public Builder selector(String selector) {
              this.selector = selector;
              return this;
          }
  
          public Builder matches(String ... matches) {
              this.matches = Arrays.asList(matches);
              return this;
          }
  
          public TestCase construct() {
              return new TestCase(identify, mannequin, path, selector, matches);
          }
      }
  }

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

Java

  public static TestCase[] indexTestCases() {
      return new TestCase[]{
              new TestCase.Builder()
                      .identify("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()
                      .identify("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 improper cause: null-pointer exceptions
because of the lacking mannequin and path values.
To be able to get our new check circumstances to fail for the correct 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 will do that
within the check technique:

Go

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

supply

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

Java

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

supply

With these modifications, we see that the final two check circumstances, those for the highlighted hyperlink Lively
and Accomplished fail, for the anticipated cause that the highlighted hyperlink doesn’t change:

Go

  === RUN   Test_indexTemplate/highlighted_navigation_link:_Active
      index_template_test.go:82: 
            Error Hint:  .../tdd-templates/go/index_template_test.go:82
            Error:        Not equal: 
                          anticipated: "Lively"
                          precise  : "All"
  === RUN   Test_indexTemplate/highlighted_navigation_link:_Completed
      index_template_test.go:82: 
            Error Hint:  .../tdd-templates/go/index_template_test.go:82
            Error:        Not equal: 
                          anticipated: "Accomplished"
                          precise  : "All"

Java

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

To make the exams go, we make these modifications to the template:

Go

  <ul class="filters">
    <li>
      <a class="{{ if eq .path "/" }}chosen{{ finish }}" href="#/">All</a>
    </li>
    <li>
      <a class="{{ if eq .path "/energetic" }}chosen{{ finish }}" href="#/energetic">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="#/energetic">Lively</a>
    </li>
    <li>
      <a class="{{ #pathCompleted }}chosen{{ /pathCompleted }}" href="#/accomplished">Accomplished</a>
    </li>
  </ul>

supply

Because the 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

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

supply

And with these modifications, all of our exams now go.

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



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments