feat: support detectChangesOnRender within rerender

ref testing-library#365

Author: shaman-apprentice

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

@@ -60,7 +60,7 @@ export interface RenderResult<ComponentType, WrapperType = ComponentType> extend
   rerender: (
     properties?: Pick<
       RenderTemplateOptions<ComponentType>,
-      'componentProperties' | 'componentInputs' | 'componentOutputs'
+      'componentProperties' | 'componentInputs' | 'componentOutputs' | 'detectChangesOnRender'
     >,
   ) => Promise<void>;
   /**

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

@@ -127,7 +127,10 @@ export async function render<SutType, WrapperType = SutType>(
   let renderedInputKeys = Object.keys(componentInputs);
   let renderedOutputKeys = Object.keys(componentOutputs);
   const rerender = async (
-    properties?: Pick<RenderTemplateOptions<SutType>, 'componentProperties' | 'componentInputs' | 'componentOutputs'>,
+    properties?: Pick<
+      RenderTemplateOptions<SutType>,
+      'componentProperties' | 'componentInputs' | 'componentOutputs' | 'detectChangesOnRender'
+    >,
   ) => {
     const newComponentInputs = properties?.componentInputs ?? {};
     for (const inputKey of renderedInputKeys) {
@@ -154,7 +157,12 @@ export async function render<SutType, WrapperType = SutType>(
     }
     renderedPropKeys = Object.keys(newComponentProps);
 
-    fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
+    if (
+      properties?.detectChangesOnRender === true ||
+      (properties?.detectChangesOnRender === undefined && detectChangesOnRender === true)
+    ) {
+      fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
+    }
   };
 
   const changeInput = (changedInputProperties: Partial<SutType>) => {

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

@@ -81,3 +81,40 @@ test('rerenders the component with updated props and resets other props', async
     },
   });
 });
+
+describe('detectChangesOnRender', () => {
+  test('change detection gets not called if disabled within render', async () => {
+    const { rerender, detectChanges } = await render(FixtureComponent, { detectChangesOnRender: false });
+    detectChanges();
+    expect(screen.getByText('Sarah')).toBeInTheDocument();
+
+    const firstName = 'Mark';
+    await rerender({ componentInputs: { firstName } });
+
+    expect(screen.getByText('Sarah')).toBeInTheDocument();
+    expect(screen.queryByText(firstName)).not.toBeInTheDocument();
+  });
+
+  test('change detection gets called if disabled within render but enabled within rerender', async () => {
+    const { rerender, detectChanges } = await render(FixtureComponent, { detectChangesOnRender: false });
+    detectChanges();
+    expect(screen.getByText('Sarah')).toBeInTheDocument();
+
+    const firstName = 'Mark';
+    await rerender({ componentInputs: { firstName }, detectChangesOnRender: true });
+
+    expect(screen.getByText(firstName)).toBeInTheDocument();
+    expect(screen.queryByText('Sarah')).not.toBeInTheDocument();
+  });
+
+  test('change detection gets not called if disabled within rerender', async () => {
+    const { rerender } = await render(FixtureComponent);
+    expect(screen.getByText('Sarah')).toBeInTheDocument();
+
+    const firstName = 'Mark';
+    await rerender({ componentInputs: { firstName }, detectChangesOnRender: false });
+
+    expect(screen.getByText('Sarah')).toBeInTheDocument();
+    expect(screen.queryByText(firstName)).not.toBeInTheDocument();
+  });
+});