title: How to trigger ngModelChange event in Jasmine unit testing?
body: <p>I am using below code to perform unit testing by using Jasmine in Angular application.</p>
  <p><strong>test.component.html:</strong></p>
  <pre><code>&lt;p-treeTable [value]=&quot;employees&quot; [columns]=&quot;cols&quot; class=&quot;employeestreetable&quot;&gt;
      &lt;ng-template pTemplate=&quot;header&quot; let-columns&gt;
          &lt;tr&gt;
              &lt;th *ngFor=&quot;let col of cols&quot; style=&quot;width:30px&quot;&gt;
                  {{col.header}}
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/ng-template&gt;
      &lt;ng-template pTemplate=&quot;body&quot; let-rowNode let-rowData=&quot;rowData&quot;  let-columns=&quot;columns&quot;&gt;
          &lt;tr [ttRow]=&quot;rowNode&quot;&gt;
              &lt;td width=&quot;30&quot; class=&quot;text-right&quot; ttEditableColumn&gt; 
                &lt;p-treeTableToggler [rowNode]=&quot;rowNode&quot;&gt;
                      &lt;/p-treeTableToggler&gt;
                  &lt;p-treeTableCellEditor&gt;
                      &lt;ng-template pTemplate=&quot;input&quot;&gt;
                          &lt;input type=&quot;text&quot; pInputText [(ngModel)]=&quot;rowData['name']&quot; /&gt;
                      &lt;/ng-template&gt;
                      &lt;ng-template pTemplate=&quot;output&quot;&gt;
                          &lt;input type=&quot;text&quot; pInputText [(ngModel)]=&quot;rowData['name']&quot;&gt;
                       &lt;/ng-template&gt;
                  &lt;/p-treeTableCellEditor&gt;
               &lt;/td&gt; 
               &lt;td width=&quot;30&quot; class=&quot;text-right&quot;&gt;
                  &lt;p-treeTableCellEditor&gt;
                      &lt;ng-template pTemplate=&quot;input&quot;&gt;
                          &lt;input type=&quot;text&quot; pInputText [(ngModel)]=&quot;rowData['salary']&quot; (ngModelChange)=&quot;calculateTotalSalary(rowNode)&quot; /&gt;
                      &lt;/ng-template&gt;
                      &lt;ng-template pTemplate=&quot;output&quot;&gt;
                          &lt;input type=&quot;text&quot; pInputText [(ngModel)]=&quot;rowData['salary']&quot;&gt;
                       &lt;/ng-template&gt;
                  &lt;/p-treeTableCellEditor&gt;
               &lt;/td&gt;
               &lt;td width=&quot;30&quot; class=&quot;text-right&quot; ttEditableColumn&gt;
                  &lt;p-treeTableCellEditor&gt;
                      &lt;ng-template pTemplate=&quot;input&quot;&gt;
                          &lt;input type=&quot;text&quot; pInputText [(ngModel)]=&quot;rowData['incentive']&quot;  (ngModelChange)=&quot;calculateTotalSalary(rowNode)&quot; /&gt;
                      &lt;/ng-template&gt;
                      &lt;ng-template pTemplate=&quot;output&quot;&gt;
                          &lt;input type=&quot;text&quot; pInputText [(ngModel)]=&quot;rowData['incentive']&quot;&gt;
                       &lt;/ng-template&gt;
                  &lt;/p-treeTableCellEditor&gt;
               &lt;/td&gt;
               &lt;td width=&quot;30&quot; class=&quot;text-right&quot;&gt;
                 &lt;span&gt;{{rowData['totalsalary']}}&lt;/span&gt;
                &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/ng-template&gt;
  &lt;/p-treeTable&gt; 
  </code></pre>
  <p><strong>test.component.ts:</strong></p>
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { TreeNode } from 'primeng/primeng'
  import { ChangeDetectorRef } from '@angular/core';
  @Component({
    selector: 'test-app',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
  })
  export class TestComponent {
    cols = [
      { field: 'name', header: 'Name' },
      { field: 'salary', header: 'Salary' },
      { field: 'incentive', header: 'Incentive' },
      { field: 'totalsalary', header: 'Total Salary' }
    ];
    employees: TreeNode[] = [
      {
        &quot;data&quot;: {
          &quot;name&quot;: &quot;Alex&quot;,
          &quot;salary&quot;: 10000,
          &quot;incentive&quot;: 5000,
          &quot;totalsalary&quot;: 15000
        },
        &quot;children&quot;: [
          {
            &quot;data&quot;: {
              &quot;name&quot;: &quot;George&quot;,
              &quot;salary&quot;: 8000,
              &quot;incentive&quot;: 2000,
              &quot;totalsalary&quot;: 10000
            },
          }
        ]
      },
      {
        &quot;data&quot;: {
          &quot;name&quot;: &quot;Robert&quot;,
          &quot;salary&quot;: 18000,
          &quot;incentive&quot;: 10000,
          &quot;totalsalary&quot;: 280000
        },
        &quot;children&quot;: [
          {
            &quot;data&quot;: {
              &quot;name&quot;: &quot;John&quot;,
              &quot;salary&quot;: 7000,
              &quot;incentive&quot;: 5000,
              &quot;totalsalary&quot;: 12000
            }
          }
        ]
      }
    ];
    calculateTotalSalary(rownode) {
      rownode.node.data.totalsalary = +rownode.node.data.salary + +rownode.node.data.incentive;
    }
  }
  </code></pre>
  <p><strong>test.component.spec.ts:</strong></p>
  <pre><code>import { async, ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
  import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
  import {
      TestComponent
  } from &quot;./test.component&quot;;
  import { FormsModule, NgModel } from '@angular/forms';
  import { NO_ERRORS_SCHEMA } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { MessageService } from 'primeng/api';
  import { TreeNode } from 'primeng/api';
  import { TreeTableModule } from 'primeng/treetable';
  import { By } from '@angular/platform-browser';
  import { InputTextModule } from 'primeng/inputtext';
  describe('TestComponent', () =&gt; {
    let component: TestComponent;
    let fixture: ComponentFixture&lt;TestComponent&gt;;
    let httpClient: HttpClient;
    let httpTestingController: HttpTestingController;
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [ HttpClientTestingModule,
        FormsModule, TreeTableModule, InputTextModule
        ],
        declarations: [ TestComponent ],
        providers: [ ],
        schemas: [NO_ERRORS_SCHEMA]
      })
      .compileComponents();
    }));
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(TestComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
    beforeEach(fakeAsync(() =&gt; {
      fixture = TestBed.createComponent(TestComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
      tick();
    }));
    it('should update total salary amount', fakeAsync(() =&gt; {
      spyOn(component, 'calculateTotalSalary');
      const editableTreeTableEl = fixture.debugElement.query(By.css(&quot;.employeestreetable&quot;));
      let editableColumns = editableTreeTableEl.queryAll(By.css(&quot;.ui-editable-column input&quot;));
      const el = editableColumns[0].nativeElement;
      const ngModel = editableColumns[0].injector.get(NgModel);
      tick();
      ngModel.valueAccessor.writeValue(25000);
      el.dispatchEvent(new Event('input'));
      fixture.detectChanges();
      expect(component.calculateTotalSalary).toHaveBeenCalled(); //failing here
      expect(+el.value).toEqual(25000);
    }));
  });
  </code></pre>
  <p><strong>Demo:</strong>
  <a href="https://stackblitz.com/edit/test-jasmine-karma-t7khzp?file=app%2Ftest.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/test-jasmine-karma-t7khzp?file=app%2Ftest.component.html</a></p>
  <p>I am updating salary amount in above unit test case. How to trigger related ngModelChange event when I update ngModel value from above unit test case?</p>