How to test a JavaScript UI

Testing an application is always a tricky task.

It’s technically difficult, and often means managing some tricky trade-offs:

  • Should a testing regime be broad or deep?
  • How much resource should be dedicated to testing versus development?
  • Should you focus on new feature tests or regression tests?
  • When should testing be manual versus automated?

There’s no one ‘best way’ to test a web application. Every project needs its own strategy, based on your priorities, experience and experiments.

In a previous post we talked about the testing tools we use at Cambridge Intelligence. In this post, I’ll try to give some generic tips to help you use them when testing your own web application.

(By the way, we recommend you focus your test resource on your own application, rather than the functionality in our APIs – we do that part for you!)

How to test a simple application

Our example app interface
Our example app interface

Here’s a simple application interface using KeyLines. It’s a network explorer with a description panel on the right-hand side. You can see that when a user clicks an element of the chart, presses a button, or moves an element, actions occur.

To test this UI, two approaches are needed:

  • Integration testing – this tests how the modules in the app work together as a system – how they interact with each other and the surrounding software.
  • End-to-end (E2E) testing – this tests software from a user perspective – from the database to the interface and back again – making sure the tool behaves as they would expect.

1. Understand your users

The first step, as with most software design, is to understand your users and their problems. Once you know who uses your software and what questions they will need to answer, you can define the actions they’re likely to take.

In the case of our application, we know our users will want to:

  • open the application
  • click on a node in the chart
  • see node information in the right panel
  • click the Layout button
  • drag nodes around the chart

So these are some of the interface actions we know to check.

2. Choose your testing modules

No tester wants to check the same things over and over again in every possible browsers. Also, most testing tools are very good with back-end systems, but not great when it comes to UI testing.

Fortunately, a number of tools are available to automate browser testing for UIs. Some of our favorites are:

  • Karma – this tool leverages your Mocha test suites to spawn different browsers simultaneously, feeding back reports in real-time.
  • intern.io – an alternative JavaScript testing stack to Karma, Intern allows you to write tests in any style and run them from the browser.
  • Selenium – is a suite of tools for automating browser tasks, including testing, to bring greater efficiency. Part of the project is WebDriver, a tool specifically for cross-browser testing.
  • Protractor is an Angular end-to-end testing module for automatically opening an application and clicking through a defined workflow. It’s built on Selenium so it tests against all the popular browsers.

3. Run your tests

This depends on the tools you use and the app you’re testing, but the general workflow will be something like this:

data input diagram

Why should I write my tests in JavaScript?

In a word: asynchronicity.

JavaScript is an asynchronous language. If we were testing software in other languages – Java, for example – we would be held up by a queue of actions to perform each time we want to test a single piece of code. This is called a ‘sleep call’, which is invoked until a certain condition is true – wasting time and polling your CPU.

Writing tests in JavaScript and executing them in the browser will let you catch the events raised by the application and run checks based on these.

All of the tools above provide binding for any of your languages/frameworks. This means it’s possible to integrate the JavaScript tests into your cycle, setting a task or a job to fire whenever the test infrastructure is started.

Learn more about our SDKs

If  you’d like to learn more about our data visualization SDKs, take a look at some of our white papers or get in touch.

How can we help you?

Request trial

Ready to start?

Request a free trial

Learn more

Want to learn more?

Read our white papers

“case

Looking for success stories?

Browse our case studies

Registered in England and Wales with Company Number 07625370 | VAT Number 113 1740 61
6-8 Hills Road, Cambridge, CB2 1JP. All material © Cambridge Intelligence 2024.
Read our Privacy Policy.