feat: support standalone components (#297)

BREAKING CHANGE:

This version requires Angular v14+

Author: jadengis

apps/example-app/src/app/examples/03-forms.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-fixture',
@@ -41,7 +41,7 @@ export class FormsComponent {
     color: ['', Validators.required],
   });
 
-  constructor(private formBuilder: FormBuilder) {}
+  constructor(private formBuilder: UntypedFormBuilder) {}
 
   get formErrors() {
     return Object.keys(this.form.controls)

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-fixture',
@@ -66,7 +66,7 @@ export class MaterialFormsComponent {
     color: [null, Validators.required],
   });
 
-  constructor(private formBuilder: FormBuilder) {}
+  constructor(private formBuilder: UntypedFormBuilder) {}
 
   get colorControlDisplayValue(): string | undefined {
     const selectedId = this.form.get('color')?.value;

apps/example-app/src/app/examples/19-standalone-component.spec.ts

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/angular';
+import { StandaloneComponent, StandaloneWithChildComponent } from './19-standalone-component';
+
+test('is possible to render a standalone component', async () => {
+  await render(StandaloneComponent);
+
+  const content = screen.getByTestId('standalone');
+
+  expect(content).toHaveTextContent('Standalone Component');
+});
+
+test('is possibl to render a standalone component with a child', async () => {
+  await render(StandaloneWithChildComponent, {
+    componentProperties: { name: 'Bob' },
+  });
+
+  const childContent = screen.getByTestId('standalone');
+  expect(childContent).toHaveTextContent('Standalone Component');
+
+  expect(screen.getByText('Hi Bob')).toBeInTheDocument();
+  expect(screen.getByText('This has a child')).toBeInTheDocument();
+});

apps/example-app/src/app/examples/19-standalone-component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-standalone',
+  template: `<div data-testid="standalone">Standalone Component</div>`,
+  standalone: true,
+})
+export class StandaloneComponent { }
+
+@Component({
+  selector: 'app-standalone-with-child',
+  template: `<h1>Hi {{ name }}</h1>
+    <p>This has a child</p>
+    <app-standalone></app-standalone> `,
+  standalone: true,
+  imports: [StandaloneComponent],
+})
+export class StandaloneWithChildComponent {
+  @Input()
+  name?: string;
+}

package.json

@@ -28,16 +28,16 @@
     "prepare": "git config core.hookspath .githooks"
   },
   "dependencies": {
-    "@angular/animations": "13.1.1",
-    "@angular/cdk": "13.1.1",
-    "@angular/common": "13.1.1",
-    "@angular/compiler": "13.1.1",
-    "@angular/core": "13.1.1",
-    "@angular/material": "13.1.1",
-    "@angular/platform-browser": "13.1.1",
-    "@angular/platform-browser-dynamic": "13.1.1",
-    "@angular/router": "13.1.1",
-    "@ngrx/store": "13.0.2",
+    "@angular/animations": "14.0.0",
+    "@angular/cdk": "14.0.0",
+    "@angular/common": "14.0.0",
+    "@angular/compiler": "14.0.0",
+    "@angular/core": "14.0.0",
+    "@angular/material": "14.0.0",
+    "@angular/platform-browser": "14.0.0",
+    "@angular/platform-browser-dynamic": "14.0.0",
+    "@angular/router": "14.0.0",
+    "@ngrx/store": "14.0.0-beta.0",
     "@nrwl/angular": "13.4.3",
     "@nrwl/nx-cloud": "13.0.2",
     "@testing-library/dom": "^8.11.1",
@@ -46,14 +46,14 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "13.1.2",
+    "@angular-devkit/build-angular": "14.0.0",
     "@angular-eslint/eslint-plugin": "13.0.1",
     "@angular-eslint/eslint-plugin-template": "13.0.1",
     "@angular-eslint/template-parser": "13.0.1",
-    "@angular/cli": "13.1.2",
-    "@angular/compiler-cli": "13.1.1",
-    "@angular/forms": "13.1.1",
-    "@angular/language-service": "13.1.1",
+    "@angular/cli": "14.0.0",
+    "@angular/compiler-cli": "14.0.0",
+    "@angular/forms": "14.0.0",
+    "@angular/language-service": "14.0.0",
     "@nrwl/cli": "13.4.3",
     "@nrwl/eslint-plugin-nx": "13.4.3",
     "@nrwl/jest": "13.4.3",
@@ -79,23 +79,24 @@
     "eslint-plugin-testing-library": "~5.0.1",
     "jasmine-core": "^3.10.1",
     "jasmine-spec-reporter": "^7.0.0",
-    "jest": "27.4.7",
-    "jest-preset-angular": "11.0.1",
+    "jest": "28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
+    "jest-preset-angular": "12.1.0",
     "karma": "^6.3.9",
     "karma-chrome-launcher": "^3.1.0",
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
     "lint-staged": "^12.1.6",
-    "ng-packagr": "13.1.2",
+    "ng-packagr": "14.0.0",
     "postcss": "^8.4.5",
     "postcss-import": "^14.0.2",
     "postcss-preset-env": "^7.2.0",
     "postcss-url": "^10.1.3",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
     "semantic-release": "^18.0.0",
-    "ts-jest": "27.1.2",
+    "ts-jest": "28.0.4",
     "ts-node": "~10.4.0",
-    "typescript": "4.5.4"
+    "typescript": "4.7.2"
   }
 }

projects/testing-library/package.json

@@ -29,10 +29,10 @@
     "migrations": "./schematics/migrations/migration.json"
   },
   "peerDependencies": {
-    "@angular/common": ">= 13.0.0",
-    "@angular/platform-browser": ">= 13.0.0",
-    "@angular/router": ">= 13.0.0",
-    "@angular/core": ">= 13.0.0",
+    "@angular/common": ">= 14.0.0",
+    "@angular/platform-browser": ">= 14.0.0",
+    "@angular/router": ">= 14.0.0",
+    "@angular/core": ">= 14.0.0",
     "rxjs": ">= 7.4.0"
   },
   "dependencies": {

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

@@ -7,6 +7,7 @@ import {
   OnChanges,
   SimpleChanges,
   ApplicationInitStatus,
+  ɵisStandalone,
 } from '@angular/core';
 import { ComponentFixture, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
@@ -76,7 +77,7 @@ export async function render<SutType, WrapperType = SutType>(
       excludeComponentDeclaration,
       wrapper,
     }),
-    imports: addAutoImports({
+    imports: addAutoImports(sut,{
       imports: imports.concat(defaultImports),
       routes,
     }),
@@ -128,23 +129,23 @@ export async function render<SutType, WrapperType = SutType>(
     const [path, params] = (basePath + href).split('?');
     const queryParams = params
       ? params.split('&').reduce((qp, q) => {
-          const [key, value] = q.split('=');
-          const currentValue = qp[key];
-          if (typeof currentValue === 'undefined') {
-            qp[key] = value;
-          } else if (Array.isArray(currentValue)) {
-            qp[key] = [...currentValue, value];
-          } else {
-            qp[key] = [currentValue, value];
-          }
-          return qp;
-        }, {} as Record<string, string | string[]>)
+        const [key, value] = q.split('=');
+        const currentValue = qp[key];
+        if (typeof currentValue === 'undefined') {
+          qp[key] = value;
+        } else if (Array.isArray(currentValue)) {
+          qp[key] = [...currentValue, value];
+        } else {
+          qp[key] = [currentValue, value];
+        }
+        return qp;
+      }, {} as Record<string, string | string[]>)
       : undefined;
 
     const navigateOptions: NavigationExtras | undefined = queryParams
       ? {
-          queryParams,
-        }
+        queryParams,
+      }
       : undefined;
 
     const doNavigate = () => {
@@ -296,20 +297,23 @@ function addAutoDeclarations<SutType>(
     return [...declarations, wrapper];
   }
 
-  const components = () => (excludeComponentDeclaration ? [] : [sut]);
+  const components = () => (excludeComponentDeclaration || ɵisStandalone(sut) ? [] : [sut]);
   return [...declarations, ...components()];
 }
 
-function addAutoImports({ imports = [], routes }: Pick<RenderComponentOptions<any>, 'imports' | 'routes'>) {
+function addAutoImports<SutType>(
+  sut: Type<SutType> | string,
+  { imports = [], routes }: Pick<RenderComponentOptions<any>, 'imports' | 'routes'>,
+) {
   const animations = () => {
     const animationIsDefined =
       imports.indexOf(NoopAnimationsModule) > -1 || imports.indexOf(BrowserAnimationsModule) > -1;
     return animationIsDefined ? [] : [NoopAnimationsModule];
   };
 
   const routing = () => (routes ? [RouterTestingModule.withRoutes(routes)] : []);
-
-  return [...imports, ...animations(), ...routing()];
+  const components = () => (typeof sut !== 'string' && ɵisStandalone(sut) ? [sut] : []);
+  return [...imports, ...components(), ...animations(), ...routing()];
 }
 
 /**
@@ -394,7 +398,7 @@ if (typeof process === 'undefined' || !process.env?.ATL_SKIP_AUTO_CLEANUP) {
 }
 
 @Component({ selector: 'atl-wrapper-component', template: '' })
-class WrapperComponent {}
+class WrapperComponent { }
 
 /**
  * Wrap findBy queries to poke the Angular change detection cycle