@dsivd/prestations-ng 19.0.0-beta.12 → 19.0.0-beta.13

package/UPGRADING_V19.md

@@ -25,13 +25,13 @@ mvn -U org.openrewrite.maven:rewrite-maven-plugin:run -Drewrite.recipeArtifactCo
 
 #### Fixes
 
-Fix application.properties :
+Fix `application.properties`:
 
 ```diff
-# Remove the following properties if it was added by the recipe
+# Remove the following properties if they were added by the recipe
 spring.liquibase.password=${spring.datasource.password}
 spring.liquibase.username=${spring.datasource.username}
-Replace the spring.jackson.serialization.WRITE_DATES_AS_TIMESTAMPS property by spring.jackson.datatype.datetime.write-dates-as-timestamps if it was not done by the recipe
+Replace the `spring.jackson.serialization.WRITE_DATES_AS_TIMESTAMPS` property with `spring.jackson.datatype.datetime.write-dates-as-timestamps` if it was not already done by the recipe
 ```
 
 If the following plugin with Lombok path was added by the recipe, remove this plugin:
@@ -62,9 +62,9 @@ If the code uses `AutoConfigureMockMvc`, add:
 </dependency>
 ```
 
-And replace the old `AutoConfigureMockMvc` import which is not recognized anymore by the new one.
+And replace the old `AutoConfigureMockMvc` import, which is not recognized anymore, with the new one.
 
-If we use in pom.xml Spring/Hibernate dependencies (like hibernate-jpamodelgen), check the Spring Boot 4 migration
+If you use Spring/Hibernate dependencies in `pom.xml` (like `hibernate-jpamodelgen`), check the Spring Boot 4 migration
 guide to see if it has been replaced by another library: https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-4.0-Migration-Guide
 
 ### Jackson migration
@@ -183,18 +183,18 @@ Take a look at Sonar to see other things that you can improve or ignore.
 
 ## PRESTATIONS-NG
 
-For the commands in this guide, it is supposed that you are in the `front` folder of your project.
+For the commands in this guide, it is assumed that you are in the `front` folder of your project.
 
 The main feature in `prestations-ng` v19 is the update of the `@angular/*` peer dependencies
-to `^21.2.14`, using `node 22+` to build, `npm 10+` for package manager and `Foehn 2+ (Bootstrap 5+)` for our design system.
+to `^21.2.14`, using `node 22+` to build, `npm 10+` as package manager, and `Foehn 2+ (Bootstrap 5+)` for our design system.
 
-A lot of breaking changes because our library has migrated to **standalone** components, **signals** and **inject function** instead of constructor injection parameters.
+There are a lot of breaking changes because our library has migrated to **standalone** components, **signals**, and the **inject function** instead of constructor injection parameters.
 
 > 🚨 **Read carefully the following [PITFALLS](ANGULAR_SIGNALS.md#common_pitfalls), especially points 4, 6 & 8**
 
 ### Migrate to ESLint
 
-(NB : you can skip this step if you already have a `front/.eslintrc.json` file, it means it is already done.)
+💡 **NB : you can skip this step if you already have a `front/.eslintrc.json` file, it means it is already done.**
 
 Follow [our migration guide](ESLINT_MIGRATION_GUIDE.md) to migrate your project from TSLint to ESLint.
 
@@ -202,9 +202,9 @@ Follow [our migration guide](ESLINT_MIGRATION_GUIDE.md) to migrate your project
 
 Just FYI if you are curious about the details, you can find the Angular update guide at this address [https://angular.dev/update-guide?v=19.0-20.0&l=1](https://angular.dev/update-guide?v=19.0-20.0&l=1)
 
-**NB: Commit before continuing so your repository is clean.**
+💡 **NB: Commit before continuing so your repository is clean.**
 
-Remove your `resolutions` in `package.json` before starting : if you have `resolutions` in `package.json`, remove manually the section.
+Remove your `resolutions` in `package.json` before starting: if you have `resolutions` in `package.json`, remove the section manually.
 
 In the next commands, commit before each ng update.
 
@@ -227,7 +227,7 @@ Verify your node version in your terminal by executing:
 node -v
 ```
 
-**NB: If version is still v20+ by default, type `node22` in your terminal to switch to node v22+**
+💡 **NB: If the version is still v20+ by default, type `node22` in your terminal to switch to node v22+**
 
 ```bash
 node22
@@ -243,7 +243,7 @@ node -v
 
 ##### IntelliJ node version
 
-Change IntelliJ node version to 22+ by going to `File > Settings > Languages & Frameworks > TypeScript` and selecting a node version 22+ in `Node runtime`.
+Change the IntelliJ Node.js version to 22+ by going to `File > Settings > Languages & Frameworks > TypeScript` and selecting a node version 22+ in `Node runtime`.
 
 #### Continue with Angular 20 migration
 
@@ -261,10 +261,10 @@ ng update @angular/core@20 @angular/cli@20
     - accept **"router-current-navigation"** by hitting "Space" key
     - hit "Enter" key
 
-**IMPORTANT: Search for every `@for` in your project and check that `track` statement is present and has a unique identifier.
+🚨 **IMPORTANT: Search for every `@for` in your project and check that `track` statement is present and has a unique identifier.
 When a unique identifier is not possible, use `track $index`.**
 
-**NB: When using `@angular/cdk` in your project**
+💡 **NB: When using `@angular/cdk` in your project**
 
 ```bash
 ng update @angular/cdk@20
@@ -303,7 +303,7 @@ buildAppPipelinePodmanUT([
 
 Just FYI if you are curious about the details, you can find the Angular update guide at this address [https://angular.dev/update-guide?v=20.0-21.0&l=1](https://angular.dev/update-guide?v=20.0-21.0&l=1)
 
-**NB: Commit before continuing so your repository is clean.**
+💡 **NB: Commit before continuing so your repository is clean.**
 
 ```bash
 npm install @angular/cli@21 -g
@@ -326,13 +326,13 @@ ng update @angular/cli@21
 npm install @types/node@22 ts-node@10
 ```
 
-**NB: When using `@angular/cdk` in your project**
+💡 **NB: When using `@angular/cdk` in your project**
 
 ```bash
 ng update @angular/cdk@21
 ```
 
-**NB: When using `ngx-matomo-client` in your project**
+💡 **NB: When using `ngx-matomo-client` in your project**
 
 ```bash
 ng update ngx-matomo-client@9
@@ -356,12 +356,12 @@ ng update ngx-matomo-client@9
 
 ### Now fix your project before continuing
 
-**IMPORTANT: Fix your project because our new prestations-ng v19+ is standalone, uses signals instead of observables and inject function instead of constructor injection parameters.**
+🚨 **IMPORTANT: Fix your project because our new prestations-ng v19+ is standalone, uses signals instead of observables, and uses the inject function instead of constructor injection parameters.**
 
-- Only keep `modules` relative to your application such as `AppRoutingModule`.
-- Remove all other imports of **modules** and make sure you are using the new **standalone components** by adding them directly from your HTML file "alt+enter".
-- Add `providePrestationsNgCore(),` in `providers` array of your `app.modules.ts` file.
-- Check every `constructor` in your project, and remove useless `constructor` parameters that are not used anymore (like `ActivatedRoute` in components extending `AbstractPageComponent`).
+- Only keep `modules` related to your application, such as `AppRoutingModule`.
+- Remove all other imports of **modules** and make sure you are using the new **standalone components** by adding them directly from your template (Alt+Enter).
+- Add `providePrestationsNgCore(),` to the `providers` array of your `app.module.ts` file.
+- Check every `constructor` in your project and remove unused `constructor` parameters (like `ActivatedRoute` in components extending `AbstractPageComponent`).
 
 Run the following command until you have no more errors.
 
@@ -369,7 +369,7 @@ Run the following command until you have no more errors.
 npm run build
 ```
 
-**TIP: If your IntelliJ is still showing you errors on `@if` or `@for`, close it and re-open it to fix.**
+💡 **TIP: If your IntelliJ is still showing you errors on `@if` or `@for`, close it and re-open it to fix.**
 
 ### Migrate to inject function
 
@@ -421,7 +421,7 @@ Most of the time, you can remove `activatedRoute` because it was used as a const
 
 ### Migrate to self-closing tags
 
-**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+🚨 **WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
 
 ```bash
 npm run build
@@ -437,9 +437,9 @@ ng generate @angular/core:self-closing-tag
 
 ### Migrate to standalone
 
-**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+🚨 **WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
 
-**TIP: Check [Migrating from NgModules](COMPONENTS.md#migrating_from_ngmodules) for more information before running following commands.**
+💡 **TIP: Check [Migrating from NgModules](COMPONENTS.md#migrating_from_ngmodules) for more information before running the following commands.**
 
 ```bash
 npm run build
@@ -538,11 +538,11 @@ bootstrapApplication(AppComponent, appConfig).catch((err) =>
 );
 ```
 
-Clean up your project by removing `app-routing.module.ts` and `app.module.ts` files if it has not already been done.
+Clean up your project by removing `app-routing.module.ts` and `app.module.ts` files if they have not already been removed.
 
 #### Migration to lazy-loaded routes when working with large applications
 
-You may have some other modules that are maybe lazy-loaded. Just be sure that all your components are standalone before continuing.
+You may have some other modules that are lazy-loaded. Just be sure that all your components are standalone before continuing.
 
 > You can run the following command to convert eagerly loaded component routes to lazy loaded routes. This allows the build process to split the production bundle into smaller chunks, to avoid a big JS bundle that includes all routes, which negatively affects initial page load of an application.
 
@@ -603,7 +603,7 @@ export const demandes_routes: Routes = [
 
 ### Migrate from NgClass to class bindings
 
-**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+🚨 **WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
 
 ```bash
 npm run build
@@ -670,7 +670,7 @@ After:
 
 ### Migrate from NgStyle to style bindings
 
-**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+🚨 **WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
 
 ```bash
 npm run build
@@ -691,7 +691,7 @@ ng generate @angular/core:ngstyle-to-style
 
 ### Convert CommonModule usage to standalone imports
 
-**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+🚨 **WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
 
 ```bash
 npm run build
@@ -748,7 +748,7 @@ export class NumberCurrencyFormatterDirective implements OnInit {
 
 ### Migrate to signal queries
 
-**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+🚨 **WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
 
 ```bash
 npm run build
@@ -770,7 +770,7 @@ ng generate @angular/core:signal-queries-migration --insert-todos
 
 ### Migrate to output functions
 
-**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+🚨 **WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
 
 ```bash
 npm run build
@@ -792,7 +792,7 @@ When needing to subscribe to an output, you can use `outputToObservable` from `@
 
 Check our [Angular signals guide](ANGULAR_SIGNALS.md) for more information about signals and input signals.
 
-**WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
+🚨 **WARNING: The following command will work only when your application compiles without errors. If you have errors, fix them before continuing.**
 
 ```bash
 npm run build
@@ -974,6 +974,28 @@ describe('AppComponent', () => {
 });
 ```
 
+#### Running fakeAsync tests using spyOnProperty with Vitest
+
+Example of transformation:
+
+```diff
+beforeEach(() => {
+-   spyOnProperty(sessionInfo, 'data').and.returnValue(of(sessionInfoData));
++   vi.spyOn(sessionInfo, 'data', 'get').mockReturnValue(of(sessionInfoData));
+});
+
+- it('should properly map the initial data', fakeAsync(() => {
++ it('should properly map the initial data', async () => {
+    const form = new MenuOrderForm();
+-   service.enrichWithSessionInfoData(form);
+-   tick(200);
++   await firstValueFrom(service.enrichWithSessionInfoData(form));
+
+    // expect(...) here
+- }));
++ });
+```
+
 ### Migrate to eslint flat configuration
 
 ```bash
@@ -1274,6 +1296,8 @@ In `front/src/`, remove the file `typings.d.ts` if it is still there.
 
 ### Husky pre-commit hook
 
+💡 **Tip: For multi-projects, see section below `Husky pre-commit hook for multi-project repository`**
+
 ```bash
 npm install --save-dev husky lint-staged
 npx husky init
@@ -1301,7 +1325,17 @@ You should see in your project root folder `.husky` a new folder `_`.
 
 #### Husky pre-commit hook for multi-project repository
 
-- when having a multi-project repository, modify `.husky/pre-commit` file with following content to make sure husky is running in the right folder:
+💡 **Tip: Skip this part if you have already followed section `Husky pre-commit hook`**
+
+```bash
+npm install --save-dev husky lint-staged
+npx husky init
+chmod +x .husky/pre-commit
+mv ./.husky ../../.husky
+git add -A
+```
+
+Replace `.husky/pre-commit` content with the following:
 
 ```bash
 projects=$(git diff --cached --name-only --diff-filter=ACMR | awk -F'/' '{print $1}' | sort -u)
@@ -1314,13 +1348,37 @@ for project in $projects; do
 done
 ```
 
-and move it to the root folder of your repository. Then change your `package.json` by modifying `prepare` script to run husky from the parent folder:
+- In your `package.json`, modify `prepare` script to run husky from the parent folder:
 
 ```diff
 - "prepare": "husky"
 + "prepare": "cd ../.. && husky"
 ```
 
+Then run:
+
+```bash
+npm install
+```
+
+You should see in your project root folder `.husky` a new folder `_`.
+
+#### lint-staged
+
+In your `package.json` file, check for existing `lint-staged` section and add/modify with the following content. If it does not exist, create it:
+
+```json
+"lint-staged": {
+    "*.ts": [
+        "eslint --fix",
+        "prettier --config ./.prettierrc --write"
+    ],
+    "*.{js,jsx,json,css,scss,md,html}": [
+        "prettier --config ./.prettierrc --write"
+    ]
+},
+```
+
 #### Manually run formatting commands
 
 ```bash
@@ -1405,7 +1463,7 @@ npm install
 
 #### Build and launch your application
 
-**NB: You will most probably need to fix some compilation errors such as adding `override` when needed**
+💡 **NB: You will most probably need to fix some compilation errors such as adding `override` when needed**
 
 ```bash
 npm run build