Merge pull request #18586 from jhipster/skip_ci-angular_jest28

[angular] upgrade to angular to v14
jhipster · Jul 29, 2022 · 08cc714 · 08cc714
2 parents 124678a + 4875636
commit 08cc714
Show file tree

Hide file tree

Showing 33 changed files with 516 additions and 520 deletions.
diff --git a/generators/client/templates/angular/angular.json.ejs b/generators/client/templates/angular/angular.json.ejs
@@ -116,7 +116,6 @@
       }
     }
   },
-  "defaultProject": "<%= dasherizedBaseName %>",
   "cli": {
     "cache": {
       "enabled": true,

diff --git a/generators/client/templates/angular/package.json b/generators/client/templates/angular/package.json
@@ -1,29 +1,29 @@
 {
   "dependencies": {
-    "@angular/common": "13.3.11",
-    "@fortawesome/angular-fontawesome": "0.10.2",
+    "@angular/common": "14.1.0",
+    "@fortawesome/angular-fontawesome": "0.11.1",
     "@fortawesome/fontawesome-svg-core": "6.1.2",
     "@fortawesome/free-solid-svg-icons": "6.1.2",
-    "@ng-bootstrap/ng-bootstrap": "12.1.2",
+    "@ng-bootstrap/ng-bootstrap": "13.0.0",
     "@ngx-translate/core": "14.0.0",
     "@ngx-translate/http-loader": "7.0.0",
     "@popperjs/core": "2.11.5",
     "bootstrap": "5.2.0",
     "bootswatch": "5.2.0",
-    "ngx-cookie-service": "13.2.1",
-    "ngx-infinite-scroll": "13.0.2",
-    "ngx-webstorage": "9.0.0",
+    "ngx-cookie-service": "14.0.0",
+    "ngx-infinite-scroll": "14.0.0",
+    "ngx-webstorage": "10.0.1",
     "rxjs": "7.5.6",
     "tslib": "2.4.0",
-    "zone.js": "0.11.4"
+    "zone.js": "0.11.6"
   },
   "devDependencies": {
-    "@angular/cli": "13.3.7",
-    "@angular-builders/custom-webpack": "13.1.0",
-    "@angular-builders/jest": "13.0.4",
-    "@angular-eslint/eslint-plugin": "13.5.0",
+    "@angular/cli": "14.1.0",
+    "@angular-builders/custom-webpack": "14.0.0",
+    "@angular-builders/jest": "14.0.0",
+    "@angular-eslint/eslint-plugin": "14.0.2",
     "@types/node": "16.11.46",
-    "@types/jest": "27.5.1",
+    "@types/jest": "28.1.6",
     "@typescript-eslint/eslint-plugin": "5.31.0",
     "browser-sync": "2.27.10",
     "browser-sync-webpack-plugin": "2.3.0",
@@ -32,16 +32,16 @@
     "eslint-config-prettier": "8.5.0",
     "eslint-webpack-plugin": "3.2.0",
     "folder-hash": "4.0.2",
-    "jest": "27.5.1",
-    "jest-preset-angular": "11.1.2",
+    "jest": "28.1.3",
+    "jest-preset-angular": "12.2.0",
     "jest-date-mock": "1.0.8",
     "jest-junit": "14.0.0",
     "jest-sonar-reporter": "2.0.0",
     "merge-jsons-webpack-plugin": "2.0.1",
     "postcss-rtlcss": "3.7.2",
     "rimraf": "3.0.2",
-    "ts-jest": "27.1.4",
-    "typescript": "4.6.4",
+    "ts-jest": "28.0.7",
+    "typescript": "4.7.4",
     "webpack": "5.74.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-merge": "5.8.0",

diff --git a/generators/client/templates/angular/package.json.ejs b/generators/client/templates/angular/package.json.ejs
@@ -116,6 +116,7 @@
   <%_ }); _%>
 <%_ } _%>
     "jest": "<%= dependabotPackageJson.devDependencies['jest'] %>",
+    "jest-environment-jsdom": "<%= dependabotPackageJson.devDependencies['jest'] %>",
     "jest-preset-angular": "<%= dependabotPackageJson.devDependencies['jest-preset-angular'] %>",
     "jest-date-mock": "<%= dependabotPackageJson.devDependencies['jest-date-mock'] %>",
     "jest-junit": "<%= dependabotPackageJson.devDependencies['jest-junit'] %>",

diff --git a/.../src/main/webapp/app/account/password-reset/finish/password-reset-finish.component.ts.ejs b/.../src/main/webapp/app/account/password-reset/finish/password-reset-finish.component.ts.ejs
@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 import { Component, OnInit, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
 import { PasswordResetFinishService } from './password-reset-finish.service';
@@ -36,12 +36,18 @@ export class PasswordResetFinishComponent implements OnInit, AfterViewInit {
   success = false;
   key = '';
 
-  passwordForm = this.fb.group({
-    newPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]],
-    confirmPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]],
+  passwordForm = new FormGroup({
+    newPassword: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required, Validators.minLength(4), Validators.maxLength(50)],
+    }),
+    confirmPassword: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required, Validators.minLength(4), Validators.maxLength(50)],
+    }),
   });
 
-  constructor(private passwordResetFinishService: PasswordResetFinishService, private route: ActivatedRoute, private fb: FormBuilder) {}
+  constructor(private passwordResetFinishService: PasswordResetFinishService, private route: ActivatedRoute) {}
 
   ngOnInit(): void {
     this.route.queryParams.subscribe(params => {
@@ -62,15 +68,14 @@ export class PasswordResetFinishComponent implements OnInit, AfterViewInit {
     this.doNotMatch = false;
     this.error = false;
 
-    const newPassword = this.passwordForm.get(['newPassword'])!.value;
-    const confirmPassword = this.passwordForm.get(['confirmPassword'])!.value;
+    const { newPassword, confirmPassword } = this.passwordForm.getRawValue();
 
     if (newPassword !== confirmPassword) {
       this.doNotMatch = true;
     } else {
       this.passwordResetFinishService.save(this.key, newPassword).subscribe({
-        next: () => this.success = true,
-        error: () => this.error = true
+        next: () => (this.success = true),
+        error: () => (this.error = true),
       });
     }
   }

diff --git a/...s/client/templates/angular/src/main/webapp/app/account/password/password.component.ts.ejs b/...s/client/templates/angular/src/main/webapp/app/account/password/password.component.ts.ejs
@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { Observable } from 'rxjs';
 
 import { AccountService } from 'app/core/auth/account.service';
@@ -33,13 +33,19 @@ export class PasswordComponent implements OnInit {
   error = false;
   success = false;
   account$?: Observable<Account | null>;
-  passwordForm = this.fb.group({
-    currentPassword: ['', [Validators.required]],
-    newPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]],
-    confirmPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]],
+  passwordForm = new FormGroup({
+    currentPassword: new FormControl('', { nonNullable: true, validators: Validators.required }),
+    newPassword: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required, Validators.minLength(4), Validators.maxLength(50)],
+    }),
+    confirmPassword: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required, Validators.minLength(4), Validators.maxLength(50)],
+    }),
   });
 
-  constructor(private passwordService: PasswordService, private accountService: AccountService, private fb: FormBuilder) {}
+  constructor(private passwordService: PasswordService, private accountService: AccountService) {}
 
   ngOnInit(): void {
     this.account$ = this.accountService.identity();
@@ -50,13 +56,13 @@ export class PasswordComponent implements OnInit {
     this.success = false;
     this.doNotMatch = false;
 
-    const newPassword = this.passwordForm.get(['newPassword'])!.value;
-    if (newPassword !== this.passwordForm.get(['confirmPassword'])!.value) {
+    const { newPassword, confirmPassword, currentPassword } = this.passwordForm.getRawValue();
+    if (newPassword !== confirmPassword) {
       this.doNotMatch = true;
     } else {
-      this.passwordService.save(newPassword, this.passwordForm.get(['currentPassword'])!.value).subscribe({
-        next: () => this.success = true,
-        error: () => this.error = true
+      this.passwordService.save(newPassword, currentPassword).subscribe({
+        next: () => (this.success = true),
+        error: () => (this.error = true),
       });
     }
   }

diff --git a/...s/client/templates/angular/src/main/webapp/app/account/register/register.component.ts.ejs b/...s/client/templates/angular/src/main/webapp/app/account/register/register.component.ts.ejs
@@ -18,7 +18,7 @@
 -%>
 import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
 import { HttpErrorResponse } from '@angular/common/http';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 <%_ if (enableTranslation) { _%>
 import { TranslateService } from '@ngx-translate/core';
 <%_ } _%>
@@ -40,19 +40,35 @@ export class RegisterComponent implements AfterViewInit {
   errorUserExists = false;
   success = false;
 
-  registerForm = this.fb.group({
-    login: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(50), Validators.pattern("<%- LOGIN_REGEX %>")]],
-    email: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(254), Validators.email]],
-    password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]],
-    confirmPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]],
+  registerForm = new FormGroup({
+    login: new FormControl('', {
+      nonNullable: true,
+      validators: [
+        Validators.required,
+        Validators.minLength(1),
+        Validators.maxLength(50),
+        Validators.pattern('^[a-zA-Z0-9!$&*+=?^_`{|}~.-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$|^[_.@A-Za-z0-9-]+$'),
+      ],
+    }),
+    email: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required, Validators.minLength(5), Validators.maxLength(254), Validators.email],
+    }),
+    password: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required, Validators.minLength(4), Validators.maxLength(50)],
+    }),
+    confirmPassword: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required, Validators.minLength(4), Validators.maxLength(50)],
+    }),
   });
 
   constructor(
     <%_ if (enableTranslation) { _%>
     private translateService: TranslateService,
     <%_ } _%>
     private registerService: RegisterService,
-    private fb: FormBuilder
   ) {}
 
   ngAfterViewInit(): void {
@@ -67,15 +83,14 @@ export class RegisterComponent implements AfterViewInit {
     this.errorEmailExists = false;
     this.errorUserExists = false;
 
-    const password = this.registerForm.get(['password'])!.value;
-    if (password !== this.registerForm.get(['confirmPassword'])!.value) {
+    const { password, confirmPassword } = this.registerForm.getRawValue();
+    if (password !== confirmPassword) {
       this.doNotMatch = true;
     } else {
-      const login = this.registerForm.get(['login'])!.value;
-      const email = this.registerForm.get(['email'])!.value;
+      const { login, email } = this.registerForm.getRawValue();
       this.registerService
-        .save({ login, email, password, langKey: <% if (enableTranslation) { %>this.translateService.currentLang<% } else { %>'en'<% } %> })
-        .subscribe({ next: () => (this.success = true), error: response => this.processError(response)});
+        .save({ login, email, password, langKey: <% if (enableTranslation) { %>this.translateService.currentLang<% } else { %>'<%= nativeLanguage %>'<% } %> })
+        .subscribe({ next: () => (this.success = true), error: response => this.processError(response) });
     }
   }
 

diff --git a/...client/templates/angular/src/main/webapp/app/account/settings/settings.component.html.ejs b/...client/templates/angular/src/main/webapp/app/account/settings/settings.component.html.ejs
@@ -19,8 +19,8 @@
 <div>
   <div class="d-flex justify-content-center">
     <div class="col-md-8">
-      <h2 <%= jhiPrefix %>Translate="settings.title" [translateValues]="{ username: account.login }" *ngIf="account">
-        <%- this._getClientTranslation('settings.title', { username: '{{ account.login }}' }) %>
+      <h2 <%= jhiPrefix %>Translate="settings.title" [translateValues]="{ username: settingsForm.value.login }" *ngIf="settingsForm.value.login">
+        <%- this._getClientTranslation('settings.title', { username: '{{ settingsForm.value.login }}' }) %>
       </h2>
 
       <div class="alert alert-success" *ngIf="success" <%= jhiPrefix %>Translate="settings.messages.success">
@@ -29,7 +29,7 @@
 
       <<%= jhiPrefixDashed %>-alert-error></<%= jhiPrefixDashed %>-alert-error>
 
-      <form name="form" role="form" (ngSubmit)="save()" [formGroup]="settingsForm" *ngIf="account" novalidate>
+      <form name="form" role="form" (ngSubmit)="save()" [formGroup]="settingsForm" *ngIf="settingsForm.value.login" novalidate>
         <div class="mb-3">
           <label class="form-label" for="firstName" <%= jhiPrefix %>Translate="settings.form.firstname"><%- this._getClientTranslation('settings.form.firstname') %></label>
           <input

diff --git a/...ent/templates/angular/src/main/webapp/app/account/settings/settings.component.spec.ts.ejs b/...ent/templates/angular/src/main/webapp/app/account/settings/settings.component.spec.ts.ejs
@@ -91,7 +91,7 @@ describe('SettingsComponent', () => {
     expect(mockAccountService.identity).toHaveBeenCalled();
     expect(mockAccountService.save).toHaveBeenCalledWith(account);
     expect(mockAccountService.authenticate).toHaveBeenCalledWith(account);
-    expect(comp.settingsForm.value).toEqual(settingsFormValues);
+    expect(comp.settingsForm.value).toMatchObject(expect.objectContaining(settingsFormValues));
   });
 
   it('should notify of success upon successful save', () => {

diff --git a/...s/client/templates/angular/src/main/webapp/app/account/settings/settings.component.ts.ejs b/...s/client/templates/angular/src/main/webapp/app/account/settings/settings.component.ts.ejs
@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 <%_ if (enableTranslation) { _%>
 import { TranslateService } from '@ngx-translate/core';
 <%_ } _%>
@@ -28,70 +28,68 @@ import { Account } from 'app/core/auth/account.model';
 import { LANGUAGES } from 'app/config/language.constants';
 <%_ } _%>
 
+const initialAccount: Account = {} as Account;
+
 @Component({
   selector: '<%= jhiPrefixDashed %>-settings',
   templateUrl: './settings.component.html',
 })
 export class SettingsComponent implements OnInit {
-  account!: Account;
   success = false;
-  <%_ if (enableTranslation) { _%>
+<%_ if (enableTranslation) { _%>
   languages = LANGUAGES;
-  <%_ } _%>
-  settingsForm = this.fb.group({
-    firstName: [undefined, [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],
-    lastName: [undefined, [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],
-    email: [undefined, [Validators.required, Validators.minLength(5), Validators.maxLength(254), Validators.email]],
-    <%_ if (enableTranslation) { _%>
-    langKey: [undefined],
-    <%_ } _%>
+<%_ } _%>
+
+  settingsForm = new FormGroup({
+    firstName: new FormControl(initialAccount.firstName, {
+      nonNullable: true,
+      validators: [Validators.required, Validators.minLength(1), Validators.maxLength(50)],
+    }),
+    lastName: new FormControl(initialAccount.lastName, {
+      nonNullable: true,
+      validators: [Validators.required, Validators.minLength(1), Validators.maxLength(50)],
+    }),
+    email: new FormControl(initialAccount.email, {
+      nonNullable: true,
+      validators: [Validators.required, Validators.minLength(5), Validators.maxLength(254), Validators.email],
+    }),
+    langKey: new FormControl(initialAccount.langKey, { nonNullable: true }),
+
+    activated: new FormControl(initialAccount.activated, { nonNullable: true }),
+    authorities: new FormControl(initialAccount.authorities, { nonNullable: true }),
+    imageUrl: new FormControl(initialAccount.imageUrl, { nonNullable: true }),
+    login: new FormControl(initialAccount.login, { nonNullable: true }),
   });
 
   constructor(
     private accountService: AccountService,
-    private fb: FormBuilder,
-    <%_ if (enableTranslation) { _%>
+<%_ if (enableTranslation) { _%>
     private translateService: TranslateService,
-    <%_ } _%>
+<%_ } _%>
   ) {}
 
   ngOnInit(): void {
     this.accountService.identity().subscribe(account => {
       if (account) {
-        this.settingsForm.patchValue({
-          firstName: account.firstName,
-          lastName: account.lastName,
-          email: account.email,
-          <%_ if (enableTranslation) { _%>
-          langKey: account.langKey,
-          <%_ } _%>
-        });
-
-        this.account = account;
+        this.settingsForm.patchValue(account);
       }
     });
   }
 
   save(): void {
     this.success = false;
 
-    this.account.firstName = this.settingsForm.get('firstName')!.value;
-    this.account.lastName = this.settingsForm.get('lastName')!.value;
-    this.account.email = this.settingsForm.get('email')!.value;
-    <%_ if (enableTranslation) { _%>
-    this.account.langKey = this.settingsForm.get('langKey')!.value;
-    <%_ } _%>
-
-    this.accountService.save(this.account).subscribe(() => {
+    const account = this.settingsForm.getRawValue();
+    this.accountService.save(account).subscribe(() => {
       this.success = true;
 
-      this.accountService.authenticate(this.account);
+      this.accountService.authenticate(account);
 
-      <%_ if (enableTranslation) { _%>
-      if (this.account.langKey !== this.translateService.currentLang) {
-        this.translateService.use(this.account.langKey);
+<%_ if (enableTranslation) { _%>
+      if (account.langKey !== this.translateService.currentLang) {
+        this.translateService.use(account.langKey);
       }
-      <%_ } _%>
+<%_ } _%>
     });
   }
 }