fix: calculate changes for input properties like component properties

ref testing-library#365

Author: shaman-apprentice

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

@@ -133,12 +133,7 @@ export async function render<SutType, WrapperType = SutType>(
     >,
   ) => {
     const newComponentInputs = properties?.componentInputs ?? {};
-    for (const inputKey of renderedInputKeys) {
-      if (!Object.prototype.hasOwnProperty.call(newComponentInputs, inputKey)) {
-        delete (fixture.componentInstance as any)[inputKey];
-      }
-    }
-    setComponentInputs(fixture, newComponentInputs);
+    const changesInComponentInput = update(fixture, renderedInputKeys, newComponentInputs, setComponentInputs);
     renderedInputKeys = Object.keys(newComponentInputs);
 
     const newComponentOutputs = properties?.componentOutputs ?? {};
@@ -151,11 +146,15 @@ export async function render<SutType, WrapperType = SutType>(
     renderedOutputKeys = Object.keys(newComponentOutputs);
 
     const newComponentProps = properties?.componentProperties ?? {};
-    const changes = updateProps(fixture, renderedPropKeys, newComponentProps);
+    const changesInComponentProps = update(fixture, renderedPropKeys, newComponentProps, setComponentProperties);
+    renderedPropKeys = Object.keys(newComponentProps);
+
     if (hasOnChangesHook(fixture.componentInstance)) {
-      fixture.componentInstance.ngOnChanges(changes);
+      fixture.componentInstance.ngOnChanges({
+        ...changesInComponentInput,
+        ...changesInComponentProps,
+      });
     }
-    renderedPropKeys = Object.keys(newComponentProps);
 
     if (properties?.detectChangesOnRender !== false) {
       fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
@@ -361,27 +360,32 @@ function getChangesObj(oldProps: Record<string, any> | null, newProps: Record<st
   );
 }
 
-function updateProps<SutType>(
+function update<SutType>(
   fixture: ComponentFixture<SutType>,
-  prevRenderedPropsKeys: string[],
-  newProps: Record<string, any>,
+  prevRenderedKeys: string[],
+  newValues: Record<string, any>,
+  updateFunction: (
+    fixture: ComponentFixture<SutType>,
+    values: RenderTemplateOptions<SutType>['componentInputs' | 'componentProperties'],
+  ) => void,
 ) {
   const componentInstance = fixture.componentInstance as Record<string, any>;
   const simpleChanges: SimpleChanges = {};
 
-  for (const key of prevRenderedPropsKeys) {
-    if (!Object.prototype.hasOwnProperty.call(newProps, key)) {
+  for (const key of prevRenderedKeys) {
+    if (!Object.prototype.hasOwnProperty.call(newValues, key)) {
       simpleChanges[key] = new SimpleChange(componentInstance[key], undefined, false);
       delete componentInstance[key];
     }
   }
 
-  for (const [key, value] of Object.entries(newProps)) {
+  for (const [key, value] of Object.entries(newValues)) {
     if (value !== componentInstance[key]) {
       simpleChanges[key] = new SimpleChange(componentInstance[key], value, false);
     }
   }
-  setComponentProperties(fixture, newProps);
+
+  updateFunction(fixture, newValues);
 
   return simpleChanges;
 }

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

@@ -48,7 +48,7 @@ test('rerenders the component with updated inputs', async () => {
   expect(screen.getByText(firstName)).toBeInTheDocument();
 });
 
-test('rerenders the component with updated props and resets other props', async () => {
+test('rerenders the component with updated inputs and resets other props', async () => {
   const firstName = 'Mark';
   const lastName = 'Peeters';
   const { rerender } = await render(FixtureComponent, {