Testing A Single Page Angular JS Applications

Image for post
Image for post

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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

Image for post
Image for post

Written by

Product Growth at @lambdatesting (www.lambdatest.com)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store