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.

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).

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 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]
});
});
});

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 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.