fix(angular): call ngOnChanges after mount

npm/angular/src/mount.ts

@@ -210,10 +210,9 @@ function setupFixture<T> (
  * @param {ComponentFixture<T>} fixture Fixture for debugging and testing a component.
  * @returns {T} Component being mounted
  */
-function setupComponent<T> (
+function setupComponent<T extends { ngOnChanges? (): void }> (
   config: MountConfig<T>,
-  fixture: ComponentFixture<T>,
-): T {
+  fixture: ComponentFixture<T>): T {
   let component: T = fixture.componentInstance
 
   if (config?.componentProperties) {
@@ -230,6 +229,10 @@ function setupComponent<T> (
     })
   }
 
+  if (component.ngOnChanges) {
+    component.ngOnChanges()
+  }
+
   return component
 }
 

system-tests/project-fixtures/angular/src/app/components/lifecycle.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core'
+
+@Component({
+  selector: 'app-lifecycle',
+  template: `<p>Hi {{ name }}. ngOnInit fired: {{ ngOnInitFired }} and ngOnChanges fired: {{ ngOnChangesFired }}</p>`
+})
+export class LifecycleComponent implements OnInit, OnChanges {
+  @Input() name = ''
+  ngOnInitFired = false
+  ngOnChangesFired = false
+
+  ngOnInit(): void {
+    this.ngOnInitFired = true
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.ngOnChangesFired = true;
+  }
+}

system-tests/project-fixtures/angular/src/app/mount.cy.ts

@@ -8,6 +8,7 @@ import { ButtonOutputComponent } from "./components/button-output.component";
 import { createOutputSpy } from 'cypress/angular';
 import { EventEmitter, Component } from '@angular/core';
 import { ProjectionComponent } from "./components/projection.component";
+import { LifecycleComponent } from "./components/lifecycle.component";
 
 @Component({
   template: `<app-projection>Hello World</app-projection>`
@@ -164,7 +165,28 @@ describe("angular mount", () => {
     })
     cy.get('h3').contains('Hello World')
   })
-
+
+  it('handles ngOnChanges on mount', () => {
+    cy.mount(LifecycleComponent, {
+      componentProperties: {
+        name: 'Angular'
+      }
+    })
+
+    cy.get('p').should('have.text', 'Hi Angular. ngOnInit fired: true and ngOnChanges fired: true')
+  })
+
+  it('handles ngOnChanges on mount', () => {
+    cy.mount('<app-lifecycle [name]="name"></app-lifecycle>', {
+      declarations: [LifecycleComponent],
+      componentProperties: {
+        name: 'Angular'
+      }
+    })
+
+    cy.get('p').should('have.text', 'Hi Angular. ngOnInit fired: true and ngOnChanges fired: true')
+  })
+
   describe("teardown", () => {
     beforeEach(() => {
       cy.get("[id^=root]").should("not.exist");