NAS-132636: Fix unit tests (Part 2)

truenas · Dec 11, 2024 · 0a1d273 · 0a1d273
1 parent b8ddb01
commit 0a1d273
Show file tree

Hide file tree

Showing 13 changed files with 95 additions and 92 deletions.
diff --git a/...rm/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.spec.ts b/...rm/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.spec.ts
@@ -2,7 +2,6 @@ import {
   FormArray, FormControl, FormGroup, ReactiveFormsModule,
 } from '@angular/forms';
 import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
-import { MockComponent } from 'ng-mocks';
 import { BehaviorSubject, of } from 'rxjs';
 import { CodeEditorLanguage } from 'app/enums/code-editor-language.enum';
 import {
@@ -20,15 +19,12 @@ import { CustomUntypedFormField } from 'app/modules/forms/ix-dynamic-form/compon
 import { IxDynamicFormItemComponent } from 'app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component';
 import { IxCheckboxComponent } from 'app/modules/forms/ix-forms/components/ix-checkbox/ix-checkbox.component';
 import { IxCodeEditorComponent } from 'app/modules/forms/ix-forms/components/ix-code-editor/ix-code-editor.component';
-import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { IxExplorerComponent } from 'app/modules/forms/ix-forms/components/ix-explorer/ix-explorer.component';
 import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.component';
 import { IxIpInputWithNetmaskComponent } from 'app/modules/forms/ix-forms/components/ix-ip-input-with-netmask/ix-ip-input-with-netmask.component';
-import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
 import { IxListItemComponent } from 'app/modules/forms/ix-forms/components/ix-list/ix-list-item/ix-list-item.component';
 import { IxListComponent } from 'app/modules/forms/ix-forms/components/ix-list/ix-list.component';
 import { IxSelectComponent } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
-import { CastPipe } from 'app/modules/pipes/cast/cast.pipe';
 
 const dynamicForm = new FormGroup({
   dict: new FormGroup({
@@ -138,19 +134,6 @@ describe('IxDynamicFormItemComponent', () => {
     imports: [
       ReactiveFormsModule,
     ],
-    declarations: [
-      MockComponent(IxErrorsComponent),
-      MockComponent(IxLabelComponent),
-      MockComponent(IxInputComponent),
-      MockComponent(IxListComponent),
-      MockComponent(IxCodeEditorComponent),
-      MockComponent(IxListItemComponent),
-      MockComponent(IxSelectComponent),
-      MockComponent(IxCheckboxComponent),
-      MockComponent(IxIpInputWithNetmaskComponent),
-      MockComponent(IxExplorerComponent),
-      CastPipe,
-    ],
   });
 
   beforeEach(() => {
@@ -166,12 +149,12 @@ describe('IxDynamicFormItemComponent', () => {
         },
       });
       expect(spectator.query('ix-input')).toBeVisible();
-      expect(spectator.query(IxInputComponent).required).toBe(inputSchema.required);
-      expect(spectator.query(IxInputComponent).type).toBe(inputSchema.inputType);
-      expect(spectator.query(IxInputComponent).tooltip).toBe(inputSchema.tooltip);
+      expect(spectator.query(IxInputComponent).required()).toBe(inputSchema.required);
+      expect(spectator.query(IxInputComponent).type()).toBe(inputSchema.inputType);
+      expect(spectator.query(IxInputComponent).tooltip()).toBe(inputSchema.tooltip);
 
       expect(spectator.query('ix-input')).not.toBeHidden();
-      const field = spectator.component.dynamicForm.controls.input as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.input as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -188,10 +171,10 @@ describe('IxDynamicFormItemComponent', () => {
         },
       });
       expect(spectator.query('ix-code-editor')).toBeVisible();
-      expect(spectator.query(IxCodeEditorComponent).required).toBe(textSchema.required);
-      expect(spectator.query(IxCodeEditorComponent).tooltip).toBe(textSchema.tooltip);
+      expect(spectator.query(IxCodeEditorComponent).required()).toBe(textSchema.required);
+      expect(spectator.query(IxCodeEditorComponent).tooltip()).toBe(textSchema.tooltip);
       expect(spectator.query('ix-code-editor')).not.toBeHidden();
-      const field = spectator.component.dynamicForm.controls.text as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.text as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -208,12 +191,12 @@ describe('IxDynamicFormItemComponent', () => {
         },
       });
       expect(spectator.query('ix-select')).toBeVisible();
-      expect(spectator.query(IxSelectComponent).required).toBe(selectSchema.required);
-      expect(spectator.query(IxSelectComponent).hideEmpty).toBe(selectSchema.hideEmpty);
-      expect(spectator.query(IxSelectComponent).tooltip).toBe(selectSchema.tooltip);
+      expect(spectator.query(IxSelectComponent).required()).toBe(selectSchema.required);
+      expect(spectator.query(IxSelectComponent).hideEmpty()).toBe(selectSchema.hideEmpty);
+      expect(spectator.query(IxSelectComponent).tooltip()).toBe(selectSchema.tooltip);
 
       expect(spectator.query('ix-select')).not.toBeHidden();
-      const field = spectator.component.dynamicForm.controls.select as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.select as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -230,11 +213,11 @@ describe('IxDynamicFormItemComponent', () => {
         },
       });
       expect(spectator.query('ix-checkbox')).toBeVisible();
-      expect(spectator.query(IxCheckboxComponent).required).toBe(checkboxSchema.required);
-      expect(spectator.query(IxCheckboxComponent).tooltip).toBe(checkboxSchema.tooltip);
+      expect(spectator.query(IxCheckboxComponent).required()).toBe(checkboxSchema.required);
+      expect(spectator.query(IxCheckboxComponent).tooltip()).toBe(checkboxSchema.tooltip);
 
       expect(spectator.query('ix-checkbox')).not.toBeHidden();
-      const field = spectator.component.dynamicForm.controls.checkbox as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.checkbox as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -251,11 +234,11 @@ describe('IxDynamicFormItemComponent', () => {
         },
       });
       expect(spectator.query('ix-ip-input-with-netmask')).toBeVisible();
-      expect(spectator.query(IxIpInputWithNetmaskComponent).required).toBe(ipaddrSchema.required);
-      expect(spectator.query(IxIpInputWithNetmaskComponent).tooltip).toBe(ipaddrSchema.tooltip);
+      expect(spectator.query(IxIpInputWithNetmaskComponent).required()).toBe(ipaddrSchema.required);
+      expect(spectator.query(IxIpInputWithNetmaskComponent).tooltip()).toBe(ipaddrSchema.tooltip);
 
       expect(spectator.query('ix-ip-input-with-netmask')).not.toBeHidden();
-      const field = spectator.component.dynamicForm.controls.ipaddr as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.ipaddr as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -272,11 +255,11 @@ describe('IxDynamicFormItemComponent', () => {
         },
       });
       expect(spectator.query('ix-explorer')).toBeVisible();
-      expect(spectator.query(IxExplorerComponent).required).toBe(explorerSchema.required);
-      expect(spectator.query(IxExplorerComponent).tooltip).toBe(explorerSchema.tooltip);
+      expect(spectator.query(IxExplorerComponent).required()).toBe(explorerSchema.required);
+      expect(spectator.query(IxExplorerComponent).tooltip()).toBe(explorerSchema.tooltip);
 
       expect(spectator.query('ix-explorer')).not.toBeHidden();
-      const field = spectator.component.dynamicForm.controls.explorer as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.explorer as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -295,11 +278,11 @@ describe('IxDynamicFormItemComponent', () => {
       expect(spectator.query('ix-list')).toBeVisible();
       expect(spectator.queryAll('ix-list-item')).toHaveLength(1);
       expect(spectator.queryAll('ix-dynamic-form-item')).toHaveLength(listSchema.items.length);
-      expect(spectator.query(IxListComponent).empty).toBe(false);
-      expect(spectator.query(IxListComponent).label).toBe(listSchema.title);
+      expect(spectator.query(IxListComponent).empty()).toBe(false);
+      expect(spectator.query(IxListComponent).label()).toBe(listSchema.title);
 
       expect(spectator.query('ix-list')).not.toBeHidden();
-      const field = spectator.component.dynamicForm.controls.list as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.list as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -322,7 +305,7 @@ describe('IxDynamicFormItemComponent', () => {
         expect(item).not.toBeHidden();
       });
 
-      const field = spectator.component.dynamicForm.controls.dict as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.dict as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -344,7 +327,7 @@ describe('IxDynamicFormItemComponent', () => {
         },
       });
 
-      const field = spectator.component.dynamicForm.controls.list as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.list as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }
@@ -368,7 +351,7 @@ describe('IxDynamicFormItemComponent', () => {
         },
       });
 
-      const field = spectator.component.dynamicForm.controls.list as CustomUntypedFormField;
+      const field = spectator.component.dynamicForm().controls.list as CustomUntypedFormField;
       if (!field.hidden$) {
         field.hidden$ = new BehaviorSubject<boolean>(false);
       }

diff --git a/...es/global-search/components/global-search-trigger/global-search-trigger.component.spec.ts b/...es/global-search/components/global-search-trigger/global-search-trigger.component.spec.ts
@@ -21,7 +21,6 @@ describe('GlobalSearchTriggerComponent', () => {
     imports: [
       MockComponent(KeyboardShortcutComponent),
       MockComponent(GlobalSearchComponent),
-      MatInput,
     ],
     providers: [
       mockProvider(UiSearchProvider, {
@@ -43,7 +42,7 @@ describe('GlobalSearchTriggerComponent', () => {
   });
 
   it('renders and input prompting for search', () => {
-    const input = spectator.query('input');
+    const input = spectator.query(MatInput);
     expect(input).toExist();
     expect(input).toHaveAttribute('placeholder', 'Search UI');
   });

diff --git a/src/app/modules/global-search/components/global-search/global-search.component.ts b/src/app/modules/global-search/components/global-search/global-search.component.ts
@@ -1,11 +1,10 @@
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { DOCUMENT } from '@angular/common';
 import {
-  Component, ChangeDetectionStrategy, OnInit, ElementRef, ChangeDetectorRef,
+  Component, ChangeDetectionStrategy, OnInit, ViewChild, ElementRef, ChangeDetectorRef,
   Inject,
   AfterViewInit,
   OnDestroy,
-  viewChild,
 } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatInput } from '@angular/material/input';
@@ -54,8 +53,8 @@ import { waitForSystemInfo } from 'app/store/system-info/system-info.selectors';
   ],
 })
 export class GlobalSearchComponent implements OnInit, AfterViewInit, OnDestroy {
-  readonly searchInput = viewChild<ElementRef<HTMLInputElement>>('searchInput');
-  readonly searchBoxWrapper = viewChild<ElementRef<HTMLElement>>('searchBoxWrapper');
+  @ViewChild('searchInput') searchInput: ElementRef<HTMLInputElement>;
+  @ViewChild('searchBoxWrapper') searchBoxWrapper: ElementRef<HTMLElement>;
 
   searchControl = new FormControl<string>('');
   searchResults: UiSearchableElement[];
@@ -64,7 +63,7 @@ export class GlobalSearchComponent implements OnInit, AfterViewInit, OnDestroy {
   detachOverlay: () => void; // passed from global-search-trigger
 
   get isSearchInputFocused(): boolean {
-    return document.activeElement === this.searchInput()?.nativeElement;
+    return document.activeElement === this.searchInput?.nativeElement;
   }
 
   constructor(
@@ -89,11 +88,11 @@ export class GlobalSearchComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit(): void {
-    this.searchBoxWrapper().nativeElement.addEventListener('focusout', this.handleFocusOut.bind(this));
+    this.searchBoxWrapper.nativeElement.addEventListener('focusout', this.handleFocusOut.bind(this));
   }
 
   ngOnDestroy(): void {
-    this.searchBoxWrapper().nativeElement.removeEventListener('focusout', this.handleFocusOut.bind(this));
+    this.searchBoxWrapper.nativeElement.removeEventListener('focusout', this.handleFocusOut.bind(this));
   }
 
   handleKeyDown(event: KeyboardEvent): void {
@@ -178,7 +177,7 @@ export class GlobalSearchComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   private focusInputElement(): void {
-    this.searchInput().nativeElement?.focus();
+    this.searchInput.nativeElement?.focus();
   }
 
   private getSystemVersion(): void {
@@ -211,7 +210,7 @@ export class GlobalSearchComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   private handleTabOutFromGlobalSearch(event: KeyboardEvent): void {
-    const focusableElements = this.focusService.getFocusableElements(this.searchBoxWrapper().nativeElement);
+    const focusableElements = this.focusService.getFocusableElements(this.searchBoxWrapper.nativeElement);
     const firstElement = focusableElements[0];
     const lastElement = focusableElements[focusableElements.length - 1];
 
@@ -230,7 +229,7 @@ export class GlobalSearchComponent implements OnInit, AfterViewInit, OnDestroy {
 
   private handleFocusOut(event: FocusEvent): void {
     const relatedTarget = event.relatedTarget as HTMLElement;
-    if (relatedTarget && !this.searchBoxWrapper().nativeElement.contains(relatedTarget)) {
+    if (relatedTarget && !this.searchBoxWrapper.nativeElement.contains(relatedTarget)) {
       this.detachOverlay();
     }
   }

diff --git a/...components/scheduler-modal/scheduler-preview-column/scheduler-preview-column.component.ts b/...components/scheduler-modal/scheduler-preview-column/scheduler-preview-column.component.ts
@@ -4,7 +4,7 @@ import {
   input,
   OnChanges,
   OnInit,
-  viewChild,
+  ViewChild,
 } from '@angular/core';
 import { MatIconButton } from '@angular/material/button';
 import { MatCalendar, MatCalendarCellClassFunction } from '@angular/material/datepicker';
@@ -54,19 +54,18 @@ export class SchedulerPreviewColumnComponent implements OnChanges, OnInit {
 
   cronPreview: CronSchedulePreview;
 
-  readonly calendar = viewChild<MatCalendar<Date>>('calendar');
+  @ViewChild('calendar', { static: true }) calendar: MatCalendar<Date>;
 
   get startDate(): Date {
-    const calendar = this.calendar();
-    if (!calendar.activeDate || differenceInCalendarMonths(calendar.activeDate, new Date()) < 1) {
+    if (!this.calendar.activeDate || differenceInCalendarMonths(this.calendar.activeDate, new Date()) < 1) {
       return utcToZonedTime(new Date(), this.timezone());
     }
 
-    return startOfMonth(calendar.activeDate);
+    return startOfMonth(this.calendar.activeDate);
   }
 
   get isPastMonth(): boolean {
-    return isBefore(this.calendar().activeDate, startOfMonth(new Date()));
+    return isBefore(this.calendar.activeDate, startOfMonth(new Date()));
   }
 
   ngOnChanges(): void {
@@ -75,7 +74,7 @@ export class SchedulerPreviewColumnComponent implements OnChanges, OnInit {
   }
 
   ngOnInit(): void {
-    this.calendar().stateChanges
+    this.calendar.stateChanges
       .pipe(untilDestroyed(this))
       .subscribe(() => this.onCalendarUpdated());
   }
@@ -114,11 +113,10 @@ export class SchedulerPreviewColumnComponent implements OnChanges, OnInit {
   }
 
   private refreshCalendar(): void {
-    const calendar = this.calendar();
-    if (!calendar.monthView) {
+    if (!this.calendar.monthView) {
       return;
     }
 
-    calendar.updateTodaysDate();
+    this.calendar.updateTodaysDate();
   }
 }
diff --git a/...ages/apps/components/available-apps/custom-app-button/custom-app-button.component.spec.ts b/...ages/apps/components/available-apps/custom-app-button/custom-app-button.component.spec.ts
@@ -5,6 +5,7 @@ import { MatMenuHarness } from '@angular/material/menu/testing';
 import { Router } from '@angular/router';
 import { SpectatorRouting } from '@ngneat/spectator';
 import { createRoutingFactory, mockProvider } from '@ngneat/spectator/jest';
+import { LazyLoadImageDirective } from 'ng-lazyload-image';
 import { MockComponent } from 'ng-mocks';
 import { of, Subject } from 'rxjs';
 import { customAppTrain, customApp } from 'app/constants/catalog.constants';
@@ -22,8 +23,10 @@ describe('CustomAppButtonComponent', () => {
 
   const createComponent = createRoutingFactory({
     component: CustomAppButtonComponent,
-    imports: [],
-    declarations: [MockComponent(AppCardComponent)],
+    imports: [
+      LazyLoadImageDirective,
+      MockComponent(AppCardComponent),
+    ],
     providers: [
       mockAuth(),
       mockProvider(DockerStore, {

diff --git a/src/app/pages/audit/audit.component.spec.ts b/src/app/pages/audit/audit.component.spec.ts
@@ -120,7 +120,7 @@ describe('AuditComponent', () => {
   it('loads and shows a table with audit entries', async () => {
     expect(api.call).toHaveBeenCalledWith(
       'audit.query',
-      [{ 'query-filters': [], 'query-options': { limit: 50, offset: 0, order_by: ['-message_timestamp'] } }],
+      [{ 'query-filters': [], 'query-options': { limit: 50, offset: 0, order_by: ['-message_timestamp'] }, remote_controller: false }],
     );
 
     await spectator.fixture.whenStable();