[testing] valueChanges-Event of Control is not executed when dispatching Event for Input-Field

Explanation of the problem

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for: [testing] valueChanges-Event of Control is not executed when dispatching Event for Input-Field

iit('should execute a Typeahead-Search', <any> fakeAsync(() => {
  fixture.detectChanges();
  let taskList = fixture.componentInstance,
    element = fixture.nativeElement;
  var spy : Spy = spyOn(taskService, 'findTasks').and.callThrough();
  let input = element.querySelector('#searchField');
  input.value = 'Term';
  dispatchEvent(input, 'input');
  fixture.detectChanges();
  tick(600);
  console.log(input.value); // prints "Term" so value was updated
  input.triggerEventHandler('valueChanges', null); // manually trigger valueChanges event
  expect(taskService.findTasks).toHaveBeenCalledWith({'q': 'Term'});
}));

1. Problem: “Cannot read property ‘length’ of undefined” error when using the async pipe with a BehaviorSubject. Description: Users have reported an error when using the async pipe with a BehaviorSubject. The error message is “Cannot read property ‘length’ of undefined”. This error occurs when the BehaviorSubject has not yet emitted any values and the async pipe tries to access the length property of the value. Solution: One solution is to initialize the BehaviorSubject with a default value. For example:

private dataSubject = new BehaviorSubject<any[]>([]);
data$ = this.dataSubject.asObservable();

Then, in the component, check if the value is undefined before accessing its length property:

<ng-container *ngIf="data$ | async as data">
  <div *ngIf="data.length > 0">
    // Display data here
  </div>
</ng-container>

1. Problem: Error “zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten” when running Angular tests. Description: When running Angular tests, users have reported an error message that says “zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten”. This error occurs when a third-party library, such as a polyfill, overwrites the global Promise object. Solution: One solution is to use the zone.js library to patch the global Promise object before running the tests. Add the following line to the test.ts file:

import 'zone.js/testing';

Then, in the beforeEach function of the test, patch the Promise object:

beforeEach(() => {
  (window as any)['Promise'] = Promise;
});

3. Problem: Error “Maximum call stack size exceeded” when using ng serve. Description: Some users have reported an error message that says “Maximum call stack size exceeded” when running the ng serve command. This error occurs when there is a circular dependency in the application. Solution: One solution is to use the Angular dependency injection system to break the circular dependency. For example, if ComponentA depends on ComponentB and ComponentB depends on ComponentA, create a new service and move the shared logic to the service. Then, inject the service into both components. For example:

@Injectable({ providedIn: 'root' })
export class SharedService {
  // Shared logic here
}

@Component({...})
export class ComponentA {
  constructor(private sharedService: SharedService) {}
  // Use the shared service here
}

@Component({...})
export class ComponentB {
  constructor(private sharedService: SharedService) {}
  // Use the shared service here
}

A brief introduction to angular

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `
    <button [class]="classes">
      {{label}}
    </button>
  `
})
export class ButtonComponent {
  @Input() label: string;
  @Input() classes: string;
}

# Install Ionic CLI
npm install -g @ionic/cli

# Create a new Ionic app with Angular
ionic start myApp --type=angular

# Add a new page to the app
ionic generate page myPage

# Build and run the app on a mobile device
ionic capacitor add ios
ionic capacitor copy ios
ionic capacitor open ios