Fix front-end unit tests (#2529)

This doesn't really add any tests, and we'll require many more additions
if we actually want to have full unit testing, but this at least makes
the tests pass when running `npm test`.

console-webapp/build.gradle

@@ -69,7 +69,9 @@ task deploy(type: Exec) {
 }
 
 tasks.buildConsoleWebappProd.dependsOn(tasks.npmInstallDeps)
+tasks.runConsoleWebappUnitTests.dependsOn(tasks.npmInstallDeps)
 tasks.applyFormatting.dependsOn(tasks.npmInstallDeps)
 tasks.checkFormatting.dependsOn(tasks.npmInstallDeps)
 tasks.build.dependsOn(tasks.checkFormatting)
+tasks.build.dependsOn(tasks.runConsoleWebappUnitTests)
 tasks.deploy.dependsOn(tasks.buildConsoleWebappProd)

console-webapp/karma.conf.js

@@ -3,6 +3,17 @@
 
 module.exports = function (config) {
   config.set({
+    customLaunchers: {
+      ChromeHeadless: {
+        base: 'Chrome',
+        flags: [
+          '--no-sandbox',
+          '--disable-gpu',
+          '--headless',
+          '--remote-debugging-port=9222'
+        ]
+      }
+    },
     basePath: '',
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [

console-webapp/src/app/domains/domainList.component.spec.ts

@@ -20,6 +20,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialModule } from '../material.module';
 import { BackendService } from '../shared/services/backend.service';
 import { DomainListComponent } from './domainList.component';
+import { FormsModule } from '@angular/forms';
 
 describe('DomainListComponent', () => {
   let component: DomainListComponent;
@@ -28,7 +29,7 @@ describe('DomainListComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [DomainListComponent],
-      imports: [MaterialModule, BrowserAnimationsModule],
+      imports: [MaterialModule, BrowserAnimationsModule, FormsModule],
       providers: [
         BackendService,
         provideHttpClient(),

console-webapp/src/app/registrar/registrarSelector.component.spec.ts

@@ -20,6 +20,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialModule } from '../material.module';
 import { BackendService } from '../shared/services/backend.service';
 import { RegistrarSelectorComponent } from './registrarSelector.component';
+import { FormsModule } from '@angular/forms';
 
 describe('RegistrarSelectorComponent', () => {
   let component: RegistrarSelectorComponent;
@@ -28,7 +29,7 @@ describe('RegistrarSelectorComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [RegistrarSelectorComponent],
-      imports: [MaterialModule, BrowserAnimationsModule],
+      imports: [MaterialModule, BrowserAnimationsModule, FormsModule],
       providers: [
         BackendService,
         provideHttpClient(),

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

@@ -20,20 +20,18 @@ import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
 import { MaterialModule } from 'src/app/material.module';
-import {
-  Registrar,
-  RegistrarService,
-} from 'src/app/registrar/registrar.service';
+import { RegistrarService } from 'src/app/registrar/registrar.service';
 import { BackendService } from 'src/app/shared/services/backend.service';
 import SecurityComponent from './security.component';
-import { SecurityService, apiToUiConverter } from './security.service';
+import { SecurityService } from './security.service';
+import SecurityEditComponent from './securityEdit.component';
+import { MOCK_REGISTRAR_SERVICE } from 'src/testdata/registrar/registrar.service.mock';
 
 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, [
@@ -46,16 +44,13 @@ describe('SecurityComponent', () => {
 
     saveSpy = securityServiceSpy.saveChanges;
 
-    dummyRegistrarService = {
-      registrar: { ipAddressAllowList: ['123.123.123.123'] },
-    } as RegistrarService;
-
     await TestBed.configureTestingModule({
-      declarations: [SecurityComponent],
+      declarations: [SecurityEditComponent, SecurityComponent],
       imports: [MaterialModule, BrowserAnimationsModule, FormsModule],
       providers: [
         BackendService,
-        { provide: RegistrarService, useValue: dummyRegistrarService },
+        SecurityService,
+        { provide: RegistrarService, useValue: MOCK_REGISTRAR_SERVICE },
         provideHttpClient(),
         provideHttpClientTesting(),
       ],
@@ -78,78 +73,65 @@ describe('SecurityComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should render ip allow list', waitForAsync(() => {
-    component.enableEdit();
+  it('should render security elements', waitForAsync(() => {
+    fixture.detectChanges();
     fixture.whenStable().then(() => {
-      expect(
-        Array.from(
-          fixture.nativeElement.querySelectorAll(
-            '.settings-security__ip-allowlist'
-          )
-        )
-      ).toHaveSize(1);
-      expect(
-        fixture.nativeElement.querySelector('.settings-security__ip-allowlist')
-          .value
-      ).toBe('123.123.123.123');
+      let listElems: Array<HTMLElement> = Array.from(
+        fixture.nativeElement.querySelectorAll('span.console-app__list-value')
+      );
+      expect(listElems).toHaveSize(8);
+      expect(listElems.map((e) => e.textContent)).toEqual([
+        'Change the password used for EPP logins',
+        '••••••••••••••',
+        'Restrict access to EPP production servers to the following IP/IPv6 addresses, or ranges like 1.1.1.0/24',
+        '123.123.123.123',
+        'X.509 PEM certificate for EPP production access',
+        'No client certificate on file.',
+        'X.509 PEM backup certificate for EPP production access',
+        'No failover certificate on file.',
+      ]);
     });
   }));
 
   it('should remove ip', waitForAsync(() => {
-    expect(
-      Array.from(
-        fixture.nativeElement.querySelectorAll(
-          '.settings-security__ip-allowlist'
-        )
-      )
-    ).toHaveSize(1);
-    component.removeIpEntry(0);
+    component.dataSource.ipAddressAllowList =
+      component.dataSource.ipAddressAllowList?.splice(1);
     fixture.whenStable().then(() => {
       fixture.detectChanges();
-      expect(
-        Array.from(
-          fixture.nativeElement.querySelectorAll(
-            '.settings-security__ip-allowlist'
-          )
-        )
-      ).toHaveSize(0);
+      let listElems: Array<HTMLElement> = Array.from(
+        fixture.nativeElement.querySelectorAll('span.console-app__list-value')
+      );
+      expect(listElems.map((e) => e.textContent)).toContain(
+        'No IP addresses on file.'
+      );
     });
   }));
 
-  it('should toggle inEdit', () => {
-    expect(component.inEdit).toBeFalse();
-    component.enableEdit();
-    expect(component.inEdit).toBeTrue();
+  it('should toggle isEditingSecurity', () => {
+    expect(component.securityService.isEditingSecurity).toBeFalse();
+    component.editSecurity();
+    expect(component.securityService.isEditingSecurity).toBeTrue();
   });
 
-  it('should create temporary data structure', () => {
-    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).toEqual(
-      apiToUiConverter(dummyRegistrarService.registrar)
-    );
+  it('should toggle isEditingPassword', () => {
+    expect(component.securityService.isEditingPassword).toBeFalse();
+    component.editEppPassword();
+    expect(component.securityService.isEditingPassword).toBeTrue();
   });
 
   it('should call save', waitForAsync(async () => {
-    component.enableEdit();
-    fixture.detectChanges();
+    component.editSecurity();
     await fixture.whenStable();
+    fixture.detectChanges();
     const el = fixture.nativeElement.querySelector(
-      '.settings-security__clientCertificate'
+      '.console-app__clientCertificateValue'
     );
     el.value = 'test';
     el.dispatchEvent(new Event('input'));
     fixture.detectChanges();
     await fixture.whenStable();
     fixture.nativeElement
-      .querySelector('.settings-security__actions-save')
+      .querySelector('.settings-security__edit-save')
       .click();
     expect(saveSpy).toHaveBeenCalledOnceWith({
       ipAddressAllowList: [{ value: '123.123.123.123' }],

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

@@ -35,6 +35,7 @@ export default class SecurityComponent {
       if (this.registrarService.registrar()) {
         this.dataSource = apiToUiConverter(this.registrarService.registrar());
         this.securityService.isEditingSecurity = false;
+        this.securityService.isEditingPassword = false;
       }
     });
   }

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

@@ -21,11 +21,13 @@ import { BackendService } from 'src/app/shared/services/backend.service';
 import SecurityComponent from './security.component';
 import {
   SecurityService,
-  SecuritySettings,
-  SecuritySettingsBackendModel,
   apiToUiConverter,
   uiToApiConverter,
 } from './security.service';
+import {
+  SecuritySettings,
+  SecuritySettingsBackendModel,
+} from 'src/app/registrar/registrar.service';
 
 describe('SecurityService', () => {
   const uiMockData: SecuritySettings = {

console-webapp/src/app/settings/security/securityEdit.component.html

@@ -33,6 +33,7 @@
     <p>X.509 PEM certificate for EPP production access.</p>
     <mat-form-field appearance="outline">
       <textarea
+        class="console-app__clientCertificateValue"
         matInput
         [(ngModel)]="dataSource.clientCertificate"
         [ngModelOptions]="{ standalone: true }"

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

@@ -32,7 +32,14 @@ describe('WhoisComponent', () => {
       imports: [MaterialModule, BrowserAnimationsModule],
       providers: [
         BackendService,
-        { provide: RegistrarService, useValue: { registrar: {} } },
+        {
+          provide: RegistrarService,
+          useValue: {
+            registrar: function () {
+              return {};
+            },
+          },
+        },
         provideHttpClient(),
         provideHttpClientTesting(),
       ],

console-webapp/src/testdata/registrar/registrar.service.mock.ts

@@ -0,0 +1,21 @@
+// Copyright 2024 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { RegistrarService } from 'src/app/registrar/registrar.service';
+
+export const MOCK_REGISTRAR_SERVICE = {
+  registrar: function () {
+    return { ipAddressAllowList: ['123.123.123.123'] };
+  },
+} as RegistrarService;

console-webapp/tsconfig.json

@@ -29,5 +29,6 @@
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  }
+  },
+  "exclude": ["./src/testdata/*.*/*.ts"]
 }