fix: don't invoke ngOnChanges when no properties are provided (#326)

Closes #323

BREAKING CHANGE:

This change is made to have the same behavior as the run time behavior.

BEFORE:

The `ngOnChanges` lifecycle is always invoked when a component is rendered. 

AFTER:

The `ngOnChanges` lifecycle is only invoked if a component is rendered with `componentProperties`.

Author: timdeschryver

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

@@ -208,7 +208,7 @@ export async function render<SutType, WrapperType = SutType>(
     let isAlive = true;
     fixture.componentRef.onDestroy(() => (isAlive = false));
 
-    if (hasOnChangesHook(fixture.componentInstance)) {
+    if (hasOnChangesHook(fixture.componentInstance) && Object.keys(properties).length > 0) {
       const changes = getChangesObj(null, componentProperties);
       fixture.componentInstance.ngOnChanges(changes);
     }

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

@@ -21,16 +21,18 @@ import { render, fireEvent, screen } from '../src/public_api';
 })
 class FixtureComponent {}
 
-test('creates queries and events', async () => {
-  const view = await render(FixtureComponent);
+describe('DTL functionality', () => {
+  it('creates queries and events', async () => {
+    const view = await render(FixtureComponent);
 
-  /// We wish to test the utility function from `render` here.
-  // eslint-disable-next-line testing-library/prefer-screen-queries
-  fireEvent.input(view.getByTestId('input'), { target: { value: 'a super awesome input' } });
-  // eslint-disable-next-line testing-library/prefer-screen-queries
-  expect(view.getByDisplayValue('a super awesome input')).toBeInTheDocument();
-  // eslint-disable-next-line testing-library/prefer-screen-queries
-  fireEvent.click(view.getByText('button'));
+    /// We wish to test the utility function from `render` here.
+    // eslint-disable-next-line testing-library/prefer-screen-queries
+    fireEvent.input(view.getByTestId('input'), { target: { value: 'a super awesome input' } });
+    // eslint-disable-next-line testing-library/prefer-screen-queries
+    expect(view.getByDisplayValue('a super awesome input')).toBeInTheDocument();
+    // eslint-disable-next-line testing-library/prefer-screen-queries
+    fireEvent.click(view.getByText('button'));
+  });
 });
 
 describe('standalone', () => {
@@ -162,13 +164,13 @@ describe('Angular component life-cycle hooks', () => {
     }
 
     ngOnChanges(changes: SimpleChanges) {
-      if (changes.name && this.nameChanged) {
-        this.nameChanged(changes.name.currentValue, changes.name.isFirstChange());
+      if (this.nameChanged) {
+        this.nameChanged(changes.name?.currentValue, changes.name?.isFirstChange());
       }
     }
   }
 
-  it('will call ngOnInit on initial render', async () => {
+  it('invokes ngOnInit on initial render', async () => {
     const nameInitialized = jest.fn();
     const componentProperties = { nameInitialized };
     const view = await render(FixtureWithNgOnChangesComponent, { componentProperties });
@@ -179,7 +181,7 @@ describe('Angular component life-cycle hooks', () => {
     expect(nameInitialized).toHaveBeenCalledWith('Initial');
   });
 
-  it('will call ngOnChanges on initial render before ngOnInit', async () => {
+  it('invokes ngOnChanges on initial render before ngOnInit', async () => {
     const nameInitialized = jest.fn();
     const nameChanged = jest.fn();
     const componentProperties = { nameInitialized, nameChanged, name: 'Sarah' };
@@ -193,6 +195,17 @@ describe('Angular component life-cycle hooks', () => {
     /// expect `nameChanged` to be called before `nameInitialized`
     expect(nameChanged.mock.invocationCallOrder[0]).toBeLessThan(nameInitialized.mock.invocationCallOrder[0]);
   });
+
+  it('does not invoke ngOnChanges when no properties are provided', async () => {
+    @Component({ template: `` })
+    class TestFixtureComponent implements OnChanges {
+      ngOnChanges() {
+        throw new Error('should not be called');
+      }
+    }
+
+    await render(TestFixtureComponent);
+  });
 });
 
 test('waits for angular app initialization before rendering components', async () => {