Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8a6fe17

Browse files
GregOnNettimdeschryver
authored andcommitted
feat: add detectChanges function (testing-library#45)
1 parent 3e7f485 commit 8a6fe17

File tree

3 files changed

+58
-7
lines changed

3 files changed

+58
-7
lines changed

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Type } from '@angular/core';
22
import { ComponentFixture } from '@angular/core/testing';
3-
import { FireObject, Queries, queries,BoundFunction } from '@testing-library/dom';
3+
import { BoundFunction,FireObject, Queries, queries } from '@testing-library/dom';
44
import { UserEvents } from './user-events';
55

66
export type RenderResultQueries<Q extends Queries = typeof queries> = { [P in keyof Q]: BoundFunction<Q[P]> };
@@ -21,6 +21,13 @@ export interface RenderResult extends RenderResultQueries, FireObject, UserEvent
2121
* element: The to be printed HTML element, if not provided it will log the whole component's DOM
2222
*/
2323
debug: (element?: HTMLElement) => void;
24+
/**
25+
* @description
26+
* Trigger a change detection cycle for the component.
27+
*
28+
* For more info see https://angular.io/api/core/testing/ComponentFixture#detectChanges
29+
*/
30+
detectChanges: () => void;
2431
/**
2532
* @description
2633
* The Angular `ComponentFixture` of the component.

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { Component, OnInit, ElementRef, Type, DebugElement } from '@angular/core';
1+
import { Component, DebugElement, ElementRef, OnInit, Type } from '@angular/core';
2+
import { ComponentFixture, TestBed } from '@angular/core/testing';
23
import { By } from '@angular/platform-browser';
3-
import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
4-
import { TestBed, ComponentFixture } from '@angular/core/testing';
5-
import { getQueriesForElement, prettyDOM, fireEvent, FireObject, FireFunction } from '@testing-library/dom';
6-
import { RenderResult, RenderOptions } from './models';
7-
import { createType, createSelectOptions } from './user-events';
4+
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
5+
import { fireEvent, FireFunction, FireObject, getQueriesForElement, prettyDOM } from '@testing-library/dom';
6+
import { RenderOptions, RenderResult } from './models';
7+
import { createSelectOptions, createType } from './user-events';
88

99
@Component({ selector: 'wrapper-component', template: '' })
1010
class WrapperComponent implements OnInit {
@@ -84,6 +84,7 @@ export async function render<T>(
8484
fixture,
8585
container: fixture.nativeElement,
8686
debug: (element = fixture.nativeElement) => console.log(prettyDOM(element)),
87+
detectChanges: () => fixture.detectChanges(),
8788
...getQueriesForElement(fixture.nativeElement, queries),
8889
...eventsWithDetectChanges,
8990
type: createType(eventsWithDetectChanges),
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { fakeAsync, tick } from '@angular/core/testing';
3+
import { FormControl, ReactiveFormsModule } from '@angular/forms';
4+
import { delay } from 'rxjs/operators';
5+
import { render } from '../src/public_api';
6+
7+
@Component({
8+
selector: 'fixture',
9+
template: `
10+
<input type="text" data-testid="input" [formControl]="inputControl" />
11+
<button data-testid="button">{{ caption }}</button>
12+
`,
13+
})
14+
class FixtureComponent implements OnInit {
15+
inputControl = new FormControl();
16+
caption = 'Button';
17+
18+
ngOnInit() {
19+
this.inputControl.valueChanges.pipe(delay(400)).subscribe(() => (this.caption = 'Button updated after 400ms'));
20+
}
21+
}
22+
23+
describe('detectChanges', () => {
24+
test('does not recognize change if execution is delayed', async () => {
25+
const { getByTestId, type } = await render(FixtureComponent, { imports: [ReactiveFormsModule] });
26+
27+
type(getByTestId('input'), 'What a great day!');
28+
expect(getByTestId('button').innerHTML).toBe('Button');
29+
});
30+
31+
test('exposes detectChanges triggering a change detection cycle', fakeAsync(async () => {
32+
const { getByTestId, type, detectChanges } = await render(FixtureComponent, {
33+
imports: [ReactiveFormsModule],
34+
});
35+
36+
type(getByTestId('input'), 'What a great day!');
37+
38+
tick(500);
39+
detectChanges();
40+
41+
expect(getByTestId('button').innerHTML).toBe('Button updated after 400ms');
42+
}));
43+
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /