fix: trigger change detection cycle on rerender (#158)

testing-library · Nov 5, 2020 · a53db0d · a53db0d
1 parent c42467d
commit a53db0d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git 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
@@ -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');
+})