fix: configure fireEvent to run a change detection cycle

Deprecate custom userEvent methods in favor of @testing-library/user-event

Author: timdeschryver

jest.base.config.js

@@ -2,20 +2,10 @@ module.exports = {
   preset: 'jest-preset-angular',
   rootDir: '../',
   setupFilesAfterEnv: ['<rootDir>/test.ts'],
-  testURL: 'http://localhost',
-  globals: {
-    'ts-jest': {
-      tsConfig: './tsconfig.spec.json',
-      stringifyContentPathRegex: '\\.html$',
-      astTransformers: [require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')],
-    },
-  },
-  transform: {
-    '^.+\\.(ts|js|html)$': 'ts-jest',
-  },
   transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
   snapshotSerializers: [
-    'jest-preset-angular/AngularSnapshotSerializer.js',
-    'jest-preset-angular/HTMLCommentSerializer.js',
+    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
+    'jest-preset-angular/build/AngularSnapshotSerializer.js',
+    'jest-preset-angular/build/HTMLCommentSerializer.js',
   ],
 };

package.json

@@ -35,8 +35,8 @@
     "@angular/router": "^9.0.3",
     "@ngrx/store": "^9.0.0-rc.0",
     "@phenomnomnominal/tsquery": "^3.0.0",
-    "@testing-library/dom": "^7.7.3",
-    "@testing-library/user-event": "^8.1.0",
+    "@testing-library/dom": "^7.9.0",
+    "@testing-library/user-event": "^11.0.0",
     "core-js": "^3.1.3",
     "rxjs": "^6.5.4",
     "tslib": "^1.11.1",
@@ -50,13 +50,13 @@
     "@angular/compiler-cli": "^9.0.3",
     "@angular/language-service": "^9.0.3",
     "@testing-library/jest-dom": "^4.1.0",
-    "@types/jest": "~24.0.11",
+    "@types/jest": "~25.2.3",
     "@types/node": "^13.7.6",
     "codelyzer": "^5.1.2",
     "cpy-cli": "^3.1.0",
     "husky": "^2.3.0",
-    "jest": "^24.1.0",
-    "jest-preset-angular": "^7.1.1",
+    "jest": "^26.0.1",
+    "jest-preset-angular": "^8.2.0",
     "lint-staged": "^8.1.7",
     "ng-packagr": "^9.0.0",
     "prettier": "^1.17.1",

projects/testing-library/package.json

@@ -29,7 +29,7 @@
     "@angular/core": "^9.0.0"
   },
   "dependencies": {
-    "@testing-library/dom": "^7.7.3",
+    "@testing-library/dom": "^7.9.0",
     "@testing-library/user-event": "^8.1.0",
     "@phenomnomnominal/tsquery": "^3.0.0",
     "tslint": "^5.16.0"

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

@@ -7,23 +7,29 @@ import { RouterTestingModule } from '@angular/router/testing';
 import {
   FireFunction,
   FireObject,
-  getQueriesForElement,
-  prettyDOM,
+  getQueriesForElement as dtlGetQueriesForElement,
+  prettyDOM as dtlPrettyDOM,
   waitFor as dtlWaitFor,
   waitForElementToBeRemoved as dtlWaitForElementToBeRemoved,
   fireEvent as dtlFireEvent,
   screen as dtlScreen,
   queries as dtlQueries,
-  waitForOptions,
+  waitForOptions as dtlWaitForOptions,
+  configure as dtlConfigure,
 } from '@testing-library/dom';
 import { RenderComponentOptions, RenderDirectiveOptions, RenderResult } from './models';
 import { createSelectOptions, createType, tab } from './user-events';
 
-@Component({ selector: 'wrapper-component', template: '' })
-class WrapperComponent {}
-
 const mountedFixtures = new Set<ComponentFixture<any>>();
 
+dtlConfigure({
+  eventWrapper: cb => {
+    const result = cb();
+    detectChangesForMountedFixtures();
+    return result;
+  },
+});
+
 export async function render<ComponentType>(
   component: Type<ComponentType>,
   renderOptions?: RenderComponentOptions<ComponentType>,
@@ -148,13 +154,16 @@ export async function render<SutType, WrapperType = SutType>(
     return result;
   };
 
-  function componentWaitFor<T>(callback, options: waitForOptions = { container: fixture.nativeElement }): Promise<T> {
+  function componentWaitFor<T>(
+    callback,
+    options: dtlWaitForOptions = { container: fixture.nativeElement },
+  ): Promise<T> {
     return waitForWrapper(detectChanges, callback, options);
   }
 
   function componentWaitForElementToBeRemoved<T>(
     callback: (() => T) | T,
-    options: waitForOptions = { container: fixture.nativeElement },
+    options: dtlWaitForOptions = { container: fixture.nativeElement },
   ): Promise<T> {
     return waitForElementToBeRemovedWrapper(detectChanges, callback, options);
   }
@@ -168,14 +177,17 @@ export async function render<SutType, WrapperType = SutType>(
     container: fixture.nativeElement,
     debug: (element = fixture.nativeElement, maxLength, options) =>
       Array.isArray(element)
-        ? element.forEach(e => console.log(prettyDOM(e, maxLength, options)))
-        : console.log(prettyDOM(element, maxLength, options)),
+        ? element.forEach(e => console.log(dtlPrettyDOM(e, maxLength, options)))
+        : console.log(dtlPrettyDOM(element, maxLength, options)),
     type: createType(eventsWithDetectChanges),
     selectOptions: createSelectOptions(eventsWithDetectChanges),
     tab,
     waitFor: componentWaitFor,
     waitForElementToBeRemoved: componentWaitForElementToBeRemoved,
-    ...replaceFindWithFindAndDetectChanges(fixture.nativeElement, getQueriesForElement(fixture.nativeElement, queries)),
+    ...replaceFindWithFindAndDetectChanges(
+      fixture.nativeElement,
+      dtlGetQueriesForElement(fixture.nativeElement, queries),
+    ),
     ...eventsWithDetectChanges,
   };
 }
@@ -244,7 +256,7 @@ function addAutoImports({ imports, routes }: Pick<RenderComponentOptions<any>, '
 async function waitForWrapper<T>(
   detectChanges: () => void,
   callback: () => T extends Promise<any> ? never : T,
-  options?: waitForOptions,
+  options?: dtlWaitForOptions,
 ): Promise<T> {
   return await dtlWaitFor(() => {
     detectChanges();
@@ -258,7 +270,7 @@ async function waitForWrapper<T>(
 async function waitForElementToBeRemovedWrapper<T>(
   detectChanges: () => void,
   callback: (() => T) | T,
-  options?: waitForOptions,
+  options?: dtlWaitForOptions,
 ): Promise<T> {
   let cb;
   if (typeof callback !== 'function') {
@@ -298,6 +310,9 @@ if (typeof afterEach === 'function' && !process.env.ATL_SKIP_AUTO_CLEANUP) {
   });
 }
 
+@Component({ selector: 'wrapper-component', template: '' })
+class WrapperComponent {}
+
 /**
  * Wrap findBy queries to poke the Angular change detection cycle
  */
@@ -355,14 +370,14 @@ const screen = replaceFindWithFindAndDetectChanges(document.body, dtlScreen);
 /**
  * Re-export waitFor with patched waitFor
  */
-async function waitFor<T>(callback: () => T extends Promise<any> ? never : T, options?: waitForOptions): Promise<T> {
+async function waitFor<T>(callback: () => T extends Promise<any> ? never : T, options?: dtlWaitForOptions): Promise<T> {
   return waitForWrapper(detectChangesForMountedFixtures, callback, options);
 }
 
 /**
  * Re-export waitForElementToBeRemoved with patched waitForElementToBeRemoved
  */
-async function waitForElementToBeRemoved<T>(callback: (() => T) | T, options?: waitForOptions): Promise<T> {
+async function waitForElementToBeRemoved<T>(callback: (() => T) | T, options?: dtlWaitForOptions): Promise<T> {
   return waitForElementToBeRemovedWrapper(detectChangesForMountedFixtures, callback, options);
 }
 

projects/testing-library/src/lib/user-events/index.ts

@@ -4,6 +4,9 @@ import { tab } from './tab';
 
 export interface UserEvents {
   /**
+   * @deprecated
+   * Use `userEvents.type` from @testing-library/user-event
+   *
    * @description
    * Types a value in an input field with the same interactions as the user would do.
    *
@@ -19,6 +22,9 @@ export interface UserEvents {
   type: ReturnType<typeof createType>;
 
   /**
+   * @deprecated
+   * Use `userEvents.selectOptions` from @testing-library/user-event
+   *
    * @description
    * Select an option(s) from a select field with the same interactions as the user would do.
    *
@@ -33,6 +39,9 @@ export interface UserEvents {
   selectOptions: ReturnType<typeof createSelectOptions>;
 
   /**
+   * @deprecated
+   * Use `userEvents.tab` from @testing-library/user-event
+   *
    * @description
    * Fires a tab event changing the document.activeElement in the same way the browser does.
    *

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

@@ -1,5 +1,6 @@
 import { ReactiveFormsModule } from '@angular/forms';
-import { render, screen, fireEvent, userEvent } from '@testing-library/angular';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
 
 import { FormsComponent } from './03-forms';
 
@@ -19,16 +20,18 @@ test('is possible to fill in a form and verify error messages (with the help of
 
   expect(nameControl).toBeInvalid();
   userEvent.type(nameControl, 'Tim');
+  userEvent.clear(scoreControl);
   userEvent.type(scoreControl, '12');
   fireEvent.blur(scoreControl);
-  userEvent.selectOptions(colorControl, 'Green');
+  userEvent.selectOptions(colorControl, 'G');
 
   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();
-  userEvent.type(scoreControl, 7);
+  userEvent.clear(scoreControl);
+  userEvent.type(scoreControl, '7');
   fireEvent.blur(scoreControl);
   expect(scoreControl).toBeValid();
 

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

@@ -1,5 +1,6 @@
 import { ReactiveFormsModule } from '@angular/forms';
-import { render, screen, userEvent } from '@testing-library/angular';
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
 
 import { MaterialModule } from '../material.module';
 import { MaterialFormsComponent } from './04-forms-with-material';
@@ -19,15 +20,18 @@ test('is possible to fill in a form and verify error messages (with the help of
   expect(errors).toContainElement(screen.queryByText('color is required'));
 
   userEvent.type(nameControl, 'Tim');
-  userEvent.type(scoreControl, 12);
-  userEvent.selectOptions(colorControl, 'Green');
+  userEvent.clear(scoreControl);
+  userEvent.type(scoreControl, '12');
+  userEvent.click(colorControl);
+  userEvent.click(screen.getByText(/green/i));
 
   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();
-  userEvent.type(scoreControl, 7);
+  userEvent.clear(scoreControl);
+  userEvent.type(scoreControl, '7');
   expect(scoreControl).toBeValid();
 
   expect(errors).not.toBeInTheDocument();

tslint.json

@@ -42,7 +42,7 @@
     "no-trailing-whitespace": true,
     "no-unnecessary-initializer": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
+    "no-use-before-declare": false,
     "no-var-keyword": true,
     "object-literal-sort-keys": false,
     "one-line": [true, "check-open-brace", "check-catch", "check-else", "check-whitespace"],