Page 15 - MSDN Magazine, November 2018

it ('should render HTML correctly when clicked', () => { expect(fixture.componentInstance.isOn).toBeFalsy();
const b = fixture.nativeElement.querySelector("button"); expect(b.textContent.trim()).toEqual("Click me! I am OFF");
fixture.componentInstance.clicked(); fixture.detectChanges();
expect(fixture.componentInstance.isOn).toBeTruthy();
const b2 = fixture.nativeElement.querySelector("button"); expect(b2.textContent.trim()).toEqual("Click me! I am ON");
});
The “nativeElement” here obtains the DOM node for the compo- nent, and I use “querySelector” to do a jQuery-style query to find the relevant DOM node inside—in this case, the button the Toggle creates. From there, I grab its text content (and trim it, because the preceding demo code line breaks in two places that would be awk- ward to replicate in the test) and compare it against the expected results. However, notice that after I “click” the component, there’s a call to “detectChanges”; this is because Angular needs to be told to go process the DOM-relative changes that the event handler might have caused, such as updating the interpolated strings in the tem- plate. Without this, the tests will fail despite the component working flawlessly in the browser. (I made this exact mistake while writing the article, in fact, so don’t feel bad if you forget to detect the changes.) Note that if the component does any significant initialization inside of its onInit method, the test will need to detectChanges before doing any meaningful work, for the same reason.
Keep in mind, by the way, that all of this test code is against the client-side of the application, not the server-side.
Wrapping Up
Keep in mind, by the way, that all of this test code is against the client-side of the application, not the server-side. Remember all the Express code I wrote to provide APIs to store data into the database and so on? All of that is basically “outside” this framework, and therefore needs to be maintained and run separately. You can use some of the “build” tools I’ve discussed to run both the server-side and client-side tests as part of a larger test cycle, and thus make sure they get triggered as part of any changes to either client or server. Angular also supports “E2E” (short for “end-to-end”) testing, which is outside the scope of what’s being talked about here, but is intended to support exactly this situation.
Happy coding! n
Ted Neward is a Seattle-based polytechnology consultant, speaker and mentor, currently working as the director of Engineering and Developer Relations at Smartsheet.com. He has written a ton of articles, authored and co-authored a dozen books, and speaks all over the world. Reach him at ted@tedneward.com or read his blog at blogs.tedneward.com.
ThaNks to the following technical expert for reviewing this article: Garvice Eakins (Smartsheet.com)
msdnmagazine.com
®
Instantly Search Terabytes
dtSearch’s document filters support: • popular file types
• emails with multilevel attachments • a wide variety of databases
• web data
Over 25 search options including:
• efficient multithreaded search •
• forensics options like credit card search
• SDKs for Windows, UWP, Linux, Mac, iOS in beta, Android in beta
• FAQs on faceted search, granular data classification, Azure and more
Visit dtSearch.com for
• hundreds of reviews and case studies
• fully-functional enterprise and developer evaluations
The Smart Choice for Text Retrieval® since 1991
easy
multicolor
hit-
highlighting
Developers:
• APIs for .NET, C++ and Java; ask about new cross-platform .NET Standard SDK with Xamarin and .NET Core
dtSearch.com 1-800-IT-FINDS