Commit a53db0d

authored

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

1 parent c42467d commit a53db0dCopy full SHA for a53db0d

File tree

+24

-3

lines changed

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

+24

-3

lines changed

Lines changed: 2 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Component, Type, NgZone, SimpleChange, OnChanges, SimpleChanges } from '@angular/core';`
	`1`	`+import { ChangeDetectorRef,Component, Type, NgZone, SimpleChange, OnChanges, SimpleChanges } from '@angular/core';`
`2`	`2`	`import { ComponentFixture, TestBed } from '@angular/core/testing';`
`3`	`3`	`import { By } from '@angular/platform-browser';`
`4`	`4`	`import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';`
`@@ -117,7 +117,7 @@ export async function render<SutType, WrapperType = SutType>(`
`117`	`117`	`fixture.componentInstance.ngOnChanges(changes);`
`118`	`118`	`}`
`119`	`119`
`120`		`- detectChanges();`
	`120`	`+ fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();`
`121`	`121`	`};`
`122`	`122`
`123`	`123`	`const inject = TestBed.inject \|\| TestBed.get;`

Lines changed: 22 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`		`-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';`
	`1`	`+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';`
	`2`	`+import { screen } from '@testing-library/dom';`
`2`	`3`	`import { render } from '../src/public_api';`
`3`	`4`
`4`	`5`	`@Component({`
`@@ -50,3 +51,23 @@ test('will call ngOnChanges on rerender', async () => {`
`50`	`51`	`component.getByText(name);`
`51`	`52`	`expect(nameChanged).toBeCalledWith(name, false);`
`52`	`53`	`})`
	`54`	`+`
	`55`	`+@Component({`
	`56`	`+ changeDetection: ChangeDetectionStrategy.OnPush,`
	`57`	`+ selector: 'fixture-onpush',`
	`58`	+ template: `
	`59`	`+ <div data-testid="number" [class.active]="activeField === 'number'">Number</div>`
	`60`	+ `,
	`61`	`+})`
	`62`	`+class FixtureWithOnPushComponent {`
	`63`	`+ @Input() activeField: string;`
	`64`	`+}`
	`65`	`+`
	`66`	`+test('update properties on rerender', async () => {`
	`67`	`+ const { rerender } = await render(FixtureWithOnPushComponent);`
	`68`	`+ const numberHtmlElementRef = screen.queryByTestId('number');`
	`69`	`+`
	`70`	`+ expect(numberHtmlElementRef).not.toHaveClass('active');`
	`71`	`+ rerender({ activeField: 'number' });`
	`72`	`+ expect(numberHtmlElementRef).toHaveClass('active');`
	`73`	`+})`

Comments

(0)