In this video, Aviv Ben-Yosef explains why testing components using the $onChanges lifecycle hook can be problematic, and how it can be done in a safe manner.
- [Instructor] The $onChanges lifecycle hook…is one of the most useful recent additions to Angular.…You should expect to test components,…that make use of it (mumbles).…That is why it may come to you as a surprise,…that Angular doesn't provide a simple way…for invoking the hook during tests.…If you recall, the $onChanges hook is called…with a special changes parameter.…That object has a property for each binding…that has been changed.…For tests to be reliable,…when testing your $onChanges hooks,…you should make sure to pass an object that provides…the same interface.…
That means supplying each change binding…with a current value, previous value,…and then ease first change method.…Of course, it's possible to roll…your own stub objects, but that becomes tedious very fast.…There's a small third-party library…that provides an easy way to stub the changes object…called Angular-stub-changes.…In full disclosure, I am the creator of it.…Let's use Angular-stub-changes…in order to properly invoke the $onChanges hook…in our example, and make the test's final pass.…
Aviv Ben-Yosef kicks off the course by explaining what's different in Angular 1.6, as well the different motives for upgrading. Next, he walks through how to safely upgrade an existing app. He covers going from controllers to directives, as well as component lifecycle hooks. He also goes into the architectural changes in Angular, such as one-way data flow and immutability. To wrap up, he discusses how to properly test components.
- Deciding to upgrade an existing app
- Upgrading to Angular 1.6
- Removing standalone controllers
- Using directives as route targets
- Converting a controller's code
- Converting a controller's template
- Comparing directives and components
- Converting a directive
- Reviewing the concept of one-way binding
Skill Level Intermediate
AngularJS 1: Building a Data-Driven Appwith Ray Villalobos2h 15m Intermediate
1. Controllers to Directives
2. Use controllerAs
Convert a controller’s code1m 57s
3. Directives to Components
4. Component Lifecycle Hooks
5. One-Way Data Binding
6. Testing Components
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.