Testing A Single Page Angular JS Applications

With the introduction of Angular JS, Google brought a paradigm shift in the world of web development. Gone were the days when static web pages consumed a lot of resources and resulted in a website that is slower to load and with each click on a button, resulting in a tiring page reload sequence. Dynamic single page websites became the new trend where with each user action, only the content of the page changed, sparing the user from experiencing a website full of slower page loads.

With the rapid growth of angular and updated ECMA scripts, other frameworks like ReactJS, EmberJS, HandlebarJS were introduced that had the same objective, developing single page applications. Not only in development, but a major revolution was also brought in the testing domain. Since single page application requires special attention than traditional testing procedures. Let’s take a look at the procedures followed while testing a single page angular application.

Unit Testing Using Karma
Karma is a testing framework developed by the Angular team. It was used not in Angular JS but with version 2 and onwards. When a new project is cleared using the CLI, Karma is installed as default with the bundle.
Besides working well with Angular, Karma provides you with the feature to test your application across various devices like tablets or mobiles or even gaming consoles like PlayStation.
Karma also helps to integrate testing frameworks like QUnit or Mocha with CircleCI, Jenkins and other integration services.

Unit Testing Using Jasmine
Jasmine is a testing framework based on JavaScript that follows Behavior Driven Development or BDD, a common software development practice. It is advantageous for testing angular applications because
Describing the test cases in a format that is understandable by a human. Instead of using scripts, the language of Jasmine is very simple and just by technical reading, you can understand what is going on in those test functions.
Jasmine is free from dependencies and does not need a DOM.
It also has a spying feature that allows the tester to track a function and check whether a specific attribute was called or not.

Testing Using Mocha
Mocha is a javascript based testing framework that is rich in multiple features. It is popular because of the way it makes testing fun and simple.
It works across multiple browsers
Provides the feature of test case reporting
Exceptions that are uncaught are mapped by Mocha and assigned to the appropriate test cases.
Provides a simple and asynchronous support to your angular application.

Automation Testing Using Protractor
If you are looking for an end to end framework for automating your testing, Protractor is the ideal choice.
It executes the test cases on a real browser, by interacting with the application just like a real person would.
Not only individual functions, Protractor tests the entire logic running behind those functions.
It emulates scenarios like filling up forms and clicking buttons to check whether the desired functionalities like form submission is working correctly and also whether the CSS styles are applied properly on the HTML tags.

Cross Browser Compatibility Testing
For applications developed using Angular 2 or above, cross-browser issues are common when it comes to certain browsers, especially internet explorer. Even in Safari, features like animation does not work properly.
The ideal solution is to install the desired operating systems and browsers on several workstations or on virtual machines and test the scenarios there instead of using an emulator.

Cloud-based testing platforms like LambdaTest provides a solution to all the hurdles of cross-browser testing by providing features of testing your single page angular application simultaneously across multiple browsers and multiple OS, all running on real-time devices and accessed via the cloud.

Visual Regression Testing
When a user is accessing your website, he checks not only functionality but also the usability. If the user experience is not satisfactory, the user will not hesitate a moment before switching to another application. Fortunately, there are certain JavaScript based frameworks that make visual regression testing of your angular application easier.

BackstopJS is one such framework that operates by sequentially capturing screenshots of your application and comparing the screenshots with each code changes to figure out any major regression bugs or visual difference.
Casper JS is another tool that works just like Backstop JS. Not only that, but it also helps to store the test result in xUnit, ensuring the maintenance of a long-term health of your code.

Accessibility Testing
W3C has set up certain standards and guidelines which states that all kinds of people must be able to access a website, especially people with disabilities. Abiding by these guidelines will result in your website having a decent ranking in search engine results. This makes it important to perform accessibility testing of your website. The main checks for this testing are
Ensure that complete navigation is possible without the usage of mouse and just by using the keyboard.
Ensure that devices like screen reader or voice over in Mac are working properly and a user can navigate through the site entirely with the usage of those devices.

Although in the current age of Agile and DevOps, testing is carried out simultaneously after the subsequent development of a user story, proper time should be invested to ensure that all the testing procedures are successfully completed before an application is deployed in production. A bug-free application will ensure the satisfaction of both the stakeholder as well as the users and will ultimately result in a good reputation of the organization along with the developers and testers.

Originally published at LambdaTest

Written By Arnab Roy Chowdhary

Source: https://medium.com/@sarahelson81/testing-a-single-page-angular-js-applications-d64caa4edb6b