NAS-130854 / 25.04 / Refactor trackBy for ix-table-body (#10604)

truenas · Sep 12, 2024 · 60c080d · 60c080d
1 parent d4c78ce
commit 60c080d
Show file tree

Hide file tree

Showing 130 changed files with 462 additions and 301 deletions.
diff --git a/src/app/core/testing/utils/fake-job.utils.ts b/src/app/core/testing/utils/fake-job.utils.ts
@@ -13,6 +13,7 @@ export function fakeSuccessfulJob<T = void, A = unknown[]>(
     exception: '',
     id: 0,
     result: jobResult,
+    time_finished: { $date: 12345678900 },
     state: JobState.Success,
   } as Job<T, A>;
 }
diff --git a/...es/ix-table/components/ix-table-body/cells/ix-cell-actions/ix-cell-actions.component.html b/...es/ix-table/components/ix-table-body/cells/ix-cell-actions/ix-cell-actions.component.html
@@ -1,15 +1,15 @@
 <div class="actions">
   @for (action of actions; track action) {
     @if (action.requiredRoles?.length || action.dynamicRequiredRoles) {
-      <div [matTooltip]="action.dynamicTooltip ? (action.dynamicTooltip(row) | async) : action.tooltip || ''">
-        @if (action.hidden ? !(action.hidden(row) | async) : true) {
+      <div [matTooltip]="action.dynamicTooltip ? (action.dynamicTooltip(row()) | async) : action.tooltip || ''">
+        @if (action.hidden ? !(action.hidden(row()) | async) : true) {
           <button
-            *ixRequiresRoles="action?.dynamicRequiredRoles ? (action.dynamicRequiredRoles(row) | async) : action.requiredRoles"
+            *ixRequiresRoles="action?.dynamicRequiredRoles ? (action.dynamicRequiredRoles(row()) | async) : action.requiredRoles"
             mat-icon-button
-            [ixTest]="[rowTestId(row), action.iconName, 'row-action']"
-            [attr.aria-label]="(action.dynamicTooltip ? (action.dynamicTooltip(row) | async) : action.tooltip || '') + ' ' + getAriaLabel(row)"
-            [disabled]="action.disabled ? (action.disabled(row) | async) : false"
-            (click)="$event.stopPropagation(); action.onClick(row)"
+            [ixTest]="[uniqueRowTag(row()), action.iconName, 'row-action']"
+            [attr.aria-label]="(action.dynamicTooltip ? (action.dynamicTooltip(row()) | async) : action.tooltip || '') + ' ' + getAriaLabel(row())"
+            [disabled]="action.disabled ? (action.disabled(row()) | async) : false"
+            (click)="$event.stopPropagation(); action.onClick(row())"
           >
             <ix-icon [name]="action.iconName"></ix-icon>
           </button>
@@ -18,15 +18,15 @@
     }
     @if (!action.requiredRoles?.length && !action.dynamicRequiredRoles) {
       <div
-        [matTooltip]="action.dynamicTooltip ? (action.dynamicTooltip(row) | async) : action.tooltip || ''"
+        [matTooltip]="action.dynamicTooltip ? (action.dynamicTooltip(row()) | async) : action.tooltip || ''"
       >
-        @if (action.hidden ? !(action.hidden(row) | async) : true) {
+        @if (action.hidden ? !(action.hidden(row()) | async) : true) {
           <button
             mat-icon-button
-            [ixTest]="[rowTestId(row), action.iconName, 'row-action']"
-            [attr.aria-label]="(action.dynamicTooltip ? (action.dynamicTooltip(row) | async) : action.tooltip || '') + ' ' + getAriaLabel(row)"
-            [disabled]="action.disabled ? (action.disabled(row) | async) : false"
-            (click)="$event.stopPropagation(); action.onClick(row)"
+            [ixTest]="[uniqueRowTag(row()), action.iconName, 'row-action']"
+            [attr.aria-label]="(action.dynamicTooltip ? (action.dynamicTooltip(row()) | async) : action.tooltip || '') + ' ' + getAriaLabel(row())"
+            [disabled]="action.disabled ? (action.disabled(row()) | async) : false"
+            (click)="$event.stopPropagation(); action.onClick(row())"
           >
             <ix-icon [name]="action.iconName"></ix-icon>
           </button>

diff --git a/...ules/ix-table/components/ix-table-body/cells/ix-cell-actions/ix-cell-actions.component.ts b/...ules/ix-table/components/ix-table-body/cells/ix-cell-actions/ix-cell-actions.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Role } from 'app/enums/role.enum';
 import { IconActionConfig } from 'app/modules/ix-table/components/ix-table-body/cells/ix-cell-actions/icon-action-config.interface';
-import { Column, ColumnComponent } from 'app/modules/ix-table/interfaces/table-column.interface';
+import { ColumnComponent, Column } from 'app/modules/ix-table/interfaces/column-component.class';
 
 @Component({
   selector: 'ix-cell-actions',

diff --git a/.../ix-table/components/ix-table-body/cells/ix-cell-checkbox/ix-cell-checkbox.component.html b/.../ix-table/components/ix-table-body/cells/ix-cell-checkbox/ix-cell-checkbox.component.html
@@ -1,8 +1,8 @@
 <mat-checkbox
   color="primary"
-  [ixTest]="[title, rowTestId(row), 'row-checkbox']"
+  [ixTest]="[title, uniqueRowTag(row()), 'row-checkbox']"
   [checked]="checked"
-  [aria-label]="(checked ? ('Uncheck' | translate) : ('Check' | translate)) + ' ' + getAriaLabel(row)"
+  [aria-label]="(checked ? ('Uncheck' | translate) : ('Check' | translate)) + ' ' + getAriaLabel(row())"
   (change)="onCheckboxChange($event)"
   (click)="$event.stopPropagation()"
 ></mat-checkbox>
diff --git a/...-table/components/ix-table-body/cells/ix-cell-checkbox/ix-cell-checkbox.component.spec.ts b/...-table/components/ix-table-body/cells/ix-cell-checkbox/ix-cell-checkbox.component.spec.ts
@@ -22,7 +22,7 @@ describe('IxCellCheckboxComponent', () => {
     spectator = createComponent();
     spectator.component.propertyName = 'booleanField';
     spectator.component.setRow({ booleanField: true });
-    spectator.component.rowTestId = (row) => 'checkbox-' + row.booleanField.toString();
+    spectator.component.uniqueRowTag = (row) => 'checkbox-' + row.booleanField.toString();
     spectator.component.ariaLabels = () => ['Label 1', 'Label 2'];
     spectator.detectChanges();
 
@@ -40,8 +40,9 @@ describe('IxCellCheckboxComponent', () => {
     expect(spectator.component.onRowCheck).toHaveBeenCalledWith({ booleanField: true }, false);
   });
 
-  it('gets aria label correctly', () => {
-    const ariaLabel = spectator.component.getAriaLabel(spectator.component.getRow());
-    expect(ariaLabel).toBe('Label 1 Label 2');
+  it('gets aria label correctly', async () => {
+    const checkbox = await loader.getHarness(MatCheckboxHarness);
+    const ariaLabel = await checkbox.getAriaLabel();
+    expect(ariaLabel).toBe('Uncheck Label 1 Label 2');
   });
 });
diff --git a/...es/ix-table/components/ix-table-body/cells/ix-cell-checkbox/ix-cell-checkbox.component.ts b/...es/ix-table/components/ix-table-body/cells/ix-cell-checkbox/ix-cell-checkbox.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { IxHeaderCellCheckboxComponent } from 'app/modules/ix-table/components/ix-table-head/head-cells/ix-header-cell-checkbox/ix-header-cell-checkbox.component';
-import { Column, ColumnComponent } from 'app/modules/ix-table/interfaces/table-column.interface';
+import { ColumnComponent, Column } from 'app/modules/ix-table/interfaces/column-component.class';
 
 @Component({
   selector: 'ix-cell-checkbox',
@@ -16,7 +16,7 @@ export class IxCellCheckboxComponent<T> extends ColumnComponent<T> {
   }
 
   onCheckboxChange(event: MatCheckboxChange): void {
-    this.onRowCheck(this.row, event.checked);
+    this.onRowCheck(this.row(), event.checked);
   }
 }
 

diff --git a/.../modules/ix-table/components/ix-table-body/cells/ix-cell-date/ix-cell-date.component.html b/.../modules/ix-table/components/ix-table-body/cells/ix-cell-date/ix-cell-date.component.html
@@ -1,10 +1,10 @@
 @if (date) {
   <ix-date
-    [ixTest]="[title, rowTestId(row), 'row-date']"
+    [ixTest]="[title, uniqueRowTag(row()), 'row-date']"
     [date]="date"
   ></ix-date>
 } @else {
-  <span [ixTest]="[title, rowTestId(row), 'row-date']">
+  <span [ixTest]="[title, uniqueRowTag(row()), 'row-date']">
     {{ 'N/A' | translate }}
   </span>
 }
diff --git a/...dules/ix-table/components/ix-table-body/cells/ix-cell-date/ix-cell-date.component.spec.ts b/...dules/ix-table/components/ix-table-body/cells/ix-cell-date/ix-cell-date.component.spec.ts
@@ -30,7 +30,7 @@ describe('IxCellDateComponent', () => {
       spectator = createComponent();
       spectator.component.propertyName = 'dateField';
       spectator.component.setRow({ dateField: new Date('2023-07-12 09:10:00') });
-      spectator.component.rowTestId = () => '';
+      spectator.component.uniqueRowTag = () => '';
       spectator.detectChanges();
     });
 
@@ -44,7 +44,7 @@ describe('IxCellDateComponent', () => {
       spectator = createComponent();
       spectator.component.propertyName = 'dateField';
       spectator.component.setRow({ dateField: null });
-      spectator.component.rowTestId = () => '';
+      spectator.component.uniqueRowTag = () => '';
       spectator.detectChanges();
     });
 

diff --git a/...pp/modules/ix-table/components/ix-table-body/cells/ix-cell-date/ix-cell-date.component.ts b/...pp/modules/ix-table/components/ix-table-body/cells/ix-cell-date/ix-cell-date.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ApiTimestamp } from 'app/interfaces/api-date.interface';
-import { Column, ColumnComponent } from 'app/modules/ix-table/interfaces/table-column.interface';
+import { Column, ColumnComponent } from 'app/modules/ix-table/interfaces/column-component.class';
 
 @Component({
   selector: 'ix-cell-date',

diff --git a/...components/ix-table-body/cells/ix-cell-relative-date/ix-cell-relative-date.component.html b/...components/ix-table-body/cells/ix-cell-relative-date/ix-cell-relative-date.component.html
@@ -1,4 +1,4 @@
 <span
   [matTooltip]="dateTooltip"
-  [ixTest]="[title, rowTestId(row), 'row-relative-date']"
+  [ixTest]="[title, uniqueRowTag(row()), 'row-relative-date']"
 >{{ date }}</span>
diff --git a/...ponents/ix-table-body/cells/ix-cell-relative-date/ix-cell-relative-date.component.spec.ts b/...ponents/ix-table-body/cells/ix-cell-relative-date/ix-cell-relative-date.component.spec.ts
@@ -28,7 +28,7 @@ describe('IxCellRelativeDateComponent', () => {
     spectator = createComponent();
     spectator.component.propertyName = 'dateField';
     spectator.component.setRow({ dateField: new Date(new Date().getTime() - (oneDayMillis * 10)) });
-    spectator.component.rowTestId = () => '';
+    spectator.component.uniqueRowTag = () => '';
     spectator.detectChanges();
   });
 

diff --git a/...e/components/ix-table-body/cells/ix-cell-relative-date/ix-cell-relative-date.component.ts b/...e/components/ix-table-body/cells/ix-cell-relative-date/ix-cell-relative-date.component.ts
@@ -3,7 +3,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { isValid } from 'date-fns';
 import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
 import { formatDistanceToNowShortened } from 'app/helpers/format-distance-to-now-shortened';
-import { Column, ColumnComponent } from 'app/modules/ix-table/interfaces/table-column.interface';
+import { ColumnComponent, Column } from 'app/modules/ix-table/interfaces/column-component.class';
 import { FormatDateTimePipe } from 'app/modules/pipes/format-date-time/format-datetime.pipe';
 import { LocaleService } from 'app/services/locale.service';
 

diff --git a/.../ix-table/components/ix-table-body/cells/ix-cell-schedule/ix-cell-schedule.component.html b/.../ix-table/components/ix-table-body/cells/ix-cell-schedule/ix-cell-schedule.component.html
@@ -1,3 +1,3 @@
 <span
-  [ixTest]="[title, rowTestId(row), 'row-schedule']"
+  [ixTest]="[title, uniqueRowTag(row()), 'row-schedule']"
 >{{ value | scheduleToCrontab }}</span>
diff --git a/...-table/components/ix-table-body/cells/ix-cell-schedule/ix-cell-schedule.component.spec.ts b/...-table/components/ix-table-body/cells/ix-cell-schedule/ix-cell-schedule.component.spec.ts
@@ -26,7 +26,7 @@ describe('IxCellScheduleComponent', () => {
     spectator = createComponent();
     spectator.component.propertyName = 'scheduleField';
     spectator.component.setRow({ scheduleField: schedule });
-    spectator.component.rowTestId = () => '';
+    spectator.component.uniqueRowTag = () => '';
     spectator.detectChanges();
   });
 

diff --git a/...es/ix-table/components/ix-table-body/cells/ix-cell-schedule/ix-cell-schedule.component.ts b/...es/ix-table/components/ix-table-body/cells/ix-cell-schedule/ix-cell-schedule.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Column, ColumnComponent } from 'app/modules/ix-table/interfaces/table-column.interface';
+import { ColumnComponent, Column } from 'app/modules/ix-table/interfaces/column-component.class';
 
 @Component({
   selector: 'ix-cell-schedule',

diff --git a/.../modules/ix-table/components/ix-table-body/cells/ix-cell-size/ix-cell-size.component.html b/.../modules/ix-table/components/ix-table-body/cells/ix-cell-size/ix-cell-size.component.html
@@ -1,3 +1,3 @@
 <span
-  [ixTest]="[title, rowTestId(row), 'row-size']"
+  [ixTest]="[title, uniqueRowTag(row()), 'row-size']"
 >{{ size | ixFileSize }}</span>
diff --git a/...dules/ix-table/components/ix-table-body/cells/ix-cell-size/ix-cell-size.component.spec.ts b/...dules/ix-table/components/ix-table-body/cells/ix-cell-size/ix-cell-size.component.spec.ts
@@ -18,7 +18,7 @@ describe('IxCellSizeComponent', () => {
     spectator = createComponent();
     spectator.component.propertyName = 'numberField';
     spectator.component.setRow({ numberField: 5 * 1024 * 1024 * 1024 });
-    spectator.component.rowTestId = () => '';
+    spectator.component.uniqueRowTag = () => '';
     spectator.detectChanges();
   });
 

diff --git a/...pp/modules/ix-table/components/ix-table-body/cells/ix-cell-size/ix-cell-size.component.ts b/...pp/modules/ix-table/components/ix-table-body/cells/ix-cell-size/ix-cell-size.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Column, ColumnComponent } from 'app/modules/ix-table/interfaces/table-column.interface';
+import { ColumnComponent, Column } from 'app/modules/ix-table/interfaces/column-component.class';
 
 @Component({
   selector: 'ix-cell-size',

diff --git a/...e/components/ix-table-body/cells/ix-cell-state-button/ix-cell-state-button.component.html b/...e/components/ix-table-body/cells/ix-cell-state-button/ix-cell-state-button.component.html
@@ -1,15 +1,15 @@
-@if (state) {
+@if (state()) {
   <button
     mat-stroked-button
     class="state-button"
     matTooltipPosition="above"
-    [ixTest]="[title, rowTestId(row), 'row-state']"
+    [ixTest]="[title, uniqueRowTag(row()), 'row-state']"
     [ngClass]="getButtonClass()"
     [matTooltip]="tooltip"
-    [attr.aria-label]="getAriaLabel(row)"
+    [attr.aria-label]="getAriaLabel(row())"
     (click)="$event.stopPropagation(); onButtonClick()"
   >
-    {{ state }}
+    {{ state() }}
     @if (warnings?.length > 0) {
       <div class="label-warning-icon">
         <ix-icon name="mdi-alert"></ix-icon>

diff --git a/...omponents/ix-table-body/cells/ix-cell-state-button/ix-cell-state-button.component.spec.ts b/...omponents/ix-table-body/cells/ix-cell-state-button/ix-cell-state-button.component.spec.ts
@@ -4,12 +4,16 @@ import { MatButtonHarness } from '@angular/material/button/testing';
 import { MatDialog } from '@angular/material/dialog';
 import { Spectator } from '@ngneat/spectator';
 import { createComponentFactory, mockProvider } from '@ngneat/spectator/jest';
+import { provideMockStore } from '@ngrx/store/testing';
+import { of } from 'rxjs';
 import { JobState } from 'app/enums/job-state.enum';
 import { Job } from 'app/interfaces/job.interface';
 import { ShowLogsDialogComponent } from 'app/modules/dialog/components/show-logs-dialog/show-logs-dialog.component';
+import { DialogService } from 'app/modules/dialog/dialog.service';
 import { IxIconHarness } from 'app/modules/ix-icon/ix-icon.harness';
 import { IxCellStateButtonComponent } from 'app/modules/ix-table/components/ix-table-body/cells/ix-cell-state-button/ix-cell-state-button.component';
 import { IxTableModule } from 'app/modules/ix-table/ix-table.module';
+import { selectJobs } from 'app/modules/jobs/store/job.selectors';
 
 interface TestTableData {
   state: JobState;
@@ -26,9 +30,28 @@ describe('IxCellStateButtonComponent', () => {
     imports: [IxTableModule],
     detectChanges: false,
     providers: [
+      provideMockStore({
+        selectors: [
+          {
+            selector: selectJobs,
+            value: [{
+              id: 123456,
+              logs_excerpt: 'completed',
+              state: JobState.Success,
+            } as Job],
+          },
+        ],
+      }),
       mockProvider(MatDialog, {
         open: jest.fn(),
       }),
+      mockProvider(DialogService, {
+        jobDialog: jest.fn(() => {
+          return {
+            afterClosed: jest.fn(() => of()),
+          };
+        }),
+      }),
     ],
   });
 
@@ -37,12 +60,18 @@ describe('IxCellStateButtonComponent', () => {
     spectator.component.propertyName = 'state';
     spectator.component.setRow({
       state: JobState.Success,
-      job: { id: 123456, logs_excerpt: 'completed' },
+      job: { id: 123456, logs_excerpt: 'completed', state: JobState.Success },
       warnings: [{}, {}],
     } as TestTableData);
     spectator.component.getJob = (row) => row.job;
-    spectator.component.rowTestId = () => '';
+    spectator.component.uniqueRowTag = () => '';
     spectator.component.ariaLabels = () => ['Label 1', 'Label 2'];
+    spectator.component.job.set({
+      id: 123456,
+      logs_excerpt: 'completed',
+      state: JobState.Success,
+    } as Job);
+    spectator.component.ngOnInit();
     spectator.detectChanges();
 
     loader = TestbedHarnessEnvironment.loader(spectator.fixture);
@@ -51,6 +80,7 @@ describe('IxCellStateButtonComponent', () => {
   it('shows status text', async () => {
     const button = await loader.getHarness(MatButtonHarness);
     expect(await button.getText()).toBe(JobState.Success);
+    expect(await (await button.host()).hasClass('fn-theme-green')).toBeTruthy();
   });
 
   it('sets class', async () => {
@@ -89,7 +119,7 @@ describe('IxCellStateButtonComponent', () => {
   });
 
   it('gets aria label correctly', () => {
-    const ariaLabel = spectator.component.getAriaLabel(spectator.component.getRow());
-    expect(ariaLabel).toBe('Label 1 Label 2');
+    const button = spectator.query('button');
+    expect(button.getAttribute('aria-label')).toBe('Label 1 Label 2');
   });
 });