feat: add rerender function

Author: timdeschryver

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

@@ -32,6 +32,11 @@ export interface RenderResult<ComponentType, WrapperType = ComponentType>
    * For more info see https://angular.io/api/core/testing/ComponentFixture#detectChanges
    */
   detectChanges: () => void;
+  /**
+   * @description
+   * Re-render the same component with different props.
+   */
+  rerender: (componentProperties?: Partial<ComponentType>) => void;
   /**
    * @description
    * The Angular `ComponentFixture` of the component or the wrapper.

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

@@ -91,10 +91,14 @@ export async function render<SutType, WrapperType = SutType>(
     {} as FireFunction & FireObject,
   );
 
+  const rerender = (rerenderedProperties?: Partial<SutType>) => {
+    setComponentProperties(fixture, { componentProperties: rerenderedProperties });
+    detectChanges();
+  };
+
   let router = routes ? (TestBed.get<Router>(Router) as Router) : null;
   const zone = TestBed.get<NgZone>(NgZone) as NgZone;
-
-  async function navigate(elementOrPath: Element | string, basePath = '') {
+  const navigate = async (elementOrPath: Element | string, basePath = '') => {
     if (!router) {
       router = TestBed.get<Router>(Router) as Router;
     }
@@ -105,20 +109,20 @@ export async function render<SutType, WrapperType = SutType>(
     await zone.run(() => (result = router.navigate([basePath + href])));
     detectChanges();
     return result;
-  }
-  const debugElement = fixture.debugElement.query(By.directive(sut));
+  };
 
   return {
     fixture,
-    debugElement,
+    detectChanges,
+    navigate,
+    rerender,
+    debugElement: fixture.debugElement.query(By.directive(sut)),
     container: fixture.nativeElement,
     debug: (element = fixture.nativeElement) => console.log(prettyDOM(element)),
-    detectChanges,
-    ...getQueriesForElement(fixture.nativeElement, queries),
-    ...eventsWithDetectChanges,
     type: createType(eventsWithDetectChanges),
     selectOptions: createSelectOptions(eventsWithDetectChanges),
-    navigate,
+    ...getQueriesForElement(fixture.nativeElement, queries),
+    ...eventsWithDetectChanges,
   };
 }
 

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

@@ -25,7 +25,7 @@ test('creates queries and events', async () => {
 })
 export class FixtureModule {}
 describe('excludeComponentDeclaration', () => {
-  test('should not throw if component is declared in an import', async () => {
+  test('will throw if component is declared in an import', async () => {
     await render(FixtureComponent, {
       imports: [FixtureModule],
       excludeComponentDeclaration: true,
@@ -34,13 +34,13 @@ describe('excludeComponentDeclaration', () => {
 });
 
 describe('animationModule', () => {
-  test('should add NoopAnimationsModule by default', async () => {
+  test('adds NoopAnimationsModule by default', async () => {
     await render(FixtureComponent);
     const noopAnimationsModule = TestBed.get<NoopAnimationsModule>(NoopAnimationsModule);
     expect(noopAnimationsModule).toBeDefined();
   });
 
-  test('should not add NoopAnimationsModule if BrowserAnimationsModule is an import', async () => {
+  test('does not add NoopAnimationsModule if BrowserAnimationsModule is an import', async () => {
     await render(FixtureComponent, {
       imports: [BrowserAnimationsModule],
     });

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

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { render } from '../src/public_api';
+
+@Component({
+  selector: 'fixture',
+  template: `
+    {{ name }}
+  `,
+})
+class FixtureComponent {
+  @Input() name = 'Sarah';
+}
+
+test('will rerender the component with updated props', async () => {
+  const component = await render(FixtureComponent);
+  component.getByText('Sarah');
+
+  const name = 'Mark';
+  component.rerender({
+    name,
+  });
+
+  component.getByText(name);
+});