JavaScript Unit Testing with an Angular 5.x Use Case 101
0 likes272 views
The document discusses challenges in JavaScript testing and emphasizes the importance of selecting an appropriate unit testing framework, specifically focusing on Jasmine. It outlines the requirements for clean unit tests and demonstrates how Jasmine can be utilized effectively with AngularJS 5.x, highlighting its features and test constructs. Additionally, it stresses the value of unit testing in improving application quality by reducing defects.
![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”](https://image.slidesharecdn.com/javascriptunittesting-180219191744/85/JavaScript-Unit-Testing-with-an-Angular-5-x-Use-Case-101-8-320.jpg)
![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]
});
});
});](https://image.slidesharecdn.com/javascriptunittesting-180219191744/85/JavaScript-Unit-Testing-with-an-Angular-5-x-Use-Case-101-13-320.jpg)
JavaScript Unit Testing with an Angular 5.x Use Case 101
- 1. Hazem Saleh
- 2. § JavaScript Testing Challenges. § 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 lot of 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 Testing Tool 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 function should 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 a powerful 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("A sample 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).
- 9. beforeEach and afterEach example
- 11. §AngularJS 5.x is a 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 Test Bed (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] }); }); });
- 16. §Testing JavaScript/TypeScript code is 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.