fix: fireEvent runs a change detection cycle (#104)

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',
   ],
 };

lint-staged.config.js

@@ -0,0 +1 @@
+module.exports = { '*.{ts,json,md}': ['prettier --write', 'git add'] };

package.json

@@ -16,12 +16,6 @@
     "lint": "ng lint",
     "semantic-release": "semantic-release"
   },
-  "lint-staged": {
-    "*.{ts,json,md}": [
-      "prettier --write",
-      "git add"
-    ]
-  },
   "dependencies": {
     "@angular/animations": "^9.0.3",
     "@angular/cdk": "^9.1.0",
@@ -35,8 +29,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",
@@ -49,20 +43,21 @@
     "@angular/cli": "~9.0.3",
     "@angular/compiler-cli": "^9.0.3",
     "@angular/language-service": "^9.0.3",
-    "@testing-library/jest-dom": "^4.1.0",
+    "@testing-library/jest-dom": "^5.9.0",
     "@types/jest": "~24.0.11",
-    "@types/node": "^13.7.6",
+    "@types/node": "^14.0.11",
     "codelyzer": "^5.1.2",
     "cpy-cli": "^3.1.0",
-    "husky": "^2.3.0",
-    "jest": "^24.1.0",
-    "jest-preset-angular": "^7.1.1",
-    "lint-staged": "^8.1.7",
+    "husky": "^4.2.5",
+    "jest": "^25.5.4",
+    "jest-preset-angular": "^8.2.0",
+    "lint-staged": "^10.2.9",
     "ng-packagr": "^9.0.0",
-    "prettier": "^1.17.1",
-    "rimraf": "^2.6.3",
+    "prettier": "^2.0.5",
+    "rimraf": "^3.0.2",
     "semantic-release": "^17.0.2",
-    "ts-node": "~8.2.0",
+    "ts-jest": "^26.1.0",
+    "ts-node": "~8.10.2",
     "typescript": "~3.7.5"
   }
 }

projects/testing-library/migrations/4_0_0/rules/noComponentPropertyRule.ts

@@ -10,9 +10,9 @@ const FAILURE_MESSAGE = 'Found component propety syntax, signature looks differe
 
 export class Rule extends Rules.AbstractRule {
   public apply(ast: ts.SourceFile): Array<RuleFailure> {
-    return tsquery(ast, IS_COMPONENT_PROPERTY_QUERY).map(result => {
+    return tsquery(ast, IS_COMPONENT_PROPERTY_QUERY).map((result) => {
       const [valueNode] = tsquery(result, COMPONENT_PROPERTY_VALUE_QUERY);
-      const replacement = new Replacement(result.getStart(), result.getWidth(), (valueNode || result).text);
+      const replacement = new Replacement(result.getStart(), result.getWidth(), (valueNode || result).getText());
       const start = result.getStart();
       const end = result.getEnd();
 

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/models.ts

@@ -63,13 +63,19 @@ export interface RenderResult<ComponentType, WrapperType = ComponentType>
    */
   rerender: (componentProperties: Partial<ComponentType>) => void;
   /**
+   * @deprecated
+   * Usage of `waitForElementToBeRemoved` from render is deprecated, use this method directly from `@testing-library/angular`
+   *
    * @description
    * Wait for the removal of element(s) from the DOM.
    *
    * For more info see https://testing-library.com/docs/dom-testing-library/api-async#waitforelementtoberemoved
    */
   waitForElementToBeRemoved: typeof waitForElementToBeRemoved;
   /**
+   * @deprecated
+   * Usage of `waitFor` from render is deprecated, use this method directly from `@testing-library/angular`
+   *
    * @description
    * When in need to wait for any period of time you can use waitFor, to wait for your expectations to pass.
    *

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
  */
@@ -329,7 +344,15 @@ function replaceFindWithFindAndDetectChanges<T>(container: HTMLElement, original
  * Call detectChanges for all fixtures
  */
 function detectChangesForMountedFixtures() {
-  mountedFixtures.forEach(fixture => fixture.detectChanges());
+  mountedFixtures.forEach(fixture => {
+    try {
+      fixture.detectChanges();
+    } catch (err) {
+      if (!err.message.startsWith('ViewDestroyedError')) {
+        throw err;
+      }
+    }
+  });
 }
 
 /**
@@ -355,14 +378,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();