feat: add userEvent

Author: timdeschryver

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

@@ -292,6 +292,7 @@ function detectChangesForMountedFixtures() {
   mountedFixtures.forEach(fixture => fixture.detectChanges());
 }
 
+// wrap dom-fireEvent with a change detection cycle
 const fireEvent = Object.keys(dtlFireEvent).reduce(
   (events, key) => {
     events[key] = (element: HTMLElement, options?: {}) => {
@@ -306,6 +307,13 @@ const fireEvent = Object.keys(dtlFireEvent).reduce(
 
 const screen = replaceFindWithFindAndDetectChanges(document.body, dtlScreen);
 
+// wrap user-events with the correct fireEvents
+const userEvent = {
+  type: createType(fireEvent),
+  selectOptions: createSelectOptions(fireEvent),
+  tab: tab,
+};
+
 // manually export otherwise we get the following error while running Jest tests
 // TypeError: Cannot set property fireEvent of [object Object] which has only a getter
 // exports.fireEvent = fireEvent;
@@ -382,4 +390,4 @@ export {
   within,
 } from '@testing-library/dom';
 
-export { fireEvent, screen };
+export { fireEvent, screen, userEvent };

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

@@ -1,10 +1,10 @@
 import { ReactiveFormsModule } from '@angular/forms';
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen, fireEvent, userEvent } from '@testing-library/angular';
 
 import { FormsComponent } from './03-forms';
 
 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 () => {
-  const { type, selectOptions } = await render(FormsComponent, {
+  await render(FormsComponent, {
     imports: [ReactiveFormsModule],
   });
 
@@ -18,17 +18,17 @@ test('is possible to fill in a form and verify error messages (with the help of
   expect(errors).toContainElement(screen.queryByText('color is required'));
 
   expect(nameControl).toBeInvalid();
-  type(nameControl, 'Tim');
-  type(scoreControl, '12');
+  userEvent.type(nameControl, 'Tim');
+  userEvent.type(scoreControl, '12');
   fireEvent.blur(scoreControl);
-  selectOptions(colorControl, 'Green');
+  userEvent.selectOptions(colorControl, 'Green');
 
   expect(screen.queryByText('name is required')).not.toBeInTheDocument();
   expect(screen.queryByText('score must be lesser than 10')).toBeInTheDocument();
   expect(screen.queryByText('color is required')).not.toBeInTheDocument();
 
   expect(scoreControl).toBeInvalid();
-  type(scoreControl, 7);
+  userEvent.type(scoreControl, 7);
   fireEvent.blur(scoreControl);
   expect(scoreControl).toBeValid();
 

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

@@ -1,11 +1,11 @@
 import { ReactiveFormsModule } from '@angular/forms';
-import { render, screen } from '@testing-library/angular';
+import { render, screen, userEvent } from '@testing-library/angular';
 
 import { MaterialModule } from '../material.module';
 import { MaterialFormsComponent } from './04-forms-with-material';
 
 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 () => {
-  const { type, selectOptions, fixture } = await render(MaterialFormsComponent, {
+  const { fixture } = await render(MaterialFormsComponent, {
     imports: [ReactiveFormsModule, MaterialModule],
   });
 
@@ -18,16 +18,16 @@ test('is possible to fill in a form and verify error messages (with the help of
   expect(errors).toContainElement(screen.queryByText('score must be greater than 1'));
   expect(errors).toContainElement(screen.queryByText('color is required'));
 
-  type(nameControl, 'Tim');
-  type(scoreControl, 12);
-  selectOptions(colorControl, 'Green');
+  userEvent.type(nameControl, 'Tim');
+  userEvent.type(scoreControl, 12);
+  userEvent.selectOptions(colorControl, 'Green');
 
   expect(screen.queryByText('name is required')).not.toBeInTheDocument();
   expect(screen.queryByText('score must be lesser than 10')).toBeInTheDocument();
   expect(screen.queryByText('color is required')).not.toBeInTheDocument();
 
   expect(scoreControl).toBeInvalid();
-  type(scoreControl, 7);
+  userEvent.type(scoreControl, 7);
   expect(scoreControl).toBeValid();
 
   expect(errors).not.toBeInTheDocument();