JavaScript Unit Testing with an Angular 5.x Use Case 101

JavaScript Unit Testing with an Angular 5.x Use Case 101

• 1.
  Hazem Saleh
• 2.
  § JavaScript TestingChallenges. § Picking your JavaScript Unit Testing Framework. § Requirements of developing a clean unit test. § Jasmine Overview. § Basic Demo. § Use Case: AngularJS 5.x and Jasmine. § Use Case Demo-1. § Use Case Demo-2. § Conclusion.
• 3.
  Slow Requires a lotof time to test on all the browsers. JavaScript code that works on a browser X does not mean that it will work on browserY. Inflexible Supporting a new browser on an existing system means allocating a new budget: • For testing this system on the new browser. • For fixing newly discovered problems on the new browser.
• 4.
  JavaScript Unit TestingTool Executable across browsers (Automated preferred) Fast to execute Easy to setup Integrated Easy to configure Provides a good testing mechanism for Asynchronous code
• 5.
  Every test functionshould contain 10 lines of code or less. Every test function should have a proper name. Every test function should have a single responsibility. A unit test should test a single component at a time, mocking all of its dependent components.
• 6.
  §Jasmine is apowerful JavaScript unit testing framework. §Jasmine describes its tests in a simple natural language. §Jasmine tests can be read by non-programmers. §Jasmine provides a clean mechanism for testing synchronous and asynchronous code.
• 7.
  Sample Jasmine Test describe("Asample suite", function() { it("contains a spec with an expectation", function() { expect(true).toEqual(true); }); }); Main Jasmine Constructs TestSuite begins with a call to describe(). TestCase “or spec” begins with a call to it(). TestCase can contain one or more matcher(s).
• 8.
  Main Matchers expect(x).toEqual(y) expect(x).toBeTruthy() expect(x).toBeFalsy() expect(x).toBeLessThan(y) expect(x).toBeGreaterThan(y) expect(x).toMatch(pattern) expect(x).toBe[Un]Defined() expect(x).toBeNull() expect(x).toContain(y) expect(x).toWhatEver(Y) “custom matcher”
• 9.
  beforeEach and afterEachexample
• 11.
  §AngularJS 5.x isa powerful UI MVW framework for building client applications. §TypeScript is one of the powerful options to be used with AngularJS. §Fortunately, Jasmine is compatible with TypeScript and can be used seamlessly with AngularJS 5.x.
• 12.
  §The Angular TestBed (ATB) is a higher level Angular Only testing framework that allows us to easily test behaviours that depend on the Angular Framework. §ATB is fully integrated with Jasmine and Karma. §ATB facilitates the following for testing: § AngularJs component creation. § Handling IoC (Dependency Injection). § Handling Async behavior.
• 13.
  import {TestBed, ComponentFixture}from '@angular/core/testing'; import {LoginComponent} from './login.component'; import {AuthService} from "./auth.service"; describe('Component: Login', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [LoginComponent], providers: [AuthService] }); }); });
• 14.
  Project URL: https://github.com/hazems/angularjs5-jasmine-demo
• 15.
  Project URL: https://github.com/hazems/angularjs5-jasmine-demo/tree/navigation_test
• 16.
  §Testing JavaScript/TypeScript codeis important for increasing the quality of every application. §Unit tests minimize the number of all kind of defects, whether they are component-related or regression related. §Jasmine is a powerful unit testing framework which can fit perfectly with almost every JavaScript application.