update source to Ceph Pacific 16.2.2

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / shared / datatable / table / table.component.spec.ts

diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts b/ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
index c2d2ab61866be72840678ae669c49ba60baf36ca..a2a329ab645646a4c7a32a5dfbcab66a1a1bb97a 100644 (file)
--- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
+++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
@@ -1,17 +1,21 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
-import * as _ from 'lodash';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-
-import { configureTestBed } from '../../../../testing/unit-test-helper';
-import { ComponentsModule } from '../../components/components.module';
-import { CdTableColumnFilter } from '../../models/cd-table-column-filter';
-import { CdTableFetchDataContext } from '../../models/cd-table-fetch-data-context';
-import { PipesModule } from '../../pipes/pipes.module';
+import _ from 'lodash';
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
+
+import { ComponentsModule } from '~/app/shared/components/components.module';
+import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
+import { CdTableColumnFilter } from '~/app/shared/models/cd-table-column-filter';
+import { CdTableFetchDataContext } from '~/app/shared/models/cd-table-fetch-data-context';
+import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
+import { PipesModule } from '~/app/shared/pipes/pipes.module';
+import { configureTestBed } from '~/testing/unit-test-helper';
 import { TableComponent } from './table.component';
 
 describe('TableComponent', () => {
@@ -39,11 +43,13 @@ describe('TableComponent', () => {
     imports: [
       BrowserAnimationsModule,
       NgxDatatableModule,
+      NgxPipeFunctionModule,
       FormsModule,
       ComponentsModule,
       RouterTestingModule,
-      BsDropdownModule.forRoot(),
-      PipesModule
+      NgbDropdownModule,
+      PipesModule,
+      NgbTooltipModule
     ]
   });
 
@@ -52,7 +58,7 @@ describe('TableComponent', () => {
     component = fixture.componentInstance;
 
     component.data = createFakeData(10);
-    component.columns = [
+    component.localColumns = component.columns = [
       { prop: 'a', name: 'Index', filterable: true },
       { prop: 'b', name: 'Index times ten' },
       { prop: 'c', name: 'Odd?', filterable: true }
@@ -106,6 +112,16 @@ describe('TableComponent', () => {
     component.ngOnInit();
   });
 
+  it('should call updateSelection on init', () => {
+    component.updateSelection.subscribe((selection: CdTableSelection) => {
+      expect(selection.hasSelection).toBeFalsy();
+      expect(selection.hasSingleSelection).toBeFalsy();
+      expect(selection.hasMultiSelection).toBeFalsy();
+      expect(selection.selected.length).toBe(0);
+    });
+    component.ngOnInit();
+  });
+
   describe('test column filtering', () => {
     let filterIndex: CdTableColumnFilter;
     let filterOdd: CdTableColumnFilter;
@@ -295,7 +311,7 @@ describe('TableComponent', () => {
 
       beforeEach(() => {
         component.data = [testObject];
-        component.columns = [{ prop: 'obj', name: 'Object' }];
+        component.localColumns = [{ prop: 'obj', name: 'Object' }];
       });
 
       it('should not search through objects as default case', () => {
@@ -366,7 +382,7 @@ describe('TableComponent', () => {
     });
 
     it('should search through arrays', () => {
-      component.columns = [
+      component.localColumns = [
         { prop: 'a', name: 'Index' },
         { prop: 'b', name: 'ArrayColumn' }
       ];
@@ -436,10 +452,8 @@ describe('TableComponent', () => {
   describe('after ngInit', () => {
     const toggleColumn = (prop: string, checked: boolean) => {
       component.toggleColumn({
-        target: {
-          name: prop,
-          checked: checked
-        }
+        prop: prop,
+        isHidden: checked
       });
     };
 
@@ -454,15 +468,15 @@ describe('TableComponent', () => {
     });
 
     it('should have updated the column definitions', () => {
-      expect(component.columns[0].flexGrow).toBe(1);
-      expect(component.columns[1].flexGrow).toBe(2);
-      expect(component.columns[2].flexGrow).toBe(2);
-      expect(component.columns[2].resizeable).toBe(false);
+      expect(component.localColumns[0].flexGrow).toBe(1);
+      expect(component.localColumns[1].flexGrow).toBe(2);
+      expect(component.localColumns[2].flexGrow).toBe(2);
+      expect(component.localColumns[2].resizeable).toBe(false);
     });
 
     it('should have table columns', () => {
       expect(component.tableColumns.length).toBe(3);
-      expect(component.tableColumns).toEqual(component.columns);
+      expect(component.tableColumns).toEqual(component.localColumns);
     });
 
     it('should have a unique identifier which it searches for', () => {
@@ -504,6 +518,56 @@ describe('TableComponent', () => {
     });
   });
 
+  describe('test cell transformations', () => {
+    interface ExecutingTemplateConfig {
+      valueClass?: string;
+      executingClass?: string;
+    }
+
+    const testExecutingTemplate = (templateConfig?: ExecutingTemplateConfig) => {
+      const state = 'updating';
+      const value = component.data[0].a;
+
+      component.autoReload = -1;
+      component.columns[0].cellTransformation = CellTemplate.executing;
+      if (templateConfig) {
+        component.columns[0].customTemplateConfig = templateConfig;
+      }
+      component.data[0].cdExecuting = state;
+      fixture.detectChanges();
+
+      const elements = fixture.debugElement
+        .query(By.css('datatable-body-row datatable-body-cell'))
+        .queryAll(By.css('span'));
+      expect(elements.length).toBe(2);
+
+      // Value
+      const valueElement = elements[0];
+      if (templateConfig?.valueClass) {
+        templateConfig.valueClass.split(' ').forEach((clz) => {
+          expect(valueElement.classes).toHaveProperty(clz);
+        });
+      }
+      expect(valueElement.nativeElement.textContent.trim()).toBe(`${value}`);
+      // Executing state
+      const executingElement = elements[1];
+      if (templateConfig?.executingClass) {
+        templateConfig.executingClass.split(' ').forEach((clz) => {
+          expect(executingElement.classes).toHaveProperty(clz);
+        });
+      }
+      expect(executingElement.nativeElement.textContent.trim()).toBe(`(${state})`);
+    };
+
+    it.only('should display executing template', () => {
+      testExecutingTemplate();
+    });
+
+    it.only('should display executing template with custom classes', () => {
+      testExecutingTemplate({ valueClass: 'a b', executingClass: 'c d' });
+    });
+  });
+
   describe('reload data', () => {
     beforeEach(() => {
       component.ngOnInit();
@@ -522,7 +586,7 @@ describe('TableComponent', () => {
       component.data = createFakeData(5);
       component.fetchData.subscribe((context: any) => {
         context.error();
-        expect(component.loadingError).toBeTruthy();
+        expect(component.status.type).toBe('danger');
         expect(component.data.length).toBe(0);
         expect(component.loadingIndicator).toBeFalsy();
         expect(component['updating']).toBeFalsy();
@@ -536,7 +600,7 @@ describe('TableComponent', () => {
         context.errorConfig.resetData = false;
         context.errorConfig.displayError = false;
         context.error();
-        expect(component.loadingError).toBeFalsy();
+        expect(component.status.type).toBe('danger');
         expect(component.data.length).toBe(10);
         expect(component.loadingIndicator).toBeFalsy();
         expect(component['updating']).toBeFalsy();