fix: invoke ngOnChanges when initial value is not set (#189)

Closes #188

Author: timdeschryver

projects/testing-library/src/lib/testing-library.ts

@@ -110,7 +110,7 @@ export async function render<SutType, WrapperType = SutType>(
 
   // Call ngOnChanges on initial render
   if (hasOnChangesHook(fixture.componentInstance)) {
-    const changes = getChangesObj(null, fixture.componentInstance);
+    const changes = getChangesObj(null, componentProperties);
     fixture.componentInstance.ngOnChanges(changes);
   }
 
@@ -205,13 +205,13 @@ function setComponentProperties<SutType>(
   { componentProperties = {} }: Pick<RenderDirectiveOptions<SutType, any>, 'componentProperties'>,
 ) {
   for (const key of Object.keys(componentProperties)) {
-    let _value =  componentProperties[key];
+    let _value = componentProperties[key];
     Object.defineProperty(fixture.componentInstance, key, {
-      get: () => _value ,
+      get: () => _value,
       set: (value) => {
         _value = value;
         fixture.detectChanges();
-      }
+      },
     });
   }
   return fixture;
@@ -241,10 +241,7 @@ function addAutoDeclarations<SutType>(
     excludeComponentDeclaration,
     template,
     wrapper,
-  }: Pick<
-    RenderDirectiveOptions<any>,
-    'declarations' | 'excludeComponentDeclaration' | 'template' | 'wrapper'
-  >,
+  }: Pick<RenderDirectiveOptions<any>, 'declarations' | 'excludeComponentDeclaration' | 'template' | 'wrapper'>,
 ) {
   const wrappers = () => {
     return template ? [wrapper] : [];

projects/testing-library/tests/issues/188.spec.ts

@@ -0,0 +1,24 @@
+// https://github.com/testing-library/angular-testing-library/issues/188
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { render } from '../../src/public_api';
+
+@Component({
+  template: `<h1>Hello {{ formattedName }}</h1>`,
+})
+export class BugOnChangeComponent implements OnChanges {
+  @Input() name: string;
+
+  formattedName: string;
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.name) {
+      this.formattedName = changes.name.currentValue.toUpperCase();
+    }
+  }
+}
+
+it('should output formatted name after rendering', async () => {
+  const { getByText } = await render(BugOnChangeComponent, { componentProperties: { name: 'name' } });
+
+  getByText('Hello NAME');
+});

projects/testing-library/tests/render.spec.ts

@@ -87,7 +87,7 @@ describe('Angular component life-cycle hooks', () => {
     template: ` {{ name }} `,
   })
   class FixtureWithNgOnChangesComponent implements OnInit, OnChanges {
-    @Input() name = 'Sarah';
+    @Input() name = 'Initial';
     @Input() nameInitialized?: (name: string) => void;
     @Input() nameChanged?: (name: string, isFirstChange: boolean) => void;
 
@@ -109,14 +109,14 @@ describe('Angular component life-cycle hooks', () => {
     const componentProperties = { nameInitialized };
     const component = await render(FixtureWithNgOnChangesComponent, { componentProperties });
 
-    component.getByText('Sarah');
-    expect(nameInitialized).toBeCalledWith('Sarah');
+    component.getByText('Initial');
+    expect(nameInitialized).toBeCalledWith('Initial');
   });
 
   test('will call ngOnChanges on initial render before ngOnInit', async () => {
     const nameInitialized = jest.fn();
     const nameChanged = jest.fn();
-    const componentProperties = { nameInitialized, nameChanged };
+    const componentProperties = { nameInitialized, nameChanged, name: 'Sarah' };
     const component = await render(FixtureWithNgOnChangesComponent, { componentProperties });
 
     component.getByText('Sarah');