The live chat test suite consists of three tests. First, we must ensure that the chat box opens up when the live chat icon is clicked on the top bar. Second, we must ensure that the chat bot responds to us when we ask it a question. Third, we must ensure that the conversation is retained when we navigate to another section of the website.

The live chat test suite is implemented in the livechat_test.go source file found in the client/tests/go directory.

The waitChat JavaScript function will be used to wait for the chat box to open:

var waitChat = js.MakeFunc(func(this *js.Object, arguments []*js.Object) interface{} {
  this.Call("waitForSelector", "#chatbox")
  return nil
})

The askQuestion JavaScript function will be used to send a question to the chat bot:

var askQuestion = js.MakeFunc(func(this *js.Object, arguments []*js.Object) interface{} {
  this.Call("sendKeys", "input#chatboxInputField", "What is Isomorphic 
  Go?")
  this.Call("sendKeys", "input#chatboxInputField", 
  casper.Get("page").Get("event").Get("key").Get("Enter"))
  return nil
})

Note that we use the sendKeys method of the tester module object (the this variable is bound to the tester module object) to type the "What is Isomorphic Go" question, and we call the sendKeys method again to send the enter key (the equivalent of pressing the enter key on the keyboard).

Inside the main function, we set the web browser's viewport size and begin the test suite:

func main() {

  viewportParams := &caspertest.ViewportParams{Object: 
  js.Global.Get("Object").New()}
  viewportParams.Width = 1440
  viewportParams.Height = 960
  casper.Get("options").Set("viewportSize", viewportParams)

  casper.Get("test").Call("begin", "Live Chat Test Suite", 3, func(test 
  *js.Object) {
    casper.Call("start", "http://localhost:8080/index", wait)
  })

The following code will activate the live chat feature, by simulating a user click on the live chat icon on the top bar:

  casper.Call("then", func() {
    casper.Call("click", "#livechatContainer img")
  })

The following code will wait until the chat box has opened up, before proceeding:

casper.Call("then", waitChat)

Once the chat box has opened up, we can verify that the chat box is visible with the following code:

  casper.Call("wait", 1800, func() {
    casper.Call("capture", 
    "screenshots/livechat_test_chatbox_open.png")
    casper.Get("test").Call("assertSelectorHasText", "#chatboxTitle 
    span", "Chat with", "Display chatbox.")
  })

Note that we call the tester module object's assertSelectorHasText method, providing a CSS selector of "#chatboxTitle span" to target the chat box's title span element. We then check to see whether the "Chat with" text exists inside the span element to verify that the chat box is visible.

Notice that we have generated a screenshot image, which should show us the chat box opened up, with the chat bot providing its greeting message (shown in Figure 10.17).

The following code is used to verify that the chat bot provides an answer to us when we ask it a question:

  casper.Call("then", askQuestion)
  casper.Call("wait", 450, func() {
    casper.Call("capture", 
    "screenshots/livechat_test_answer_question.png")
    casper.Get("test").Call("assertSelectorHasText", 
    "#chatboxConversationContainer", "Isomorphic Go is the methodology 
    to create isomorphic web applications", "Display the answer to 
    "What is Isomorphic Go?"")
  })

We call the askQuestion function to simulate the user typing in the "What is Isomorphic Go" question and pressing the enter key. We wait for 450 milliseconds, then generate a screenshot, which should show the live chat bot answering our question (shown in Figure 10.18). We verify that the chat bot has provided an answer by calling the tester module object's assertSelectorHasText method and providing it the CSS selector to access the div container, which contains the conversation and a substring of the expected answer.

Currently, we are on the home page. To test that the conversation is retained while navigating to a different section of the website, we use the following code:

  casper.Call("then", func() {
    casper.Call("click", "a[href^='/about']")
  })

  casper.Call("then", wait)

Here, we specified to navigate to the About page, and then wait until the primary content div container has loaded.

We wait for 450 milliseconds, take a screenshot image (shown in Figure 10.19), and then conduct the last test in our test suite:

  casper.Call("wait", 450, func() {
    casper.Call("capture", 
    "screenshots/livechat_test_conversation_retained.png")
    casper.Get("test").Call("assertSelectorHasText", 
    "#chatboxConversationContainer", "Isomorphic Go is the methodology 
    to create isomorphic web applications", "Verify that the 
    conversation is retained when navigating to another page in the 
    website.")
  })

The last test here is a repeat of the previous test we conducted. Since we are testing that the conversation has been retained, we expect that the answer the chat bot gave us, after the last test, is preserved within the div container containing the conversation.

We will close the chat box by simulating a user click to the close control (the Χ found in the upper right hand corner of the chat box), so that the websocket connection is closed normally:

  casper.Call("then", func() {
    casper.Call("click", "#chatboxCloseControl")
  })

Finally, we will signify the end of the live chat test suite with the following code:

  casper.Call("run", func() {
    casper.Get("test").Call("done")
  })

We can run the CasperJS tests for the live chat test suite by issuing the following command:

$ casperjs test js/livechat_test.js

Figure 10.16 shows a screenshot of the result of running the live chat test suite:

Figure 10.17 shows the generated screenshot showing the test case, where we check to see whether the chat box has opened:

Figure 10.18 shows the generated screenshot showing the test case, where we check to see whether the chat bot responds to the given question:

Figure 10.19 shows the generated screenshot showing the test case, where we check to see whether the chat conversation is retained after navigating to a different page on the website:

Now that we've verified the functionality for the live chat feature, let's look into testing the cogs, starting with the time ago cog.