feat: expose firEvent with detectChanges

Author: timdeschryver

package.json

@@ -8,8 +8,8 @@
     "build": "npm run build:library && npm run build:library:jest-utils && npm run build:migrations && npm run build:readme",
     "build:library": "ng build --prod testing-library",
     "build:library:jest-utils": "ng build --prod jest-utils",
-    "build:migrations": "tsc -p ./projects/testing-library/migrations/tsconfig.migrations.json && cp ./projects/testing-library/migrations/migration.json ./dist/@testing-library/angular/migrations",
-    "build:readme": "cp ./README.md ./dist/@testing-library/angular",
+    "build:migrations": "tsc -p ./projects/testing-library/migrations/tsconfig.migrations.json && cpy ./projects/testing-library/migrations/migration.json ./dist/@testing-library/angular/migrations",
+    "build:readme": "cpy ./README.md ./dist/@testing-library/angular",
     "test": "jest --config ./projects/jest.lib.config.js",
     "test:app": "jest --config ./src/jest.app.config.js",
     "precommit": "lint-staged",
@@ -39,7 +39,7 @@
     "@testing-library/user-event": "^8.1.0",
     "core-js": "^3.1.3",
     "rxjs": "^6.5.4",
-    "tslib": "^1.10.0",
+    "tslib": "^1.11.1",
     "tslint": "^5.16.0",
     "zone.js": "~0.10.2"
   },
@@ -53,6 +53,7 @@
     "@types/jest": "~24.0.11",
     "@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",

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

@@ -5,21 +5,20 @@ import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import {
-  fireEvent,
   FireFunction,
   FireObject,
   getQueriesForElement,
   prettyDOM,
   waitFor,
   waitForElementToBeRemoved,
+  fireEvent as dtlFireEvent,
 } 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 mountedContainers = new Set();
+const mountedFixtures = new Set<ComponentFixture<any>>();
 
 export async function render<ComponentType>(
   component: Type<ComponentType>,
@@ -75,9 +74,10 @@ export async function render<SutType, WrapperType = SutType>(
     if (idAttribute && idAttribute.startsWith('root')) {
       fixture.nativeElement.removeAttribute('id');
     }
-    mountedContainers.add(fixture.nativeElement);
   }
 
+  mountedFixtures.add(fixture);
+
   await TestBed.compileComponents();
 
   let isAlive = true;
@@ -93,10 +93,10 @@ export async function render<SutType, WrapperType = SutType>(
     detectChanges();
   }
 
-  const eventsWithDetectChanges = Object.keys(fireEvent).reduce(
+  const eventsWithDetectChanges = Object.keys(dtlFireEvent).reduce(
     (events, key) => {
       events[key] = (element: HTMLElement, options?: {}) => {
-        const result = fireEvent[key](element, options);
+        const result = dtlFireEvent[key](element, options);
         detectChanges();
         return result;
       };
@@ -238,18 +238,36 @@ function addAutoImports({ imports, routes }: Pick<RenderComponentOptions<any>, '
 }
 
 function cleanup() {
-  mountedContainers.forEach(cleanupAtContainer);
+  mountedFixtures.forEach(cleanupAtFixture);
 }
 
-function cleanupAtContainer(container) {
-  if (container.parentNode === document.body) {
-    document.body.removeChild(container);
+function cleanupAtFixture(fixture) {
+  if (!fixture.nativeElement.getAttribute('ng-version') && fixture.nativeElement.parentNode === document.body) {
+    document.body.removeChild(fixture.nativeElement);
   }
-  mountedContainers.delete(container);
+  mountedFixtures.delete(fixture);
 }
 
 if (typeof afterEach === 'function' && !process.env.ATL_SKIP_AUTO_CLEANUP) {
   afterEach(async () => {
     cleanup();
   });
 }
+
+export * from '@testing-library/dom';
+
+const fireEvent = Object.keys(dtlFireEvent).reduce(
+  (events, key) => {
+    events[key] = (element: HTMLElement, options?: {}) => {
+      const result = dtlFireEvent[key](element, options);
+      mountedFixtures.forEach(fixture => {
+        fixture.detectChanges();
+      });
+      return result;
+    };
+    return events;
+  },
+  {} as FireFunction & FireObject,
+);
+
+export { fireEvent };

projects/testing-library/src/public_api.ts

@@ -5,4 +5,3 @@
 export * from './lib/models';
 export * from './lib/testing-library';
 export * from './lib/user-events';
-export * from '@testing-library/dom';

projects/testing-library/tsconfig.lib.json

@@ -3,14 +3,14 @@
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
     "target": "es2015",
-    "module": "es2015",
+    "module": "CommonJS",
     "moduleResolution": "node",
     "declaration": true,
     "sourceMap": true,
     "inlineSources": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "importHelpers": true,
+    "importHelpers": false,
     "types": ["@types/jest", "@types/node"],
     "lib": ["dom", "es2015", "es2018.promise"]
   },

src/app/examples/00-single-component.spec.ts

@@ -1,20 +1,20 @@
-import { render, screen } from '@testing-library/angular';
+import { render, screen, fireEvent } from '@testing-library/angular';
 
 import { SingleComponent } from './00-single-component';
 
 test('renders the current value and can increment and decrement', async () => {
-  const { click } = await render(SingleComponent);
+  await render(SingleComponent);
 
   const incrementControl = screen.getByText('Increment');
   const decrementControl = screen.getByText('Decrement');
   const valueControl = screen.getByTestId('value');
 
   expect(valueControl.textContent).toBe('0');
 
-  click(incrementControl);
-  click(incrementControl);
+  fireEvent.click(incrementControl);
+  fireEvent.click(incrementControl);
   expect(valueControl.textContent).toBe('2');
 
-  click(decrementControl);
+  fireEvent.click(decrementControl);
   expect(valueControl.textContent).toBe('1');
 });

src/app/examples/01-nested-component.spec.ts

@@ -1,9 +1,9 @@
-import { render, screen } from '@testing-library/angular';
+import { render, screen, fireEvent } from '@testing-library/angular';
 
 import { NestedButtonComponent, NestedValueComponent, NestedContainerComponent } from './01-nested-component';
 
 test('renders the current value and can increment and decrement', async () => {
-  const { click } = await render(NestedContainerComponent, {
+  await render(NestedContainerComponent, {
     declarations: [NestedButtonComponent, NestedValueComponent],
   });
 
@@ -13,10 +13,10 @@ test('renders the current value and can increment and decrement', async () => {
 
   expect(valueControl.textContent).toBe('0');
 
-  click(incrementControl);
-  click(incrementControl);
+  fireEvent.click(incrementControl);
+  fireEvent.click(incrementControl);
   expect(valueControl.textContent).toBe('2');
 
-  click(decrementControl);
+  fireEvent.click(decrementControl);
   expect(valueControl.textContent).toBe('1');
 });

src/app/examples/02-input-output.spec.ts

@@ -1,11 +1,11 @@
-import { render, screen } from '@testing-library/angular';
+import { render, screen, fireEvent } from '@testing-library/angular';
 
 import { InputOutputComponent } from './02-input-output';
 
 test('is possible to set input and listen for output', async () => {
   const sendValue = jest.fn();
 
-  const { click } = await render(InputOutputComponent, {
+  await render(InputOutputComponent, {
     componentProperties: {
       value: 47,
       sendValue: {
@@ -20,12 +20,12 @@ test('is possible to set input and listen for output', async () => {
 
   expect(valueControl.textContent).toBe('47');
 
-  click(incrementControl);
-  click(incrementControl);
-  click(incrementControl);
+  fireEvent.click(incrementControl);
+  fireEvent.click(incrementControl);
+  fireEvent.click(incrementControl);
   expect(valueControl.textContent).toBe('50');
 
-  click(sendControl);
+  fireEvent.click(sendControl);
   expect(sendValue).toHaveBeenCalledTimes(1);
   expect(sendValue).toHaveBeenCalledWith(50);
 });

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

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

src/app/examples/05-component-provider.spec.ts

@@ -1,11 +1,11 @@
 import { TestBed } from '@angular/core/testing';
-import { render, screen } from '@testing-library/angular';
+import { render, screen, fireEvent } from '@testing-library/angular';
 import { provideMock, Mock, createMock } from '@testing-library/angular/jest-utils';
 
 import { ComponentWithProviderComponent, CounterService } from './05-component-provider';
 
 test('renders the current value and can increment and decrement', async () => {
-  const { click } = await render(ComponentWithProviderComponent, {
+  await render(ComponentWithProviderComponent, {
     componentProviders: [
       {
         provide: CounterService,
@@ -20,11 +20,11 @@ test('renders the current value and can increment and decrement', async () => {
 
   expect(valueControl.textContent).toBe('0');
 
-  click(incrementControl);
-  click(incrementControl);
+  fireEvent.click(incrementControl);
+  fireEvent.click(incrementControl);
   expect(valueControl.textContent).toBe('2');
 
-  click(decrementControl);
+  fireEvent.click(decrementControl);
   expect(valueControl.textContent).toBe('1');
 });
 
@@ -35,7 +35,7 @@ test('renders the current value and can increment and decrement with a mocked je
   counter.decrement.mockImplementation(() => (fakeCounterValue -= 10));
   counter.value.mockImplementation(() => fakeCounterValue);
 
-  const { click } = await render(ComponentWithProviderComponent, {
+  await render(ComponentWithProviderComponent, {
     componentProviders: [
       {
         provide: CounterService,
@@ -50,25 +50,25 @@ test('renders the current value and can increment and decrement with a mocked je
 
   expect(valueControl.textContent).toBe('50');
 
-  click(incrementControl);
-  click(incrementControl);
+  fireEvent.click(incrementControl);
+  fireEvent.click(incrementControl);
   expect(valueControl.textContent).toBe('70');
 
-  click(decrementControl);
+  fireEvent.click(decrementControl);
   expect(valueControl.textContent).toBe('60');
 });
 
 test('renders the current value and can increment and decrement with provideMocked from jest-utils', async () => {
-  const { click } = await render(ComponentWithProviderComponent, {
+  await render(ComponentWithProviderComponent, {
     componentProviders: [provideMock(CounterService)],
   });
 
   const incrementControl = screen.getByText('Increment');
   const decrementControl = screen.getByText('Decrement');
 
-  click(incrementControl);
-  click(incrementControl);
-  click(decrementControl);
+  fireEvent.click(incrementControl);
+  fireEvent.click(incrementControl);
+  fireEvent.click(decrementControl);
 
   const counterService = TestBed.inject(CounterService) as Mock<CounterService>;
   expect(counterService.increment).toHaveBeenCalledTimes(2);

src/app/examples/06-with-ngrx-store.spec.ts

@@ -1,10 +1,10 @@
-import { render, screen } from '@testing-library/angular';
+import { render, screen, fireEvent } from '@testing-library/angular';
 import { StoreModule } from '@ngrx/store';
 
 import { WithNgRxStoreComponent, reducer } from './06-with-ngrx-store';
 
 test('works with ngrx store', async () => {
-  const { click } = await render(WithNgRxStoreComponent, {
+  await render(WithNgRxStoreComponent, {
     imports: [
       StoreModule.forRoot(
         {
@@ -23,10 +23,10 @@ test('works with ngrx store', async () => {
 
   expect(valueControl.textContent).toBe('0');
 
-  click(incrementControl);
-  click(incrementControl);
+  fireEvent.click(incrementControl);
+  fireEvent.click(incrementControl);
   expect(valueControl.textContent).toBe('20');
 
-  click(decrementControl);
+  fireEvent.click(decrementControl);
   expect(valueControl.textContent).toBe('10');
 });

src/app/examples/07-with-ngrx-mock-store.spec.ts

@@ -1,12 +1,11 @@
 import { TestBed } from '@angular/core/testing';
-import { Store } from '@ngrx/store';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
-import { render, screen } from '@testing-library/angular';
+import { render, screen, fireEvent } from '@testing-library/angular';
 
 import { WithNgRxMockStoreComponent, selectItems } from './07-with-ngrx-mock-store';
 
 test('works with provideMockStore', async () => {
-  const { click } = await render(WithNgRxMockStoreComponent, {
+  await render(WithNgRxMockStoreComponent, {
     providers: [
       provideMockStore({
         selectors: [
@@ -23,7 +22,7 @@ test('works with provideMockStore', async () => {
   store.dispatch = jest.fn();
 
   screen.getByText('Four');
-  click(screen.getByText('Seven'));
+  fireEvent.click(screen.getByText('Seven'));
 
   expect(store.dispatch).toBeCalledWith({ type: '[Item List] send', item: 'Seven' });
 });