feat(render): expose detectChanges

Author: GregOnNet

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

@@ -1,6 +1,6 @@
 import { Type } from '@angular/core';
 import { ComponentFixture } from '@angular/core/testing';
-import { FireObject, Queries, queries, BoundFunction } from '@testing-library/dom';
+import { BoundFunction, FireObject, Queries, queries } from '@testing-library/dom';
 import { UserEvents } from './user-events';
 
 export type RenderResultQueries<Q extends Queries = typeof queries> = { [P in keyof Q]: BoundFunction<Q[P]> };
@@ -21,6 +21,7 @@ export interface RenderResult extends RenderResultQueries, FireObject, UserEvent
    * element: The to be printed HTML element, if not provided it will log the whole component's DOM
    */
   debug: (element?: HTMLElement) => void;
+  detectChanges: () => void;
   /**
    * @description
    * The Angular `ComponentFixture` of the component.

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

@@ -1,10 +1,10 @@
-import { Component, OnInit, ElementRef, Type, DebugElement } from '@angular/core';
+import { Component, DebugElement, ElementRef, OnInit, Type } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { getQueriesForElement, prettyDOM, fireEvent, FireObject, FireFunction } from '@testing-library/dom';
-import { RenderResult, RenderOptions } from './models';
-import { createType, createSelectOptions } from './user-events';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { fireEvent, FireFunction, FireObject, getQueriesForElement, prettyDOM } from '@testing-library/dom';
+import { RenderOptions, RenderResult } from './models';
+import { createSelectOptions, createType } from './user-events';
 
 @Component({ selector: 'wrapper-component', template: '' })
 class WrapperComponent implements OnInit {
@@ -84,6 +84,7 @@ export async function render<T>(
     fixture,
     container: fixture.nativeElement,
     debug: (element = fixture.nativeElement) => console.log(prettyDOM(element)),
+    detectChanges: () => fixture.detectChanges(),
     ...getQueriesForElement(fixture.nativeElement, queries),
     ...eventsWithDetectChanges,
     type: createType(eventsWithDetectChanges),

projects/testing-library/tests/detect-changes.spec.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import { fakeAsync, tick } from '@angular/core/testing';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { delay } from 'rxjs/operators';
+import { render } from '../src/public_api';
+
+@Component({
+  selector: 'fixture',
+  template: `
+    <input type="text" data-testid="input" [formControl]="inputControl" />
+    <button data-testid="button">{{ caption }}</button>
+  `,
+})
+class FixtureComponent implements OnInit {
+  inputControl = new FormControl();
+  caption = 'Button';
+
+  ngOnInit() {
+    this.inputControl.valueChanges.pipe(delay(400)).subscribe(() => (this.caption = 'Button updated after 400ms'));
+  }
+}
+
+test('allows detecting changes directly', async () => {
+  const { getByTestId, type } = await render(FixtureComponent, { imports: [ReactiveFormsModule] });
+
+  type(getByTestId('input'), 'What a great day!');
+  expect(getByTestId('button').innerHTML).toBe('Button');
+});
+
+test('allows detecting changes directly', fakeAsync(async () => {
+  const { getByTestId, type, detectChanges } = await render(FixtureComponent, {
+    imports: [ReactiveFormsModule],
+  });
+
+  type(getByTestId('input'), 'What a great day!');
+
+  tick(500);
+  detectChanges();
+
+  expect(getByTestId('button').innerHTML).toBe('Button updated after 400ms');
+}));