Testing Angular Components Fundaments

Slides from my "Testing Angular Components Fundaments" talk at assert(js).

Transcript

1. Testing Angular Components Fundamentals Jesse Palmer @jesselpalmer 1
2. What you are going to learn? Introduction • Setup tests • Write tests • Tear down tests 2
3. Things to keep in mind Introduction • The examples are all in TypeScript. • This talk only covers unit tests. • This talk covers Angular 2+. 3
4. Setting up your tests 4
5. Tools of the Trade Setting up your tests 5
6. Karma Setting up your tests • Created by the AngularJS team. • Used as a test-runner. • Execute your tests. • Runs in your browser. 6
7. Jasmine Setting up your tests • Jasmine is a framework used for unit testing. • Allows tests to be written in a Behavior Driven Development style. • Contains functions such as it, describe, beforeEach, afterEach. • Contains matcher functions like toBeTruthy and toBeEqual. 7
8. Angular-CLI Setting up your tests • Used to set-up your test infrastructure. • Installs Karma and Jasmine by default. • Loads of support for testing right out-of-the-box. • Highly recommended! 8
9. Three types of component tests Writing your tests • Isolated Tests • Shallow Tests • Integration Tests 9
10. Isolated Tests Writing your tests • You can test components like you would with native JavaScript. • You don’t need to use any of the features found in the Angular testing module. • No rendering of components. 10
11. Shallow Tests Writing your tests • Use shallow tests when you want to only go one level deep. • You render the parent components without rendering the child components. • Allows developers to concentrate on the parent component without worrying about the child components. 11
12. Integration Tests Writing your tests • Integration tests can tests the whole application. • Components will be rendered. • You are testing as a user that is interacting with the app through the browser. • For example, you may want to check the routing for a particular component. 12
13. import statements Setting up your tests • Declare your dependencies at the top of the file. 13
14. Angular testing module Setting up your tests • async, ComponentFixture, TestBed are common methods and classes that you are going to see when it comes to Angular testing. 14
15. TestBed Setting up your tests • TestBed is Angular specific. • It is the primary tool for writing tests with Angular. • You use it to initialize and configure your testing environment. • It also contains methods to create components and services. • The most common methods are configureTestingModule, compileComponents, and createComponent. 15
16. TestBed.configureTestingModule() Setting up your tests • configureTestingModule takes in an object that you can use to set-up your test environment. 16
17. TestBed.compileComponents() Setting up your tests • compileComponents will compile all the components configured in TestBed. 17
18. TestBed.createComponent() Setting up your tests • createComponent will return an instance of a ComponentFixture. 18
19. ComponentFixture Setting up your tests • ComponentFixture is similar to the native DOM element, but contains useful methods and properties provided by Angular for debugging. 19
20. ComponentFixture.detectChanges() Setting up your tests • One of the most important methods is detectChanges. • detectChanges triggers Angular’s change detection cycle. 20
21. async Setting up your tests • Wraps a test function in an asynchronous test zone. • The code will automatically complete when all asynchronous calls within this zone are done. 21
22. async Setting up your tests • In this example, we need to use async to allow compileComponents() to be completed before the rest of the code is executed. • compileComponents is an asynchronous call. • If we allow the code to continue on without using async our test could fail because compileComponents may not have been completed. 22
23. describe block Setting up your tests • Use the describe function to setup your test suite. 23
24. Declare variables Setting up your tests • Create your global variables at the top of your testing suite. • This avoids having to inject dependencies into each individual test. 24
25. Mocking services Setting up your tests • Mock complex services that make HTTP requests. • If the service is simple, then you don’t have to mock it. • You want to make sure that we test the component and not the service. • Still test your service just in a separate test file. 25
26. beforeEach statements Setting up your tests • The code in the beforeEach statements will be executed before each test is executed. • The configuration of TestBed can get somewhat large, so it’s a good idea to split them into two beforeEach statements for readability. • The first beforeEach is for setting up TestBed. • The second beforeEach is for setting your global variables. 26
27. Writing your tests 27
28. Writing your tests • Use the it function to create individual test. 28
29. Writing your tests • Put the assertion on the last line. • Use the expect for whatever it is you are testing. This is usually going to be your component. • Use a matcher function, such as, toBeTruthy(), to the check to whether the test result is correct. • Try to limit yourself to one assertion a test. This will keep your tests relatively simple and clean. This makes debugging tests easier. 29
30. fakeAsync and tick Writing your tests • Sometimes it takes milliseconds for a component to render. • You can use fakeAsync() along with tick() to simulate the passage of time. • This allows the component to fully render before tests. • If you don’t simulate the passage of time you may get errors. • The default parameter for tick() is zero. 30
31. Tearing down your tests 31
32. Destroy references Tearing down your tests • This step is optional. • You can destroy references by setting your global variables to null. • This ensures that each test is properly reset before the next test is executed and helps avoid side effects. 32
33. Closing 33
34. Recap Closing • We have covered setting up tests • We have covered writing tests • We have covered tearing down tests 34
35. Additional resources Closing • Testing Angular Applications: https://manning.com/books/testing-angular-applications • Angular Documentation: https://angular.io/guide/testing • Angular — Testing Guide: https://medium.com/google-developer-experts/angular-2-testing-guide- a485b6cb1ef0 • Three Ways to Test Angular Components: https://vsavkin.com/three-ways-to-test-angular-2-components- dcea8e90bd8d • Materials from this talk: https://github.com/jesselpalmer/testing-angular-components-fundamentals-talk 35
36. Coupon codes Closing This coupon code will get you 40% off ALL Manning Publication Books: ctwassertjs18 36
37. Coupon codes Closing • See me for coupon codes for free copies of my book. 37
38. Contact me Closing • Twitter: https://twitter.com/jesselpalmer • GitHub: https://github.com/jesselpalmer • LinkedIn: https://www.linkedin.com/in/jesselpalmer/ 38
39. “If we want to be serious about quality, it is time to get tired of finding bugs and start preventing them form happening in the first place.” - Alan Page 39
40. Fin! 40