From fbeeabfd0c797b2b4ad756398da2076b468803c6 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Fri, 6 Jun 2025 15:39:36 +0200 Subject: [PATCH] feat: update to Angular 20 BREAKING CHANGE: The angular minimum version has changed. BEFORE: Angular 17,18,19 were supported. AFTER: Angular 20 is supported: - TestBed.get is removed --- .github/workflows/ci.yml | 2 +- .gitignore | 1 + .../src/app/issues/issue-491.spec.ts | 4 +- package.json | 38 +++++++++---------- projects/testing-library/package.json | 10 ++--- .../src/lib/testing-library.ts | 7 ++-- .../tests/defer-blocks.spec.ts | 1 - 7 files changed, 30 insertions(+), 33 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 215ef7d..b35c5ab 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -22,7 +22,7 @@ jobs: strategy: matrix: - node-version: ${{ fromJSON((github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') && '[22]' || '[18, 20, 22]') }} + node-version: ${{ fromJSON((github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') && '[22]' || '[20, 22, 24]') }} os: ${{ fromJSON((github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') && '["ubuntu-latest"]' || '["ubuntu-latest", "windows-latest"]') }} runs-on: ${{ matrix.os }} diff --git a/.gitignore b/.gitignore index 1204690..22faaca 100644 --- a/.gitignore +++ b/.gitignore @@ -46,3 +46,4 @@ yarn.lock Thumbs.db .cursor/rules/nx-rules.mdc .github/instructions/nx.instructions.md +.history diff --git a/apps/example-app-karma/src/app/issues/issue-491.spec.ts b/apps/example-app-karma/src/app/issues/issue-491.spec.ts index 7da4d6d..9320251 100644 --- a/apps/example-app-karma/src/app/issues/issue-491.spec.ts +++ b/apps/example-app-karma/src/app/issues/issue-491.spec.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { Router } from '@angular/router'; -import { render, screen, waitForElementToBeRemoved } from '@testing-library/angular'; +import { render, screen } from '@testing-library/angular'; import userEvent from '@testing-library/user-event'; it('test click event with router.navigate', async () => { @@ -31,8 +31,6 @@ it('test click event with router.navigate', async () => { await user.click(screen.getByRole('button', { name: 'submit' })); - await waitForElementToBeRemoved(() => screen.queryByRole('heading', { name: 'Login' })); - expect(await screen.findByRole('heading', { name: 'Logged In' })).toBeVisible(); }); diff --git a/package.json b/package.json index b3f540b..3888395 100644 --- a/package.json +++ b/package.json @@ -27,15 +27,15 @@ "prepare": "git config core.hookspath .githooks" }, "dependencies": { - "@angular/animations": "19.2.14", - "@angular/cdk": "19.2.18", - "@angular/common": "19.2.14", - "@angular/compiler": "19.2.14", - "@angular/core": "19.2.14", - "@angular/material": "19.2.18", - "@angular/platform-browser": "19.2.14", - "@angular/platform-browser-dynamic": "19.2.14", - "@angular/router": "19.2.14", + "@angular/animations": "20.0.0", + "@angular/cdk": "20.0.0", + "@angular/common": "20.0.0", + "@angular/compiler": "20.0.0", + "@angular/core": "20.0.0", + "@angular/material": "20.0.0", + "@angular/platform-browser": "20.0.0", + "@angular/platform-browser-dynamic": "20.0.0", + "@angular/router": "20.0.0", "@ngrx/store": "19.0.0", "@nx/angular": "21.1.2", "@testing-library/dom": "^10.4.0", @@ -44,18 +44,18 @@ "zone.js": "^0.15.0" }, "devDependencies": { - "@angular-devkit/build-angular": "19.2.9", - "@angular-devkit/core": "19.2.9", - "@angular-devkit/schematics": "19.2.9", + "@angular-devkit/build-angular": "20.0.0", + "@angular-devkit/core": "20.0.0", + "@angular-devkit/schematics": "20.0.0", "@angular-eslint/builder": "19.2.0", "@angular-eslint/eslint-plugin": "19.2.0", "@angular-eslint/eslint-plugin-template": "19.2.0", "@angular-eslint/schematics": "19.2.0", "@angular-eslint/template-parser": "19.2.0", - "@angular/cli": "~19.2.0", - "@angular/compiler-cli": "19.2.14", - "@angular/forms": "19.2.14", - "@angular/language-service": "19.2.14", + "@angular/cli": "~20.0.0", + "@angular/compiler-cli": "20.0.0", + "@angular/forms": "20.0.0", + "@angular/language-service": "20.0.0", "@eslint/eslintrc": "^2.1.1", "@nx/eslint": "21.1.2", "@nx/eslint-plugin": "21.1.2", @@ -63,7 +63,7 @@ "@nx/node": "21.1.2", "@nx/plugin": "21.1.2", "@nx/workspace": "21.1.2", - "@schematics/angular": "19.2.9", + "@schematics/angular": "20.0.0", "@testing-library/jasmine-dom": "^1.3.3", "@testing-library/jest-dom": "^6.6.3", "@testing-library/user-event": "^14.5.2", @@ -91,7 +91,7 @@ "karma-jasmine-html-reporter": "2.0.0", "lint-staged": "^15.3.0", "ng-mocks": "^14.13.1", - "ng-packagr": "19.2.2", + "ng-packagr": "20.0.0", "nx": "21.1.2", "postcss": "^8.4.49", "postcss-import": "14.1.0", @@ -102,7 +102,7 @@ "semantic-release": "^24.2.1", "ts-jest": "29.1.0", "ts-node": "10.9.1", - "typescript": "5.7.3", + "typescript": "5.8.2", "typescript-eslint": "^8.19.0" } } diff --git a/projects/testing-library/package.json b/projects/testing-library/package.json index 0c3abd6..79ad49b 100644 --- a/projects/testing-library/package.json +++ b/projects/testing-library/package.json @@ -29,11 +29,11 @@ "migrations": "./schematics/migrations/migrations.json" }, "peerDependencies": { - "@angular/animations": ">= 17.0.0", - "@angular/common": ">= 17.0.0", - "@angular/platform-browser": ">= 17.0.0", - "@angular/router": ">= 17.0.0", - "@angular/core": ">= 17.0.0", + "@angular/animations": ">= 20.0.0", + "@angular/common": ">= 20.0.0", + "@angular/platform-browser": ">= 20.0.0", + "@angular/router": ">= 20.0.0", + "@angular/core": ">= 20.0.0", "@testing-library/dom": "^10.0.0" }, "dependencies": { diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts index f498a89..9c9cabf 100644 --- a/projects/testing-library/src/lib/testing-library.ts +++ b/projects/testing-library/src/lib/testing-library.ts @@ -40,7 +40,6 @@ import { type SubscribedOutput = readonly [key: keyof T, callback: (v: any) => void, subscription: OutputRefSubscription]; const mountedFixtures = new Set>(); -const safeInject = TestBed.inject || TestBed.get; export async function render( component: Type, @@ -126,8 +125,8 @@ export async function render( const componentContainer = createComponentFixture(sut, wrapper); - const zone = safeInject(NgZone); - const router = safeInject(Router); + const zone = TestBed.inject(NgZone); + const router = TestBed.inject(Router); const _navigate = async (elementOrPath: Element | string, basePath = ''): Promise => { const href = typeof elementOrPath === 'string' ? elementOrPath : elementOrPath.getAttribute('href'); const [path, params] = (basePath + href).split('?'); @@ -338,7 +337,7 @@ export async function render( async function createComponent(component: Type): Promise> { /* Make sure angular application is initialized before creating component */ - await safeInject(ApplicationInitStatus).donePromise; + await TestBed.inject(ApplicationInitStatus).donePromise; return TestBed.createComponent(component); } diff --git a/projects/testing-library/tests/defer-blocks.spec.ts b/projects/testing-library/tests/defer-blocks.spec.ts index 7405a4d..ffd5e95 100644 --- a/projects/testing-library/tests/defer-blocks.spec.ts +++ b/projects/testing-library/tests/defer-blocks.spec.ts @@ -33,7 +33,6 @@ test('renders a defer block in different states using DeferBlockBehavior.Playthr deferBlockBehavior: DeferBlockBehavior.Playthrough, }); - expect(await screen.findByText(/loading/i)).toBeInTheDocument(); expect(await screen.findByText(/Defer block content/i)).toBeInTheDocument(); });