NAS-132636: Fix unit tests (Part 1)

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

Hide file tree

Showing 101 changed files with 279 additions and 529 deletions.
diff --git a/package.json b/package.json
@@ -84,7 +84,7 @@
     "@mdi/svg": "~7.4.47",
     "@messageformat/core": "~3.3.0",
     "@ngneat/reactive-forms": "~5.0.2",
-    "@ngneat/spectator": "~19.0.0",
+    "@ngneat/spectator": "~19.1.2",
     "@ngneat/until-destroy": "~10.0.0",
     "@ngrx/component-store": "~18.1.1",
     "@ngrx/effects": "~18.1.1",

diff --git a/src/app/modules/charts/view-chart-area/view-chart-area.component.spec.ts b/src/app/modules/charts/view-chart-area/view-chart-area.component.spec.ts
@@ -78,7 +78,7 @@ describe('ViewChartAreaComponent', () => {
 
     // Make sure expected values are present after input is set
     expect(spectator.component.data()).toEqual({ datasets: [], labels: [] });
-    expect(spectator.component.canvas.nativeElement).toBeTruthy();
+    expect(spectator.component.canvas().nativeElement).toBeTruthy();
     expect(spectator.component.chart).toBeTruthy();
     expect(spectator.component.chart.data).toMatchObject(data);
   });

diff --git a/.../forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.spec.ts b/.../forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.spec.ts
@@ -1,19 +1,13 @@
 import { HarnessLoader, parallel } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import {
-  FormGroup, FormControl, ReactiveFormsModule, FormsModule,
+  FormGroup, FormControl, ReactiveFormsModule,
 } from '@angular/forms';
-import { TooltipComponent } from '@angular/material/tooltip';
 import { SpectatorHost } from '@ngneat/spectator';
 import { createHostFactory, mockProvider } from '@ngneat/spectator/jest';
-import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent } from 'ng-mocks';
 import { of } from 'rxjs';
 import { CloudSyncProviderName } from 'app/enums/cloudsync-provider.enum';
 import { CloudCredentialsSelectComponent } from 'app/modules/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component';
-import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
-import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
-import { IxSelectComponent } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.component';
 import { IxSelectHarness } from 'app/modules/forms/ix-forms/components/ix-select/ix-select.harness';
 import { CloudCredentialService } from 'app/services/cloud-credential.service';
 
@@ -53,15 +47,7 @@ describe('CloudCredentialsSelectComponent', () => {
   const createHost = createHostFactory({
     component: CloudCredentialsSelectComponent,
     imports: [
-      TranslateModule.forRoot(),
       ReactiveFormsModule,
-      FormsModule,
-    ],
-    declarations: [
-      IxSelectComponent,
-      MockComponent(IxErrorsComponent),
-      MockComponent(IxLabelComponent),
-      MockComponent(TooltipComponent),
     ],
     providers: [
       mockProvider(CloudCredentialService, mockCloudCredentialService),

diff --git a/...odules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form.component.spec.ts b/...odules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form.component.spec.ts
@@ -3,6 +3,7 @@ import {
 } from '@angular/forms';
 import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
+import { NgxPopperjsContentComponent, NgxPopperjsDirective, NgxPopperjsLooseDirective } from 'ngx-popperjs';
 import { DynamicFormSchema } from 'app/interfaces/dynamic-form-schema.interface';
 import { IxDynamicFormItemComponent } from 'app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component';
 import { IxDynamicFormComponent } from 'app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form.component';
@@ -22,8 +23,9 @@ describe('IxDynamicFormComponent', () => {
     component: IxDynamicFormComponent,
     imports: [
       ReactiveFormsModule,
-    ],
-    declarations: [
+      NgxPopperjsContentComponent,
+      NgxPopperjsLooseDirective,
+      NgxPopperjsDirective,
       MockComponent(IxDynamicFormItemComponent),
       MockComponent(IxFieldsetComponent),
     ],

diff --git a/...es/forms/ix-dynamic-form/components/ix-dynamic-wizard/ix-dynamic-wizard.component.spec.ts b/...es/forms/ix-dynamic-form/components/ix-dynamic-wizard/ix-dynamic-wizard.component.spec.ts
@@ -2,11 +2,8 @@ import {
   FormGroup, ReactiveFormsModule,
 } from '@angular/forms';
 import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
-import { MockComponent } from 'ng-mocks';
 import { DynamicWizardSchema } from 'app/interfaces/dynamic-form-schema.interface';
-import { IxDynamicFormItemComponent } from 'app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component';
 import { IxDynamicWizardComponent } from 'app/modules/forms/ix-dynamic-form/components/ix-dynamic-wizard/ix-dynamic-wizard.component';
-import { IxFieldsetComponent } from 'app/modules/forms/ix-forms/components/ix-fieldset/ix-fieldset.component';
 
 const dynamicForm = new FormGroup({});
 const dynamicSection = [
@@ -23,10 +20,6 @@ describe('IxDynamicWizardComponent', () => {
     imports: [
       ReactiveFormsModule,
     ],
-    declarations: [
-      MockComponent(IxDynamicFormItemComponent),
-      MockComponent(IxFieldsetComponent),
-    ],
   });
 
   beforeEach(() => {

diff --git a/src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.spec.ts b/src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.spec.ts
@@ -1,11 +1,8 @@
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatButtonToggleChange, MatButtonToggleModule } from '@angular/material/button-toggle';
-import { TooltipComponent } from '@angular/material/tooltip';
+import { MatButtonToggleChange } from '@angular/material/button-toggle';
 import { FormControl } from '@ngneat/reactive-forms';
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
-import { MockComponent } from 'ng-mocks';
 import { of } from 'rxjs';
-import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
 import { IxButtonGroupComponent } from './ix-button-group.component';
 
@@ -17,12 +14,6 @@ describe('IxButtonGroupComponent', () => {
     component: IxButtonGroupComponent,
     imports: [
       ReactiveFormsModule,
-      MatButtonToggleModule,
-    ],
-    declarations: [
-      MockComponent(IxErrorsComponent),
-      MockComponent(IxLabelComponent),
-      MockComponent(TooltipComponent),
     ],
   });
 
@@ -56,9 +47,9 @@ describe('IxButtonGroupComponent', () => {
 
       const label = spectator.query(IxLabelComponent);
       expect(label).toExist();
-      expect(label.label).toBe('I would like to');
-      expect(label.required).toBe(true);
-      expect(label.tooltip).toBe('Value is required.');
+      expect(label.label()).toBe('I would like to');
+      expect(label.required()).toBe(true);
+      expect(label.tooltip()).toBe('Value is required.');
     });
 
     it('renders a hint when it is provided', () => {

diff --git a/src/app/modules/forms/ix-forms/components/ix-chips/ix-chips.component.spec.ts b/src/app/modules/forms/ix-forms/components/ix-chips/ix-chips.component.spec.ts
@@ -2,18 +2,14 @@ import { HarnessLoader, parallel, TestKey } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { fakeAsync } from '@angular/core/testing';
 import { NgControl, ReactiveFormsModule, Validators } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatAutocompleteHarness } from '@angular/material/autocomplete/testing';
-import { MatChipsModule } from '@angular/material/chips';
 import { MatChipGridHarness } from '@angular/material/chips/testing';
 import { FormControl } from '@ngneat/reactive-forms';
 import {
   createHostFactory, mockProvider, SpectatorHost,
 } from '@ngneat/spectator/jest';
-import { MockComponent } from 'ng-mocks';
 import { of } from 'rxjs';
 import { IxChipsComponent } from 'app/modules/forms/ix-forms/components/ix-chips/ix-chips.component';
-import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
 
 describe('IxChipsComponent', () => {
@@ -26,16 +22,10 @@ describe('IxChipsComponent', () => {
     component: IxChipsComponent,
     imports: [
       ReactiveFormsModule,
-      MatAutocompleteModule,
-      MatChipsModule,
     ],
     providers: [
       mockProvider(NgControl),
     ],
-    declarations: [
-      IxErrorsComponent,
-      MockComponent(IxLabelComponent),
-    ],
   });
 
   beforeEach(async () => {
@@ -76,9 +66,9 @@ describe('IxChipsComponent', () => {
 
     const label = spectator.query(IxLabelComponent);
     expect(label).toExist();
-    expect(label.label).toBe('Apply To Groups');
-    expect(label.required).toBe(true);
-    expect(label.tooltip).toBe('Select local groups.');
+    expect(label.label()).toBe('Apply To Groups');
+    expect(label.required()).toBe(true);
+    expect(label.tooltip()).toBe('Select local groups.');
   });
 
   it('after creating the chip, the input field should be cleared', async () => {

diff --git a/src/app/modules/forms/ix-forms/components/ix-code-editor/ix-code-editor.spec.ts b/src/app/modules/forms/ix-forms/components/ix-code-editor/ix-code-editor.spec.ts
@@ -1,11 +1,8 @@
 import { ReactiveFormsModule } from '@angular/forms';
-import { TooltipComponent } from '@angular/material/tooltip';
 import { FormControl } from '@ngneat/reactive-forms';
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
-import { MockComponent } from 'ng-mocks';
 import { CodeEditorLanguage } from 'app/enums/code-editor-language.enum';
 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 { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
 
 describe('IxCodeEditor', () => {
@@ -16,11 +13,6 @@ describe('IxCodeEditor', () => {
     imports: [
       ReactiveFormsModule,
     ],
-    declarations: [
-      MockComponent(IxErrorsComponent),
-      MockComponent(IxLabelComponent),
-      MockComponent(TooltipComponent),
-    ],
   });
 
   beforeEach(() => {
@@ -47,9 +39,9 @@ describe('IxCodeEditor', () => {
 
       const label = spectator.query(IxLabelComponent);
       expect(label).toExist();
-      expect(label.label).toBe('Code Editor');
-      expect(label.required).toBe(true);
-      expect(label.tooltip).toBe('Enter json code');
+      expect(label.label()).toBe('Code Editor');
+      expect(label.required()).toBe(true);
+      expect(label.tooltip()).toBe('Enter json code');
     });
   });
 

diff --git a/src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.spec.ts b/src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.spec.ts
@@ -1,19 +1,15 @@
 import { discardPeriodicTasks, fakeAsync, tick } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { FormControl } from '@ngneat/reactive-forms';
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
-import { MockComponent } from 'ng-mocks';
 import { Observable, of } from 'rxjs';
 import { delay } from 'rxjs/operators';
 import { Option } from 'app/interfaces/option.interface';
 import { SimpleAsyncComboboxProvider } from 'app/modules/forms/ix-forms/classes/simple-async-combobox-provider';
 import { SimpleComboboxProvider } from 'app/modules/forms/ix-forms/classes/simple-combobox-provider';
 import { IxComboboxProvider } from 'app/modules/forms/ix-forms/components/ix-combobox/ix-combobox-provider';
 import { IxComboboxComponent } from 'app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component';
-import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
-import { TooltipComponent } from 'app/modules/tooltip/tooltip.component';
 
 class FakeProvider implements IxComboboxProvider {
   constructor(private options: Option[]) { }
@@ -36,12 +32,6 @@ describe('IxComboboxComponent', () => {
     component: IxComboboxComponent,
     imports: [
       ReactiveFormsModule,
-      MatAutocompleteModule,
-    ],
-    declarations: [
-      MockComponent(IxErrorsComponent),
-      MockComponent(IxLabelComponent),
-      MockComponent(TooltipComponent),
     ],
   });
 
@@ -73,9 +63,9 @@ describe('IxComboboxComponent', () => {
 
       const label = spectator.query(IxLabelComponent);
       expect(label).toExist();
-      expect(label.label).toBe('Apply To Group');
-      expect(label.required).toBe(true);
-      expect(label.tooltip).toBe('Select group to delete');
+      expect(label.label()).toBe('Apply To Group');
+      expect(label.required()).toBe(true);
+      expect(label.tooltip()).toBe('Select group to delete');
     });
   });
 

diff --git a/src/app/modules/forms/ix-forms/components/ix-date-picker/ix-date-picker.component.spec.ts b/src/app/modules/forms/ix-forms/components/ix-date-picker/ix-date-picker.component.spec.ts
@@ -2,18 +2,13 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { DateAdapter } from '@angular/material/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDatepickerInputHarness } from '@angular/material/datepicker/testing';
-import { MatInputModule } from '@angular/material/input';
 import { MatInputHarness } from '@angular/material/input/testing';
 import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
 import { parseISO } from 'date-fns';
-import { MockComponent } from 'ng-mocks';
 import { FormatDateTimePipe } from 'app/modules/dates/pipes/format-date-time/format-datetime.pipe';
 import { IxDateAdapter } from 'app/modules/dates/services/ix-date-adapter';
-import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
-import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
 import { LocaleService } from 'app/services/locale.service';
 import { IxDatepickerComponent } from './ix-date-picker.component';
 
@@ -26,13 +21,6 @@ describe('IxDatePickerComponent', () => {
     component: IxDatepickerComponent,
     imports: [
       ReactiveFormsModule,
-      MatDatepickerModule,
-      MatInputModule,
-    ],
-    declarations: [
-      MockComponent(IxErrorsComponent),
-      MockComponent(IxLabelComponent),
-      MockComponent(IxIconComponent),
     ],
     providers: [
       mockProvider(LocaleService, {
@@ -71,9 +59,9 @@ describe('IxDatePickerComponent', () => {
 
       const label = spectator.query(IxLabelComponent);
       expect(label).toExist();
-      expect(label.label).toBe('Label');
-      expect(label.tooltip).toBe('Tooltip');
-      expect(label.required).toBe(true);
+      expect(label.label()).toBe('Label');
+      expect(label.tooltip()).toBe('Tooltip');
+      expect(label.required()).toBe(true);
     });
 
     it('opens datepicker when input is clicked', async () => {

diff --git a/src/app/modules/forms/ix-forms/components/ix-input/ix-input.component.spec.ts b/src/app/modules/forms/ix-forms/components/ix-input/ix-input.component.spec.ts
@@ -1,15 +1,11 @@
 import { HarnessLoader, parallel } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatAutocompleteHarness } from '@angular/material/autocomplete/testing';
 import { FormControl } from '@ngneat/reactive-forms';
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
-import { MockComponent } from 'ng-mocks';
-import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component';
 import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component';
 import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
-import { TooltipComponent } from 'app/modules/tooltip/tooltip.component';
 import { IxInputComponent } from './ix-input.component';
 
 describe('IxInputComponent', () => {
@@ -22,13 +18,6 @@ describe('IxInputComponent', () => {
     component: IxInputComponent,
     imports: [
       ReactiveFormsModule,
-      MatAutocompleteModule,
-    ],
-    declarations: [
-      MockComponent(IxErrorsComponent),
-      MockComponent(IxLabelComponent),
-      MockComponent(TooltipComponent),
-      MockComponent(IxIconComponent),
     ],
   });
 
@@ -77,9 +66,9 @@ describe('IxInputComponent', () => {
 
         const label = spectator.query(IxLabelComponent);
         expect(label).toExist();
-        expect(label.label).toBe('New Password');
-        expect(label.required).toBe(true);
-        expect(label.tooltip).toBe('Minimum length is 8 characters.');
+        expect(label.label()).toBe('New Password');
+        expect(label.required()).toBe(true);
+        expect(label.tooltip()).toBe('Minimum length is 8 characters.');
       });
 
       it('renders a hint when it is provided', () => {
@@ -210,12 +199,12 @@ describe('IxInputComponent', () => {
         spectator.setHostInput('type', 'password');
 
         expect(spectator.query('input')).toHaveClass('password-field');
-        expect(spectator.query(IxIconComponent).name).toBe('visibility_off');
+        expect(spectator.query(IxIconComponent).name()).toBe('visibility_off');
 
         spectator.click('.toggle_pw');
 
         expect(spectator.query('input')).not.toHaveClass('password-field');
-        expect(spectator.query(IxIconComponent).name).toBe('visibility');
+        expect(spectator.query(IxIconComponent).name()).toBe('visibility');
       });
     });