feat: add imports option to configure

Author: timdeschryver

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

@@ -1,7 +1,15 @@
 import { Type, DebugElement } from '@angular/core';
 import { ComponentFixture } from '@angular/core/testing';
 import { Routes } from '@angular/router';
-import { BoundFunction, FireObject, Queries, queries, waitFor, waitForElementToBeRemoved } from '@testing-library/dom';
+import {
+  BoundFunction,
+  FireObject,
+  Queries,
+  queries,
+  waitFor,
+  waitForElementToBeRemoved,
+  Config as dtlConfig,
+} from '@testing-library/dom';
 import { UserEvents } from './user-events';
 import { OptionsReceived } from 'pretty-format';
 
@@ -304,3 +312,5 @@ export interface RenderDirectiveOptions<DirectiveType, WrapperType, Q extends Qu
   wrapper?: Type<WrapperType>;
   componentProperties?: Partial<any>;
 }
+
+export type Config = dtlConfig & { defaultImports: any[] };

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

@@ -16,8 +16,10 @@ import {
   queries as dtlQueries,
   waitForOptions as dtlWaitForOptions,
   configure as dtlConfigure,
+  getConfig as dtlGetConfig,
+  Config as dtlConfig,
 } from '@testing-library/dom';
-import { RenderComponentOptions, RenderDirectiveOptions, RenderResult } from './models';
+import { RenderComponentOptions, RenderDirectiveOptions, RenderResult, Config } from './models';
 import { createSelectOptions, createType, tab } from './user-events';
 
 const mountedFixtures = new Set<ComponentFixture<any>>();
@@ -59,9 +61,11 @@ export async function render<SutType, WrapperType = SutType>(
     removeAngularAttributes = false,
   } = renderOptions as RenderDirectiveOptions<SutType, WrapperType>;
 
+  const config = dtlGetConfig();
+
   TestBed.configureTestingModule({
     declarations: addAutoDeclarations(sut, { declarations, excludeComponentDeclaration, template, wrapper }),
-    imports: addAutoImports({ imports, routes }),
+    imports: addAutoImports({ imports: imports.concat((config as Config).defaultImports || []), routes }),
     providers: [...providers],
     schemas: [...schemas],
   });
@@ -102,7 +106,7 @@ export async function render<SutType, WrapperType = SutType>(
   // Call ngOnChanges on initial render
   if (hasOnChangesHook(fixture.componentInstance)) {
     const changes = getChangesObj(null, fixture.componentInstance);
-    fixture.componentInstance.ngOnChanges(changes)
+    fixture.componentInstance.ngOnChanges(changes);
   }
 
   if (detectChangesOnRender) {
@@ -224,20 +228,21 @@ function setComponentProperties<SutType>(
 }
 
 function hasOnChangesHook<SutType>(componentInstance: SutType): componentInstance is SutType & OnChanges {
-  return 'ngOnChanges' in componentInstance
-    && typeof (componentInstance as SutType & OnChanges).ngOnChanges === 'function';
-};
+  return (
+    'ngOnChanges' in componentInstance && typeof (componentInstance as SutType & OnChanges).ngOnChanges === 'function'
+  );
+}
 
-function getChangesObj<SutType>(
-  oldProps: Partial<SutType> | null,
-  newProps: Partial<SutType>
-) {
+function getChangesObj<SutType>(oldProps: Partial<SutType> | null, newProps: Partial<SutType>) {
   const isFirstChange = oldProps === null;
-  return Object.keys(newProps).reduce<SimpleChanges>((changes, key) => ({
-    ...changes,
-    [key]: new SimpleChange(isFirstChange ? null : oldProps[key], newProps[key], isFirstChange)
-  }), {});
-};
+  return Object.keys(newProps).reduce<SimpleChanges>(
+    (changes, key) => ({
+      ...changes,
+      [key]: new SimpleChange(isFirstChange ? null : oldProps[key], newProps[key], isFirstChange),
+    }),
+    {},
+  );
+}
 
 function addAutoDeclarations<SutType>(
   component: Type<SutType>,
@@ -418,14 +423,19 @@ const userEvent = {
   tab: tab,
 };
 
+function configure(config: Partial<Config>) {
+  dtlConfigure({
+    defaultImports: config.defaultImports,
+  } as Partial<dtlConfig>);
+}
+
 /**
  * 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
  */
 export {
   buildQueries,
-  configure,
   getByLabelText,
   getAllByLabelText,
   queryByLabelText,
@@ -491,4 +501,4 @@ export {
   within,
 } from '@testing-library/dom';
 
-export { fireEvent, screen, userEvent, waitFor, waitForElementToBeRemoved };
+export { configure, fireEvent, screen, userEvent, waitFor, waitForElementToBeRemoved };

projects/testing-library/tests/render.spec.ts

@@ -1,7 +1,8 @@
 import { Component, NgModule, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TestBed } from '@angular/core/testing';
-import { render } from '../src/public_api';
+import { render, configure } from '../src/public_api';
+import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'fixture',
@@ -40,20 +41,20 @@ describe('removeAngularAttributes', () => {
   });
 });
 
-@NgModule({
-  declarations: [FixtureComponent],
-})
-export class FixtureModule {}
-describe('excludeComponentDeclaration', () => {
-  test('will throw if component is declared in an import', async () => {
-    await render(FixtureComponent, {
-      imports: [FixtureModule],
-      excludeComponentDeclaration: true,
+describe('animationModule', () => {
+  @NgModule({
+    declarations: [FixtureComponent],
+  })
+  class FixtureModule {}
+  describe('excludeComponentDeclaration', () => {
+    test('will throw if component is declared in an import', async () => {
+      await render(FixtureComponent, {
+        imports: [FixtureModule],
+        excludeComponentDeclaration: true,
+      });
     });
   });
-});
 
-describe('animationModule', () => {
   test('adds NoopAnimationsModule by default', async () => {
     await render(FixtureComponent);
     const noopAnimationsModule = TestBed.inject(NoopAnimationsModule);
@@ -72,28 +73,29 @@ describe('animationModule', () => {
   });
 });
 
-@Component({
-  selector: 'fixture',
-  template: ` {{ name }} `,
-})
-class FixtureWithNgOnChangesComponent implements OnInit, OnChanges {
-  @Input() name = 'Sarah';
-  @Input() nameInitialized?: (name: string) => void;
-  @Input() nameChanged?: (name: string, isFirstChange: boolean) => void;
-
-  ngOnInit() {
-    if (this.nameInitialized) {
-      this.nameInitialized(this.name);
+describe('Angular component life-cycle hooks', () => {
+  @Component({
+    selector: 'fixture',
+    template: ` {{ name }} `,
+  })
+  class FixtureWithNgOnChangesComponent implements OnInit, OnChanges {
+    @Input() name = 'Sarah';
+    @Input() nameInitialized?: (name: string) => void;
+    @Input() nameChanged?: (name: string, isFirstChange: boolean) => void;
+
+    ngOnInit() {
+      if (this.nameInitialized) {
+        this.nameInitialized(this.name);
+      }
     }
-  }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.name && this.nameChanged) {
-      this.nameChanged(changes.name.currentValue, changes.name.isFirstChange());
+    ngOnChanges(changes: SimpleChanges) {
+      if (changes.name && this.nameChanged) {
+        this.nameChanged(changes.name.currentValue, changes.name.isFirstChange());
+      }
     }
   }
-}
-describe('Angular component life-cycle hooks', () => {
+
   test('will call ngOnInit on initial render', async () => {
     const nameInitialized = jest.fn();
     const componentProperties = { nameInitialized };
@@ -115,3 +117,37 @@ describe('Angular component life-cycle hooks', () => {
     expect(nameChanged.mock.invocationCallOrder[0]).toBeLessThan(nameInitialized.mock.invocationCallOrder[0]);
   });
 });
+
+describe('configure: default imports', () => {
+  @Component({
+    selector: 'app-fixture',
+    template: `
+      <form [formGroup]="form" name="form">
+        <div>
+          <label for="name">Name</label>
+          <input type="text" id="name" name="name" formControlName="name" />
+        </div>
+      </form>
+    `,
+  })
+  class FormsComponent {
+    form = this.formBuilder.group({
+      name: [''],
+    });
+
+    constructor(private formBuilder: FormBuilder) {}
+  }
+
+  beforeEach(() => {
+    configure({
+      defaultImports: [ReactiveFormsModule],
+    });
+  });
+
+  test('adds default imports to the testbed', async () => {
+    await render(FormsComponent);
+
+    const reactive = TestBed.inject(ReactiveFormsModule);
+    expect(reactive).not.toBeNull();
+  });
+});

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

@@ -1,13 +1,10 @@
-import { ReactiveFormsModule } from '@angular/forms';
 import { render, screen, fireEvent } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
 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 () => {
-  await render(FormsComponent, {
-    imports: [ReactiveFormsModule],
-  });
+  await render(FormsComponent);
 
   const nameControl = screen.getByRole('textbox', { name: /name/i });
   const scoreControl = screen.getByRole('spinbutton', { name: /score/i });

src/app/examples/03-forms.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormBuilder, Validators, ReactiveFormsModule, ValidationErrors } from '@angular/forms';
+import { FormBuilder, Validators, ValidationErrors } from '@angular/forms';
 
 @Component({
   selector: 'app-fixture',

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

@@ -1,4 +1,3 @@
-import { ReactiveFormsModule } from '@angular/forms';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
@@ -7,7 +6,7 @@ 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 { fixture } = await render(MaterialFormsComponent, {
-    imports: [ReactiveFormsModule, MaterialModule],
+    imports: [MaterialModule],
   });
 
   const nameControl = screen.getByLabelText(/name/i);

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormBuilder, Validators, ReactiveFormsModule, ValidationErrors } from '@angular/forms';
+import { FormBuilder, Validators, ValidationErrors } from '@angular/forms';
 
 @Component({
   selector: 'app-fixture',

test.ts

@@ -1,2 +1,10 @@
 import 'jest-preset-angular';
 import '@testing-library/jest-dom';
+import { configure } from '@testing-library/angular';
+import { ReactiveFormsModule } from '@angular/forms';
+
+beforeEach(() => {
+  configure({
+    defaultImports: [ReactiveFormsModule],
+  });
+});