@testgorilla/tgo-ui 2.9.0 → 2.10.1

package/projects/tgo-canopy-ui/components/table/table.component.scss

@@ -0,0 +1,201 @@
+@use "../../theme/variables" as *;
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
+
+.flex-left {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.table-container {
+  --mat-table-background-color: #{$tgo-white};
+  overflow: hidden;
+  border: 1px $tgo-medium solid;
+  border-radius: 8px;
+
+  ::ng-deep.mat-sort-header-arrow {
+    color: $tgo-black;
+  }
+
+  .table-header {
+    min-height: 56px;
+    padding: 8px 8px;
+    background: $tgo-white;
+    line-height: 24px;
+    font-size: 16px;
+    font-weight: bold;
+    text-transform: uppercase;
+    @extend .flex-left;
+  }
+
+  .table-wrapper {
+    max-width: 100%;
+    overflow: auto;
+
+    table.main-table {
+      width: 100%;
+      box-shadow: unset;
+      border-top: 1px $tgo-medium solid;
+
+      ::ng-deep.mat-sort-header-arrow {
+        margin-left: 8px;
+      }
+
+      .mdc-data-table__cell,
+      .mdc-data-table__header-cell {
+        padding: 8px 24px;
+      }
+
+      th {
+        font-size: 14px;
+        line-height: 16px;
+        text-transform: uppercase;
+      }
+
+      td {
+        font-size: 14px;
+        line-height: 20px;
+
+        .row-value {
+          display: flex;
+          gap: 8px;
+
+        }
+
+        ::ng-deep .table-skeleton-loader ngx-skeleton-loader {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          line-height: unset;
+
+          .skeleton-loader {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      ::ng-deep thead {
+        background: $background-color !important;
+      }
+
+       .mat-mdc-table-sticky-border-elem-left {
+        box-shadow: 24px 8px 24px 0 $box-shadow;
+      }
+
+      .mat-mdc-table-sticky-border-elem-right {
+        box-shadow: 0 8px 24px 4px $box-shadow;
+      }
+    }
+  }
+
+  .column-title {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-weight: 700;
+  }
+
+
+  &.without-title {
+    table {
+      border: unset !important;
+    }
+  }
+
+  &.disable-border-radius {
+    border-radius: 0!important;
+  }
+
+  ::ng-deep .mat-mdc-paginator-container {
+    padding: 0 24px;
+  }
+
+  &[theme="dark"], &[theme="light"] {
+
+    tr.selected {
+      background: $grayscale-10!important;
+    }
+
+    border-radius: 10px;
+    .table-header {
+      padding: 8px 24px;
+      text-transform: none;
+    }
+    .table-wrapper table {
+      th {
+        text-transform: none;
+      }
+
+      .mat-mdc-table-sticky-border-elem-right {
+        box-shadow: 0 8px 24px 4px $box-shadow-rebrand!important;
+      }
+
+      .mat-mdc-table-sticky-border-elem-left {
+        box-shadow: 24px 8px 24px 0 $box-shadow-rebrand!important;
+      }
+
+      ::ng-deep {
+        thead {
+          background-color: $tgo-white !important;
+        }
+        :not(thead) tr {
+          &:hover {
+            background-color: $brand-10;
+          }
+        }
+      }
+    }
+  }
+  ::ng-deep {
+    tr.detail-row {
+      height: 0;
+
+      td {
+        border: unset!important;
+      }
+    }
+
+
+    .mat-column-expandedDetail {
+      padding: 0!important;
+    }
+
+    .element-detail {
+      overflow: hidden!important;
+      display: flex!important;
+
+      table {
+        background-color: $tgo-light;
+
+        .mat-mdc-header-row {
+          visibility: collapse;
+        }
+
+        .mat-mdc-cell {
+          border-width: 0px;
+        }
+      }
+    }
+  }
+}
+
+ui-paginator {
+  width: 100%;
+  display: flex;
+  border-top: 1px solid $tgo-medium;
+  justify-content: flex-end;
+}
+
+::ng-deep .mat-mdc-tooltip {
+  background-color: $tgo-petrol-60w;
+  font-family: "Open Sans", serif;
+  font-weight: normal;
+  font-size: 12px;
+  border-radius: 4px;
+  overflow: visible;
+  max-width: 248px;
+  padding: 6px 2px;
+  --mdc-plain-tooltip-container-color: none;
+  --mdc-plain-tooltip-supporting-text-color: $tgo-black;
+}

package/projects/tgo-canopy-ui/components/table/table.component.spec.ts

@@ -0,0 +1,187 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableComponent } from './table.component';
+import { TableConfig } from './table.model';
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SimpleChanges } from "@angular/core";
+import { SkeletonComponent } from '../skeleton/skeleton.component';
+import { PageEvent } from "@angular/material/paginator";
+import { Sort } from "@angular/material/sort";
+
+const mockConfig: TableConfig<any> = {
+  columns: [
+    { key: 'column1', title: 'title1' },
+    { key: 'column2', title: 'title2' },
+  ]
+};
+
+describe('TableComponent', () => {
+  let component: TableComponent<any, any>;
+  let fixture: ComponentFixture<TableComponent<any, any>>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TableComponent],
+      imports: [
+        MatTooltipModule,
+        SkeletonComponent
+      ],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(TableComponent);
+    component = fixture.componentInstance;
+    component.config = mockConfig;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('config', () => {
+    it('should set tableConfig, columnsEllipseState, and displayedColumns correctly', () => {
+      //@ts-ignore
+      expect(component.tableConfig).toEqual(mockConfig);
+      //@ts-ignore
+      expect(component.columnsTooltipState.length).toBe(2);
+      //@ts-ignore
+      expect(component.displayedColumns.length).toBe(2);
+    });
+  });
+
+  describe('onChangeColumnSize', () => {
+    it('should update columnsEllipseState correctly', () => {
+      //@ts-ignore
+      component.columnsTooltipState = [
+        { index: 0, showTooltip: false },
+        { index: 1, showTooltip: false },
+      ];
+      //@ts-ignore
+      component.onChangeColumnSize(0, true);
+      //@ts-ignore
+      expect(component.columnsTooltipState[0].showTooltip).toBe(true);
+      //@ts-ignore
+      expect(component.columnsTooltipState[1].showTooltip).toBe(false);
+    });
+  });
+
+  it('should have default loading state as false', () => {
+    expect(component.loading).toBe(false); // Default loading state
+  });
+
+  it('should emit "paginatorChange" when pagination changes', () => {
+    const pageEvent: PageEvent = { pageIndex: 1, pageSize: 10, length: 100 };
+    jest.spyOn(component.paginatorChange, 'emit'); // Spy on the paginatorChange event
+
+    //@ts-ignore
+    component.onPaginatorChange(pageEvent); // Trigger paginator change
+
+    expect(component.paginatorChange.emit).toHaveBeenCalledWith(pageEvent); // Should emit the page event
+  });
+
+  it('should emit "sortChange" when sorting changes', () => {
+    const sortState: Sort = { active: 'name', direction: 'asc' };
+    jest.spyOn(component.sortChange, 'emit'); // Spy on the sortChange event
+
+    //@ts-ignore
+    component.onSortChange(sortState); // Trigger sort change
+
+    expect(component.sortChange.emit).toHaveBeenCalledWith(sortState); // Should emit the sort state
+  });
+
+  it('should set default companyColor based on theme in ngOnChanges', () => {
+    component.applicationTheme = 'classic'; // Set theme to classic
+
+      //@ts-ignore
+    const changes = { tableConfig: { currentValue: { sort: {} } } } as SimpleChanges;
+    component.ngOnChanges(changes); // Trigger OnChanges
+
+    //@ts-ignore
+    expect(component.skeletonStyleConfig.background).toBe('#F4F4F4'); // Default skeleton style for classic theme
+  });
+
+  it('should use custom pagination config if provided', () => {
+    const customPagination = {
+      currentPage: 2,
+      itemsPerPage: 25,
+      totalItems: 200,
+    };
+    const config = { pagination: customPagination, columns: [] };
+
+    //@ts-ignore
+    component.config = config; // Set the table configuration
+
+    fixture.detectChanges(); // Trigger change detection
+
+    //@ts-ignore
+    expect(component.tableConfig.pagination.currentPage).toBe(2); // Should use custom config
+    //@ts-ignore
+    expect(component.tableConfig.pagination.itemsPerPage).toBe(25); // Custom items per page
+  });
+
+  it('should default pagination config if not provided', () => {
+    const config = { columns: [] }; // No pagination specified
+
+    //@ts-ignore
+    component.config = config; // Set the table configuration
+
+    fixture.detectChanges(); // Trigger change detection
+
+    //@ts-ignore
+    expect(component.tableConfig.pagination.currentPage).toBe(1); // Default current page
+    //@ts-ignore
+    expect(component.tableConfig.pagination.itemsPerPage).toBe(10); // Default items per page
+    //@ts-ignore
+    expect(component.tableConfig.pagination.totalItems).toBe(20); // Default total items
+  });
+
+  it('should update tooltip state for column when column size changes', () => {
+    //@ts-ignore
+    component.columnsTooltipState = [{ index: 0, showTooltip: false }];
+
+      //@ts-ignore
+    component.onChangeColumnSize(0, true); // Change the tooltip state for the first column
+
+    //@ts-ignore
+    expect(component.columnsTooltipState[0].showTooltip).toBe(true); // Tooltip should be set to true
+  });
+
+  it('should emit row click', () => {
+    const rowClickEventSpy = jest.spyOn(component.onRowClickEvent, 'emit');
+    //@ts-expect-error
+    const rowClickFnSpy = jest.spyOn(component, 'onRowClick');
+    //@ts-expect-error
+    component.onRowClick('test');
+    expect(rowClickFnSpy).toHaveBeenCalledTimes(1);
+    expect(rowClickFnSpy).toHaveBeenCalledWith('test');
+    expect(rowClickEventSpy).toHaveBeenCalledTimes(1);
+    expect(rowClickEventSpy).toHaveBeenCalledWith('test');
+  });
+
+  it('should emit detail row click', () => {
+    const detailRowClickEventSpy = jest.spyOn(component.onDetailRowClickEvent, 'emit');
+    //@ts-expect-error
+    const detailRowClickFnSpy = jest.spyOn(component, 'onDetailRowClick');
+    //@ts-expect-error
+    component.onDetailRowClick('test');
+    expect(detailRowClickFnSpy).toHaveBeenCalledTimes(1);
+    expect(detailRowClickFnSpy).toHaveBeenCalledWith('test');
+    expect(detailRowClickEventSpy).toHaveBeenCalledTimes(1);
+    expect(detailRowClickEventSpy).toHaveBeenCalledWith('test');
+  });
+
+  it('should toggle row', () => {
+    const element = 'testElement';
+    component.tableDetails = true;
+    //@ts-expect-error
+    component.elementDetail = null;
+    component.tableDetailColumns = {setDetailRowData: jest.fn()} as any;
+    fixture.detectChanges();
+    const setDetailRowDataSpy = jest.spyOn(component.tableDetailColumns, 'setDetailRowData');
+    //@ts-expect-error
+    component.toggleRow(element);
+    //@ts-expect-error
+    expect(component.elementDetail).toEqual(element);
+    expect(setDetailRowDataSpy).toHaveBeenCalledTimes(1);
+  });
+});