feat: upgrade Angular 14

- update @angular/core
- update @angular/cli
- updated @angular/material
- fix standalone components

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,10 @@
+import { render, screen } from "@testing-library/angular";
+import { StandaloneComponent } 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")
+});

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

@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: 'app-standalone',
+  template: `<div data-testid="standalone">Standalone Component</div>`,
+  standalone: true,
+})
+export class StandaloneComponent {}

package.json

@@ -28,15 +28,15 @@
     "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",
+    "@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": "13.0.2",
     "@nrwl/angular": "13.4.3",
     "@nrwl/nx-cloud": "13.0.2",
@@ -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,8 +79,9 @@
     "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.0.0",
+    "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",
@@ -96,6 +97,6 @@
     "semantic-release": "^18.0.0",
     "ts-jest": "27.1.2",
     "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