@testgorilla/tgo-ui 2.10.1 → 2.10.2

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

@@ -1,201 +0,0 @@
-@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

@@ -1,187 +0,0 @@
-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);
-  });
-});