5

I'm working on a single page app and looking into automated testing of the application.

  • The GUI is generated only from JavaScript + css (document.createElement…)
  • All data communication between server and client app is JSON over xmlHttpRequest
  • In most cases it will post a JSON string and receive a JSON string to for example mydoman.tld/something.ashx (and some times with a query string)
  • For some of the functionality there will be use of web sockets.

I've been looking into examples of unit testing and most of them is very simple (1+1 = 2...etc). I can't really translate these simple examples into something more advanced, like in this case where it's a lot of things to take into account, such as:

  • Roles of the user
  • Configuration for the user
  • Configuration for the customer (one customer has many users)

How is this done in JavaScript and is this really possible?

Improve this question
5
  • What is your experience level on test automation? And what is the current state of testing of this application?
    – Vishal Aggarwal
    Commented Mar 19, 2019 at 0:43
  • This is not clear that you are asking about unit testing/test automation in general or asking specifically in the context of an technology stack.
    – Vishal Aggarwal
    Commented Mar 19, 2019 at 0:44
  • 1
    Mr Zach, remember if you accept some answer, please mark it as accept. It's a really good incentive for the contributors.
    – João Farias
    Commented Mar 19, 2019 at 6:20
  • 1
    Generally best to wait a couple days before accepting, though, otherwise it disincentivises other potential answerers.
    – c32hedge
    Commented Mar 19, 2019 at 14:14
  • @VishalAggarwal I dont have any experience with automated testing. That's why I'm looking into how this can be applied into this application. There is no automated testing of the application today.
    – Mr Zach
    Commented Mar 19, 2019 at 16:20

2 Answers 2

Reset to default
2

Yes, it is possible, but not with only unit-tests.

A typical test pyramide has:

  • Functional end2end tests
  • Integration/API tests
  • Unit-tests

The topic is very broad and how it is done cannot be written as a short concise answer. But I think you are looking for more API and End2End like tests, although find the right balance.

Maybe this article helps, it goes over all the (automated) testing phases for a typical JavaScript project: Node.js & JavaScript Testing Best Practices (2019)

Also be sure to read this article to understand the different layers of the test pyramid:

The Practical Test Pyramid

The "Test Pyramid" is a metaphor that tells us to group software tests into buckets of different granularity. It also gives an idea of how many tests we should have in each of these groups. Although the concept of the Test Pyramid has been around for a while, teams still struggle to put it into practice properly. This article revisits the original concept of the Test Pyramid and shows how you can put this into practice. It shows which kinds of tests you should be looking for in the different levels of the pyramid and gives practical examples on how these can be implemented.

https://martinfowler.com/articles/practical-test-pyramid.html

Improve this answer
1

HTMLUnit may be useful for you.

It runs headless DOM and allows you to check:

@Test
public void submittingForm() throws Exception {
    try (final WebClient webClient = new WebClient()) {

        // Get the first page
        final HtmlPage page1 = webClient.getPage("http://some_url");

        // Get the form that we are dealing with and within that form, 
        // find the submit button and the field that we want to change.
        final HtmlForm form = page1.getFormByName("myform");

        final HtmlSubmitInput button = form.getInputByName("submitbutton");
        final HtmlTextInput textField = form.getInputByName("userid");

        // Change the value of the text field
        textField.type("root");

        // Now submit the form by clicking the button and get back the second page.
        final HtmlPage page2 = button.click();
    }
}

It works with any Java test runner, such as TestNG and JUnit.

If your app is generated by some popular frontend framework, such as Ember.js or React, the community probably have many tools to manage different levels of checking (as Niels mentioned) and isolate the frontend app, e.g. by mocking HTTP calls.

I've talked about the tools in Ember.js on this post.

Improve this answer
4
  • Thank you for your answer, but for this case it cannot be used. This is a singel page app with no such thing as a form or even some html code to load (the only html code is to load the JavaScript)
    – Mr Zach
    Commented Mar 19, 2019 at 16:18
  • This is just an example - you can use the get* methods to inspect any part of the DOM.
    – João Farias
    Commented Mar 19, 2019 at 16:44
  • But all the DOM objects are only referenced within the JavaScript scope. they dont have any id/name. for example var btn = document.createElement("input"); document.body.appendChild(btn); btn.type = "button"; btn.value ="click me"; btn.addEventListener("click", function(){ if (some_codition) alert("You cant match some_codition); });
    – Mr Zach
    Commented Mar 19, 2019 at 17:00
  • The DOM is dynamically change by the JavaScript code. You can use HTMLUnit to inpect the DOM changes.
    – João Farias
    Commented Mar 19, 2019 at 17:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.