Huy Trinh A Practical Approach to JavaScript Testing Metropolia University of Applied Sciences Bachelor of Engineering Information Technology Bachelor’s Thesis 16 November 2020 Abstract Author Huy Trinh Title A practical approach to JavaScript testing Number of Pages 48 pages Date 16 November 2020 Degree Bachelor of Engineering Degree Programme Information Technology Professional Major Mobile Solutions Instructors Kari Aaltonen, Principal Lecturer The purpose of this final year project is to analyze some most common types of testing in JavaScript application, namely Acceptance, System, Integration, and Unit testing. The use- cases and evaluation of each testing level in terms of benefits and costs are also ad- dressed. In addition, different JavaScript testing frameworks are studied with great atten- tion since it has an important effect on application testing. The use-case of this thesis is a React web application that is implemented in nearly all types of testing described in the thesis. These tests contributed greatly to the project since they allow developers to implement new features without breaking another. Furthermore, the project setup for testing and important test cases are also made available as an open- source for study purpose which can be found at https://github.com/HuyAms/testify In conclusion, this thesis demonstrates various types of JavaScript application testing and encourages developers to implement them on the software system to confidently deliver professional code and ensure the application is bug-free. Keywords JavaScript Testing, Testing Frameworks, Jest, Mocha, Jas- mine, React Contents 1 Introduction 1 2 Theoretical background 3 2.1 Software quality 3 2.2 Role of testing 4 2.3 Software development and testing lifecycle 5 2.3.1 Waterfall methodology 6 2.3.2 Agile methodology 8 2.3.3 Traditional vs Agile Testing 10 3 Testing levels 12 3.1 Code Validation 13 3.2 Unit testing 14 3.3 Integration testing 15 3.4 System testing 16 3.5 Acceptance testing 18 4 JavaScript testing framework 19 4.1 Zero-config testing framework Jest 20 4.2 Fully-customizable testing framework Mocha 21 4.3 Behaviour-driven development testing framework Jasmine 21 5 Case study 23 5.1 Project summary 23 5.2 Project challenges 24 5.3 Technical solutions 25 5.4 Implementation 26 5.4.1 Testing tools 26 5.4.2 Static testing implementation 29 5.4.3 Unit testing implementation 34 5.4.4 Integration testing implementation 39 5.4.5 CI configuration 41 5.4.6 Acceptance testing implementation 42 5.5 Evaluation 42 6 Conclusion 44 References 45 List of Abbreviations API Application Programming Interface BDD Behavior Driven Development CD Continuous Development CI Continuous Integration DOM Document Object Model IDE Integrated development environment MVP Minimum Viable Product SDLC Software Development Lifecycle TDD Test Driven Development TMM Test maturity model TPI Test process improvement 1 1 Introduction The number of websites has increased significantly since the last decades. There were more than 1.94 billion websites on the world wide web in January 2019 (Lindsay 2019). In addition, numerous desktop applications have been shifted to web applications to cut down development, maintenance and distribution costs which are very high, especially when it comes to multiplatform applications. This trend leads to an increase in the num- ber of web applications over the last few years (Paul 2002.) See figure 1 below. Figure 1. Trend of programming language over the past 4 years (Coding Infinite, 2019) JavaScript is the most important language used for building a website in today’s Web 2.0 world. As illustrated in figure 1, it can be seen that the total usage of JavaScript increased dramatically for the past 5 years, from 2015 to 2019 (Coding Infinite, 2019.) JavaScript is by far the most popular programming language and this is because of the growth of JavaScript frameworks recently such as NodeJS. However, there is a lack of testing in various real-world JavaScript projects which makes a project unreliable to use and difficult to scale. Thus, this thesis focuses on addressing the problem by providing the basic knowledge of JavaScript testing. 2 Building a website with JavaScript remains a challenging task, especially when the web- site is scaled frequently. There are various factors that make website development a demanding task. The biggest challenge of web development is to support various brows- ers with different versions. JavaScript code that runs correctly on Safari may break on Internet Explorer (IE), Google Chrome or Firefox browsers (Hazem Saleh, 2013.) Sec- ondly, developers normally have to produce a low-cost software in a short time while ensuring the software quality. This is because software quality has a huge impact on many factors of our daily lives from personal security, health, safety to national economy (Kshirasagar et al, 2018.) This thesis aims to demonstrate some common levels of JavaScript testing such as Ac- ceptance testing System testing, Integration testing, and Unit Testing. Moreover, these testing levels are analyzed in terms of its costs and benefit. Three most popular testing frameworks are also studied in this thesis. The case study of this thesis is a web application built with ReactJS used by a company providing a sustainable heat exchanger solution. The main objective of the project is to design and implement a product configuration and quoting tool for sales and engineers which enables error-free quoting with a minimal amount of manual steps. The main focus of the developer is to build a Minimum Viable Product (MVP) web application that con- nects to the existing configuration tool. It is worth noting that this application is built based on the company’s specific needs, therefore, there is no existing web-app solution like this before. This configuration tool requires a high level of accuracy for building a physical product, therefore, the application must work correctly as expected. As a result, testing plays an important role in this project as it helps the company to manufacture the product with great confidence. The ultimate goal is to apply the theory to this real-world project, to investigate and understand which important features of the application should be cov- ered by tests since it would be expensive and unrealistic to test all the features. In addi- tion, setting up testing in a JavaScript web-application will also be studied in detail. 3 2 Theoretical background This chapter provides the definition of software quality and also emphasizes the im- portance of testing in software development. Four types of testing including Unit, Integre- ation, System and Acceptance testing are also addressed in depth. 2.1 Software quality There are various answers to “What is software quality?” since it is a complex concept which depends highly on the context. According to David Garvin who published the arti- cle “What Does Product Quality Really Mean?” in 1984, software quality is defined into four major domains. These domains are economics which focuses on making profits, philosophy focusing on definitions, marketing focusing on customer satisfaction, and management which focuses on the specification and the process of creating a product (Cortney, 2014.) There are Transcendental, User, Manufacturing, Product, and Valued- Based perspective which are described as follows: - Transcendental View: This defines quality as something which can be recognized but really hard to define. In this view, the quality of the product is judged based on subjective opinion and the ability to determine that can only be developed from experience. - User View: According to this approach, user satisfaction is used to measure the quality of a product or service. The essential question to ask when using this approach to eval- uate the product quality is “Does the product satisfy user expectations or preference?” - Product View: This is also known as the product-based approach in which the quality is understood as the inner qualities of a product. To give a better understanding of this perspective, Garvin defined eight specs to measure a product quality including conform- ance, durability, aesthetics, performance, features, reliability, serviceability, and per- ceived quality. It is worth noting that the dimensions depend on the product inherent characteristics. - Manufacturing View: Under this perspective, the conformance to the product specifi- cation decides the quality of a product rather than personal preferences. Thus, any dif- ferences from the pre-defined specification of a product reduce the product quality. 4 - Value-based View: Quality, from this view, depends on how much it costs to manufac- ture a product and how much a user is willing to pay for this product. The quality of a product is determined in terms of its costs and benefits. Therefore, a product with high quality is not the one performing the best (Paul et al, 2014.) The concept of software quality in terms of measurable scores was first well studied in the mid-1970s. There are two types of quality known as quality criteria and a quality factor which were first well studied by McCall, Richards, and Walters. Quality criteria represent quality factors that are related to software development. Modularity could be seen as a great example. Modularity is a part of software architecture which allows de- velopers to put various small components into one module system. Therefore, it helps improve the maintainability of the software product. On the other hand, a quality factor refers more to system behavior. There are various factors which can be considered to be under this type of quality, for example, reliability, efficiency, testability, and reusability (Kshirasagar et al, 2018.) To give a better understanding of the quality factor, an example of reliability could be addressed. In general, a software system with high reliability must do what they are supposed to do and it must perform the tasks without any problems.