kjschoener (3) [Avatar] Offline
#1
In chapter 3, we add two tests as part of the updateContact() tests suite called 'Should not update the contact if email is invalid' and 'Should not update the contact if the phone number is invalid'. When both of these tests complete, they leave a modal on the screen. The rest of the component is destroyed, but this modal is left on the screen with the rest of the Karma display grayed out. See attached screenshot.

When both of the tests run, there are two modals left on the screen, even though the phone number modal sits on top of the email address modal, hiding it from view.

Here's some of the HTML leftover that produces the phone number modal:

<mat-dialog-container class="mat-dialog-container ng-tns-c26-5 ng-trigger ng-trigger-slideDialog ng-star-inserted" tabindex="-1" role="dialog" aria-labelledby="mat-dialog-title-1" style="transform: none; opacity: 1;"><!--bindings={
"ng-reflect-portal": ""
}--><app-invalid-phone-number-modal _nghost-c27="" class="ng-star-inserted"><h1 _ngcontent-c27="" class="mat-dialog-title" mat-dialog-title="" id="mat-dialog-title-1">Invalid Phone Number</h1>
<div _ngcontent-c27="" class="mat-dialog-content" mat-dialog-content="">Please enter a phone number with 10 digits (For example, 2125551234).</div>
<div _ngcontent-c27="" class="mat-dialog-actions" mat-dialog-actions="">
<button _ngcontent-c27="" class="mat-button" mat-button="" mat-dialog-close="" type="button" ng-reflect-dialog-result="" aria-label="Close dialog"><span class="mat-button-wrapper">Ok</span><div class="mat-button-ripple mat-ripple" matripple="" ng-reflect-trigger="[object HTMLButtonElement]" ng-reflect-centered="false" ng-reflect-disabled="false"></div><div class="mat-button-focus-overlay"></div></button>
</div></app-invalid-phone-number-modal></mat-dialog-container>

How do we update the test code to make sure that the UI is cleaned up?

kjschoener (3) [Avatar] Offline
#2
With the help of a friend who develops Angular applications all day, we figured out how to resolve the problem. The crux of the problem is that the modals are lazy loaded as separate components. This means that when the test runner destroys the parent components, it has no access to the lazy-loaded modals to destroy them. We updated the contact-edit\contact-edit.component.ts file, implementing the ngOnDestroy interface to close any open modals when the parent component is destroyed. I have attached a copy of the updated file.
367759 (1) [Avatar] Offline
#3
I'm having this problem as well, and I'd love to take a look at your solution. However, Manning's forum is giving me an "Attachment support is disabled or inaccessible: Cannot proceed" error when I try to click on the attachment. Any chance you could copy and paste the code in a reply?

Thanks!
Jesse Palmer (53) [Avatar] Offline
#4
Thanks! I opened a PR at https://github.com/testing-angular-applications/testing-angular-applications/pull/79/files. Since the code isn't in the book we should be able to update this as long as the tests pass.
Jesse Palmer (53) [Avatar] Offline
#5