From 7fda57c468b2eb39cee9c9a8150bf1e428c19d8e Mon Sep 17 00:00:00 2001 From: xidedix Date: Mon, 8 Dec 2025 14:55:17 +0100 Subject: [PATCH 01/11] chore(dependencies): update to `Angular 21` --- .github/copilot-instructions.md | 56 ++++++++++++++++++++ .prettierrc.js | 10 +++- AGENTS.md | 56 ++++++++++++++++++++ CLI.md | 4 +- README.md | 10 ++-- angular.json | 27 ++-------- package.json | 48 ++++++++--------- projects/coreui-angular-chartjs/README.md | 12 ++--- projects/coreui-angular-chartjs/package.json | 2 +- projects/coreui-angular/README.md | 10 ++-- projects/coreui-angular/package.json | 12 ++--- projects/coreui-icons-angular/README.md | 8 +-- projects/coreui-icons-angular/package.json | 6 +-- tsconfig.json | 4 -- 14 files changed, 181 insertions(+), 84 deletions(-) create mode 100644 .github/copilot-instructions.md create mode 100644 AGENTS.md diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 00000000..34c3b360 --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,56 @@ + +You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices. + +## TypeScript Best Practices + +- Use strict type checking +- Prefer type inference when the type is obvious +- Avoid the `any` type; use `unknown` when type is uncertain + +## Angular Best Practices + +- Always use standalone components over NgModules +- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+. +- Use signals for state management +- Implement lazy loading for feature routes +- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead +- Use `NgOptimizedImage` for all static images. + - `NgOptimizedImage` does not work for inline base64 images. + +## Accessibility Requirements + +- It MUST pass all AXE checks. +- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes. + +### Components + +- Keep components small and focused on a single responsibility +- Use `input()` and `output()` functions instead of decorators +- Use `computed()` for derived state +- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator +- Prefer inline templates for small components +- Prefer Reactive forms instead of Template-driven ones +- Do NOT use `ngClass`, use `class` bindings instead +- Do NOT use `ngStyle`, use `style` bindings instead +- When using external templates/styles, use paths relative to the component TS file. + +## State Management + +- Use signals for local component state +- Use `computed()` for derived state +- Keep state transformations pure and predictable +- Do NOT use `mutate` on signals, use `update` or `set` instead + +## Templates + +- Keep templates simple and avoid complex logic +- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch` +- Use the async pipe to handle observables +- Do not assume globals like (`new Date()`) are available. +- Do not write arrow functions in templates (they are not supported). + +## Services + +- Design services around a single responsibility +- Use the `providedIn: 'root'` option for singleton services +- Use the `inject()` function instead of constructor injection diff --git a/.prettierrc.js b/.prettierrc.js index 3e85ffa2..1c04f8eb 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -3,5 +3,13 @@ module.exports = { trailingComma: 'none', singleQuote: true, printWidth: 120, - tabWidth: 2 + tabWidth: 2, + overrides: [ + { + files: '*.html', + options: { + parser: 'angular' + } + } + ] }; diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 00000000..34c3b360 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,56 @@ + +You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices. + +## TypeScript Best Practices + +- Use strict type checking +- Prefer type inference when the type is obvious +- Avoid the `any` type; use `unknown` when type is uncertain + +## Angular Best Practices + +- Always use standalone components over NgModules +- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+. +- Use signals for state management +- Implement lazy loading for feature routes +- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead +- Use `NgOptimizedImage` for all static images. + - `NgOptimizedImage` does not work for inline base64 images. + +## Accessibility Requirements + +- It MUST pass all AXE checks. +- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes. + +### Components + +- Keep components small and focused on a single responsibility +- Use `input()` and `output()` functions instead of decorators +- Use `computed()` for derived state +- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator +- Prefer inline templates for small components +- Prefer Reactive forms instead of Template-driven ones +- Do NOT use `ngClass`, use `class` bindings instead +- Do NOT use `ngStyle`, use `style` bindings instead +- When using external templates/styles, use paths relative to the component TS file. + +## State Management + +- Use signals for local component state +- Use `computed()` for derived state +- Keep state transformations pure and predictable +- Do NOT use `mutate` on signals, use `update` or `set` instead + +## Templates + +- Keep templates simple and avoid complex logic +- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch` +- Use the async pipe to handle observables +- Do not assume globals like (`new Date()`) are available. +- Do not write arrow functions in templates (they are not supported). + +## Services + +- Design services around a single responsibility +- Use the `providedIn: 'root'` option for singleton services +- Use the `inject()` function instead of constructor injection diff --git a/CLI.md b/CLI.md index 5bc98951..88ad3213 100644 --- a/CLI.md +++ b/CLI.md @@ -1,6 +1,6 @@ -# @coreui/angular v5 +# @coreui/angular v5.6 -This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.2. ## Development server diff --git a/README.md b/README.md index 7a0f6028..f82c2680 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@

CoreUI Components for Angular

- Angular Components Library built on top of Bootstrap 5.3 and TypeScript 5.8 + Angular Components Library built on top of Bootstrap 5.x and TypeScript 5.9
Explore CoreUI for Angular docs and examples »
@@ -39,7 +39,7 @@ Featured CoreUI for Angular libraries: ### Status ![angular][angular-badge] -[![npm-coreui-angular-v5-ng20][npm-coreui-angular-badge-v5-ng20]][npm-coreui-angular] +[![npm-coreui-angular-v5-ng21][npm-coreui-angular-badge-v5-ng21]][npm-coreui-angular] [![npm-coreui-angular-latest][npm-coreui-angular-badge-latest]][npm-coreui-angular] [![npm-coreui-angular-next][npm-coreui-angular-badge-next]][npm-coreui-angular] [![NPM downloads][npm-coreui-angular-download]][npm-coreui-angular] @@ -78,7 +78,7 @@ Featured CoreUI for Angular libraries: Before you begin, make sure your development environment includes `Node.js®` and `npm` package manager. ###### Node.js -[**Angular 20**](https://angular.dev/overview) requires `Node.js` LTS version `^20.19`, `^22.12` or `^24.0`. +[**Angular 21**](https://angular.dev/overview) requires `Node.js` LTS version `^20.19`, `^22.12` or `^24.0`. - To check your version, run `node -v` in a terminal/console window. - To get `Node.js`, go to [nodejs.org](https://nodejs.org/). @@ -231,9 +231,9 @@ Thanks to all the backers and sponsors! Support this project by [becoming a back Copyright 2025 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-angular/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). -[npm-coreui-angular-badge-v5-ng20]: https://img.shields.io/npm/v/@coreui/angular/v5-ng20?style=flat-square&color=brightgreen +[npm-coreui-angular-badge-v5-ng21]: https://img.shields.io/npm/v/@coreui/angular/v5-ng21?style=flat-square&color=brightgreen [npm-coreui-angular-badge-latest]: https://img.shields.io/npm/v/@coreui/angular/latest?style=flat-square&color=brightgreen [npm-coreui-angular-badge-next]: https://img.shields.io/npm/v/@coreui/angular/next?style=flat-square&color=red [npm-coreui-angular]: https://www.npmjs.com/package/@coreui/angular [npm-coreui-angular-download]: https://img.shields.io/npm/dm/@coreui/angular.svg?style=flat-square -[angular-badge]: https://img.shields.io/badge/angular-^20.3.0-lightgrey.svg?style=flat-square&logo=angular +[angular-badge]: https://img.shields.io/badge/angular-^21.0.0-lightgrey.svg?style=flat-square&logo=angular diff --git a/angular.json b/angular.json index adaf53cd..d89f4acc 100644 --- a/angular.json +++ b/angular.json @@ -2,9 +2,8 @@ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "cli": { "analytics": false, - "schematicCollections": [ - "@angular-eslint/schematics" - ] + "schematicCollections": ["@angular-eslint/schematics"], + "packageManager": "npm" }, "version": 1, "newProjectRoot": "projects", @@ -40,20 +39,13 @@ "options": { "main": "projects/coreui-angular/src/test.ts", "tsConfig": "projects/coreui-angular/tsconfig.spec.json", - "polyfills": [ - "zone.js", - "zone.js/testing" - ], "karmaConfig": "projects/coreui-angular/karma.conf.js" } }, "lint": { "builder": "@angular-eslint/builder:lint", "options": { - "lintFilePatterns": [ - "projects/coreui-angular/**/*.ts", - "projects/coreui-angular/**/*.html" - ], + "lintFilePatterns": ["projects/coreui-angular/**/*.ts", "projects/coreui-angular/**/*.html"], "eslintConfig": "projects/coreui-angular/eslint.config.js" } } @@ -90,10 +82,6 @@ "options": { "main": "projects/coreui-angular-chartjs/src/test.ts", "tsConfig": "projects/coreui-angular-chartjs/tsconfig.spec.json", - "polyfills": [ - "zone.js", - "zone.js/testing" - ], "karmaConfig": "projects/coreui-angular-chartjs/karma.conf.js" } }, @@ -140,20 +128,13 @@ "options": { "main": "projects/coreui-icons-angular/src/test.ts", "tsConfig": "projects/coreui-icons-angular/tsconfig.spec.json", - "polyfills": [ - "zone.js", - "zone.js/testing" - ], "karmaConfig": "projects/coreui-icons-angular/karma.conf.js" } }, "lint": { "builder": "@angular-eslint/builder:lint", "options": { - "lintFilePatterns": [ - "projects/coreui-icons-angular/**/*.ts", - "projects/coreui-icons-angular/**/*.html" - ], + "lintFilePatterns": ["projects/coreui-icons-angular/**/*.ts", "projects/coreui-icons-angular/**/*.html"], "eslintConfig": "projects/coreui-icons-angular/eslint.config.js" } } diff --git a/package.json b/package.json index 1441a1dd..6dd53b20 100644 --- a/package.json +++ b/package.json @@ -39,17 +39,17 @@ "link:icons": "cd dist/coreui-icons-angular/ && npm link" }, "private": true, + "packageManager": "npm@11.6.4", "dependencies": { - "@angular/animations": "^20.3.14", - "@angular/cdk": "^20.2.14", - "@angular/common": "^20.3.14", - "@angular/compiler": "^20.3.14", - "@angular/core": "^20.3.14", - "@angular/forms": "^20.3.14", - "@angular/localize": "^20.3.14", - "@angular/platform-browser": "^20.3.14", - "@angular/platform-browser-dynamic": "^20.3.14", - "@angular/router": "^20.3.14", + "@angular/animations": "^21.0.3", + "@angular/cdk": "^21.0.2", + "@angular/common": "^21.0.3", + "@angular/compiler": "^21.0.3", + "@angular/core": "^21.0.3", + "@angular/forms": "^21.0.3", + "@angular/localize": "^21.0.3", + "@angular/platform-browser": "^21.0.3", + "@angular/router": "^21.0.3", "@coreui/chartjs": "~4.1.0", "@coreui/icons": "^3.0.1", "@popperjs/core": "~2.11.8", @@ -57,30 +57,30 @@ "lodash-es": "^4.17.21", "rxjs": "~7.8.2", "tslib": "^2.8.1", - "zone.js": "~0.15.1" + "zone.js": "~0.16.0" }, "devDependencies": { - "@angular-devkit/schematics": "^20.3.12", - "@angular/build": "^20.3.12", - "@angular/cli": "^20.3.12", - "@angular/compiler-cli": "^20.3.14", - "@angular/language-service": "^20.3.14", + "@angular-devkit/schematics": "^21.0.2", + "@angular/build": "^21.0.2", + "@angular/cli": "^21.0.2", + "@angular/compiler-cli": "^21.0.3", + "@angular/language-service": "^21.0.3", "@types/jasmine": "^5.1.13", "@types/lodash-es": "^4.17.12", - "@types/node": "^22.19.1", - "angular-eslint": "^20.7.0", + "@types/node": "^24.10.1", + "angular-eslint": "^21.1.0", "copyfiles": "^2.4.1", "eslint": "^9.39.1", - "jasmine-core": "^5.12.1", + "jasmine-core": "^5.13.0", "karma": "^6.4.4", "karma-chrome-launcher": "^3.2.0", "karma-coverage": "^2.2.1", "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.1.0", - "ng-packagr": "^20.3.2", - "prettier": "^3.6.2", + "ng-packagr": "^21.0.0", + "prettier": "^3.7.4", "typescript": "~5.9.3", - "typescript-eslint": "^8.48.0" + "typescript-eslint": "^8.48.1" }, "keywords": [ "angular", @@ -103,10 +103,10 @@ "url": "git+https://github.com/coreui/coreui-angular.git" }, "config": { - "version_short": "5.5" + "version_short": "5.6" }, "engines": { "node": "^20.19.0 || ^22.12.0 || ^24.0.0", - "npm": ">=9" + "npm": ">=10" } } diff --git a/projects/coreui-angular-chartjs/README.md b/projects/coreui-angular-chartjs/README.md index a427ed68..32655a3b 100644 --- a/projects/coreui-angular-chartjs/README.md +++ b/projects/coreui-angular-chartjs/README.md @@ -8,7 +8,7 @@

-

CoreUI Angular wrapper for Chart.js v4

+

CoreUI Angular wrapper for Chart.js v4.5

Explore @coreui/angular-chartjs docs & examples » @@ -35,18 +35,18 @@ Featured CoreUI for Angular libraries: ### Status ![angular][angular-badge] -[![npm package][npm-badge-v5-ng20]][npm] +[![npm package][npm-badge-v5-ng21]][npm] [![npm package][npm-badge-latest]][npm] [![npm package][npm-badge-next]][npm] [![NPM downloads][npm-download]][npm] [![Project chartjs check](https://github.com/coreui/coreui-angular/actions/workflows/project-chartjs-check.yml/badge.svg)](https://github.com/coreui/coreui-angular/actions/workflows/project-chartjs-check.yml) -[npm-badge-v5-ng20]: https://img.shields.io/npm/v/@coreui/angular-chartjs/v5-ng20?style=flat-square&color=brightgreen +[npm-badge-v5-ng21]: https://img.shields.io/npm/v/@coreui/angular-chartjs/v5-ng21?style=flat-square&color=brightgreen [npm-badge-latest]: https://img.shields.io/npm/v/@coreui/angular-chartjs/latest?style=flat-square&color=brightgreen [npm-badge-next]: https://img.shields.io/npm/v/@coreui/angular-chartjs/next?style=flat-square&color=red [npm]: https://www.npmjs.com/package/@coreui/angular-chartjs [npm-download]: https://img.shields.io/npm/dm/@coreui/angular-chartjs.svg?style=flat-square -[angular-badge]: https://img.shields.io/badge/angular-^20.3.0-lightgrey.svg?style=flat-square&logo=angular +[angular-badge]: https://img.shields.io/badge/angular-^21.0.0-lightgrey.svg?style=flat-square&logo=angular ##### install: @@ -57,9 +57,9 @@ ng add @coreui/angular-chartjs - or npm ```bash -npm install chart.js@4 +npm install chart.js@4.5 npm install @coreui/chartjs@~4.1 -npm install @coreui/angular-chartjs@~5.5 +npm install @coreui/angular-chartjs@~5.6 ```` ##### import: diff --git a/projects/coreui-angular-chartjs/package.json b/projects/coreui-angular-chartjs/package.json index 3f9d1570..779d9501 100644 --- a/projects/coreui-angular-chartjs/package.json +++ b/projects/coreui-angular-chartjs/package.json @@ -25,7 +25,7 @@ "url": "https://github.com/coreui/coreui-angular/issues" }, "peerDependencies": { - "@angular/core": "^20.3.14", + "@angular/core": "^21.0.0", "@coreui/chartjs": "^4.1.0", "chart.js": "^4.5.0" }, diff --git a/projects/coreui-angular/README.md b/projects/coreui-angular/README.md index 7a0f6028..f82c2680 100644 --- a/projects/coreui-angular/README.md +++ b/projects/coreui-angular/README.md @@ -11,7 +11,7 @@

CoreUI Components for Angular

- Angular Components Library built on top of Bootstrap 5.3 and TypeScript 5.8 + Angular Components Library built on top of Bootstrap 5.x and TypeScript 5.9
Explore CoreUI for Angular docs and examples »
@@ -39,7 +39,7 @@ Featured CoreUI for Angular libraries: ### Status ![angular][angular-badge] -[![npm-coreui-angular-v5-ng20][npm-coreui-angular-badge-v5-ng20]][npm-coreui-angular] +[![npm-coreui-angular-v5-ng21][npm-coreui-angular-badge-v5-ng21]][npm-coreui-angular] [![npm-coreui-angular-latest][npm-coreui-angular-badge-latest]][npm-coreui-angular] [![npm-coreui-angular-next][npm-coreui-angular-badge-next]][npm-coreui-angular] [![NPM downloads][npm-coreui-angular-download]][npm-coreui-angular] @@ -78,7 +78,7 @@ Featured CoreUI for Angular libraries: Before you begin, make sure your development environment includes `Node.js®` and `npm` package manager. ###### Node.js -[**Angular 20**](https://angular.dev/overview) requires `Node.js` LTS version `^20.19`, `^22.12` or `^24.0`. +[**Angular 21**](https://angular.dev/overview) requires `Node.js` LTS version `^20.19`, `^22.12` or `^24.0`. - To check your version, run `node -v` in a terminal/console window. - To get `Node.js`, go to [nodejs.org](https://nodejs.org/). @@ -231,9 +231,9 @@ Thanks to all the backers and sponsors! Support this project by [becoming a back Copyright 2025 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-angular/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). -[npm-coreui-angular-badge-v5-ng20]: https://img.shields.io/npm/v/@coreui/angular/v5-ng20?style=flat-square&color=brightgreen +[npm-coreui-angular-badge-v5-ng21]: https://img.shields.io/npm/v/@coreui/angular/v5-ng21?style=flat-square&color=brightgreen [npm-coreui-angular-badge-latest]: https://img.shields.io/npm/v/@coreui/angular/latest?style=flat-square&color=brightgreen [npm-coreui-angular-badge-next]: https://img.shields.io/npm/v/@coreui/angular/next?style=flat-square&color=red [npm-coreui-angular]: https://www.npmjs.com/package/@coreui/angular [npm-coreui-angular-download]: https://img.shields.io/npm/dm/@coreui/angular.svg?style=flat-square -[angular-badge]: https://img.shields.io/badge/angular-^20.3.0-lightgrey.svg?style=flat-square&logo=angular +[angular-badge]: https://img.shields.io/badge/angular-^21.0.0-lightgrey.svg?style=flat-square&logo=angular diff --git a/projects/coreui-angular/package.json b/projects/coreui-angular/package.json index 9246d2e1..1962fc84 100644 --- a/projects/coreui-angular/package.json +++ b/projects/coreui-angular/package.json @@ -23,13 +23,13 @@ }, "sideEffects": false, "peerDependencies": { - "@angular/animations": "^20.3.14", - "@angular/cdk": "^20.2.14", - "@angular/common": "^20.3.14", - "@angular/core": "^20.3.14", - "@angular/router": "^20.3.14", + "@angular/animations": "^21.0.0", + "@angular/cdk": "^21.0.0", + "@angular/common": "^21.0.0", + "@angular/core": "^21.0.0", + "@angular/router": "^21.0.0", "@coreui/coreui": "^5.4.3", - "@coreui/icons-angular": "~5.5.25", + "@coreui/icons-angular": "~5.6.0", "rxjs": "^7.8.2" }, "repository": { diff --git a/projects/coreui-icons-angular/README.md b/projects/coreui-icons-angular/README.md index 1717e1df..1aadc67f 100644 --- a/projects/coreui-icons-angular/README.md +++ b/projects/coreui-icons-angular/README.md @@ -39,7 +39,7 @@ Featured CoreUI for Angular libraries: # CoreUI Icons Angular ![angular][angular-badge] -[![npm-coreui-angular-v5-ng20][npm-coreui-icons-angular-v5-ng20]][coreui-angular-icons-npm] +[![npm-coreui-angular-v5-ng21][npm-coreui-icons-angular-v5-ng21]][coreui-angular-icons-npm] [![npm-coreui-angular-latest][npm-coreui-icons-angular-latest]][coreui-angular-icons-npm] [![npm-coreui-angular-next][npm-coreui-icons-angular-next]][coreui-angular-icons-npm] [![License](https://img.shields.io/npm/l/@coreui/angular?style=flat-square)][coreui] @@ -48,10 +48,10 @@ Featured CoreUI for Angular libraries: [coreui]: https://coreui.io/icons [coreui-angular-icons-npm]: https://www.npmjs.com/package/@coreui/icons-angular -[npm-coreui-icons-angular-v5-ng20]: https://img.shields.io/npm/v/@coreui/icons-angular/v5-ng20?style=flat-square&color=brightgreen +[npm-coreui-icons-angular-v5-ng21]: https://img.shields.io/npm/v/@coreui/icons-angular/v5-ng21?style=flat-square&color=brightgreen [npm-coreui-icons-angular-latest]: https://img.shields.io/npm/v/@coreui/icons-angular/latest?style=flat-square&color=brightgreen [npm-coreui-icons-angular-next]: https://img.shields.io/npm/v/@coreui/icons-angular/next?style=flat-square&color=red -[angular-badge]: https://img.shields.io/badge/angular-^20.3.0-lightgrey.svg?style=flat-square&logo=angular +[angular-badge]: https://img.shields.io/badge/angular-^21.0.0-lightgrey.svg?style=flat-square&logo=angular ## `cIcon` directive @@ -72,7 +72,7 @@ For directive description visit [https://coreui.io/angular/docs/](https://coreui ```shell npm install @coreui/icons@3 -npm install @coreui/icons-angular@~5.5 +npm install @coreui/icons-angular@~5.6 ``` ### Usage diff --git a/projects/coreui-icons-angular/package.json b/projects/coreui-icons-angular/package.json index 0a7cecd2..29916785 100644 --- a/projects/coreui-icons-angular/package.json +++ b/projects/coreui-icons-angular/package.json @@ -25,9 +25,9 @@ "url": "https://github.com/coreui/coreui-angular/issues" }, "peerDependencies": { - "@angular/common": "^20.3.14", - "@angular/core": "^20.3.14", - "@angular/platform-browser": "^20.3.14" + "@angular/common": "^21.0.0", + "@angular/core": "^21.0.0", + "@angular/platform-browser": "^21.0.0" }, "dependencies": { "tslib": "^2.3.0" diff --git a/tsconfig.json b/tsconfig.json index 1baa4cea..0ac09015 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -35,10 +35,6 @@ "module": "preserve", "typeRoots": [ "node_modules/@types" - ], - "lib": [ - "ES2022", - "dom" ] }, "angularCompilerOptions": { From 0e819c0bfcd9e8002172a83b7002e1226b78e418 Mon Sep 17 00:00:00 2001 From: xidedix Date: Mon, 8 Dec 2025 14:57:23 +0100 Subject: [PATCH 02/11] test: updates, cleanups and fixes --- projects/coreui-angular-chartjs/src/test.ts | 13 +++------ .../src/lib/card/card-img.directive.spec.ts | 14 +++++----- .../lib/collapse/collapse.directive.spec.ts | 18 ++++++------ .../dropdown-close.directive.spec.ts | 16 +++++++---- .../dropdown-item.directive.spec.ts | 14 +++++----- .../dropdown-menu.directive.spec.ts | 22 +++++++-------- .../dropdown/dropdown.component.spec.ts | 28 +++++++++---------- .../form-check-input.directive.spec.ts | 8 +++--- .../form-check/form-check.component.spec.ts | 16 +++++------ .../src/lib/grid/gutter.directive.spec.ts | 10 +++---- .../src/lib/popover/popover.directive.spec.ts | 19 +++++++------ .../src/lib/shared/theme.directive.spec.ts | 12 ++++---- .../lib/table/table-active.directive.spec.ts | 10 +++---- .../src/lib/tooltip/tooltip.directive.spec.ts | 18 ++++++------ projects/coreui-icons-angular/src/test.ts | 17 ++++------- 15 files changed, 118 insertions(+), 117 deletions(-) diff --git a/projects/coreui-angular-chartjs/src/test.ts b/projects/coreui-angular-chartjs/src/test.ts index f17fa2d1..0f93ecb4 100644 --- a/projects/coreui-angular-chartjs/src/test.ts +++ b/projects/coreui-angular-chartjs/src/test.ts @@ -3,14 +3,9 @@ import 'zone.js'; import 'zone.js/testing'; import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting -} from '@angular/platform-browser-dynamic/testing'; +import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing'; // First, initialize the Angular testing environment. -getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting(), - { teardown: { destroyAfterEach: true }}, -); +getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), { + teardown: { destroyAfterEach: true } +}); diff --git a/projects/coreui-angular/src/lib/card/card-img.directive.spec.ts b/projects/coreui-angular/src/lib/card/card-img.directive.spec.ts index 40b7c3db..474e7353 100644 --- a/projects/coreui-angular/src/lib/card/card-img.directive.spec.ts +++ b/projects/coreui-angular/src/lib/card/card-img.directive.spec.ts @@ -1,14 +1,14 @@ -import { Component, DebugElement } from '@angular/core'; +import { Component, DebugElement, input } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { CardImgDirective } from './card-img.directive'; import { By } from '@angular/platform-browser'; @Component({ imports: [CardImgDirective], - template: `

` + template: `
` }) export class TestComponent { - orientation: 'top' | 'bottom' | 'start' | 'end' | undefined = undefined; + readonly orientation = input<'top' | 'bottom' | 'start' | 'end' | undefined>(undefined); } describe('CardImgDirective', () => { @@ -34,16 +34,16 @@ describe('CardImgDirective', () => { }); it('should have css classes', () => { - component.orientation = 'start'; + fixture.componentRef.setInput('orientation', 'start'); fixture.detectChanges(); expect(debugElement.nativeElement).toHaveClass('rounded-start'); - component.orientation = 'end'; + fixture.componentRef.setInput('orientation', 'end'); fixture.detectChanges(); expect(debugElement.nativeElement).toHaveClass('rounded-end'); - component.orientation = 'top'; + fixture.componentRef.setInput('orientation', 'top'); fixture.detectChanges(); expect(debugElement.nativeElement).toHaveClass('card-img-top'); - component.orientation = 'bottom'; + fixture.componentRef.setInput('orientation', 'bottom'); fixture.detectChanges(); expect(debugElement.nativeElement).toHaveClass('card-img-bottom'); }); diff --git a/projects/coreui-angular/src/lib/collapse/collapse.directive.spec.ts b/projects/coreui-angular/src/lib/collapse/collapse.directive.spec.ts index 5212c6fa..4977a7c8 100644 --- a/projects/coreui-angular/src/lib/collapse/collapse.directive.spec.ts +++ b/projects/coreui-angular/src/lib/collapse/collapse.directive.spec.ts @@ -1,5 +1,5 @@ import { CollapseDirective } from './collapse.directive'; -import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core'; +import { Component, DebugElement, ElementRef, Renderer2, signal } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; @@ -7,12 +7,12 @@ import { By } from '@angular/platform-browser'; class MockElementRef extends ElementRef {} @Component({ - template: '
Test
', + template: '
Test
', imports: [CollapseDirective] }) class TestComponent { - horizontal = false; - visible = false; + readonly horizontal = signal(false); + readonly visible = signal(false); } describe('CollapseDirective', () => { @@ -29,7 +29,7 @@ describe('CollapseDirective', () => { fixture = TestBed.createComponent(TestComponent); component = fixture.componentInstance; elementRef = fixture.debugElement.query(By.directive(CollapseDirective)); - component.visible = false; + component.visible.set(false); fixture.detectChanges(); // initial binding }); @@ -43,13 +43,13 @@ describe('CollapseDirective', () => { it('should have css classes', fakeAsync(() => { expect(elementRef.nativeElement.style.display).toContain('none'); expect(elementRef.nativeElement).not.toHaveClass('collapse-horizontal'); - component.horizontal = true; - component.visible = true; + component.horizontal.set(true); + component.visible.set(true); fixture.detectChanges(); expect(elementRef.nativeElement).toHaveClass('collapse-horizontal'); expect(elementRef.nativeElement.style.display).toBe(''); - component.horizontal = false; - component.visible = false; + component.horizontal.set(false); + component.visible.set(false); fixture.detectChanges(); expect(elementRef.nativeElement).not.toHaveClass('collapse-horizontal'); })); diff --git a/projects/coreui-angular/src/lib/dropdown/dropdown-close/dropdown-close.directive.spec.ts b/projects/coreui-angular/src/lib/dropdown/dropdown-close/dropdown-close.directive.spec.ts index ebe72672..baa4124e 100644 --- a/projects/coreui-angular/src/lib/dropdown/dropdown-close/dropdown-close.directive.spec.ts +++ b/projects/coreui-angular/src/lib/dropdown/dropdown-close/dropdown-close.directive.spec.ts @@ -1,4 +1,4 @@ -import { Component, DebugElement, ElementRef, Renderer2, viewChild } from '@angular/core'; +import { Component, DebugElement, ElementRef, Renderer2, signal, viewChild } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { DropdownService } from '../dropdown.service'; @@ -13,14 +13,20 @@ class MockElementRef extends ElementRef {} template: `
- +
`, imports: [ButtonCloseDirective, DropdownComponent, DropdownMenuDirective, DropdownCloseDirective] }) class TestComponent { - disabled = false; + readonly disabled = signal(false); readonly dropdown = viewChild(DropdownComponent); } @@ -38,7 +44,7 @@ describe('DropdownCloseDirective', () => { fixture = TestBed.createComponent(TestComponent); component = fixture.componentInstance; elementRef = fixture.debugElement.query(By.directive(DropdownCloseDirective)); - component.disabled = false; + component.disabled.set(false); fixture.detectChanges(); // initial binding }); @@ -53,7 +59,7 @@ describe('DropdownCloseDirective', () => { expect(elementRef.nativeElement).not.toHaveClass('disabled'); expect(elementRef.nativeElement.getAttribute('aria-disabled')).toBeNull(); expect(elementRef.nativeElement.getAttribute('tabindex')).toBe('0'); - component.disabled = true; + component.disabled.set(true); fixture.detectChanges(); expect(elementRef.nativeElement).toHaveClass('disabled'); expect(elementRef.nativeElement.getAttribute('aria-disabled')).toBe('true'); diff --git a/projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item.directive.spec.ts b/projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item.directive.spec.ts index b5722f2e..5f260e1f 100644 --- a/projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item.directive.spec.ts +++ b/projects/coreui-angular/src/lib/dropdown/dropdown-item/dropdown-item.directive.spec.ts @@ -1,4 +1,4 @@ -import { Component, DebugElement, DOCUMENT, ElementRef, Renderer2, viewChild } from '@angular/core'; +import { Component, DebugElement, DOCUMENT, ElementRef, Renderer2, signal, viewChild } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; @@ -14,7 +14,7 @@ class MockElementRef extends ElementRef {}