feat: upgrade Angular 14

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