Update Angular to v17 (#2260)

console-webapp/src/app/settings/security/security.component.spec.ts

@@ -15,19 +15,24 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import SecurityComponent from './security.component';
-import { SecurityService } from './security.service';
+import { SecurityService, apiToUiConverter } from './security.service';
 import { BackendService } from 'src/app/shared/services/backend.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { MaterialModule } from 'src/app/material.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
 import { FormsModule } from '@angular/forms';
+import {
+  Registrar,
+  RegistrarService,
+} from 'src/app/registrar/registrar.service';
 
 describe('SecurityComponent', () => {
   let component: SecurityComponent;
   let fixture: ComponentFixture<SecurityComponent>;
   let fetchSecurityDetailsSpy: Function;
   let saveSpy: Function;
+  let dummyRegistrarService: RegistrarService;
 
   beforeEach(async () => {
     const securityServiceSpy = jasmine.createSpyObj(SecurityService, [
@@ -40,9 +45,9 @@ describe('SecurityComponent', () => {
 
     saveSpy = securityServiceSpy.saveChanges;
 
-    securityServiceSpy.securitySettings = {
-      ipAddressAllowList: [{ value: '123.123.123.123' }],
-    };
+    dummyRegistrarService = {
+      registrar: { ipAddressAllowList: ['123.123.123.123'] },
+    } as RegistrarService;
 
     await TestBed.configureTestingModule({
       imports: [
@@ -52,7 +57,10 @@ describe('SecurityComponent', () => {
         FormsModule,
       ],
       declarations: [SecurityComponent],
-      providers: [BackendService],
+      providers: [
+        BackendService,
+        { provide: RegistrarService, useValue: dummyRegistrarService },
+      ],
     })
       .overrideComponent(SecurityComponent, {
         set: {
@@ -72,10 +80,6 @@ describe('SecurityComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should call fetch spy', () => {
-    expect(fetchSecurityDetailsSpy).toHaveBeenCalledTimes(1);
-  });
-
   it('should render ip allow list', waitForAsync(() => {
     component.enableEdit();
     fixture.whenStable().then(() => {
@@ -121,16 +125,17 @@ describe('SecurityComponent', () => {
   });
 
   it('should create temporary data structure', () => {
-    expect(component.dataSource).toBe(
-      component.securityService.securitySettings
-    );
-    component.enableEdit();
-    expect(component.dataSource).not.toBe(
-      component.securityService.securitySettings
+    expect(component.dataSource).toEqual(
+      apiToUiConverter(dummyRegistrarService.registrar)
     );
+    component.removeIpEntry(0);
+    expect(component.dataSource).toEqual({ ipAddressAllowList: [] });
+    expect(dummyRegistrarService.registrar).toEqual({
+      ipAddressAllowList: ['123.123.123.123'],
+    } as Registrar);
     component.cancel();
-    expect(component.dataSource).toBe(
-      component.securityService.securitySettings
+    expect(component.dataSource).toEqual(
+      apiToUiConverter(dummyRegistrarService.registrar)
     );
   });
 

console-webapp/src/app/settings/security/security.service.spec.ts

@@ -24,6 +24,7 @@ import {
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import SecurityComponent from './security.component';
 import { BackendService } from 'src/app/shared/services/backend.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 describe('SecurityService', () => {
   const uiMockData: SecuritySettings = {
@@ -43,7 +44,7 @@ describe('SecurityService', () => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
       declarations: [SecurityComponent],
-      providers: [SecurityService, BackendService],
+      providers: [MatSnackBar, SecurityService, BackendService],
     });
     service = TestBed.inject(SecurityService);
   });

console-webapp/src/app/settings/whois/whois.component.html

@@ -133,9 +133,8 @@
         <h3>Address Line 1:</h3>
       </div>
       <div class="settings-whois__section-form">
-        <mat-form-field>
+        <mat-form-field *ngIf="registrar.localizedAddress?.street">
           <input
-            *ngIf="registrar.localizedAddress?.street"
             matInput
             type="text"
             [(ngModel)]="(registrar.localizedAddress?.street)![0]"
@@ -149,9 +148,8 @@
         <h3>City:</h3>
       </div>
       <div class="settings-whois__section-form">
-        <mat-form-field>
+        <mat-form-field *ngIf="registrar.localizedAddress">
           <input
-            *ngIf="registrar.localizedAddress"
             matInput
             type="text"
             [(ngModel)]="registrar.localizedAddress.city"
@@ -167,9 +165,8 @@
         <h3>Address Line 2:</h3>
       </div>
       <div class="settings-whois__section-form">
-        <mat-form-field>
+        <mat-form-field *ngIf="registrar.localizedAddress?.street">
           <input
-            *ngIf="registrar.localizedAddress?.street"
             matInput
             type="text"
             [(ngModel)]="(registrar.localizedAddress?.street)![1]"
@@ -183,9 +180,8 @@
         <h3>State/Region:</h3>
       </div>
       <div class="settings-whois__section-form">
-        <mat-form-field>
+        <mat-form-field *ngIf="registrar.localizedAddress">
           <input
-            *ngIf="registrar.localizedAddress"
             matInput
             type="text"
             [(ngModel)]="registrar.localizedAddress.state"
@@ -201,9 +197,8 @@
         <h3>Address Line 3:</h3>
       </div>
       <div class="settings-whois__section-form">
-        <mat-form-field>
+        <mat-form-field *ngIf="registrar.localizedAddress?.street">
           <input
-            *ngIf="registrar.localizedAddress?.street"
             matInput
             type="text"
             [(ngModel)]="(registrar.localizedAddress?.street)![2]"
@@ -217,9 +212,8 @@
         <h3>Country Code:</h3>
       </div>
       <div class="settings-whois__section-form">
-        <mat-form-field>
+        <mat-form-field *ngIf="registrar.localizedAddress">
           <input
-            *ngIf="registrar.localizedAddress"
             matInput
             type="text"
             [(ngModel)]="registrar.localizedAddress.countryCode"

console-webapp/src/app/settings/whois/whois.component.spec.ts

@@ -15,6 +15,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import WhoisComponent from './whois.component';
+import { MaterialModule } from 'src/app/material.module';
+import { BackendService } from 'src/app/shared/services/backend.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RegistrarService } from 'src/app/registrar/registrar.service';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('WhoisComponent', () => {
   let component: WhoisComponent;
@@ -23,6 +28,15 @@ describe('WhoisComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [WhoisComponent],
+      imports: [
+        HttpClientTestingModule,
+        MaterialModule,
+        BrowserAnimationsModule,
+      ],
+      providers: [
+        BackendService,
+        { provide: RegistrarService, useValue: { registrar: {} } },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(WhoisComponent);