The test that we implemented to verify the contact form functionality, can be found in the contactform_test.go source file in the client/tests/go directory.
In this test, we defined the FormParams struct, which represents the form parameters that the contact form should be filled with, when conducting our test steps:
type FormParams struct {
*js.Object
FirstName string `js:"firstName"`
LastName string `js:"lastName"`
Email string `js:"email"`
MessageBody string `js:"messageBody"`
}
We've created a JavaScript wait function to ensure that the test runner will wait for the primary content div container to have loaded, prior to running other steps:
var wait = js.MakeFunc(func(this *js.Object, arguments []*js.Object) interface{} {
this.Call("waitForSelector", "#primaryContent")
return nil
})
We will introduce the following three JavaScript functions to populate the contact form's fields, depending on the type of test we are conducting:
- fillOutContactFormWithPoorlyFormattedEmailAddress
- fillOutContactFormPartially
- filloutContactFormCompletely
The fillOutContactFormWithPoorlyFormattedEmailAddress function, as the name implies, will supply an invalid email address to the email field:
var fillOutContactFormWithPoorlyFormattedEmailAddress = js.MakeFunc(func(this *js.Object, arguments []*js.Object) interface{} {
params := &FormParams{Object: js.Global.Get("Object").New()}
params.FirstName = "Isomorphic"
params.LastName = "Gopher"
params.Email = "dev@null@[email protected]"
params.MessageBody = "Sending a contact form submission using CasperJS and PhantomJS"
this.Call("fill", "#contactForm", params, true)
return nil
})
Notice that we created a new FormParams instance, and populated the FirstName, LastName, Email, and MessageBody fields. Take particular note that we have supplied an invalid email address for the Email field.
In the context of this function, the this variable represents the tester module. We make a call to the tester module's fill method, supplying the CSS selector to the contact form, the params object, and a Boolean value of true to indicate that the form should be submitted.
After filling in and submitting the form, we expect the client-side form validation to present us with an error message indicating that we have provided an invalid email address.
The fillOutContactFormPartially function will fill out the contact form partially, leaving some required fields unfilled, resulting in an incomplete form:
var fillOutContactFormPartially = js.MakeFunc(func(this *js.Object, arguments []*js.Object) interface{} {
params := &FormParams{Object: js.Global.Get("Object").New()}
params.FirstName = "Isomorphic"
params.LastName = ""
params.Email = "[email protected]"
params.MessageBody = ""
this.Call("fill", "#contactForm", params, true)
return nil
})
Here, we create a new FormParams instance, and take note that we have provided an empty string value for the LastName and MessageBody fields.
After filling in and submitting the form, we expect the client-side form validation to present us with an error message indicating that we have not filled in these two required fields.
The fillOutContactFormCompletely function will fill out all fields of the contact form and will include a properly formatted email address:
var fillOutContactFormCompletely = js.MakeFunc(func(this *js.Object, arguments []*js.Object) interface{} {
params := &FormParams{Object: js.Global.Get("Object").New()}
params.FirstName = "Isomorphic"
params.LastName = "Gopher"
params.Email = "[email protected]"
params.MessageBody = "Sending a contact form submission using CasperJS and PhantomJS"
this.Call("fill", "#contactForm", params, true)
return nil
})
Here we create a new FormParams instance, and populate all the fields of the contact form. In the case of the Email field, we ensure to supply a properly formatted email address.
After filling in and submitting the form, we expect the client-side form validation to green-light the form, which behind the scenes, will initiate an XHR call to the rest API endpoint to verify that the contact form has been properly filled using the server-side form validation. We expect the server-side validation to also green-light the form field values, resulting in a confirmation message. Our test will pass, if we can successfully verify that we have obtained the confirmation message.
As with the previous example, we start by declaring the viewport parameters and setting the viewport size of the web browser:
func main() {
viewportParams := &caspertest.ViewportParams{Object:
js.Global.Get("Object").New()}
viewportParams.Width = 1440
viewportParams.Height = 960
casper.Get("options").Set("viewportSize", viewportParams)
Notice that we call the tester module's begin method to start the tests in the Contact Form Test Suite:
casper.Get("test").Call("begin", "Contact Form Test Suite", 4,
func(test *js.Object) {
casper.Call("start", "http://localhost:8080/contact", wait)
})
We supply the begin method with the description of the test, "Contact Form Test Suite". We then supply the number of expected tests in this suite, which is 4. Remember that this value corresponds to the number of tests we conduct. The number of tests conducted can be ascertained by the number of calls we make to a method belonging to the tester module's assert family of methods. We provide the then callback function, where we call the start method on the casper object, providing the URL to the Contact page and supplying the wait function to indicate that we should wait for the primary content div container to load before conducting any test steps.
The first scenario that we test is to check the client-side validation when a poorly formatted email address is provided:
casper.Call("then",
fillOutContactFormWithPoorlyFormattedEmailAddress)
casper.Call("wait", 450, func() {
casper.Call("capture",
"screenshots/contactform_test_invalid_email_error_message.png")
casper.Get("test").Call("assertSelectorHasText", "#emailError",
"The e-mail address entered has an improper syntax", "Display e-
mail address syntax error when poorly formatted e-mail entered.")
})
We call the casper object's then method, providing the fillOutContactFormWithPoorlyFormattedEmailAddress JavaScript function as the then callback function. We wait for 450 milliseconds for a result, capture a screenshot of the test run (shown in Figure 10.10), and then call the assertSelectorHasText method on the tester module, providing a CSS selector of the element containing the error message, along with the expected text the error message should have displayed, followed with a description of the test we are conducting.
The second scenario that we test, is to check the client-side validation when an incomplete form has been submitted:
casper.Call("then", fillOutContactFormPartially)
casper.Call("wait", 450, func() {
casper.Call("capture",
"screenshots/contactform_test_partially_filled_form_errors.png")
casper.Get("test").Call("assertSelectorHasText", "#lastNameError",
"The last name field is required.", "Display error message when the
last name field has not been filled out.")
casper.Get("test").Call("assertSelectorHasText",
"#messageBodyError", "The message area must be filled.", "Display
error message when the message body text area has not been filled
out.")
})
We call the casper object's then method, providing the fillOutContactFormPartially JavaScript function, as the then callback function. We wait for 450 milliseconds for a result, capture a screenshot of the test run (shown in Figure 10.11), and conduct two tests within this scenario.
In the first test, we call the assertSelectorHasText method on the tester module, providing a CSS selector of the element containing the error message for the last name field along with the expected text, the error message should have, followed with a description of the test. In the second test, we call the assertSelectorHasText method on the tester module, providing a CSS selector of the element containing the error message for the message body text area, the expected text the error message should have, followed with a description of the test.
The third scenario that we test is to check that a confirmation message has been displayed upon the submission of a properly filled out contact form:
casper.Call("then", fillOutContactFormCompletely)
casper.Call("wait", 450, func() {
casper.Call("capture",
"screenshots/contactform_confirmation_message.png")
casper.Get("test").Call("assertSelectorHasText", "#primaryContent
h1", "Confirmation", "Display confirmation message after submitting
contact form.")
})
We call the casper object's then method, providing the fillOutContactFormCompletely JavaScript function, as the then callback function. We wait for 450 milliseconds for a result, capture a screenshot of the test run (shown in Figure 10.12), and call the casper object's assertSelectorHasText method. We provide the CSS selector "#primaryContent h1", since the confirmation message will be inside the <h1> tag. We supply the expected text that the confirmation message should contain, being "Confirmation". Finally, we provide a description of the test for the last parameter of the assertSelectorHasText method.
To signify the end of the test suite, we call the casper object's run method, and inside the then callback function, we call the tester module's done method:
casper.Call("run", func() {
casper.Get("test").Call("done")
})
Assuming that you are inside the client/tests folder, you can issue the following command to run the contact form test suite:
$ casperjs test js/contactform_test.js
Figure 10.9 shows a screenshot image of running the contact form test suite:
Figure 10.10 shows the generated screenshot image of running the first test which checks that the client-side form validation properly detects an improperly formatted email address:
Figure 10.11 shows the generated screenshot image of running the second test and third test, which checks that the client-side form validation properly detects that the last name field and the message body text area has not been filled in:
Figure 10.12 shows the generated screenshot image of running the fourth test, which checks that the confirmation message has been displayed upon successfully filling out and submitting the contact form:
Now that we've verified the client-side validation functionality for the contact form, let's look into implementing a CasperJS test suite for the shopping cart functionality.