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 03f566c

Browse files
feat: add userEvent
1 parent 0438b77 commit 03f566c

File tree

3 files changed

+21
-13
lines changed

3 files changed

+21
-13
lines changed

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -292,6 +292,7 @@ function detectChangesForMountedFixtures() {
292292
mountedFixtures.forEach(fixture => fixture.detectChanges());
293293
}
294294

295+
// wrap dom-fireEvent with a change detection cycle
295296
const fireEvent = Object.keys(dtlFireEvent).reduce(
296297
(events, key) => {
297298
events[key] = (element: HTMLElement, options?: {}) => {
@@ -306,6 +307,13 @@ const fireEvent = Object.keys(dtlFireEvent).reduce(
306307

307308
const screen = replaceFindWithFindAndDetectChanges(document.body, dtlScreen);
308309

310+
// wrap user-events with the correct fireEvents
311+
const userEvent = {
312+
type: createType(fireEvent),
313+
selectOptions: createSelectOptions(fireEvent),
314+
tab: tab,
315+
};
316+
309317
// manually export otherwise we get the following error while running Jest tests
310318
// TypeError: Cannot set property fireEvent of [object Object] which has only a getter
311319
// exports.fireEvent = fireEvent;
@@ -382,4 +390,4 @@ export {
382390
within,
383391
} from '@testing-library/dom';
384392

385-
export { fireEvent, screen };
393+
export { fireEvent, screen,userEvent };

‎src/app/examples/03-forms.spec.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { ReactiveFormsModule } from '@angular/forms';
2-
import { render, screen, fireEvent } from '@testing-library/angular';
2+
import { render, screen, fireEvent,userEvent } from '@testing-library/angular';
33

44
import { FormsComponent } from './03-forms';
55

66
test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => {
7-
const{ type, selectOptions }=await render(FormsComponent, {
7+
await render(FormsComponent, {
88
imports: [ReactiveFormsModule],
99
});
1010

@@ -18,17 +18,17 @@ test('is possible to fill in a form and verify error messages (with the help of
1818
expect(errors).toContainElement(screen.queryByText('color is required'));
1919

2020
expect(nameControl).toBeInvalid();
21-
type(nameControl, 'Tim');
22-
type(scoreControl, '12');
21+
userEvent.type(nameControl, 'Tim');
22+
userEvent.type(scoreControl, '12');
2323
fireEvent.blur(scoreControl);
24-
selectOptions(colorControl, 'Green');
24+
userEvent.selectOptions(colorControl, 'Green');
2525

2626
expect(screen.queryByText('name is required')).not.toBeInTheDocument();
2727
expect(screen.queryByText('score must be lesser than 10')).toBeInTheDocument();
2828
expect(screen.queryByText('color is required')).not.toBeInTheDocument();
2929

3030
expect(scoreControl).toBeInvalid();
31-
type(scoreControl, 7);
31+
userEvent.type(scoreControl, 7);
3232
fireEvent.blur(scoreControl);
3333
expect(scoreControl).toBeValid();
3434

‎src/app/examples/04-forms-with-material.spec.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { ReactiveFormsModule } from '@angular/forms';
2-
import { render, screen } from '@testing-library/angular';
2+
import { render, screen,userEvent } from '@testing-library/angular';
33

44
import { MaterialModule } from '../material.module';
55
import { MaterialFormsComponent } from './04-forms-with-material';
66

77
test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => {
8-
const { type, selectOptions,fixture } = await render(MaterialFormsComponent, {
8+
const { fixture } = await render(MaterialFormsComponent, {
99
imports: [ReactiveFormsModule, MaterialModule],
1010
});
1111

@@ -18,16 +18,16 @@ test('is possible to fill in a form and verify error messages (with the help of
1818
expect(errors).toContainElement(screen.queryByText('score must be greater than 1'));
1919
expect(errors).toContainElement(screen.queryByText('color is required'));
2020

21-
type(nameControl, 'Tim');
22-
type(scoreControl, 12);
23-
selectOptions(colorControl, 'Green');
21+
userEvent.type(nameControl, 'Tim');
22+
userEvent.type(scoreControl, 12);
23+
userEvent.selectOptions(colorControl, 'Green');
2424

2525
expect(screen.queryByText('name is required')).not.toBeInTheDocument();
2626
expect(screen.queryByText('score must be lesser than 10')).toBeInTheDocument();
2727
expect(screen.queryByText('color is required')).not.toBeInTheDocument();
2828

2929
expect(scoreControl).toBeInvalid();
30-
type(scoreControl, 7);
30+
userEvent.type(scoreControl, 7);
3131
expect(scoreControl).toBeValid();
3232

3333
expect(errors).not.toBeInTheDocument();

0 commit comments

Comments
(0)

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