]> git.proxmox.com Git - ceph.git/blobdiff - ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
import 15.2.4
[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / shared / datatable / table / table.component.spec.ts
index 42c5817a93708cc457c06dc80c4d52bf72ba9f65..a3ac199a4ba16f23502fb2dce0de90785b9feeb1 100644 (file)
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@@ -36,6 +37,7 @@ describe('TableComponent', () => {
   configureTestBed({
     declarations: [TableComponent],
     imports: [
+      BrowserAnimationsModule,
       NgxDatatableModule,
       FormsModule,
       ComponentsModule,
@@ -422,6 +424,13 @@ describe('TableComponent', () => {
       component.onClearSearch();
       expect(component.rows.length).toBe(10);
     });
+
+    it('should work with undefined data', () => {
+      component.data = undefined;
+      component.search = '3';
+      component.updateFilter();
+      expect(component.rows).toBeUndefined();
+    });
   });
 
   describe('after ngInit', () => {
@@ -613,4 +622,72 @@ describe('TableComponent', () => {
       expect(component.useCustomClass('https://secure.it')).toBe('btn secure');
     });
   });
+
+  describe('test expand and collapse feature', () => {
+    beforeEach(() => {
+      spyOn(component.setExpandedRow, 'emit');
+      component.table = {
+        rowDetail: { collapseAllRows: jest.fn(), toggleExpandRow: jest.fn() }
+      } as any;
+
+      // Setup table
+      component.identifier = 'a';
+      component.data = createFakeData(10);
+
+      // Select item
+      component.expanded = _.clone(component.data[1]);
+    });
+
+    describe('update expanded on refresh', () => {
+      const updateExpendedOnState = (state: 'always' | 'never' | 'onChange') => {
+        component.updateExpandedOnRefresh = state;
+        component.updateExpanded();
+      };
+
+      beforeEach(() => {
+        // Mock change
+        component.data[1].b = 'test';
+      });
+
+      it('refreshes "always"', () => {
+        updateExpendedOnState('always');
+        expect(component.expanded.b).toBe('test');
+        expect(component.setExpandedRow.emit).toHaveBeenCalled();
+      });
+
+      it('refreshes "onChange"', () => {
+        updateExpendedOnState('onChange');
+        expect(component.expanded.b).toBe('test');
+        expect(component.setExpandedRow.emit).toHaveBeenCalled();
+      });
+
+      it('does not refresh "onChange" if data is equal', () => {
+        component.data[1].b = 10; // Reverts change
+        updateExpendedOnState('onChange');
+        expect(component.expanded.b).toBe(10);
+        expect(component.setExpandedRow.emit).not.toHaveBeenCalled();
+      });
+
+      it('"never" refreshes', () => {
+        updateExpendedOnState('never');
+        expect(component.expanded.b).toBe(10);
+        expect(component.setExpandedRow.emit).not.toHaveBeenCalled();
+      });
+    });
+
+    it('should open the table details and close other expanded rows', () => {
+      component.toggleExpandRow(component.expanded, false);
+      expect(component.expanded).toEqual({ a: 1, b: 10, c: true });
+      expect(component.table.rowDetail.collapseAllRows).toHaveBeenCalled();
+      expect(component.setExpandedRow.emit).toHaveBeenCalledWith(component.expanded);
+      expect(component.table.rowDetail.toggleExpandRow).toHaveBeenCalled();
+    });
+
+    it('should close the current table details expansion', () => {
+      component.toggleExpandRow(component.expanded, true);
+      expect(component.expanded).toBeUndefined();
+      expect(component.setExpandedRow.emit).toHaveBeenCalledWith(undefined);
+      expect(component.table.rowDetail.toggleExpandRow).toHaveBeenCalled();
+    });
+  });
 });