From a53db0df135bf763ff4b2c0701c1b8c9cd5328d0 Mon Sep 17 00:00:00 2001
From: Rafael Santana <rafaelsantana3095@gmail.com>
Date: Thu, 5 Nov 2020 14:58:57 -0300
Subject: [PATCH] fix: trigger change detection cycle on rerender (#158)

---
 .../src/lib/testing-library.ts                |  4 ++--
 .../testing-library/tests/rerender.spec.ts    | 23 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts
index 8f4067b5..b347b1de 100644
--- a/projects/testing-library/src/lib/testing-library.ts
+++ b/projects/testing-library/src/lib/testing-library.ts
@@ -1,4 +1,4 @@
-import { Component, Type, NgZone, SimpleChange, OnChanges, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, Component, Type, NgZone, SimpleChange, OnChanges, SimpleChanges } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -117,7 +117,7 @@ export async function render<SutType, WrapperType = SutType>(
       fixture.componentInstance.ngOnChanges(changes);
     }
 
-    detectChanges();
+    fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
   };
 
   const inject = TestBed.inject || TestBed.get;
diff --git a/projects/testing-library/tests/rerender.spec.ts b/projects/testing-library/tests/rerender.spec.ts
index eb15220a..0a1b9c79 100644
--- a/projects/testing-library/tests/rerender.spec.ts
+++ b/projects/testing-library/tests/rerender.spec.ts
@@ -1,4 +1,5 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { screen } from '@testing-library/dom';
 import { render } from '../src/public_api';
 
 @Component({
@@ -50,3 +51,23 @@ test('will call ngOnChanges on rerender', async () => {
   component.getByText(name);
   expect(nameChanged).toBeCalledWith(name, false);
 })
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'fixture-onpush',
+  template: `
+    <div data-testid="number" [class.active]="activeField === 'number'">Number</div>
+  `,
+})
+class FixtureWithOnPushComponent {
+  @Input() activeField: string;
+}
+
+test('update properties on rerender', async () => {
+  const { rerender } = await render(FixtureWithOnPushComponent);
+  const numberHtmlElementRef = screen.queryByTestId('number');
+
+  expect(numberHtmlElementRef).not.toHaveClass('active');
+  rerender({ activeField: 'number' });
+  expect(numberHtmlElementRef).toHaveClass('active');
+})